JavaScript Fundamentals

In This Section, You Will Learn:

• • What JavaScript is and why it's essential
• • Variables, data types, and operators
• • Functions – reusable code blocks
• • DOM manipulation – changing the page
• • Events – responding to user actions
• • Modern JavaScript (ES6+) features

What is JavaScript?

• JavaScript (JS) is the programming language of the web.
• HTML = Structure, CSS = Style, JavaScript = Behavior
• What JavaScript Does:
• • Makes pages interactive (click buttons, show/hide content)
• • Validates forms before submission
• • Fetches data from servers (APIs)
• • Creates animations and effects
• • Powers entire applications (React, Vue, Angular)
• Where JavaScript Runs:
• • In the browser (frontend)
• • On servers with Node.js (backend)
• • In mobile apps (React Native)
• JavaScript is the MOST important language to learn. Master it, and you can build anything.

Variables and Data Types

• Variables store data. Think of them as labeled boxes.
• Declaring Variables:
• • const: Can't be changed (use by default)
• • let: Can be changed
• • var: Old way (avoid)
• “`
• const name = 'Ahmed';
• let age = 25;
• “`
• Data Types:
• • String: 'Hello' or "World"
• • Number: 42, 3.14
• • Boolean: true or false
• • Array: [1, 2, 3]
• • Object: {name: 'Ahmed', age: 25}
• • Null/Undefined: No value
• Tip: Use const unless you need to change the value.

Functions – Reusable Code

• Functions are reusable blocks of code.
• Function Declaration:
• “`
• function greet(name) {
• return 'Hello, ' + name;
• }
• greet('Ahmed'); // 'Hello, Ahmed'
• “`
• Arrow Functions (Modern):
• “`
• const greet = (name) => {
• return 'Hello, ' + name;
• };
• “`
• Short Arrow Functions:
• “`
• const greet = name => 'Hello, ' + name;
• “`
• Functions:
• • Accept inputs (parameters)
• • Process data
• • Return outputs
• Use functions to avoid repeating code.

DOM Manipulation – Changing the Page

• The DOM (Document Object Model) is how JavaScript sees your HTML.
• JavaScript can:
• • Read HTML elements
• • Change content, styles, attributes
• • Add or remove elements
• Selecting Elements:
• “`
• const button = document.querySelector('#myButton');
• const items = document.querySelectorAll('.item');
• “`
• Changing Content:
• “`
• button.textContent = 'Click Me!';
• button.style.color = 'blue';
• button.classList.add('active');
• “`
• Creating Elements:
• “`
• const newDiv = document.createElement('div');
• newDiv.textContent = 'New content';
• document.body.appendChild(newDiv);
• “`

Events – Responding to Users

• Events are actions that happen (clicks, typing, scrolling).
• Adding Event Listeners:
• “`
• const button = document.querySelector('#myButton');
• button.addEventListener('click', () => {
• alert('Button clicked!');
• });
• “`
• Common Events:
• • click: User clicks element
• • submit: Form is submitted
• • keyup: Key is released
• • mouseover: Mouse enters element
• • load: Page finishes loading
• Event Object:
• “`
• button.addEventListener('click', (event) => {
• console.log(event.target); // The clicked element
• event.preventDefault(); // Stop default behavior
• });
• “`