#1 Online Compilers

#2 In Browser - Developer Option

Ways for Writing JS Code
#1 Install VS Code

#3 Visual Studio Code Setting up Visual Studio code for running JavaScript Install NodeJS https://nodejs.org/en/download/current

Execute the code from Terminal

Variable

Operator

Always master basic coding first ex: Function

Arrays

RULE Object
#2
then

go to different programming

Var

Let

Const
Variables
#3 let name = "John";
const age = 30;
var isStudent = true;
let numbers = [1, 2, 3, 4, 5];
Ex let person = { name: "Alice", age: 25 };

function greet(name)
{
return "Hello, " + name + "!";
}

let multiply = function(a, b)

{
return a * b;
Functions };
#4

let num = 10;

if (num > 0) {
console.log("Positive number");
} else if (num < 0) {
console.log("Negative number");
} else {
console.log("Zero");
if, else, else if }

Control Flow for (let i = 0; i < 5; i++)

#5 {
console.log("Iteration " + i);
for }

let fruits = ["apple", "banana", "orange"];

fruits.push("grape");
fruits.pop();

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

person.age = 26;
Arrays & Objects
#6

<!-- HTML -->

<div id="message"></div>

DOM Manipulation - Document Object

Model (DOM) // JavaScript
#7 document.getElementById("message").textContent = "Hello, world!";

<!-- HTML -->

<button id="btn">Click me</button>

// JavaScript
Events
document.getElementById("btn").addEventListener("click", function() {
#8
console.log("Button clicked!");
});

// Callback example
function fetchData(callback)
{
setTimeout(function()
{
callback("Data received");
}, 2000);
}
FULL STACK WEB
fetchData(function(data)
DEVELOPMENT Java Script {
console.log(data);
});

Asynchronous JavaScript:
Understand asynchronous programming
#9
with callbacks, promises, and async/await.

try
{
// Code that might throw an error
}

catch (error)
{
console.error("An error occurred:",
error);
}

finally
{
console.log("Cleanup code");
Error Handling }
#10

Explore modern JavaScript features like

arrow functions, template literals,
destructuring, and spread/rest operators.

// Arrow function example

const add = (a, b) => a + b;
ES6+ Features
#11 // Template literals
const name = "John";
console.log(`Hello, ${name}!`);

<script>
window.onload = function() {
alert("Welcome to Sanjay's Personal Website!");
};
an alert when the page loads, welcoming </script>
#1 the user to your website

<button onclick="changeBackgroundColor()">Change Background Color</button>

<script>
function changeBackgroundColor() {
// Generate a random color
changes the background color of the
var randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
#2 page when the user clicks a button

// Change the background color of the body

document.body.style.backgroundColor = randomColor;
Other }
#12 </script>

<div id="datetime"></div>

<script>
function displayDateTime() {
var currentDate = new Date();
var dateTimeString = "Current Date and Time: " + currentDate.toLocaleString();
dynamically displays the current date and document.getElementById("datetime").textContent = dateTimeString;
#3 time on your website }

// Call the function to display date and time when the page loads
window.onload = function() {
displayDateTime();
};
</script>

Icons https://icon-icons.com/

Webp https://tiny-img.com/webp/

Free Web Hosting Service

2

html https://htmlcheatsheet.com/

CheatSheet css https://htmlcheatsheet.com/css/

#13
javascript https://htmlcheatsheet.com/js/

https://css-tricks.com/snippets/css/a-guide-
Flex to-flexbox/

Tutorial https://css-
tricks.com/snippets/css/complete-guide-
Grid grid/