| No | Link |
|---|---|
| 1. | Window |
| 2. | Document |
| 3. | Console |
| 4. | Data Type of JavaScript |
| 5. | JavaScript Variables |
| 6. | Unary Plus and Minus Operator |
| 7. | JavaScript if, else, and else if |
| 8. | Ternary Operator |
| 9. | JavaScript Arrays |
| 10. | JavaScript Loops |
| 11. | JavaScript Functions |
The window object represents the browser window or tab. You can also access global functions or variables without explicitly typing window.
window.username = 'nada';
window.alert(username);When you have an HTML element with id="header", the browser automatically creates a global variable with the same name as the ID and assigns it to that element — but only if there isn't already a JavaScript variable with that same name.
<h1 id="header">Title</h1>
<script>
console.log(header); // <h1 id="header">Title</h1>
</script>It gives you access to the HTML content of the page and allows you to select, modify, create, or remove elements from the DOM (Document Object Model).
<body>
<h1 id="header"></h1>
<h2> frontend </h2>
<h2> backend </h2>
<script src="src/script.js"></script>
</body>getElementById
console.log(document.getElementById("header")); //Output: <h1 id="header"></h1> -> <h2> frontend </h2>
console.log(header) // Output: <h1 id="header"></h1>
document.getElementById("header").textContent = "Updated header";querySelctor
document.querySelector('h2'); // This selects the first <h2> element on the page.
document.querySelector('#header'); //This selects the element with id="header".classlist
document.querySelector('h2').classList.add('newClass'); // Adds the class newClass to the first <h2> element.
document.querySelector('h2').classList.remove('newClass'); // Delete the classThe console object is used mainly for debugging. It allows to print values, test logic, and track issues while the page runs.
console.log("%cHi %cGithub", "color: red", "color: blue");%c is a special placeholder in console.log() that tells the browser: The next string argument is a CSS style to apply to the text following me.
"color: red" is applied to "Hi"
"color: blue" is applied to "Github
console.error("this is error"); //output: ❌ this is errorconsole.warn("this is warn") //Ouuput: ⚠️ this is warn- String
let color = "Yellow";
let country = 'Tulkarm';- Number
let length = 16;
let weight = 7.5;- Boolean
let x = true;
let y = false;- Object The object data type can contain both built-in objects, and user-defined objects:
Built-in object types can be:
objects, arrays, dates, maps, sets, intarrays, floatarrays, promises, and more.
const person = {firstName:"Nada", lastName:"Khader"};- Array -> Object
const cars = ["Saab", "Volvo", "BMW"];
let nums = [1, 45, 7];- null
console.log(typeof null); //object- Undefined
console.log(typeof undefined); //undefinednull is not the same as undefined.
"undefined" means: "the variable was declared but never assigned.
"null" means: "the variable was deliberately set to have no value
let x;
console.log(x); // undefined
let y = null;
console.log(y); // nullJavaScript is a loosely typed You don’t need to declare the data type of a variable and can hold any type of data, and that type can change at runtime.
let name = 'nada'; // loosely type
string name = "nada"; // Strongly type like C++
JavaScript Variables can be declared in 4 ways:
- Automatically
x = 5;
y = 6;
z = x + y;var
var x = 5;
var y = 6;
var z = x + y;let
let x = 5;
let y = 6;
let z = x + y;const
const x = 5;
const y = 6;
const z = x + y;Example |
var |
let |
const |
|---|---|---|---|
| Redeclare | ✅ var x = 2; var x = 3; |
❌ let y = 2; let y = 6; → Error |
❌ const z = 2; const z = 6; → Error |
| Access Before Declare | 🟡 console.log(a); var a = 9; → undefined |
❌ console.log(a); let a = 9; → Error |
❌ console.log(a); const a = 9; → Error |
| Added to window object | ✅ Yes | ❌ No | ❌ No |
| Block Scope | ❌ No (function scoped) | ✅ Yes | ✅ Yes |
- Plus The unary plus (+) converts an operand into a number,
console.log(+4); //4
console.log(+"4"); //4
console.log(+"-4"); //-4
console.log(+"nada"); //NaN
console.log(+"0xff"); //255
console.log(+null); //0
console.log(+false); //0
console.log(+true); //1- Minus The Unary Negation (-) operator is used to convert its operand to a negative number
console.log(-4); //-4
console.log(-"4"); //-4
console.log(-"-4"); //-4
console.log(-"nada"); //NaN
console.log(-"0xff"); //-255
console.log(-null); //-0
console.log(-false); //-0
console.log(-true); //-1if (condition1) {
// block of code to be executed if condition1 is true
} else if (condition2) {
// block of code to be executed if the condition1 is false and condition2 is true
} else {
// block of code to be executed if the condition1 is false and condition2 is false
}💡Example
If time is less than 10:00, create a "Good morning" greeting, if not, but time is less than 20:00, create a "Good day" greeting, otherwise a "Good evening":
if (time < 10)
greeting = "Good morning";
else if (time < 20)
greeting = "Good day";
else
greeting = "Good evening";The result of greeting will be:
Good morning
variable = Expression1 ? ExpressionTrue : ExpressionFalse;💡Example
Use ternary operator to find the maximum
let a = 5;
let b = 9;
console.log((a > b) ? a : b); // Output: max: 9const array_name = [item1, item2, ...];
const nums = ["ahmad", "ali", "sami", ["hiba", "sara"]];
console.log(nums[3][0]); // hiba
console.log(nums[3][1][2]); // r
console.log(nums[1]); // aliArray Properties and Methods
cars.length // Returns the number of elements
cars.sort() // Sorts the arrayupdate the element in the array
nums[0] = "hala";
nums[3] = "nada";
console.log(nums); //Output : ['hala', 'ali', 'sami', 'nada']🔸 push(element)
Adds an element to the end of the array.
let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]🔹 unshift(element)
Adds an element to the beginning of the array.
let arr = [1, 2, 3];
arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]🔸 pop()
Removes the last element from the array and returns the removed value:.
let arr = [1, 2, 3];
let removed = arr.pop();
console.log(removed); // 3🔹 shift()
Removes the first element from the array and returns the removed value:
let arr = [7, 5, 23];
let removed = arr.shift();
console.log(removed); // 7for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}JavaScript For Loop - W3Schools
Syntax
// Define the function with parameters
function name(parameter1, parameter2) {
// code to be executed
}
// Call the function with arguments
name();- you can call it before it's defined
function calc(...nums){
console.log(Array.isArray(nums)); // true
int res = 0;
for(let i=0; i < nums.length; i++){
res += nums[i];
}
return `Final Result Is ${res}`;
}
console.log(calc(10,40,20,50,60)); An anonymous function is simply a function that does not have a name.
function() {
// Function Body
}You can also use arrow version :
( () => {
// Function Body...
} )();const greet = () => {
console.log("Welcome to JavaScript Basics !");
}
greet();