Scribd
Upload
7 views29 pages

Unit IV - WT

Unit IV of the document covers JavaScript, detailing how to add scripts to HTML pages, including embedding, inline, and external methods. It explains JavaScript variables, data types, operators, and control structures, emphasizing their roles in web development. The document provides examples and descriptions of various JavaScript functionalities, including conditional and looping statements.

Uploaded by

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

Unit IV - WT

Unit IV of the document covers JavaScript, detailing how to add scripts to HTML pages, including embedding, inline, and external methods. It explains JavaScript variables, data types, operators, and control structures, emphasizing their roles in web development. The document provides examples and descriptions of various JavaScript functionalities, including conditional and looping statements.

Uploaded by

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

23UCSCC53 – WEB TECHNOLOGY - UNIT 4

Unit IV: Java Script


How to Add Script to Your Pages, Variables and Data Types – Statements and
Operators, Control Structures, Conditional Statements, Loop Statements –
Functions - Message box, Dialog Boxes, Alert Boxes, Confirm Boxes, Prompt
Boxes.

How to add JavaScript to html


JavaScript, also known as JS, is one of the scripting (client-side scripting)
languages, that is usually used in web development to create modern and
interactive web-pages. The term "script" is used to refer to the languages that are
not standalone in nature and here it refers to JavaScript which run on the client
machine.
In other words, we can say that the term scripting is used for languages that require
the support of another language to get executed. For example, JavaScript programs
cannot get executed without the help of HTML or without integrated into HTML
code.
JavaScript is used in several ways in web pages such as generate warning
messages, build image galleries, DOM manipulation, form validation, and more.
Adding JavaScript to HTML Pages
There are following three ways in which users can add JavaScript to HTML pages.
1. Embedding code
2. Inline code
3. External file
We will see three of them step by step
I. Embedding code:-
To add the JavaScript code into the HTML pages, we can use
the <script>.....</script> tag of the HTML that wrap around JavaScript code inside
the HTML program. Users can also define JavaScript code in the <body> tag (or
we can say body section) or <head> tag because it completely depends on the
structure of the web page that the users use.
We can understand this more clearly with the help of an example, how to add
JavaScript to html
Example
1. <!DOCTYPE html >
2. <html>
3. <head>
4. <title> page title</title>
5. <script>
6. document.write("Welcome to Javatpoint");

DEPARTMENT OF COMPUTERSCIENCE-RASC/R.SUGANYA, AP Page 1


23UCSCC53 – WEB TECHNOLOGY - UNIT 4

7. </script>
8. </head>
9. <body>
10.<p>Inthis example we saw how to add JavaScript in the head section </p>
11.</body>
12.</html>
Output:

We can also define the JavaScript code in the <body> tags or body section.
Let's understand through an example.
1. <!DOCTYPE html >
2. <html>
3. <head>
4. <title> page title</title>
5. </head>
6. <body>
7. <script>
8. document.write("Welcome to Javatpoint");
9. </script>
10.<p> In this example we saw how to add JavaScript in the body section </p>
11.</body>
12.</html>
Output

DEPARTMENT OF COMPUTERSCIENCE-RASC/R.SUGANYA, AP Page 2


23UCSCC53 – WEB TECHNOLOGY - UNIT 4

II. Inline code:-


Generally, this method is used when we have to call a function in the HTML event
attributes. There are many cases (or events) in which we have to add JavaScript
code directly eg., OnMover event, OnClick, etc.
Let's see with the help of an example, how we can add JavaScript directly in the
html without using the <script>.... </script> tag.
Let's look at the example.
1. <!DOCTYPE html >
2. <html>
3. <head>
4. <title> page title</title>
5. </head>
6. <body>
7. <p>
8. <a href="#" onClick="alert('Welcome !');">Click Me</a>
9. </p>
10.<p> in this example we saw how to use inline JavaScript or directly in an HTML ta
g. </p>
11.</body>
12.</html>
Output

DEPARTMENT OF COMPUTERSCIENCE-RASC/R.SUGANYA, AP Page 3


23UCSCC53 – WEB TECHNOLOGY - UNIT 4

III. External file:-


