Scribd
Upload
62 views16 pages

Client Side Scripting Chapter 1

Uploaded by

Cricket Lover
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
62 views16 pages

Client Side Scripting Chapter 1

Uploaded by

Cricket Lover
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

Client Side Scripting

Notes

Chapter 1 -: Basics of Java Script Programming

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.

JOIN OUR CLASS TO SCORE 95+ CLICK HERE YOUTUBE CHANNEL


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">

JOIN OUR CLASS TO SCORE 95+ CLICK HERE YOUTUBE CHANNEL


<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.

JOIN OUR CLASS TO SCORE 95+ CLICK HERE YOUTUBE CHANNEL


- 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

2. `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

JOIN OUR CLASS TO SCORE 95+ CLICK HERE YOUTUBE CHANNEL


}

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

JOIN OUR CLASS TO SCORE 95+ CLICK HERE YOUTUBE CHANNEL


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

JOIN OUR CLASS TO SCORE 95+ CLICK HERE YOUTUBE CHANNEL


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.

JOIN OUR CLASS TO SCORE 95+ CLICK HERE YOUTUBE CHANNEL


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

IF ELSE

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

JavaScript If statement

It evaluates the content only if expression is true. The signature of JavaScript if


statement is given below.

if(expression){
//content to be evaluated
}

JOIN OUR CLASS TO SCORE 95+ CLICK HERE YOUTUBE CHANNEL


JavaScript If...else Statement

It evaluates the content whether condition is true of false. The syntax of


JavaScript if-else statement is given below.

if(expression){
//content to be evaluated if condition is true
}
else{
//content to be evaluated if condition is false
}

JOIN OUR CLASS TO SCORE 95+ CLICK HERE YOUTUBE CHANNEL


JavaScript If...else if statement

It evaluates the content only if expression is true from several expressions. The
signature of JavaScript if else if statement is given below.

JOIN OUR CLASS TO SCORE 95+ CLICK HERE YOUTUBE CHANNEL


if(expression1){
//content to be evaluated if expression1 is true
}
else if(expression2){
//content to be evaluated if expression2 is true
}
else if(expression3){
//content to be evaluated if expression3 is true
}
else{
//content to be evaluated if no expression is true
}

Switch Case in Java Script

The JavaScript switch statement is used to execute one code from multiple
expressions. It is just like else if statement that we have learned in previous
page. But it is convenient than if..else..if because it can be used with numbers,
characters etc.

JOIN OUR CLASS TO SCORE 95+ CLICK HERE YOUTUBE CHANNEL


switch(expression){
case value1:
code to be executed;
break;
case value2:
code to be executed;
break;
......

default:
code to be executed if above values are not matched;
}

JavaScript Loops

The JavaScript loops are used to iterate the piece of code using for, while, do
while or for-in loops. It makes the code compact. It is mostly used in array.

There are four types of loops in JavaScript.

1. for loop
2. while loop
3. do-while loop
4. for-in loop

JOIN OUR CLASS TO SCORE 95+ CLICK HERE YOUTUBE CHANNEL


1) JavaScript For loop

The JavaScript for loop iterates the elements for the fixed number of times. It
should be used if number of iteration is known. The syntax of for loop is given
below.

for (initialization; condition; increment)


{
code to be executed
}

<script>
for (i=1; i<=5; i++)
{
document.write(i + "<br/>")
}
</script>

2) JavaScript while loop

The JavaScript while loop iterates the elements for the infinite number of
times. It should be used if number of iteration is not known. The syntax of while
loop is given below.

while (condition)
{
code to be executed
}

JOIN OUR CLASS TO SCORE 95+ CLICK HERE YOUTUBE CHANNEL


<script>
var i=11;
while (i<=15)
{
document.write(i + "<br/>");
i++;
}
</script>

3) JavaScript do while loop

The JavaScript do while loop iterates the elements for the infinite number of
times like while loop. But, code is executed at least once whether condition is
true or false. The syntax of do while loop is given below.

do{
code to be executed
}while (condition);

<script>
var i=21;
do{
document.write(i + "<br/>");
i++;
}while (i<=25);
</script>

JOIN OUR CLASS TO SCORE 95+ CLICK HERE YOUTUBE CHANNEL


Querying & Handling Properties

Alert box

An alert box is often used if you want to make sure information comes through
to the user.

When an alert box pops up, the user will have to click "OK" to proceed.

Syntax
window.alert("sometext");

The window.alert() method can be written without the window prefix.

alert("I am an alert box!");

Confirm Box

A confirm box is often used if you want the user to verify or accept something.

When a confirm box pops up, the user will have to click either "OK" or
"Cancel" to proceed.

If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box
returns false.

Syntax
window.confirm("sometext");

The window.confirm() method can be written without the window prefix.

JOIN OUR CLASS TO SCORE 95+ CLICK HERE YOUTUBE CHANNEL


if (confirm("Press a button!")) {
txt = "You pressed OK!";
} else {
txt = "You pressed Cancel!";
}

Prompt Box

A prompt box is often used if you want the user to input a value before entering
a page.

When a prompt box pops up, the user will have to click either "OK" or "Cancel"
to proceed after entering an input value.

If the user clicks "OK" the box returns the input value. If the user clicks
"Cancel" the box returns null.

Syntax
window.prompt("sometext","defaultText");

The window.prompt() method can be written without the window prefix.

let person = prompt("Please enter your name", "Harry Potter");


let text;
if (person == null || person == "") {
text = "User cancelled the prompt.";
} else {
text = "Hello " + person + "! How are you today?";
}

JOIN OUR CLASS TO SCORE 95+ CLICK HERE YOUTUBE CHANNEL

You might also like