Complete JavaScript Tutorial (Basic to Advanced)

Complete JavaScript Tutorial (Basic to Advanced) 1 / 48

Scripting Language

A scripting language is used to automate tasks in web pages

JavaScript is the most common client-side scripting language
It interacts with HTML and CSS
Enables dynamic behavior without page reload

Complete JavaScript Tutorial (Basic to Advanced) 2 / 48

Dynamic Web Pages

Dynamic pages change content automatically

Based on user interaction or data
Example: form validation, dropdown updates

Complete JavaScript Tutorial (Basic to Advanced) 3 / 48

Basic Dynamic Example

<p id = " demo " > Hello </ p >

< button onclick = " change () " > Click </ button >

< script >

function change () {
document . getElementById ( " demo " )
. innerHTML = " Changed ! " ;
}
</ script >

Complete JavaScript Tutorial (Basic to Advanced) 4 / 48

Forms Validation

Ensures correct user input

Improves data accuracy
Can be done using JavaScript

Complete JavaScript Tutorial (Basic to Advanced) 5 / 48

Validation of Text Box

< input id = " name " >

< button onclick = " validate () " > Submit </ button >

< script >

function validate () {
let x = document . getElementById ( " name " ) . value ;
if ( x == " " ) {
alert ( " Name required " ) ;
}
}
</ script >

Complete JavaScript Tutorial (Basic to Advanced) 6 / 48

Dynamic Drop Down Menu

Dropdown options change dynamically

Used in forms (country-state selection)

Complete JavaScript Tutorial (Basic to Advanced) 7 / 48

Dynamic Dropdown Example
< select id = " country " onchange = " load () " >
< option > India </ option >
< option > USA </ option >
</ select >

< select id = " state " > </ select >

< script >

function load () {
let c = document . getElementById ( " country " ) . value ;
let s = document . getElementById ( " state " ) ;

if ( c == " India " ) {

s . innerHTML = " < option > Delhi </ option > " ;
} else {
s . innerHTML = " < option > NY </ option > " ;
}
}
</ script >
Complete JavaScript Tutorial (Basic to Advanced) 8 / 48
Name-Value Pair Access

Form data is sent as name=value pairs

Used in GET/POST methods

Complete JavaScript Tutorial (Basic to Advanced) 9 / 48

Access Name-Value Pair

< form >

< input name = " user " id = " u " >
< button onclick = " show () " > Submit </ button >
</ form >

< script >

function show () {
let val = document . getElementById ( " u " ) . value ;
console . log ( " user = " + val ) ;
}
</ script >

Complete JavaScript Tutorial (Basic to Advanced) 10 / 48

Cookie Management

Stores small data in browser

Used for login, preferences

Complete JavaScript Tutorial (Basic to Advanced) 11 / 48

Cookie Example

document . cookie = " user = John " ;

console . log ( document . cookie ) ;

document . cookie =
" user =; expires = Thu , 01 Jan 1970 UTC " ;

Complete JavaScript Tutorial (Basic to Advanced) 12 / 48

Session Management

Maintains user state

Implemented using sessionStorage

Complete JavaScript Tutorial (Basic to Advanced) 13 / 48

Session Example

sessionStorage . setItem ( " user " ," John " ) ;

let u = sessionStorage . getItem ( " user " ) ;

Complete JavaScript Tutorial (Basic to Advanced) 14 / 48

Animation through Scripting

Moves or changes elements dynamically

Can be done using JavaScript timers

Complete JavaScript Tutorial (Basic to Advanced) 15 / 48

Animation Example

< div id = " box " > </ div >

< script >

let pos =0;
setInterval (() = >{
pos ++;
box . style . left = pos + " px " ;
} ,10) ;
</ script >

Complete JavaScript Tutorial (Basic to Advanced) 16 / 48

Dynamic Image Mapping

Clickable regions on image

Can be controlled dynamically

Complete JavaScript Tutorial (Basic to Advanced) 17 / 48

Image Map Example

< img src = " img . jpg " usemap = " # map " >

< map name = " map " >

< area shape = " rect " coords = " 0 ,0 ,100 ,100 "
onclick = " alert ( ’ Clicked ’) " >
</ map >

Complete JavaScript Tutorial (Basic to Advanced) 18 / 48

Link Handling

Control navigation using JS

Redirect or prevent links

Complete JavaScript Tutorial (Basic to Advanced) 19 / 48

Link Handling Example

<a href = " # " onclick = " go () " > Click </ a >

< script >

function go () {
window . location = " https :// google . com " ;
}
</ script >

Complete JavaScript Tutorial (Basic to Advanced) 20 / 48

Multimedia Handling

Control audio/video dynamically

Play, pause, volume control

Complete JavaScript Tutorial (Basic to Advanced) 21 / 48

Multimedia Example

< video id = " vid " width = " 200 " >
< source src = " video . mp4 " >
</ video >

< button onclick = " play () " > Play </ button >

< script >

function play () {
document . getElementById ( " vid " ) . play () ;
}
</ script >

