Client Side Scripting (22519)
Practical no.1- Write simple JavaScript with HTML for arithmetic
expression evaluation and message printing.
What is JavaScript?
It is designed to add interactivity to HTML pages
It is a scripting language (a lightweight programming language)
It is an interpreted language (it executes without preliminary compilation)
Usually embedded directly into HTML pages
And, Java and JavaScript are different
What can a JavaScript Do?
JavaScript gives HTML designers a programming tool: simple syntax
JavaScript can put dynamic text into an HTML page
JavaScript can react to events
JavaScript can read and write HTML elements
JavaScript can be used to validate data
JavaScript can be used to detect the visitor’s browser
JavaScript can be used to create cookies
Store and retrieve information on the visitor’s computer
JavaScript How To
• The HTML <script> tag is used to insert a JavaScript into an HTML page
<script type=“text/javascript”> document. write(“Hello World!”)
</script>
Ending statements with a semicolon? Optional; required when you want to put multiple
statements on a single line JavaScript can be inserted within the head, the body, or use external
JavaScript file
How to handle older browsers?
<script type=“text/javascript”>
<!—
document.write(“Hello World!”)
// -->
</script>
JavaScript can "display" data in different ways:
Maharashtra State Board of Technical Education Page 1
Client Side Scripting (22519)
• • Writing into an HTML element, using innerHTML.
To access an HTML element, JavaScript can use the document.getElementById(id) method.
The id attribute defines the HTML element. The innerHTML property defines the HTML content.
• Writing into the HTML output using document.write().
• Writing into an alert box, using window.alert().
• Writing into the browser console, using console.log().
JavaScript Variables
In a programming language, variables are used to store data values. • JavaScript uses the var
keyword to declare variables.
An equal sign is used to assign values to variables.
JavaScript Arithmetic Operators
Arithmetic operators are used to perform arithmetic on numbers: Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus (Remainder)
++ Increment
-- Decrement
1.(A) Simple Java Script Program
Maharashtra State Board of Technical Education Page 2
Client Side Scripting (22519)
Alert :
Output:
Maharashtra State Board of Technical Education Page 3
Client Side Scripting (22519)
1. (B) Perform Multiplication of Two Numbers
Maharashtra State Board of Technical Education Page 4
Client Side Scripting (22519)
Taking values:
Maharashtra State Board of Technical Education Page 5
Client Side Scripting (22519)
OUTPUT :
Maharashtra State Board of Technical Education Page 6
Client Side Scripting (22519)
Practical no 2-Develop JavaScript to use decision making and
looping statements
Conditional Statements:
1. The if Statement
Use the if statement to specify a block of JavaScript code to be executed if a condition is true.
Syntax
if (condition) {
// block of code to be executed if the condition is true
}
2. The else Statement
Use the else statement to specify a block of code to be executed if the condition is false.
Syntax
if (condition) {
// block of code to be executed if the condition is true
} else {
// block of code to be executed if the condition is false
}
3. The else if Statement
Use the else if statement to specify a new condition if the first condition is false.
Syntax
if (condition1) {
// block of code to be executed if condition1 is true
} else if (condition2) {
// block of code to be executed if the condition1 is false and condition2 is true
} else {
// block of code to be executed if the condition1 is false and condition2 is false
}
4. The Switch Statement
Use the switch statement to select one of many code blocks to be executed.
Syntax switch(expression) { case x:
// code block
break;
case y:
// code block break; default:
// code block
}
Maharashtra State Board of Technical Education Page 7
Client Side Scripting (22519)
JavaScript Loops
1. for loop
Loops are handy, if you want to run the same code over and over again, each time with a different value.
Syntax:-
for (initialization condition; testing condition; increment/decrement)
{
statement(s)
}
Or for objects
for (variablename in Object)
{
statement(s)
}
2. do while:
do while loop is similar to while loop with only difference that it checks for condition after executing the
statements, and therefore is an example of Exit Control Loop.
Syntax:
do
{
statements..
}while (condition);
3. While loop
A while loop is a control flow statement that allows code to be executed repeatedly based on a given
Boolean condition. The while loop can be thought of as a repeating if statement.
Syntax :
while (boolean condition)
{
loop statements...
}
Programs:
For loop
for ….in
Maharashtra State Board of Technical Education Page 8
Client Side Scripting (22519)
do..while loop
If-else:
Maharashtra State Board of Technical Education Page 9
Client Side Scripting (22519)
Taking input from user: for loop
OUTPUT :
Output for : for…in loop
Maharashtra State Board of Technical Education Page 10
Client Side Scripting (22519)
Output for : do..while loop
Taking input from users:
Maharashtra State Board of Technical Education Page 11
Client Side Scripting (22519)
OUTPUT : for(if –else )
Maharashtra State Board of Technical Education Page 12
Client Side Scripting (22519)
taking input from user: switch case
OUTPUT : for (switch statement)
Maharashtra State Board of Technical Education Page 13
Client Side Scripting (22519)
Practical no 3- Develop JavaScript to implements Array functionalities
What is an Array?
An array is a special variable, which can hold more than one value at a time.
Creating an Array
Using an array literal is the easiest way to create a JavaScript Array. Syntax:
var array_name = [item1, item2, ...];
JavaScript Array directly (new keyword)
The syntax of creating array directly is given below: var arrayname=new Array();
Here, new keyword is used to create instance of array.
JavaScript Array Methods
find() It returns the value of the first element in the given array that satisfies the specified condition.
findIndex() It returns the index value of the first element in the given array that satisfies the specified
condition.
indexOf() It searches the specified element in the given array and returns the index of the first match.
lastIndexOf() It searches the specified element in the given array and returns the index of the last match.
pop() It removes and returns the last element of an array. push() It adds one or more elements to the
end of an array. reverse() It reverses the elements of given array.
shift() It removes and returns the first element of an array.
sort() It returns the element of the given array in a sorted order.
Maharashtra State Board of Technical Education Page 14
Client Side Scripting (22519)
Output of the aove code:
Maharashtra State Board of Technical Education Page 15
Client Side Scripting (22519)
Practical no-4 Develop JavaScript to implement functions
Function
JavaScript functions are used to perform operations. We can call JavaScript
function many times to reuse the code.
Advantage of JavaScript function
Code reusability: We can call a function several times so it save coding.
Less coding: It makes our program compact. We don’t need to write many
lines of code each time to perform a common task.
There are mainly two advantages of JavaScript functions.
JavaScript Function Syntax
function function_Name([arg1, arg2, ...argN])
{
//code to be executed
}
JavaScript Functions can have 0 or more arguments.
Example:
Maharashtra State Board of Technical Education Page 16
Client Side Scripting (22519)
Output:
JavaScript Function Arguments
We can call function by passing arguments. Let’s see the example of function that
has one argument.
Output:
Function with Return Value
We can call function that returns a value and use it in our program. Let’s see the
example of function that returns value.
Maharashtra State Board of Technical Education Page 17
Client Side Scripting (22519)
JavaScript Function Object
In JavaScript, the purpose of Function constructor is to create a new Function
object. It executes the code globally. However, if we call the constructor directly,
a function is created dynamically but in an unsecured way.
Syntax :new Function ([arg1[, arg2[, ...argn]],] functionBody)
Parameter-arg1, arg2,....., argn - It represents the argument used by function.
functionBody - It represents the function definition.
Code :
Output:
Maharashtra State Board of Technical Education Page 18
Client Side Scripting (22519)
Maharashtra State Board of Technical Education Page 19
