Akshay P

(JS) Documentation
(JS) is a versatile programming language used to enhance web pages with interactive and dynamic
features. Below is a concise overview of its core concepts and functionalities, along with brief code
snippets.

1. Basics of
adds interactivity to web pages and can be included in HTML documents in several ways:

 Inline is embedded directly within HTML elements using attributes like onclick. For example:
<button onclick="alert('Hello!')">Click me</button>.

 Internal is placed within <script> tags inside the HTML document. For instance: <script>
alert('Hello!'); </script>.

 External is linked via an external file using the <script src="script.js"></script> tag, which
helps in organizing and reusing code.

2. Variables and Data Types

Variables in store data values. They can be declared using var, let, or const. var is function-scoped
and generally less preferred, while let and const are block-scoped, with const used for values that
should not be reassigned. supports various data types including:

 Primitive Types: Number, String, Boolean, undefined, null, Symbol, and BigInt.

 Objects: Complex types like Object, Array, Function, and Date that can hold collections of
values or more intricate data structures.

let name = 'Alice';

const age = 30;

let isActive = true;

Akshay P

3. Operators
Operators are used to perform operations on variables and values:

 Arithmetic Operators (+, -, *, /, %) perform basic math operations.

 Comparison Operators (==, ===, !=, !==, >, <) compare values and return Boolean results.

 Logical Operators (&&, ||, !) are used to combine or invert Boolean values.

let result = 5 + 3

let isEqual = (5 == 5);

let isTrue = (true && false);

4. Control Structures
Control structures manage the flow of

 Conditional Statements like if and switch execute code based on conditions. Use if to test a
condition and switch to handle multiple cases.

 Loops such as for, while, and do...while repeat code blocks. The for loop is often used for a
specific number of iterations, while while and do...while loops run as long as a condition is
true.

if (x > 10) { console.log('x is greater than 10'); }

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

Akshay P

5. Functions
Functions are reusable blocks of code designed to perform a specific task. They can be defined using
function declarations, expressions, or arrow functions:

 Function Declarations provide a named function that can be invoked by its name.

 Function Expressions create anonymous functions assigned to variables.

 Arrow Functions offer a concise syntax and are useful for shorter functions

function add(a, b) { return a + b; }

const multiply = function(a, b) { return a * b; };

const divide = (a, b) => a / b;

6. Events
handles user interactions through events. Event listeners can be attached to HTML elements to
execute code when an event occurs, such as a button click.

document.getElementById('btn').addEventListener('click', () => alert('Button clicked!'));

7. DOM Manipulation
The Document Object Model (DOM) represents the structure of a web page. can interact with and
modify the DOM:

 Accessing Elements: Retrieve HTML elements using methods like getElementById.

 Modifying Elements: Change content or attributes of elements using properties like

textContent.

 Creating Elements: Generate and insert new elements into the DOM.

const element = document.getElementById('myElement');

element.textContent = 'Updated text';

const newElement = document.createElement('div');

document.body.appendChild(newElement);
Akshay P

8. Arrays and Objects

Arrays and objects are essential data structures in :

 Arrays store ordered collections of values and are accessed using indices.

 Objects hold key-value pairs and are used to represent complex data structures.

const fruits = ['apple', 'banana'];

const person = { name: 'John', age: 30 };

9. JSON ( Object Notation)

JSON is a format for exchanging data. It allows data to be represented in a string format that can be
parsed and used in .

const jsonString = '{"name":"Jane","age":25}';

const obj = JSON.parse(jsonString);

const user = { name: 'Alice', age: 28 };

const userJSON = JSON.stringify(user);

10. Asynchronous
handles asynchronous operations using callbacks, promises, and async/await:

 Callbacks: Functions passed as arguments to other functions, executed once a task

completes.

 Promises: Objects representing the eventual completion or failure of an asynchronous

operation.

 Async/Await: Syntactic sugar for working with promises, making asynchronous code look
synchronous.

const promise = new Promise((resolve) => setTimeout(() => resolve('Data'), 1000));

promise.then(data => console.log(data));

async function fetchData() {

const response = await fetch('url');

const data = await response.json();

console.log(data);}fetchData();
Akshay P

11. Error Handling

uses try...catch to handle errors gracefully. Code inside try is executed, and if an error occurs, control
is transferred to the catch block.

try {

riskyFunction();

} catch (error) {

console.error('Error:', error);

12. Modern Features

Modern introduces new features to improve code readability and functionality:

 Template Literals: Allow for embedded expressions and multi-line strings.

 Destructuring: Extracts values from arrays or properties from objects.

 Modules: Facilitate code organization by exporting and importing functions or variables.

const name = 'World';

const greeting = `Hello, ${name}!`;

const [a, b] = [1, 2];

const {name, age} = {name: 'Bob', age: 40};

export const add = (a, b) => a + b;

import { add } from './math.js';

This documentation covers the essentials of , providing a solid foundation for adding dynamic
features to web applications.