We can also create a separate file to hold the code of JavaScript with the (.js)
extension and later incorporate/include it into our HTML document using
the src attribute of the <script> tag. It becomes very helpful if we want to use the
same code in multiple HTML documents. It also saves us from the task of writing
the same code over and over again and makes it easier to maintain web pages.
In this example, we will see how we can include an external JavaScript file in an
HTML document.
Let's understand through a simple example.
1. <html>
2. <head>
3. <meta charset="utf-8">
4. <title>Including a External JavaScript File</title>
5. </head>
6. <body>
7. <form>
8. <input type="button" value="Result" onclick="display()"/>
9. </form>
10.<script src="hello.js">
11.</script>
12.</body>
13.</html>
Now let's create separate JavaScript file
Hello.js
1. function display() {
2. alert("Hello World!");
3. }
Output

DEPARTMENT OF COMPUTERSCIENCE-RASC/R.SUGANYA, AP Page 4


23UCSCC53 – WEB TECHNOLOGY - UNIT 4

Both of the above programs are saved in the same folder, but you can also store
JavaScript code in a separate folder, all just you need to provide the address/path of
the (.js) file in the src attribute of <script> tag.

JavaScript Variable

1. JavaScript variable
2. JavaScript Local variable
3. JavaScript Global variable

A JavaScript variable is simply a name of storage location. There are two types
of variables in JavaScript : local variable and global variable.
There are some rules while declaring a JavaScript variable (also known as
identifiers).

1. Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ )


sign.
2. After first letter we can use digits (0 to 9), for example value1.
3. JavaScript variables are case sensitive, for example x and X are different
variables.

Correct JavaScript variables

1. var x = 10;
2. var _value="sonoo";
DEPARTMENT OF COMPUTERSCIENCE-RASC/R.SUGANYA, AP Page 5
23UCSCC53 – WEB TECHNOLOGY - UNIT 4

Incorrect JavaScript variables

1. var 123=30;
2. var *aa=320;

Example of JavaScript variable

Let’s see a simple example of JavaScript variable.

1. <script>
2. var x = 10;
3. var y = 20;
4. var z=x+y;
5. document.write(z);
6. </script>
Output of the above example
30

JavaScript local variable

A JavaScript local variable is declared inside block or function. It is accessible


within the function or block only. For example:

1. <script>
2. function abc(){
3. var x=10;//local variable
4. }
5. </script>
Or,

1. <script>
2. If(10<13){
3. var y=20;//JavaScript local variable
4. }
5. </script>

JavaScript global variable

DEPARTMENT OF COMPUTERSCIENCE-RASC/R.SUGANYA, AP Page 6


23UCSCC53 – WEB TECHNOLOGY - UNIT 4

A JavaScript global variable is accessible from any function. A variable i.e.


declared outside the function or declared with window object is known as global
variable. For example:

1. <script>
2. var data=200;//gloabal variable
3. function a(){
4. document.writeln(data);
5. }
6. function b(){
7. document.writeln(data);
8. }
9. a();//calling JavaScript function
10.b();
11.</script>
200 200
Javascript Data Types
JavaScript provides different data types to hold different types of values. There
are two types of data types in JavaScript.
1. Primitive data type
2. Non-primitive (reference) data type
JavaScript is a dynamic type language, means you don't need to specify type of
the variable because it is dynamically used by JavaScript engine. You need to
use var here to specify the data type. It can hold any type of values such as
numbers, strings etc. For example:
1. var a=40;//holding number
2. var b="Rahul";//holding string
JavaScript primitive data types
There are five types of primitive data types in JavaScript. They are as follows:

Data Type Description

represents sequence of characters


String
e.g. "hello"

Number
represents numeric values e.g. 100

DEPARTMENT OF COMPUTERSCIENCE-RASC/R.SUGANYA, AP Page 7


23UCSCC53 – WEB TECHNOLOGY - UNIT 4

represents boolean value either false


Boolean
or true

Undefined represents undefined value

Null represents null i.e. no value at all

JavaScript non-primitive data types


The non-primitive data types are as follows:

Data Type Description

Object represents instance through which we


can access members

Array represents group of similar values

RegExp represents regular expression

