Practical 1
Adding JavaScript into an HTML Document
You can add JavaScript code in an HTML document by employing the dedicated HTML tag <script> that
wraps around JavaScript code.
The <script> tag can be placed in the <head> section of your HTML or in the <body> section,
depending on when you want the JavaScript to load.
Generally, JavaScript code can go inside of the document <head> section in order to keep them
contained and out of the main content of your HTML document.
However, if your script needs to run at a certain point within a page’s layout — like when
using document.write to generate content — you should put it at the point where it should be called,
usually within the <body> section.
Practical 2:- Write a JavaScript code to demonstrate Conditional Statements
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
}
If…Else statement
Syntax:
if (condition)
{
lines of code to be executed if the condition is true
}
else
{
lines of code to be executed if the condition is false
}
If…Else If…Else statement
Syntax:
if (condition1)
{
lines of code to be executed if condition1 is true
}
else if(condition2)
{
lines of code to be executed if condition2 is true
}else
{
lines of code to be executed if condition1 is false and condition2 is false
}
Practical 3
Write a JavaScript code to demonstrate Looping Statements
Types of Loops
There are mainly four types of loops in JavaScript.
1. for loop
2. for/in a loop (explained later)
3. while loop
4. do…while loop
for loop
Syntax:
for(statement1; statement2; statment3)
{
lines of code to be executed
}
1. The statement1 is executed first even before executing the looping code. So, this statement is
normally used to assign values to variables that will be used inside the loop.
2. The statement2 is the condition to execute the loop.
3. The statement3 is executed every time after the looping code is executed.
while loop
Syntax:
while(condition)
{
lines of code to be executed
}
The “while loop” is executed as long as the specified condition is true. Inside the while loop, you should
include the statement that will end the loop at some point of time. Otherwise, your loop will never end
and your browser may crash.
do…while loop
Syntax:
do
{
block of code to be executed
} while (condition)
The do…while loop is very similar to while loop. The only difference is that in do…while loop, the block
of code gets executed once even before checking the condition.
Practical 4 : Write JavaScript code to demonstrate different string functionsString Methods
Let's see the list of JavaScript string methods with examples.
Methods Description
charAt() It provides the char value present at the specified index.
charCodeAt() It provides the Unicode value of a character present at the specified index.
concat() It provides a combination of two or more strings.
indexOf() It provides the position of a char value present in the given string.
lastIndexOf() It provides the position of a char value present in the given string by searching
a character from the last position.
search() It searches a specified regular expression in a given string and returns its
position if a match occurs.
match() It searches a specified regular expression in a given string and returns that
regular expression if a match occurs.
replace() It replaces a given string with the specified replacement.
substr() It is used to fetch the part of the given string on the basis of the specified starting
position and length.
substring() It is used to fetch the part of the given string on the basis of the specified index.
slice() It is used to fetch the part of the given string. It allows us to assign positive as
well negative index.
toLowerCase() It converts the given string into lowercase letter.
toLocaleLowerCase() It converts the given string into lowercase letter on the basis of host?s current
locale.
toUpperCase() It converts the given string into uppercase letter.
toLocaleUpperCase() It converts the given string into uppercase letter on the basis of host?s current
locale.
toString() It provides a string representing the particular object.
valueOf() It provides the primitive value of string object.
split() It splits a string into substring array, then returns that newly created array.
trim() It trims the white space from the left and right side of the string.
Practical 5
Write JavaScript code to demonstrate onblur, onfocus, onload, onsubmit.
Form events:
Event Performed Event Handler Description
focus onfocus When the user focuses on an element
submit onsubmit When the user submits the form
blur onblur When the focus is away from a form element
change onchange When the user modifies or changes the value of a form
element
onsubmit Event Type
onsubmit is an event that occurs when you try to submit a form. You can put your form validation
against this event type.
Practical 6 Write JavaScript code to demonstrate onkeypress, onmouseover, onmouseout
Mouse events:
Event Performed Event Handler Description
click onclick When mouse click on an element
mouseover onmouseover When the cursor of the mouse comes over the
element
mouseout onmouseout When the cursor of the mouse leaves an element
mousedown onmousedown When the mouse button is pressed over the element
mouseup onmouseup When the mouse button is released over the element
mousemove onmousemove When the mouse movement takes place.
Practical 8: Create a HTML page to demonstrate Date object using JavaScript.
Date Object
The JavaScript date object can be used to get year, month and day. You can display a timer on the
webpage by the help of JavaScript date object.
You can use different Date constructors to create date object. It provides methods to get and set day,
month, year, hour, minute and seconds.
Constructor
You can use 4 variant of Date constructor to create date object.
1. Date()
2. Date(milliseconds)
3. Date(dateString)
4. Date(year, month, day, hours, minutes, seconds, milliseconds)
Practical 9: Write JavaScript code to demonstrate use of Dialog Boxes.
Alert Dialog box
It is used to provide a warning message to users. It is one of the most widely used dialog box in
JavaScript. It has only one 'OK' button to continue and select the next task.
Confirmation Dialog box
It is widely used for taking the opinion from the user on the specific option. It includes two buttons,
which are OK and Cancel. As an example, suppose a user is required to delete some data, then the
page can confirm it by using the confirmation box that whether he/she wants to delete it or not.
Prompt Dialog box
The prompt dialog box is used when it is required to pop-up a text box for getting the user input. Thus,
it enables interaction with the user.
