JS
JS
● What is JavaScript
● History of JavaScript
● Client-Side & Server-side JavaScript
● First JavaScript Code
● Dialogue boxes (alert, Confirmation Dialog Box, Prompt Dialog Box)
● JS predefined words
● Data types
● Variables and constants
● Scope and Closures
● Type Coercion and Type Conversion
Chapter 4: Functions
● Functions
● Function Declaration vs. Function Expression (Parameters and Arguments)
● Return Values and Scope
● Nested Functions
● Higher-Order Functions and Callbacks
● Arrow Functions
● concat()
● shift(), unshift()
● split(), join(), reverse()
● map()
● filter()
● push(), pop(), splice()
● eval()
● reduce()
● forEach()
● toString()
● slice()
● length()
● charAt()
● indexOf()
● toUpperCase()
● toLowerCase()
● includes()
● replace()
● floor()
● ceil()
● sqrt()
● round()
● pow()
● random()
● What is JavaScript
➢ JavaScript is a high-level, interpreted programming language
primarily used for making web pages interactive.
➢ It was created to add dynamic and interactive elements to web pages,
allowing them to respond to user actions
➢ JavaScript can be embedded directly into HTML code and executed
by web browsers, making it an essential component of web
development.
● JS predefined words:
➢ Keywords for Variable Declaration:
★ var: Declares a variable.
★ let: Declares a block-scoped variable.
★ const: Declares a block-scoped constant variable.
➢ Functions:
★ function: Declares a function.
★ return: Exits a function and optionally specifies a value to
be returned.
● Data types
➢ Primitive Data Types:
★ Number: Represents numeric values, both integers and
floating-point numbers. let age = 30;
★ String: Represents textual data, enclosed in single ('') or
double ("") quotes. let name = "John";
★ Boolean: Represents a logical value, either true or false.
let isStudent = true;
Type Coercion:
Type Conversion:
Else if: Allows you to check additional conditions if the previous condition is
false.
(==) operator: Returns true if the values are equal (even with different
data types) after type coercion, otherwise returns false. 0 =='0' // true
(===) operator: Returns true if the values are equal in both value and
data type, otherwise returns false. 0 === '0' // false
● Switch Statements
switch (day) {
case "Monday":
console.log("It's the start of the week.");
case "Tuesday":
console.log("It's Tuesday!");
case "Wednesday":
console.log("It's midweek.");
default:
console.log("It's some other day.");
}
● Loops (for, while, do-while)
➢ Do-While Loop: Executes a block of code once, then repeats the loop
as long as a specified
let i = 0;
do {
console.log(i); // Output: 0, 1, 2, 3, 4
i++;
} while (i < 5);
function greet(name) {
console.log("Hello, " + name + "!");
}
function add(a, b) {
return a + b;
}
➢ Function Expression:
★ Defined by assigning a function to a variable or a constant.
★ Cannot be called before declaration.
function add(a, b) {
return a + b;
}
let result = add(3, 5); // Calling the function and
storing its return value
console.log(result); // Output: 8
➢ Scope:
★ JavaScript has function scope, meaning variables declared
within a function are only accessible within that function.
★ Variables declared outside of any function have global
scope, making them accessible from anywhere in the script.
function myFunction() {
let localVar = "I'm a local variable";
console.log(globalVar); // Accessible from inside
the function
console.log(localVar); // Accessible from inside
the function
}
(In this example, add function returns the sum of two numbers, and the result
variable stores the return value. In terms of scope, globalVar is accessible
globally, while localVar is accessible only within the myFunction function. Trying
to access localVar outside of myFunction will result in an error.)
● Nested Functions:
function outerFunction() {
let outerVariable = "I'm from outerFunction";
function innerFunction() {
console.log(outerVariable); // Access outerVariable from
outerFunction
}
innerFunction(); // Call innerFunction
}
function higherOrderFunction(callback) {
console.log("Performing some operation...");
callback(); // Execute the callback function
}
function callbackFunction() {
console.log("Callback function executed!");
}
higherOrderFunction(callbackFunction); // Pass
callbackFunction as an argument
● Arrow Functions:
● concat():
arr.reverse();
console.log(arr); // Output: ['orange', 'banana',
'apple']
● map()
● filter()
Creates a new array with all elements that pass a test specified by a
provided function.
➢ pop( ): Removes the last element from an array and returns that
element.
● eval()
let x = 10;
let result = eval('x * 2'); // result: 20
● reduce()
● forEach()
● toString()
● slice()
● length()
● charAt()
● indexOf()
Returns the first index at which a given element can be found in the
array, or -1 if it is not present.
● toUpperCase()
● toLowerCase()
● includes():
● replace()
● floor()
● ceil()
● sqrt()
● round()
● pow()
let base = 2;
let exponent = 3;
let result = Math.pow(base, exponent); // result: 8
● random()
➢ getMonth( ):
➢ getDate( ):
Returns the day of the month for the specified date according
to local time.
➢ getDay( ):
Returns the day of the week for the specified date according to
local time, ranging from 0 (Sunday) to 6 (Saturday).
let currentDate = new Date();
let day = currentDate.getDay(); // day: current day of
the week (0 to 6)
➢ getHours( ):
Returns the hour for the specified date according to local time,
from 0 to 23.
➢ getMinutes( ):
➢ getSeconds( ):
➢ getMilliseconds( ):
➢ toLocaleDateString():
➢ toLocaleTimeString():
➢ removing:
you can use methods like remove( ) on the parent element containing
the element you want to remove.
let elementToRemove =
document.getElementById('element-to-remove');
elementToRemove.remove();
<button onclick="handleClick()">
➢ onsubmit: Occurs when a form is submitted.
<form onsubmit="handleSubmit()">
<div onmouseover="handleMouseOver()"
onmouseout="handleMouseOut()">
● addEventListener properties
➢ Target Element: Specifies the HTML element to which the event
listener will be added.
➢ Event Type: Defines the type of event to listen for, such as "click",
"mouseover", "keydown", etc.
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.keys(obj)); //array of keys
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.values(obj)); //array of values
➢ Entries: method that returns an array containing the
enumerable property key-value pairs of a given object as arrays.
It provides a way to access both keys and values of an object
simultaneously.
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.entries(obj)); //array of the
entered value
● Object overrides:
When an object has duplicate keys, the last occurrence of the key will
override the previous ones.
● Object assign:
This method copies all the properties from one source objects to a
target object and returns the target object.
const target = { a: 1, b: 2 };
const source = { b: 3, c: 4 };
const merged = Object.assign(target, source);
console.log(merged);
const obj = { a: 1, b: 2, c: 3 };
let { a, c, b } = obj;
console.log(a, c, b);
➢ Array destructing:
● Spread operator