Scribd
Upload
9 views4 pages

Web Design Practical Theory

The document provides a comprehensive guide on integrating JavaScript into HTML, covering the use of the <script> tag, conditional statements, looping statements, string methods, form events, mouse events, the Date object, and dialog boxes. It includes practical examples and syntax for various JavaScript functionalities. The content is structured into practical sections to demonstrate each concept clearly.

Uploaded by

laita nikam
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
9 views4 pages

Web Design Practical Theory

The document provides a comprehensive guide on integrating JavaScript into HTML, covering the use of the <script> tag, conditional statements, looping statements, string methods, form events, mouse events, the Date object, and dialog boxes. It includes practical examples and syntax for various JavaScript functionalities. The content is structured into practical sections to demonstrate each concept clearly.

Uploaded by

laita nikam
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/ 4

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.

You might also like