JavaScript Documentation

1.1 What is JavaScript

- JavaScript (JS) is a high-level, interpreted, multi-paradigm language.
- Originally created to add interactivity to web pages (pop-ups, form validation, animations)
- Now it runs everywhere: Browsers, Servers, Apps etc.
- Created by Brendan Eich in 1995, earlier known as Mocha, then LiveScript, then JavaScript.

Famous Websites that run on JavaScript: Google, Facebook, Youtube, Netflix.

1.2 How Javascript runs

Suppose when we open a Web Page
- The browser downloads the HTML, CSS and JS files.
- It parses (reads) the HTML.
- When it finds a <script> tag and sends the JS code the JavaScript Engine.
- The engine compiles and runs the JavaScript code.

In Chrome the JavaScript Engine is called V8.

Example Code as in a HTML file.

samplePage.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Basics</title>
</head>
<body>
  <h1>JavaScript Test</h1>
  <script>
    console.log("JavaScript inside HTML!");
    alert("Welcome to JavaScript!");
  </script>
</body>
</html>

On loading the page you will find an alert saying "Welcome to JavaScript!".
On going to the Console Tab from Inspect you will find the message "JavaScript inside HTML!"

You can also directly write this code in Console.

console.js

console.log("Hello from the Console")

1.3 Basic JavaScript Syntax

Comment Lines:

comments.js

// This is a single-line comment
/* This is a
   multi-line comment */

Logging Output:

output.js

console.log("This goes to the browser console")

Alert Popup:

alert.js

alert("This is an alert box!")

Variables:

variables.js

let name = "Oliver"
const age = 17

1.4 JavaScript variables

A variable is a container that stores data which you can use and manipulate later.
It is to be understood as a labelled box.

Example of Variable

variable.js

let message = "Hello, World!"

Here Hello, World! is stored in a box labelled message.

Declaration and Scope of Variables

var
- Reassign: Yes ✅
- Scope: Function-scoped
- Hoisting: Yes ✅
- Best Use: Avoid (legacy code) ❌

let
- Reassign: Yes ✅
- Scope: Block-scoped
- Hoisting: No ❌
- Best Use: Use for changeable variables ✅

const
- Reassign: No ❌
- Scope: Block-scoped
- Hoisting: No ❌
- Best Use: Use when value should not change ✅

We generally use let and const in modern JavaScript.

Usage of let

letKeyword.js

let score = 10
score = 20  // allowed

Usage of const

constKeyword.js

const pi = 3.14
pi = 3.14159  // error

1.5 Data Types in JavaScript

Primitive Data Types - These hold only single values

- String - ( "Hello" , 'JavaScript' )
- Number - ( 10 , 3.14 , -5 )
- Boolean - ( true , false )
- Undefined - ( A declared variable with no value )
- Null - ( An intentional empty value )
- BigInt - ( Very large number )
- Symbol - ( Unique and Immutable value )

Example of different Data Types

dataTypes.js

let str = "Oliver"      // String
let num = 42            // Number
let isStudent = true    // Boolean
let x                   // Undefined
let y = null            // Null

Non-Primitive (Reference) Data Types - These hold primitive values

- Object
- Array
- Function

To be discussed later

The typeof Operator - to check the type of any variable

Usage of typeof Operator:

typeof.js

console.log(typeof "Oliver")    // string
console.log(typeof 10)          // number
console.log(typeof true)        // boolean
console.log(typeof undefined)   // undefined
console.log(typeof null)        // object (weird quirk!)

Caution: null is intentional, undefined is not

1.6 Operators and Expressions in JavaScript

Expression is any valid unit of code that evaluates to a value

3 + 5 = 8
"Hello" + "World" = "HelloWorld"
true && false = false

We write expressions using operators and values

Arithmatic Operators - Used for mathematical operations

Operator	Description	Example	Result
+	Addition	10 + 5	15
-	Subtraction	10 - 5	5
*	Multiplication	10 * 5	50
/	Division	10 / 5	2
%	Modulus (Remainder)	10 % 3	1
**	Exponentiation	2 ** 3	8

Arithmatic Operators in code

arithmatic.js

let a = 10
let b = 3
console.log("Addition:", a + b)
console.log("Modulo:", a % b)
console.log("Power:", a ** b)

Assignment Operators - Used to assign values to variables

Operator	Description	Example	Result
=	Assignment	x = 10	x = 10
+=	Add and Assign	x += 2	x = x + 2
-=	Subtract and Assign	x -= 3	x = x - 3
*=	Multiply and Assign	x *= 2	x = x * 2
/=	Divide and Assign	x /= 2	x = x / 2

Assignment Operators in code

assignment.js

let score = 20
score += 5
console.log("Score after bonus:", score)

Comparision Operators - Used to compare values then return true or false

Operator	Description	Example	Result
==	Equal (lose)	5 == '5'	true
===	Equal (strict)	5 === '5'	false
!=	Not Equal (loose)	5 != '5'	false
!==	Not Equal (strict)	5 !== '5'	true
>	Greater than	5 > 3	true
<	Less than	3 < 5	true
>=	Greater than or equal to	5 >= 5	true
<=	Less than or equal to	4 <= 5	true

Comparision Operators in code

comparision.js

console.log(10 > 5)       // true
console.log(10 === "10")  // false
console.log(10 == "10")   // true

Logical Operators - Used to combine conditions

Operator	Description	Example	Result
&&	AND	true && false	false
\|\|	OR	true \|\| false	true
!	NOT	!true	false

Logical Operators in code

logical.js

let isLoggedIn = true
let hasPremium = false
console.log(isLoggedIn && hasPremium)  // false
console.log(isLoggedIn || hasPremium)  // true
console.log(!isLoggedIn)               // false

1.7 Conditionals in JavaScript

JavaScript lets our code respond differently based on user inputs, values or situations

Suppose we get to vote at 18
So if our age is 18 or above we are eligible else we are not

Basic Syntax system of Conditionals

conditionals.js

if (condition) {
  // runs if condition is true
} else if (anotherCondition) {
  // runs if anotherCondition is true
} else {
  // runs if nothing else is true
}

For example we want to build an Age Checker

age.js

let age = 20
if (age < 13) {
  console.log("Child")
} else if (age < 18) {
  console.log("Teenager")
} else {
  console.log("Adult")
}

Conditionals Statements can also be combined with Logical Operators

For example we want to build a Grade Assigner from obtained marks

marks.js

let marks = 75
if (marks >= 90 && marks <= 100) {
  console.log("Grade: A+")
} else if (marks >= 75 && marks < 90) {
  console.log("Grade: A")
} else if (marks >= 60 && marks < 75) {
  console.log("Grade: B")
} else {
  console.log("Grade: C or below")
}

Switch Statement - It is used when we have many exact matches to check

For example we want to build a day in the week finder

dayOfWeek.js

let day = 3
switch (day) {
  case 1: console.log("Monday") break
  case 2: console.log("Tuesday") break
  case 3: console.log("Wednesday") break
  case 4: console.log("Thursday") break
  case 5: console.log("Friday") break
  case 6: console.log("Saturday") break
  case 7: console.log("Sunday") break
  default: console.log("Invalid day")
}