JS
🔹 1. Document Object Model (DOM) Methods
Methods to interact with HTML elements.
📌 Selecting Elements
document.getElementById("id") → Selects an element by id.
document.getElementsByClassName("class") → Selects elements by class (returns
HTMLCollection).
document.getElementsByTagName("tag") → Selects elements by tag name (returns
HTMLCollection).
document.querySelector("selector") → Selects the first matching element.
document.querySelectorAll("selector") → Selects all matching elements (returns
NodeList).
📌 Manipulating Elements
element.innerHTML = "New content" → Changes the HTML inside an element.
element.textContent = "New text" → Changes only the text inside an element.
element.setAttribute("attribute", "value") → Sets an attribute (href, src, etc.).
element.getAttribute("attribute") → Gets the value of an attribute.
element.classList.add("newClass") → Adds a class.
element.classList.remove("oldClass") → Removes a class.
element.classList.toggle("toggleClass") → Toggles a class on/off.
element.style.property = "value" → Changes CSS styles (element.style.color =
"red").
📌 Creating & Removing Elements
document.createElement("tag") → Creates a new element.
parent.appendChild(childElement) → Adds an element inside another.
parent.insertBefore(newElement, referenceElement) → Inserts before another
element.
parent.removeChild(childElement) → Removes an element.
🔹 2. Event Handling Methods
Methods for handling user interactions (clicks, keyboard input, etc.).
element.addEventListener("event", function) → Attaches an event listener.
element.removeEventListener("event", function) → Removes an event listener.
event.preventDefault() → Stops the default action (e.g., prevent form submission).
event.stopPropagation() → Stops event bubbling (prevent parent elements from
being affected).
Common Events:
Event Description
"click" Fires when an element is clicked.
"mouseove Fires when the mouse hovers over an
r" element.
"keydown" Fires when a key is pressed.
"keyup" Fires when a key is released.
"load" Fires when a page is fully loaded.
"submit" Fires when a form is submitted.
🔹 3. Console & Debugging Methods
Used to log and debug JavaScript code.
console.log(value) → Prints a value to the console.
console.warn(value) → Prints a warning message.
console.error(value) → Prints an error message.
console.table(arrayOrObject) → Displays data as a table.
🔹 4. Timer Methods
Used to delay or repeat functions.
setTimeout(function, milliseconds) → Runs a function after a delay.
setInterval(function, milliseconds) → Runs a function repeatedly.
clearTimeout(timeoutID) → Cancels a timeout.
clearInterval(intervalID) → Cancels an interval.
Example:
js
Copy code
setTimeout(() => console.log("Hello after 2 seconds"), 2000);
🔹 5. String Methods
Methods for manipulating text.
Method Description
"Hello".length Returns the length of the string.
"Hello".toUpperCase
Converts to uppercase.
()
"Hello".toLowerCase
Converts to lowercase.
()
Returns the character at index 1
"Hello".charAt (1)
("e").
"Hello".indexOf
Finds the position of "e".
("e")
"Hello".replace ("H",
Replaces "H" with "J".
"J")
"Hello".substring(1,
Extracts "ell".
4)
" Hello ".trim() Removes spaces from both ends.
Converts to an array ["H", "e", "l",
"Hello".split("")
"l", "o"].
🔹 6. Array Methods
Methods for working with lists of data.
Method Description
array.length Returns the number of elements.
array.push(item) Adds an item at the end.
array.pop() Removes the last item.
Method Description
array.unshift(item) Adds an item at the beginning.
array.shift() Removes the first item.
array.indexOf(item) Finds the index of an item.
Checks if an item exists
array.includes(item)
(true/false).
array.reverse() Reverses the array.
Sorts the array (alphabetically by
array.sort()
default).
array.join(", ") Converts an array to a string.
array.slice(start, end) Copies part of an array.
array.splice(index, deleteCount,
Removes/adds items.
newItems...)
🔹 7. Math Methods
Methods for performing calculations.
Method Description
Math.round(4.6) Rounds to 5.
Math.floor(4.9) Rounds down to 4.
Math.ceil(4.1) Rounds up to 5.
Math.abs(-5) Returns absolute value 5.
Generates a random number (0
Math.random()
to 1).
Math.max(5, 10,
Returns 15.
15)
Math.min(5, 10,
Returns 5.
15)
Math.pow(2, 3) Calculates 2^3 (Result: 8).
Math.sqrt(16) Returns 4 (square root).
🔹 8. Date Methods
Used to work with dates and times.
new Date () → Gets the current date/time.
date.getFullYear () → Returns the year.
date.getMonth () → Returns the month (0-11).
date.getDate () → Returns the day of the month.
date.getDay () → Returns the day of the week (0 = Sunday).
date.getHours () → Returns the hour.
date.getMinutes () → Returns the minutes.
date.getSeconds () → Returns the seconds.
🔹 9. JSON Methods
Used for working with JSON data.
JSON.stringify(object) → Converts an object into a JSON string.
JSON.parse(string) → Converts a JSON string into an object.
Example:
Js code
let obj = {name: "John", age: 30};
let jsonString = JSON.stringify(obj); // '{"name":"John","age":30}'
let parsedObj = JSON.parse(jsonString); // {name: "John", age: 30}
JavaScript can "display" data in different ways:
Writing into an HTML element, using innerHTML or innerText.
Writing into the HTML output using document.write().
Writing into an alert box, using window.alert().
Writing into the browser console, using console.log().
innerHTML property to change the HTML content of the HTML element
innerText property to change the inner text of the HTML element
For testing purposes, it is convenient to use document.write():
document.write(5 + 6);
Using document.write() after an HTML document is loaded, will delete all existing HTML:
the window.print() method in the browser to print the content of the current
window.
Featu CS Programming
re HTML S Language?
Synta ✅
✅ Yes ✅ Yes
x Yes
Computations
❌ No ❌ No ✅ Yes
(2+2)
Conditionals (if-
❌ No ❌ No ✅ Yes
else)
Loops (for,
❌ No ❌ No ✅ Yes
while)
Functio ❌
❌ No ✅ Yes
ns No
Turing
❌ No ❌ No ✅ Yes
Complete?
In jQuery $("p"); means "select all p elements".
Difference Between var, let and const
Scope Redeclare Reassig Hoisted Binds
n this
var No Yes Yes Yes Yes
let Yes No Yes No No
const Yes No No No No
Constant Objects and Arrays
The keyword const is a little misleading.
It does not define a constant value. It defines a constant reference to a value.
Because of this you can NOT:
Reassign a constant value
Reassign a constant array
Reassign a constant object
But you CAN:
Change the elements of constant array
Change the properties of constant object
JavaScript Arithmetic Operators
Operator Description
+ Addition
- Subtraction
* Multiplication
** Exponentiation (ES2016) x ** y produces the same result
as Math.pow(x,y):
/ Division
% Modulus (Division Remainder)
++ Increment
-- Decrement
JavaScript Assignment Operators
Operator Example Same As
= x=y x=y
+= x += y x=x+y
-= x -= y x=x-y
*= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y
**= x **= y x = x ** y
JavaScript Comparison Operators
Operat Description
or
== equal to
=== equal value and equal type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to
? ternary operator
JavaScript Logical Operators
Operat Description
or
&& logical and
|| logical or
! logical not
JavaScript Type Operators
Operator Description
typeof Returns the type of a variable
Instanceof Returns true if an object is an instance of an object type
JavaScript Bitwise Operators
Bit operators work on 32 bits numbers.
Any numeric operand in the operation is converted into a 32 bit number. The result
is converted back to a JavaScript number.
Operat Description Examp Sam Resu Decim
or le e as lt al
& AND 5&1 0101 0001 1
&
0001
| OR 5|1 0101 0101 5
|
0001
~ NOT ~5 ~01 1010 10
01
^ XOR 5^1 0101 0100 4
^
0001
<< left shift 5 << 1 0101 1010 10
<< 1
>> right shift 5 >> 1 0101 0010 2
>> 1
>>> unsigned 5 >>> 0101 0010 2
right shift 1 >>>
1
JavaScript Assignment Operators
Assignment operators assign values to JavaScript variables.
Operator Example Same As
= x=y x=y
+= x += y x=x+y
-= x -= y x=x-y
*= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y
**= x **= y x = x ** y
Shift Assignment Operators
Operator Example Same As
<<= x <<= y x = x << y
>>= x >>= y x = x >> y
>>>= x >>>= y x = x >>> y
Bitwise Assignment Operators
Operator Example Same As
&= x &= y x=x&y
^= x ^= y x=x^y
|= x |= y x=x|y
Logical Assignment Operators
Operator Example Same As
&&= x &&= y x = x && (x = y)
||= x ||= y x = x || (x = y)
??= x ??= y x = x ?? (x = y)
JavaScript has 8 Datatypes
String
Number
Bigint
Boolean
Undefined
Null
Symbol
Object
The Object Datatype
The object data type can contain both built-in objects, and user defined objects:
Built-in object types can be:
JavaScript Types are Dynamic
75—
1. 1-
2. 2-
3. 3
4. -4
5. -5
6. -6
7. -7
8. -8-
9. let
10. Const
11.
