JavaScript Crash Course

Introduction to JavaScript

• JavaScript is the world's most popular programming language.
• It is easy to learn and different from Java.
• Used to create interactive and dynamic web pages.

Basic Concepts

Variables

• var: function or global scope.
• let: block scope, does not allow redeclaration.
• const: constant variable, block scope, must be assigned during declaration.

Examples

• Create a variable price, product, and tax.
• Calculate total price using price + tax.
• Difference between string and variable representation using quotes.
• Variables should be declared before use.

Data Types

• Primitive data types: number, string, boolean, etc.
• Non-primitive data types: objects, arrays, etc.

Basic Operations

• Arithmetic operators: +, -, *, /.
• Increment and decrement: ++ and --.
• Example: Pre-increment and post-increment operations.*

JavaScript Functions

Function Basics

• Functions are blocks of code designed to perform particular tasks.
• Syntax: function name(parameters) { code to execute }.
• Example functions: logging messages, calculating area, summing numbers.

Parameters and Return Values

• Functions can take parameters and return values.

• Example: Function to add two numbers and return the result.

• Example: Function to calculate area given length and breadth.

Conditional Statements

• if, else if, else conditions.
• Example: Checking score ranges and printing corresponding messages.
• Logical operators: && (and), || (or), ! (not).
• Traffic light color example for conditional statements.

Loops

For Loop

• Syntax: for (initialization; condition; increment/decrement) { }
• Example: Print numbers from 1 to 10.
• Print even numbers between 1 and 10.

Example: Table multiplication using loops.

DOM Manipulation

• DOM stands for Document Object Model.
• HTML elements can be selected and manipulated using JavaScript.
• document.getElementById to select elements.
• Change text content: element.textContent = "new text".
• Dynamic element creation and insertion using appendChild, and insertAdjacentElement.

Event Handling

• Event Listeners: addEventListener for events like click, mouseover.
• Example: Changing text on button click.

Example Projects

Guess the Number Game

• Generate a random number using Math.random().
• Check user's guess and give feedback.
• Keep track of score.

Popup Box Example

• CSS styles for popup box and overlay.
• JavaScript to show, hide, and manage popup elements.

Book List Application

• Create book elements dynamically using templates.
• Add and delete book information.
• Event listeners for button clicks and form submissions.

JS Code Organization

• Structure HTML, CSS, and JavaScript for modularity.
• Example with book listing and styling.

Summary

• JavaScript provides powerful tools for web development, from basic DOM manipulation to complex applications.
• Practice basic syntax, conditional statements, loops, functions, and DOM manipulation.