Scribd
Upload
15 views

Js Notes

Uploaded by

vihs7777
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

Js Notes

Uploaded by

vihs7777
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Introduction to JavaScript

JavaScript is a versatile, high-level programming language primarily used for web


development to create dynamic and interactive content on websites. It can be used on both
the client side (in the browser) and the server side (using environments like Node.js).

Setting Up JavaScript

To start coding in JavaScript, you need:

1. A Text Editor or IDE: Visual Studio Code, Sublime Text, Atom, etc.
2. A Web Browser: Chrome, Firefox, Edge, etc.

You can run JavaScript directly in the browser’s console or by embedding it in HTML files.

Including JavaScript in HTML

You can include JavaScript in an HTML file in two ways:

1. Inline JavaScript: Inside the <script> tag within the HTML file.
2. External JavaScript: In a separate .js file and linking it using the <script
src="path/to/file.js"></script> tag.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

© 2024 Yuvamytr. All rights reserved. 1


<title>JavaScript Example</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
console.log("This is inline JavaScript!");
</script>
<script src="script.js"></script>
</body>
</html>

Basic Syntax and Data Types

1. Variables

Variables are used to store data. In JavaScript, you can declare variables using var, let, or
const.

● var: Function-scoped variable.


● let: Block-scoped variable (introduced in ES6).
● const: Block-scoped, immutable variable (introduced in ES6).

Example:

var name = "John";


let age = 25;
const country = "USA";

2. Data Types

JavaScript has several data types:

● Primitive Types:
○ String: "Hello"
○ Number: 42, 3.14
○ Boolean: true, false
○ Null: null

© 2024 Yuvamytr. All rights reserved. 2


○ Undefined: undefined
○ Symbol (ES6): Symbol("id")
● Composite Types:
○ Object: { key: "value" }
○ Array: [1, 2, 3]
○ Function: function() { ... }

3. Operators

● Arithmetic Operators: +, -, *, /, %, ++, --


● Assignment Operators: =, +=, -=, *=, /=, %=
● Comparison Operators: ==, ===, !=, !==, >, <, >=, <=
● Logical Operators: &&, ||, !

Control Structures

1. Conditional Statements

● if-else: Executes code based on a condition.

let number = 10;


if (number > 5) {
console.log("Number is greater than 5");
} else {
console.log("Number is 5 or less");
}

● switch: Executes code based on multiple conditions.

let fruit = "apple";


switch (fruit) {
case "apple":
console.log("It's an apple");
break;
case "banana":
console.log("It's a banana");
break;

© 2024 Yuvamytr. All rights reserved. 3


default:
console.log("Unknown fruit");
}

2. Loops

● for: Loops through a block of code a number of times.

for (let i = 0; i < 5; i++) {


console.log(i);
}

● while: Loops through a block of code while a specified condition is true.

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

● do-while: Loops through a block of code once, and then repeats the loop while a
specified condition is true.

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

Functions

Functions are reusable blocks of code that perform a specific task.

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

© 2024 Yuvamytr. All rights reserved. 4


console.log(greet("Alice"));

Functions can also be assigned to variables (function expressions) and created using the
arrow function syntax (ES6).

● Function Expression:

const greet = function(name) {


return "Hello, " + name + "!";
};
console.log(greet("Bob"));

● Arrow Function:

const greet = (name) => "Hello, " + name + "!";


console.log(greet("Charlie"));

Objects and Arrays

1. Objects

Objects are collections of key-value pairs.

const person = {
name: "Alice",
age: 30,
greet: function() {
console.log("Hello, " + this.name);
}
};

console.log(person.name);
person.greet();

2. Arrays

© 2024 Yuvamytr. All rights reserved. 5


Arrays are ordered collections of values.

const numbers = [1, 2, 3, 4, 5];


console.log(numbers[0]); // Output: 1

numbers.push(6); // Add to the end


numbers.pop(); // Remove from the end

numbers.unshift(0); // Add to the beginning


numbers.shift(); // Remove from the beginning

Events

JavaScript can respond to user actions such as clicks, mouse movements, and key presses.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Handling</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>

document.getElementById("myButton").addEventListener("click",
function() {
alert("Button clicked!");
});
</script>
</body>
</html>

© 2024 Yuvamytr. All rights reserved. 6


DOM Manipulation

The Document Object Model (DOM) represents the structure of an HTML document.

● Selecting Elements:

const element = document.getElementById("myId");


const elements = document.getElementsByClassName("myClass");
const elements = document.getElementsByTagName("div");
const element = document.querySelector(".myClass");
const elements = document.querySelectorAll(".myClass");

● Changing Content:

const element = document.getElementById("myId");


element.innerHTML = "New Content";
element.textContent = "New Text";

● Changing Styles:

const element = document.getElementById("myId");


element.style.color = "red";
element.style.fontSize = "20px";

Asynchronous JavaScript

1. Callbacks

A function passed as an argument to another function to be executed later.

function fetchData(callback) {
setTimeout(() => {
callback("Data fetched");
}, 1000);
}

fetchData((message) => {

© 2024 Yuvamytr. All rights reserved. 7


console.log(message);
});

2. Promises

An object representing the eventual completion or failure of an asynchronous operation.

const fetchData = new Promise((resolve, reject) => {


setTimeout(() => {
resolve("Data fetched");
}, 1000);
});

fetchData.then((message) => {
console.log(message);
});

3. Async/Await (ES8)

Syntax for writing asynchronous code in a synchronous manner.

async function fetchData() {


const response = await new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Data fetched");
}, 1000);
});

console.log(response);
}

fetchData();

© 2024 Yuvamytr. All rights reserved. 8


Conclusion

This guide covers the basics of JavaScript. Practice by writing small programs and
experimenting with different features. Explore more advanced topics like classes, modules,
and JavaScript frameworks/libraries (e.g., React, Angular, Vue) as you become more
comfortable with the language. Happy coding!

© 2024 Yuvamytr. All rights reserved. 9

You might also like