Client Side Scripting Notes

Chapter 1 – Basics of Java Script Programming

  •  Features of Java script
  • Object name, property, method
  • variables
  • Operators 
  • If.else statement
  • Loop
  • Querying and Setting properties

What is a Scripting Language ?

A scripting language is a type of programming language that is used to write scripts, which are sets of instructions that automate the execution of tasks that could be executed one-by-one by a human operator. These languages are usually interpreted rather than compiled. This means they are executed directly by an interpreter rather than being compiled into machine code.

Features of Java Script

JavaScript is a versatile, high-level programming language widely used in web development. Here are some of its key features:

  1. Lightweight and Interpreted: JavaScript is an interpreted language, which means code can be executed directly without prior compilation. This makes it quick to run and easy to debug.
  2. Client-Side Scripting: JavaScript is primarily used for client-side scripting to create dynamic and interactive web pages. It runs in the browser, enhancing user experience without requiring a page reload.
  3. Event-Driven Programming: JavaScript supports event-driven programming, which allows code to respond to user actions such as clicks, form submissions, and keyboard inputs.
  4. Asynchronous Processing: JavaScript supports asynchronous programming with features like callbacks, promises, and async/await, allowing for non-blocking operations and improving performance, especially for web applications.
  5. Object-Oriented: JavaScript supports object-oriented programming concepts such as objects, inheritance, and prototypes, which help in organizing and structuring code effectively.
  6. Cross-Platform: JavaScript is a cross-platform language that works on various operating systems and browsers, making it highly versatile for web development.
  7. Integrated with HTML/CSS: JavaScript works seamlessly with HTML and CSS to create dynamic and interactive web pages. It can manipulate the DOM (Document Object Model) to update content and styles dynamically.
  8. Extensive Libraries and Frameworks: There is a vast ecosystem of libraries and frameworks (like React, Angular, Vue.js, and jQuery) that extend JavaScript’s capabilities and simplify complex tasks.
  9. Functional Programming: JavaScript supports functional programming features such as first-class functions, higher-order functions, and closures, enabling more flexible and reusable code.
  10. JSON Support: JavaScript Object Notation (JSON) is a lightweight data interchange format that is easy to parse and generate in JavaScript, making it ideal for API integration and data exchange.
  11. Community and Support: JavaScript has a large and active community, providing extensive resources, tutorials, and support for developers of all levels.

 

How to Write Java Script Code ?

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>JavaScript Example</title>

</head>

<body>

    <h1>JavaScript Inline</h1>

    <script>

        console.log(“Hello, world!”);

        }

    </script>

</body>

</html>

 

Variables

In JavaScript, variables are used to store data values. You can think of a variable as a container that holds information that can be referenced and manipulated in a program. There are three main ways to declare variables in JavaScript: using `var`, `let`, and `const`.

  1. `var` Keyword

– Scope: `var` is function-scoped. This means if you declare a variable inside a function using `var`, it will only be accessible within that function. However, if declared outside any function, it becomes globally scoped.

– Hoisting: Variables declared with `var` are hoisted to the top of their scope, meaning they can be used before they are declared (though they will be `undefined` until the line where they are assigned a value is executed).

– Re-declaration: You can re-declare variables declared with `var`.

var x = 10;

if (true) {

    var x = 20; // Same variable, scope is the function or global

    console.log(x); // 20

}

console.log(x); // 20

  1. `let` Keyword

– Scope: `let` is block-scoped. A block is defined by `{}` (curly braces), such as in loops, conditionals, or functions.

– Hoisting: Variables declared with `let` are also hoisted, but not initialized. This means they cannot be accessed before their declaration line.

– Re-declaration: You cannot re-declare a variable with `let` in the same scope.

let y = 10;

if (true) {

    let y = 20; // Different variable, scope is the block

    console.log(y); // 20

}

console.log(y); // 10

3.`const` Keyword

– Scope: `const` is also block-scoped, similar to `let`.

– Hoisting: Variables declared with `const` are hoisted but not initialized, just like `let`.

– Re-declaration and Assignment: `const` is used to declare constants. A `const` variable must be initialized at the time of declaration and cannot be re-assigned.

const z = 10;

if (true) {

    const z = 20; // Different variable, scope is the block

    console.log(z); // 20

}

console.log(z); // 10

// z = 30; // Error: Assignment to constant variable

 

Keywords in Java Script

In JavaScript, keywords are reserved words that have special meanings and are used to perform specific tasks. They cannot be used as identifiers (variable names, function names, etc.). Here are some of the most commonly used JavaScript keywords along with their definitions and uses.

Operators in Java Script

JavaScript operators are symbols that are used to perform operations on operands. For example:

There are following types of operators in JavaScript.

  1. Arithmetic Operators
  2. Comparison (Relational) Operators
  3. Bitwise Operators
  4. Logical Operators
  5. Assignment Operators
  6. Special Operators

JavaScript Arithmetic Operators

JavaScript Arithmetic Operators perform arithmetic operations: addition (+), subtraction (-), multiplication (*), division (/), modulus (%), and exponentiation (**).

JavaScript Assignment Operators 

The assignment operation evaluates the assigned value. Chaining the assignment operator is possible in order to assign a single value to multiple variables

JavaScript Comparison Operators

Comparison operators are mainly used to perform the logical operations that determine the equality or difference between the values.

JavaScript Logical Operators

JavaScript Logical Operators perform logical operations: AND (&&), OR (||), and NOT (!), evaluating expressions and returning boolean values.

JavaScript Bitwise Operators

The bitwise operator in JavaScript is used to convert the number to a 32-bit binary number and perform the bitwise operation. The number is converted back to the 64-bit number after the result. 

JavaScript Ternary Operators

The ternary operator has three operands. It is the simplified operator of if/else.


IF ELSE ( Conditional )

The if…else statement in JavaScript is used for conditional execution of code. It allows the program to execute a block of code if a specified condition is true, and optionally execute another block of code if the condition is false.

The JavaScript if-else statement is used to execute the code whether condition is true or false. There are three forms of if statement in JavaScript.

  1. If Statement
  2. If else statement
  3. if else if statement