JavaScript Operators
JavaScript operators are symbols that are used to perform operations on operands.
For example:
1. var sum=10+20;
Here, + is the arithmetic operator and = is the assignment operator.
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

JavaScript Arithmetic Operators


Arithmetic operators are used to perform arithmetic operations on the operands.
The following operators are known as JavaScript arithmetic operators.

Operator Description Example

DEPARTMENT OF COMPUTERSCIENCE-RASC/R.SUGANYA, AP Page 8


23UCSCC53 – WEB TECHNOLOGY - UNIT 4

+ Addition 10+20 = 30

- Subtraction 20-10 = 10

* Multiplication 10*20 = 200

/ Division 20/10 = 2

% Modulus (Remainder) 20%10 = 0

var a=10; a++;


++ Increment
Now a = 11

var a=10; a--; Now


-- Decrement
a=9

JavaScript Comparison Operators


The JavaScript comparison operator compares the two operands. The comparison
operators are as follows:

Operator Description Example

DEPARTMENT OF COMPUTERSCIENCE-RASC/R.SUGANYA, AP Page 9


23UCSCC53 – WEB TECHNOLOGY - UNIT 4

== Is equal to 10==20 = false

Identical (equal and of same


=== 10==20 = false
type)

!= Not equal to 10!=20 = true

!== Not Identical 20!==20 = false

> Greater than 20>10 = true

>= Greater than or equal to 20>=10 = true

< Less than 20<10 = false

<= Less than or equal to 20<=10 = false

JavaScript Bitwise Operators


The bitwise operators perform bitwise operations on operands. The bitwise
operators are as follows:

Operator Description Example

(10==20 & 20==33) =


& Bitwise AND
false

| Bitwise OR (10==20 | 20==33) = false

^ Bitwise XOR (10==20 ^ 20==33) =

DEPARTMENT OF COMPUTERSCIENCE-RASC/R.SUGANYA, AP Page 10


23UCSCC53 – WEB TECHNOLOGY - UNIT 4

false

~ Bitwise NOT
(~10) = -10

<< Bitwise Left Shift (10<<2) = 40

>> Bitwise Right Shift (10>>2) = 2

Bitwise Right Shift with


>>> (10>>>2) = 2
Zero

JavaScript Logical Operators


The following operators are known as JavaScript logical operators.

Operator Description Example

(10==20 &&
&& Logical AND
20==33) = false

|| (10==20 ||
Logical OR
20==33) = false

! Logical Not !(10==20) = true

JavaScript Assignment Operators


The following operators are known as JavaScript assignment operators.

Operator Description Example

= Assign
10+10 = 20

var a=10; a+=20;


+= Add and assign
Now a = 30

DEPARTMENT OF COMPUTERSCIENCE-RASC/R.SUGANYA, AP Page 11


23UCSCC53 – WEB TECHNOLOGY - UNIT 4

var a=20; a-=10;


-= Subtract and assign
Now a = 10

var a=10; a*=20;


*= Multiply and assign
Now a = 200

var a=10; a/=2;


/= Divide and assign
Now a = 5

var a=10; a%=2;


%= Modulus and assign
Now a = 0

JavaScript Special Operators


The following operators are known as JavaScript special operators.

Operator Description

Conditional Operator returns value based on the


(?:)
condition. It is like if-else.

Comma Operator allows multiple expressions to be


,
evaluated as single statement.

delete Delete Operator deletes a property from the object.

in In Operator checks if object has the given property

instanceof checks if the object is an instance of given type

DEPARTMENT OF COMPUTERSCIENCE-RASC/R.SUGANYA, AP Page 12


23UCSCC53 – WEB TECHNOLOGY - UNIT 4

new creates an instance (object)

typeof checks the type of object.

void it discards the expression's return value.

checks what is returned in a generator by the


yield
generator's iterator

CONTROL STRUCTURES
Control structures are programmatic constructs that determine how your code
executes. They provide mechanisms for making decisions, repeating code
blocks, and changing the flow of execution based on specific conditions. By
effectively utilizing these structures, you can write code that is more responsive,
adaptable, and efficient.

JavaScript offers a rich set of control structures, categorized into three primary
types:
 Conditional Statements: These structures allow your code to make
