Javascript Basic Tutorial

 

JavaScript Topics	Explanation	JavaScript Code Example
Variables	Variables are used to store data values. JavaScript uses the var, let, and const keywords for variable declarations.	let message = 'Hello, World!';
Operators	Operators are used to perform operations on variables and values. For example, arithmetic operators include +, -, *, /.	let sum = 10 + 5;
If...Else	The if...else statement is used to execute a block of code if a specified condition is true. Otherwise, another block of code can be executed.	if (hour < 18) { greeting = "Good day";} else { greeting = "Good evening";}
Switch Case	The switch statement is used to perform different actions based on different conditions.	switch (new Date().getDay()) { case 6: text = "Today is Saturday"; break; case 0: text = "Today is Sunday"; break; default: text = "Looking forward to the Weekend"; }
While Loop	The while loop executes a block of code as long as a specified condition is true.	while (i < 10) { text += "The number is " + i; i++; }
For Loop	The for loop is used when you know how many times you want to execute a statement or a block of code.	for (let i = 0; i < 5; i++) { text += "The number is " + i + "<br>"; }
For...in	The for...in loop is used to loop through the properties of an object.	for (let x in person) { txt += person[x]; }
Loop Control	Loop control statements such as break and continue change the loop's execution behavior.	for (let i = 0; i < 10; i++) { if (i === 3) { break; } text += "The number is " + i; }
Functions	Functions are blocks of code designed to perform a particular task, and they are executed when "something" invokes them.	function myFunction(p1, p2) { return p1 * p2; }
Events	Events are "things" that happen to HTML elements. When JavaScript is used in HTML pages, JavaScript can "react" on these events.	document.getElementById("myBtn").onclick = displayDate;
Cookies	Cookies are data, stored in small text files, on your computer. JavaScript can create, read, and delete cookies with the document.cookie property.	document.cookie = "username=John Doe";
Page Redirect	Page redirection is done by changing the location of the window.	window.location = "http://www.newpage.com";
Dialog Boxes	Dialog boxes can be used to alert, confirm, or prompt the user.	alert("Hello, World!");
Void Keyword	The void keyword is used to specify that a function does not return a value.	void function myFunction(){ alert("This is a void function!"); };
Page Printing	The window.print() method is used to print the content of the current window.	function printPage() { window.print(); }

JavaScript Topics	Explanation	JavaScript Code Example
Objects	Objects are collections of properties, which are associations between a key and a value.	let car = {type:"Fiat", model:"500", color:"white"};
Number	The Number object represents numerical data, whether integers or floating-point numbers.	let x = 123; let y = new Number(123);
Boolean	The Boolean object represents two values: true or false.	let isReading = true; // Yes, I'm reading
Strings	Strings are used for storing and manipulating text.	let text = 'Hello, World!';
Arrays	Arrays are used to store multiple values in a single variable.	let fruits = ['Apple', 'Banana', 'Cherry'];
Date	The Date object is used to work with dates and times.	let now = new Date();
Math	The Math object allows you to perform mathematical tasks on numbers.	let pi_val = Math.PI;
RegExp	A RegExp object is a regular expression that can be used for string searching and matching.	let re = /ab+c/;
HTML DOM	The HTML DOM is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content.	document.getElementById('demo').innerHTML = '

JavaScript Topics	Explanation	JavaScript Code Example
Error Handling	Error handling in JavaScript is done using the try...catch statement to catch exceptions and handle them gracefully.	javascript try { nonExistentFunction(); } catch (error) { console.error(error); }
Validations	Validations are checks performed to ensure that data is correctly input or processed. JavaScript typically performs this on form data.	javascript function validateForm() { let x = document.forms["myForm"]["fname"].value; if (x == "") { alert("Name must be filled out"); return false; } }
Animation	Animation in JavaScript can be done by gradually changing the style properties over time, often using the window.requestAnimationFrame() method.	javascript function animateElement(element, start, end, duration) { const range = end - start; const minTime = Date.now(); const step = function() { let progress = (Date.now() - minTime) / duration; if (progress > 1) { progress = 1; } element.style.left = start + range * progress + 'px'; if (progress < 1) { requestAnimationFrame(step); } }; requestAnimationFrame(step); }
Multimedia	Multimedia on a web page can be controlled using JavaScript through the HTML5 <audio> and <video> elements.	javascript var vid = document.getElementById("myVideo"); function playVideo() { vid.play(); } function pauseVideo() { vid.pause(); }
Debugging	Debugging is the process of finding and resolving defects. JavaScript debugging is often done using tools like browser developer consoles.	// Use console.log(), console.error() for debugging purposes console.log('Debugging output');
Image Map	An image map is a list of coordinates relating to a specific image, created to hyperlink areas of the image to different destinations.	html <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> </map>
Browsers	JavaScript can be used to detect the browser being used by the client and tailor content accordingly.	javascript if(navigator.userAgent.indexOf("Chrome") != -1 ) { console.log('You are using Chrome!'); }
Functions	Functions are reusable blocks of code that perform a specific task.	javascript function greet(name) { return "Hello " + name + "!"; } console.log(greet("Alice"));
Resources	Resources refer to external files and data that can be loaded and used in a JavaScript program.	// Load an external JSON file fetch('data.json').then(response => response.json()).then(data => console.log(data));