Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
6 views

Javascript Fundamentals

This document covers fundamental Javascript concepts including variables, DOM manipulation, execution context, event listeners, and equality operators. It explains let, var, and const, and how to access and modify the DOM. It also discusses just-in-time compilation, the call stack, adding event listeners, and the difference between == and ===.

Uploaded by

unofficialartist3
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Javascript Fundamentals

This document covers fundamental Javascript concepts including variables, DOM manipulation, execution context, event listeners, and equality operators. It explains let, var, and const, and how to access and modify the DOM. It also discusses just-in-time compilation, the call stack, adding event listeners, and the difference between == and ===.

Uploaded by

unofficialartist3
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Javascript Fundamentals

1. Variables: let , var , const


var

Function-scoped.

Can be redeclared and updated.

Hoisted to the top of its scope, initialized with undefined .

function exampleVar() {
console.log(x); // undefined
var x = 10;
console.log(x); // 10
}
exampleVar();

let

Block-scoped.

Cannot be redeclared in the same scope but can be updated.

Hoisted to the top of its block, but not initialized.

function exampleLet() {
console.log(y); // ReferenceError: Cannot access 'y' befo
re initialization
let y = 20;
console.log(y); // 20
}
exampleLet();

const

Block-scoped.

Javascript Fundamentals 1
Cannot be redeclared or updated.

Must be initialized at the time of declaration.

function exampleConst() {
const z = 30;
console.log(z); // 30
z = 40; // TypeError: Assignment to constant variable.
}
exampleConst();

2. DOM Manipulation
Accessing elements and modifying their properties or content.

Example: Change the text content of a paragraph

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM Manipulation</title>
</head>
<body>
<p id="myParagraph">Original Text</p>
<script>
const paragraph = document.getElementById('myParagrap
h');
paragraph.textContent = 'Changed Text';
</script>
</body>
</html>

Example: Change the style of an element

document.getElementById('myParagraph').style.color = 'blue';

Javascript Fundamentals 2
3. JIT (Just-In-Time) Compilation
JavaScript engines (like V8 in Chrome) compile JavaScript code into machine
code at runtime.

Combines interpretation and compilation, improving execution speed.

4. Execution Context and Call Stack


Execution Context: Environment where the JavaScript code is executed.
Consists of:

Variable Object

Scope Chain

this keyword

Call Stack: Mechanism to keep track of function calls.

function first() {
console.log('First');
second();
console.log('First again');
}

function second() {
console.log('Second');
}

first();

// Output:
// First
// Second
// First again

5. Event Listeners
Allow you to run code when events are triggered (e.g., clicks, keypresses).

Javascript Fundamentals 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Listeners</title>
</head>
<body>
<button id="myButton">Click Me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
alert('Button was clicked!');
});
</script>
</body>
</html>

6. == vs ===
== : Equality operator. Compares values for equality after converting both
values to a common type.

: Strict equality operator. Compares both value and type without type
===

conversion.

Examples:

console.log(5 == '5'); // true


console.log(5 === '5'); // false
console.log(null == undefined); // true
console.log(null === undefined); // false

Summary
Use let and const for block-scoped variables.

Manipulate the DOM using JavaScript to change content and styles.

Javascript Fundamentals 4
JIT compilation improves performance by compiling code at runtime.

Understand the execution context and call stack for better debugging.

Use event listeners to handle user interactions.

Prefer === over == to avoid type coercion issues.

These fundamental concepts are essential for building a strong foundation in


JavaScript. Practice these with real examples to get a deeper understanding.

Javascript Fundamentals 5

You might also like