JS
Variables :
let x = null;
let name = "Tammy";
const found = false;
// => Tammy, false, null
[Link](name, found, x);
var a;
[Link](a); // => undefined
Strings :
let single = 'Wheres my bandit hat?';
// => 21
[Link]([Link]);
Arithmetic Operators
5 + 5 = 10 // Addition
10 - 5 = 5 // Subtraction
5 * 10 = 50 // Multiplication
10 / 5 = 2 // Division
10 % 5 = 0 // Modulo
Assignment Operators
let number = 100;
// Both statements will add 10
number = number + 10;
number += 10;
[Link](number);
// => 120
String Interpolation
let age = 7;
// String concatenation
'Tommy is ' + age + ' years old.';
// String interpolation
`Tommy is ${age} years old.`;
JavaScript Conditionals
if Statement
const isMailSent = true;
if (isMailSent) {
[Link]('Mail sent to recipient');
}
Ternary Operator
var x=1;
// => true
result = (x == 1) ? true : false;
switch Statement
const food = 'salad';
switch (food) {
case 'oyster':
[Link]('The taste of the sea');
break;
case 'pizza':
[Link]('A delicious pie');
break;
default:
[Link]('Enjoy your meal');
}
JavaScript ConditionalsJavaScript Functions
Functions
// Defining the function:
function sum(num1, num2) {
return num1 + num2;
}
// Calling the function:
sum(3, 6); // 9
Anonymous Functions
// Named function
function rocketToMars() {
return 'BOOM!';
}
// Anonymous function
const rocketToMars = function() {
return 'BOOM!';
}
return Keyword
// With return
function sum(num1, num2) {
return num1 + num2;
}
// The function doesn't output the sum
function sum(num1, num2) {
num1 + num2;
}
Function Parameters
// The parameter is name
function sayHello(name) {
return `Hello, ${name}!`;
}
JavaScript Arrays
Arrays
const fruits = ["apple", "orange", "banana"];
// Different data types
const data = [1, 'chicken', false];
Property .length
const numbers = [1, 2, 3, 4];
[Link] // 4
Mutable chart
remove start end
add
push ✔ ✔
pop ✔ ✔
unshift ✔ ✔
shift ✔ ✔
Index
// Accessing an array element
const myArray = [100, 200, 300];
[Link](myArray[0]); // 100
[Link](myArray[1]); // 200
JavaScript Loops
For Loop
for (let i = 0; i < 4; i += 1) {
[Link](i);
};
// => 0, 1, 2, 3
Looping Through Arrays
for (let i = 0; i < [Link]; i++){
[Link](array[i]);
}
// => Every item in the array
JavaScript Events
Event Handling :
// Selecting an element
const button = [Link]('myButton'); || const button =
[Link]('#myButton');
// Adding an event listener
[Link]('click', () => {
[Link]('Button clicked!');
})
Type of Event :
Click / mouseover / keydown / change / click ……
JavaScript Value Manipulation
Value :
// Getting the value
const input = [Link]('myInput');
[Link]([Link]);
// Setting the value
[Link] = 'Hello World!';
Inner HTML :
// Getting innerHTML
const div = [Link]('myDiv');
[Link]([Link]);
// Setting innerHTML
[Link] = '<strong>New HTML Content</strong>';
Text Content :
// Getting textContent
const paragraph = [Link]('myParagraph');
[Link]([Link]);
// Setting textContent
[Link] = 'New plain text content!';
