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