decisions based on conditions. They execute specific code blocks only when
the defined conditions are met.
 Looping Statements: These structures enable you to repeat a block of code
a specific number of times or until a particular condition is met. This is
crucial for iterating through data collections and performing repetitive tasks.
 Jumping Statements: These structures alter the normal flow of execution
within a loop or conditional statement. They provide mechanisms for exiting
loops before the loop stops or skipping iterations.
Understanding how these structures work individually and how they can be
combined effectively is key to writing robust and well-structured JavaScript code.

JavaScript If-else

DEPARTMENT OF COMPUTERSCIENCE-RASC/R.SUGANYA, AP Page 13


23UCSCC53 – WEB TECHNOLOGY - UNIT 4

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.

1. if(expression){
2. //content to be evaluated
3. }

Flowchart of JavaScript If statement

DEPARTMENT OF COMPUTERSCIENCE-RASC/R.SUGANYA, AP Page 14


23UCSCC53 – WEB TECHNOLOGY - UNIT 4

Let’s see the simple example of if statement in javascript.

1. <script>
2. var a=20;
3. if(a>10){
4. document.write("value of a is greater than 10");
5. }
6. </script>
Output of the above example
value of a is greater than 10

JavaScript If...else Statement

It evaluates the content whether condition is true of false. The syntax of JavaScript
if-else statement is given below.

1. if(expression){
2. //content to be evaluated if condition is true
3. }

DEPARTMENT OF COMPUTERSCIENCE-RASC/R.SUGANYA, AP Page 15


23UCSCC53 – WEB TECHNOLOGY - UNIT 4

4. else{
5. //content to be evaluated if condition is false
6. }

Flowchart of JavaScript If...else statement

Let’s see the example of if-else statement in JavaScript to find out the even or odd
number.

1. <script>
2. var a=20;
3. if(a%2==0){
4. document.write("a is even number");
5. }
6. else{
7. document.write("a is odd number");
8. }
9. </script>
Output of the above example
a is even number

JavaScript If...else if statement

DEPARTMENT OF COMPUTERSCIENCE-RASC/R.SUGANYA, AP Page 16


23UCSCC53 – WEB TECHNOLOGY - UNIT 4

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

1. if(expression1){
2. //content to be evaluated if expression1 is true
3. }
4. else if(expression2){
5. //content to be evaluated if expression2 is true
6. }
7. else if(expression3){
8. //content to be evaluated if expression3 is true
9. }
10.else{
11.//content to be evaluated if no expression is true
12.}
Let’s see the simple example of if else if statement in javascript.

1. <script>
2. var a=20;
3. if(a==10){
4. document.write("a is equal to 10");
5. }
6. else if(a==15){
7. document.write("a is equal to 15");
8. }
9. else if(a==20){
10.document.write("a is equal to 20");
11.}
12.else{
13.document.write("a is not equal to 10, 15 or 20");
14.}
15.</script>
Output of the above example
a is equal to 20

JavaScript Switch

DEPARTMENT OF COMPUTERSCIENCE-RASC/R.SUGANYA, AP Page 17


23UCSCC53 – WEB TECHNOLOGY - UNIT 4

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.
The signature of JavaScript switch statement is given below.

1. switch(expression){
2. case value1:
3. code to be executed;
4. break;
5. case value2:
6. code to be executed;
7. break;
8. ......
9.
10.default:
11. code to be executed if above values are not matched;
12.}
Let’s see the simple example of switch statement in javascript.

1. <script>
2. var grade='B';
3. var result;
4. switch(grade){
5. case 'A':
6. result="A Grade";
7. break;
8. case 'B':
9. result="B Grade";
10.break;
11.case 'C':
12.result="C Grade";
13.break;
14.default:
15.result="No Grade";
16.}
17.document.write(result);
18.</script>

DEPARTMENT OF COMPUTERSCIENCE-RASC/R.SUGANYA, AP Page 18


23UCSCC53 – WEB TECHNOLOGY - UNIT 4

Output of the above example


B Grade
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

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.
1. for (initialization; condition; increment)
2. {
3. code to be executed
4. }
Let’s see the simple example of for loop in javascript.
1. <script>
2. for (i=1; i<=5; i++)
3. {
4. document.write(i + "<br/>")
5. }
6. </script>
Output:
1
2
3
4
5
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.

