JavaScript Fundamentals

4 minute read

Published:

This lesson covers JavaScript Fundamentals.

JavaScript

  • HTML and CSS are not Turing Complete
  • no variables, control elements, other features needed to run algorithm
  • JavaScript is programming language used by browsers

  • High-level general purpose programming language
  • Imperative Language * algorithm is written as lines of code and computer interpret the instructions to execute * Browsers can download the script and run line-by-line
  • Interpreted Language * JavaScript interpreter translates high-level language into machine language on the fly at run time * Can be run via Browser or using Node.js

Writing Script

/* log method of global console object */

console.log("Hello world!");
console.log("I'm doing JavaScript!");
  • Strict Mode

    • is more strict about syntax

    • without strict mode we may use a variable without first defining but not in strict mode.

    • It can catch silly errors

    • /* Declaration to Interpreter */
          
      'use strict';
      

Program

/* js/script.js */
console.log("Hello JS");

// Variables - dynamically typed
let message = "Hello JS";
console.log(typeof message); // string

message = 5;
console.log(typeof message); // number

message = 5.2;
console.log(typeof message); // number

let text
console.log(typeof text); // undefined

const URL = 'https://google.com';
console.log(typeof URL);

//URL = 'https://youtube.com'; // not allowed

// Numbers
let x = 5
let y = 2
console.log(x/y); // Floating Point Division
console.log(Math.floor(x/y)); // Integer Point
console.log(Math.sqrt(x));

// String
let name = 'javascript';
name = "This is " + name; // concatenate
console.log(name);
console.log(name.toUpperCase());
console.log(name.toLowerCase());
console.log(name[0]);

// Booleans
// && || !

// Arrays - ordered, 1-D

let empty = [];
console.log(empty);

let courses = ['BSc', 'MSc', 'PhD']
console.log(courses);

courses = ['BSc', 'MSc', 'PhD', 1, 2, true]
console.log(courses); // different types

courses = [['BSc', 'MSc', 'PhD'], [1, 2], true]
console.log(courses);

console.log(courses[0]);
console.log(courses[0][0]);

courses[0] = 'BEngg';
console.log(courses);

courses[3] = 10
console.log(courses);

courses[7] = "Hello"
console.log(courses); // empty elements added

courses.push('BSc');
console.log(courses);

courses = ['BSc', 'MSc', 'PhD']
let str = courses.join('-')
console.log(str);

console.log(courses.indexOf('PhD')); // first only
console.log(courses.indexOf('BEngg')); // -1

// OBJECTS
// Unordered sequence of key-value pairs
// key - is a string and is called property
// value - any data type
courses = {'name1':'BSc', 'name2':'MSc', 'name3':'PhD'}
let marks = {'name1': 80, 'name2': 60, 'name3': 72};
let ages = {'name1': 20, 'name2': 22, 'name3': 25};
console.log('Courses: ', courses);

let student = {
  'firsname': 'name1',
  'lastname': 'last1',
  'age': 20,
  'subjects': ['sub1', 'sub2', 'sub3'],
  'marks':{
    'sub1': 80,
    'sub2': 70,
    'sub3': 90
  }
}
console.log(student['firsname']);
console.log(student['marks']);
console.log(student['marks']['sub2']);

student.subjects.push('sub4')
console.log(student.subjects);

student.marks.sub4 = 85
console.log(student.marks);

// keys
console.log(Object.keys(student));
console.log(Object.keys(student.subjects));
console.log(Object.keys(student.marks));

// Array of Objects
let student1 = {
  'firsname': 'name1',
  'lastname': 'last1',
  'age': 20,
  'subjects': ['sub1', 'sub2', 'sub3'],
  'marks':{
    'sub1': 80,
    'sub2': 70,
    'sub3': 90
  }
}

let student2 = {
  'firsname': 'name2',
  'lastname': 'last2',
  'age': 22,
  'subjects': ['sub1', 'sub2', 'sub3'],
  'marks':{
    'sub1': 70,
    'sub2': 60,
    'sub3': 80
  }
}

let students = {
  'reg1': student1,
  'reg2': student2
}

console.log(students.reg1.marks.sub3);
console.log(students.reg2.marks.sub3);

// Type Coercion
let x1 = '40';
console.log(x1 + 2); // 2 is coerced to String

console.log(x1 - 2); // cannot subtract strings so '40' is coerced to Number


// comparison
let num1 = 10
let str1 = '10'

console.log(num1 == str1); //true, values are coerced
console.log(num1 === str1); // false, different data types

let str2 = '';
let str3 = 'Hello'
console.log(str2 == 0); // true
console.log(str3 == 0); // false

// Control Structure
x = 5;
if (x >= 5){
  console.log('Greater than equal to 5');
}else{
  console.log('Less than to 5');
}

if (students.reg1.marks.sub3 > 50){
  console.log('Passed Exam of Sub3 with marks ' + students.reg1.marks.sub3);
}

// Single Expression
x = 4;
let num_type;
if (x % 2 == 0){
  num_type = 'even';
}else {
  num_type = 'odd';
}
console.log(x + ' is ' + num_type);

num_type = (x%2==0)?'even':'odd'
console.log(x + ' is ' + num_type);

// for loop
x = ['name1', 5, 7, true, 'name2']
for(let i=0; i < x.length; i++){
  console.log(x[i]);
}

// Functions
function square(num){
  return num * num;
}

console.log('square of 5 is ' + square(5));

function sayHello(text1, text2){
  return 'Hello ' + text1 + ' ' + text2;
}

console.log(sayHello('first', 'last'));
// Hello first last