Complete JavaScript Tutorial (Basic to Advanced) 22 / 48

Summary I

Dynamic pages using JavaScript

Form validation
Cookies and sessions
Animation and multimedia
Image mapping and link handling

Complete JavaScript Tutorial (Basic to Advanced) 23 / 48

Introduction to JavaScript in Detail

JavaScript is a client-side scripting language

Used to make web pages interactive
Works with HTML (structure) and CSS (style)
Executes inside browser engine

Complete JavaScript Tutorial (Basic to Advanced) 24 / 48

HTML + JS Example

JavaScript can dynamically modify HTML content

< h1 id = " demo " > Hello </ h1 >
< script >
document . getElementById ( " demo " ) . innerHTML = " JS Works ! " ;
</ script >

Complete JavaScript Tutorial (Basic to Advanced) 25 / 48

Variables

Variables store data values

var: function scope
let: block scope
const: constant value
var x = 10;
let y = 20;
const z = 30;

Complete JavaScript Tutorial (Basic to Advanced) 26 / 48

Data Types

JavaScript is dynamically typed

Supports primitive and reference types
let num = 10;
let str = " Hello " ;
let flag = true ;
let arr = [1 ,2 ,3];
let obj = { name : " John " };

Complete JavaScript Tutorial (Basic to Advanced) 27 / 48

Operators

Used to perform operations on variables

// Arithmetic : + - * /
// Comparison : == ===
// Logical : && || !

Complete JavaScript Tutorial (Basic to Advanced) 28 / 48

Conditional Statements

Control program flow

if (x >10) {
console . log ( " Greater " ) ;
} else {
console . log ( " Smaller " ) ;
}

Complete JavaScript Tutorial (Basic to Advanced) 29 / 48

Loops

Used for repetition

for ( let i =0; i < 5; i ++) {
console . log ( i ) ;
}

Complete JavaScript Tutorial (Basic to Advanced) 30 / 48

Functions

Reusable blocks of code

function add (a , b ) {
return a + b ;
}
const sum =( a , b ) = > a + b ;

Complete JavaScript Tutorial (Basic to Advanced) 31 / 48

Arrays

Stores multiple values

let arr =[1 ,2 ,3];
arr . push (4) ;

Complete JavaScript Tutorial (Basic to Advanced) 32 / 48

Objects

Key-value pair structure

let person ={ name : " John " , age :25};

Complete JavaScript Tutorial (Basic to Advanced) 33 / 48

DOM Manipulation

JS interacts with HTML DOM

document . getElementById ( " id " ) ;
element . innerHTML = " Text " ;

Complete JavaScript Tutorial (Basic to Advanced) 34 / 48

Events

Respond to user actions

< button onclick = " alert ( ’ Clicked ’) " > Click </ button >

Complete JavaScript Tutorial (Basic to Advanced) 35 / 48

Exception Handling

Handles runtime errors

try {
error ;
} catch ( e ) {
console . log ( e ) ;
}

Complete JavaScript Tutorial (Basic to Advanced) 36 / 48

Classes

ES6 supports OOP

class Person {
constructor ( name ) { this . name = name ;}
}

Complete JavaScript Tutorial (Basic to Advanced) 37 / 48

Inheritance

Reuse properties using extends

class Dog extends Animal {}

Complete JavaScript Tutorial (Basic to Advanced) 38 / 48

Regular Expressions

Pattern matching
/[ a - z ]+/. test ( " hello " ) ;

Complete JavaScript Tutorial (Basic to Advanced) 39 / 48

Advanced JavaScript

Asynchronous programming
Promises
Async/Await
Event Loop

Complete JavaScript Tutorial (Basic to Advanced) 40 / 48

Promises

Handle async operations

let p = new Promise (( res , rej ) = >{
res ( " Done " ) ;
}) ;
p . then ( console . log ) ;

Complete JavaScript Tutorial (Basic to Advanced) 41 / 48

Async/Await

Cleaner async syntax

async function f () {
let res = await fetch ( " url " ) ;
}

Complete JavaScript Tutorial (Basic to Advanced) 42 / 48

Event Loop

Handles async execution

Call Stack + Callback Queue
Enables non-blocking behavior

Complete JavaScript Tutorial (Basic to Advanced) 43 / 48

Full Stack Project Overview

Frontend: React
Backend: [Link]
Database: MongoDB

Complete JavaScript Tutorial (Basic to Advanced) 44 / 48

React Example

function App () {
return < h1 > Hello React </ h1 >;
}

Complete JavaScript Tutorial (Basic to Advanced) 45 / 48

[Link] API

app . get ( " / " ,( req , res ) = >{

res . send ( " Hello API " ) ;
}) ;

Complete JavaScript Tutorial (Basic to Advanced) 46 / 48

Database (MongoDB)

db . users . insert ({ name : " John " }) ;

Complete JavaScript Tutorial (Basic to Advanced) 47 / 48

Summary I

Core JS concepts
DOM and Events
OOP in JS
Async programming
Full stack architecture

Complete JavaScript Tutorial (Basic to Advanced) 48 / 48