1. while (condition)
2. {
DEPARTMENT OF COMPUTERSCIENCE-RASC/R.SUGANYA, AP Page 19
23UCSCC53 – WEB TECHNOLOGY - UNIT 4

3. code to be executed
4. }
Let’s see the simple example of while loop in javascript.
1. <script>
2. var i=11;
3. while (i<=15)
4. {
5. document.write(i + "<br/>");
6. i++;
7. }
8. </script>
Output:
11
12
13
14
15
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.
1. do{
2. code to be executed
3. }while (condition);
Let’s see the simple example of do while loop in javascript.
1. <script>
2. var i=21;
3. do{
4. document.write(i + "<br/>");
5. i++;
6. }while (i<=25);
7. </script>
Output:
21
22
23
24
25

JavaScript Functions

DEPARTMENT OF COMPUTERSCIENCE-RASC/R.SUGANYA, AP Page 20


23UCSCC53 – WEB TECHNOLOGY - UNIT 4

JavaScript functions are used to perform operations. We can call JavaScript


function many times to reuse the code.

Advantage of JavaScript function


There are mainly two advantages of JavaScript functions.

1. Code reusability: We can call a function several times so it save coding.


2. Less coding: It makes our program compact. We don’t need to write many
lines of code each time to perform a common task.

JavaScript Function Syntax

The syntax of declaring function is given below.

1. function functionName([arg1, arg2, ...argN]){


2. //code to be executed
3. }
JavaScript Functions can have 0 or more arguments.

JavaScript Function Example

Let’s see the simple example of function in JavaScript that does not has arguments.

1. <script>
2. function msg(){
3. alert("hello! this is message");
4. }
5. </script>
6. <input type="button" onclick="msg()" value="call function"/>
Output of the above example

JavaScript Function Arguments

We can call function by passing arguments. Let’s see the example of function that
has one argument.

1. <script>

DEPARTMENT OF COMPUTERSCIENCE-RASC/R.SUGANYA, AP Page 21


23UCSCC53 – WEB TECHNOLOGY - UNIT 4

2. function getcube(number){
3. alert(number*number*number);
4. }
5. </script>
6. <form>
7. <input type="button" value="click" onclick="getcube(4)"/>
8. </form>
Output of the above example

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.

1. <script>
2. function getInfo(){
3. return "hello javatpoint! How r u?";
4. }
5. </script>
6. <script>
7. document.write(getInfo());
8. </script>
Output of the above example
hello javatpoint! How r u?

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

1. new Function ([arg1[, arg2[, ....argn]],] functionBody)

Parameter

arg1, arg2, .... , argn - It represents the argument used by function.

DEPARTMENT OF COMPUTERSCIENCE-RASC/R.SUGANYA, AP Page 22


23UCSCC53 – WEB TECHNOLOGY - UNIT 4

functionBody - It represents the function definition.

JavaScript Function Methods

Let's see function methods with description.

Method Description

apply() It is used to call a function contains this value and


a single array of arguments.

bind() It is used to create a new function.

It is used to call a function contains this value and


call()
an argument list.

toString() It returns the result in a form of a string.

JavaScript Function Object Examples

Example 1

Let's see an example to display the sum of given numbers.

1. <script>
2. var add=new Function("num1","num2","return num1+num2");
3. document.writeln(add(2,5));
4. </script>
Output:

Example 2

DEPARTMENT OF COMPUTERSCIENCE-RASC/R.SUGANYA, AP Page 23


23UCSCC53 – WEB TECHNOLOGY - UNIT 4

Let's see an example to display the power of provided value.

1. <script>
2. var pow=new Function("num1","num2","return Math.pow(num1,num2)");
3. document.writeln(pow(2,3));
4. </script>
Output:

JavaScript Message Boxes: alert(), confirm(), prompt()


JavaScript provides built-in global functions to display popup message boxes for
different purposes.
 alert(message): Display a popup box with the specified message with the OK
button.
 confirm(message): Display a popup box with the specified message with OK
and Cancel buttons.
 prompt(message, defaultValue): Display a popup box to take the user's input
with the OK and Cancel buttons.
Dialog boxes
There are three types of dialog boxes supported in JavaScript that are alert,
confirm, and prompt. These dialog boxes can be used to perform specific tasks
such as raise an alert, to get confirmation of an event or an input, and to get input
from the user.
Let's discuss each dialog box.
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.
We can understand it by an example like suppose a textfield is mandatory to be
filled out, but the user has not given any input value to that text field, then we can
display a warning message by using the alert box.
Syntax
1. alert(message);
Example
Let us see the demonstration of an alert dialog box by using the following example.
1. <html>

DEPARTMENT OF COMPUTERSCIENCE-RASC/R.SUGANYA, AP Page 24


23UCSCC53 – WEB TECHNOLOGY - UNIT 4

2.
3. <head>
4. <script type="text/javascript">
5. function show() {
6. alert("It is an Alert dialog box");
7. }
8. </script>
9. </head>
10.
11.<body>
12. <center>
13. <h1>Hello World :) :)</h1>
14. <h2>Welcome to javaTpoint</h2>
15. <p>Click the following button </p>
16. <input type="button" value="Click Me" onclick="show();" />
17. </center>
18.</body>
19.
20.</html>
Output
After the successful execution of the above code, you will get the following output.

After clicking on the Click Me button, you will get the following output:

DEPARTMENT OF COMPUTERSCIENCE-RASC/R.SUGANYA, AP Page 25


23UCSCC53 – WEB TECHNOLOGY - UNIT 4

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.
If a user clicks on the OK button, then the method confirm() returns true. But if
the user clicks on the cancel button, then the confirm() method returns false.
Syntax
1. confirm(message);
Example
Let us understand the demonstration of this dialog box by using the following
example.
1. <html>
2.
3. <head>
4. <script type="text/javascript">
5. function show() {
6. var con = confirm ("It is a Confirm dialog box");
7. if(con == true) {
8. document.write ("User Want to continue");
9. }
10. else {
11. document.write ("User does not want to continue");
12. }
13. }
14. </script>
15.</head>
16.
17.<body>
DEPARTMENT OF COMPUTERSCIENCE-RASC/R.SUGANYA, AP Page 26
23UCSCC53 – WEB TECHNOLOGY - UNIT 4

18. <center>
19. <h1>Hello World :) :)</h1>
20. <h2>Welcome to javaTpoint</h2>
21. <p>Click the following button </p>
22. <input type="button" value="Click Me" onclick="show();" />
23. </center>
24.</body>
25.
26.</html>
Output
After the successful execution of the above code, you will get the following output.

When you click on the given button, then you will get the following output:

After clicking the OK button, you will get:

On clicking the Cancel button, you will get:

Prompt Dialog box

DEPARTMENT OF COMPUTERSCIENCE-RASC/R.SUGANYA, AP Page 27


23UCSCC53 – WEB TECHNOLOGY - UNIT 4

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.
The prompt dialog box also has two buttons, which are OK and Cancel. The user
needs to provide input in the textbox and then click OK. When a user clicks on the
OK button, then the dialog box reads that value and returns it to the user. But on
clicking the Cancel button, prompt() method returns null.
Syntax
1. prompt(message, default_string);
Let us understand the prompt dialog box by using the following illustration.
Example
1. <html>
2.
3. <head>
4. <script type="text/javascript">
5. function show() {
6. var value = prompt("Enter your Name : ", "Enter your name");
7. document.write("Your Name is : " + value);
8. }
9. </script>
10.</head>
11.
12.<body>
13. <center>
14. <h1>Hello World :) :)</h1>
15. <h2>Welcome to javaTpoint</h2>
16. <p>Click the following button </p>
17. <input type="button" value="Click Me" onclick="show();" />
18. </center>
19.</body>
20.
21.</html>
Output
After executing the above code successfully, you will get the following output.

DEPARTMENT OF COMPUTERSCIENCE-RASC/R.SUGANYA, AP Page 28


23UCSCC53 – WEB TECHNOLOGY - UNIT 4

When you click on the Click Me button, you will get the following output:

Enter your name and click OK button, you will get:

DEPARTMENT OF COMPUTERSCIENCE-RASC/R.SUGANYA, AP Page 29

You might also like