PK-WT-UNIT - 04 - JavaScript Introduction

21CSCU0614
Web Technologies
UNIT III – JavaScript

Dr.P.Kalavathi
Professor
DCSA, GRI
Dr.P.Kalavathi, Associate Professor, 1

DCSA, GRI
JavaScript
• A type of programming language allows user
interaction (Dynamic Web Pages)
• JavaScript gives HTML designers a
programming tool
• JavaScript can put dynamic text into an HTML
page
Ex: document.write("<h1>" + name + "</h1>")
• Used for Validating user input
• JavaScript can react to events - A JavaScript can
be set to execute when something happens,
like when a page has finished loading or when
a user clicks on an HTML element
• JavaScript can read and write HTML elements -
A JavaScript can read and change the content
of an HTML element
• Enhances functionality and appearance
• Client-side scripting
• Makes pages more dynamic and interactive
• Foundation for complex server-side scripting
• How Does It Work?
– Embedded within HTML page
• View source
– Executes on client
• Fast, no connection needed once loaded
– Simple programming statements combined with
HTML tags
– Interpreted (not compiled)
• No special tools required
• Inline scripting
– Written in the <body> of a document
– <script> tag
• Indicate that the text is part of a script
• type attribute
– Specifies the type of file and the scripting language use
• writeln method
– Write a line in the document
• Escape character ( \ )
– Indicates “special” character is used in the string
• alert method
– Dialog box
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 
6 
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>A First Program in JavaScript</title>
11
12 welcome.html
<script type = "text/javascript">
HTML comment tags will
(1 of 1) result byin skipping
13 
not support scripting
17 </script>
18
19 </head><body></body>
20 </html>
4
5 
6 
7
9 <head>
10 <title>Printing a Line with Multiple Statements</title>
11
12
13
welcome2.html
 the string that is actually written
18 </script> by JavaScript
19
21 </html>
4
6 
7
9 <head><title>Printing Multiple Lines</title>
10
11
12
13
 1 of 1
"<br />Programming!</h1>" ); in a browser is determined by an
html <br /> element
</script>
17
19 </html>
4
6 
7
9 <head><title>Printing Multiple Lines in a Dialog Box</title>
welcome4.html
10
11 <script type = "text/javascript">
12 
15 </script>
16
17 </head>
18
19 <body>
20 <p>Click Refresh (or Reload) to run this script again.</p>
21 </body>
22 </html>
JavaScript Statements
<html>
<head><title>My Page</title></head>
<body>
<script language="JavaScript">
document.write('This is my first 
JavaScript Page');
Note the symbol for

</script> line continuation
</body>
</html>
<html>
<body>
<script language=“JavaScript">
document.write('<h1>This is my first 
JavaScript Page</h1>');
</script> HTML written

inside JavaScript
</body>
</html>
<html>
<body>
<p>
<a href="myfile.html">My Page</a>
<br />
<a href="myfile.html"
onMouseover="window.alert('Hello');">
My Page</A>
</p> An Event JavaScript written
</body> inside HTML
</html>
Example Statements
<script language="JavaScript">
window.prompt('Enter your
name:','');
</script>
Another event
Note quotes: " and '
<form>
<input type="button" Value="Press"
onClick="window.alert('Hello');">
</form>
HTML Forms and JavaScript
• JavaScript is very good at processing user
input in the web browser
• HTML <form> elements receive input
• Forms and form elements have unique names
– Each unique element can be identified
– Uses JavaScript Document Object Model (DOM)
Naming Form Elements in HTML
<form name="addressform">
Name: <input name="yourname"><br />
Phone: <input name="phone"><br />
Email: <input name="email"><br />
</form>
Forms and JavaScript
document.formname.elementname.value
Thus:
document.addressform.yourname.value
document.addressform.phone.value
document.addressform.email.value
Using Form Data
Personalising an alert box
<form name="alertform">
Enter your name:
<input type="text" name="yourname">
<input type="button" value= "Go"
onClick="window.alert('Hello ' + 
document.alertform.yourname.value);">
</form>
• JavaScript statements are "commands" to the
browser.
• The purpose of the statements is to tell the
browser what to do.
• Semicolon ;
– Semicolon separates JavaScript statements.
– Normally we add a semicolon at the end of each
executable statement.
– Using semicolons also makes it possible to write many
statements on one line.
• JavaScript variables
– are "containers" for storing information:
– Example
var x=5;
var y=6;
var z=x+y;
• Naming Rules for Variables

– Variable names must begin with a letter
– Variable names can also begin with $ and _ (but
we will not use it)
– Variable names are case sensitive (y and Y are
different variables)
JavaScript Data Types
• In JavaScript there are 5 different data types
that can contain values:
– string
– number
– Boolean
– array
– Object
• JavaScript Numbers
– JavaScript has only one type of numbers.
– Numbers can be written with, or without
decimals:
– Example
var x1 = 34.00; // Written with decimals
var x2 = 34; // Written without decimals
– Extra large or extra small numbers can be written
with scientific (exponential) notation:
– Example
var y = 123e5; // 12300000
var z = 123e-5; // 0.00123
• JavaScript Strings
– A string is a variable which stores a series of
characters like "John Doe".
– A string can be any text inside quotes. You can use
single or double quotes:
– Example
var carname="Volvo XC60";
var carname='Volvo XC60';
– You can use quotes inside a string, as long as they
don't match the quotes surrounding the string:
– Example
var answer="It's alright";
var answer="He is called 'Johnny'";
var answer= “He is called "Johnny”
• JavaScript Booleans
– Booleans can only have two values: true or false.
– Example
var x = true;
var y = false;
– Booleans are often used in conditional testing.
• JavaScript Arrays
– JavaScript arrays are written with square brackets.
– Array items are separated by commas.
– The following code declares (creates) an array
called cars, containing three items (car names):
– Example
var cars = ["Saab", "Volvo", "BMW"];
– Array indexes are zero-based, which means the
first item is [0], second is [1], and so on.
• JavaScript Objects
– JavaScript objects are written with curly braces.
– Object properties are written as name:value pairs,
separated by commas.
– Example
var person = {firstName:"John", lastName:"Doe", age:50,
eyeColor:"blue"};
– The object (person) in the example above has 4

properties: firstName, lastName, age, and
eyeColor.
JavaScript operators
– Arithmetic operators
– Equality operators
– Relational operators
– Assignment operator
Arithmetic Operators
JavaScript Arithmetic Algebraic JavaScript
operation operator expression expression
Addition + f+7 f + 7
Subtraction - p–c p - c
* x-- b * m
Multiplication bm y
Division / x / y or or x y x / y
Remainder % r mod s r % s
Operator(s) Operation(s) Order of evaluation (precedence)

*, / or % Multiplication Evaluated second. If there are several such
Division operations, they are evaluated from left to right.
Modulus
+ or - Addition Evaluated last. If there are several such operations,
Subtraction they are evaluated from left to right.
Relational Operators
Standard algebraic equality JavaScript equality or Sample JavaScript Meaning of
operator or relational operator relational operator condition JavaScript condition
Equality operators
= == x == y x is equal to y
 != x != y x is not equal to y
Relational operators
> > x > y x is greater than y
< < x < y x is less than y
>= x >= y x is greater than or
 equal to y
<= x <= y x is less than or equal to
£ y
Precedence and Associativity of the operators
Operators Associativity Type

* / % left to right multiplicative
+ - left to right additive
< <= > >= left to right relational
== != left to right equality
= right to left assignment
.
Escape Sequence Characters
Escape sequence Description
\n Newline. Position the screen cursor at the beginning of the next line.
\t Horizontal tab. Move the screen cursor to the next tab stop.
\r Carriage return. Position the screen cursor to the beginning of the
current line; do not advance to the next line. Any characters output
after the carriage return overwrite the characters previously output on
that line.
\\ Backslash. Used to represent a backslash character in a string.
\" Double quote. Used to represent a double quote character in a string
contained in double quotes. For example,
window.alert( "\"in quotes\"" );
displays "in quotes" in an alert dialog.
\' Single quote. Used to represent a single quote character in a string. For
example,
window.alert( '\'in quotes\'' );
displays 'in quotes' in an alert dialog.

PK-WT-UNIT - 04 - JavaScript Introduction

Uploaded by

PK-WT-UNIT - 04 - JavaScript Introduction

Uploaded by

21CSCU0614

UNIT III – JavaScript

Dr.P.Kalavathi, Associate Professor, 1

document.writeln( "<h1>Welcome to<br />JavaScript" + New line of the html document

Note the symbol for

</script> HTML written

• Naming Rules for Variables

– The object (person) in the example above has 4

Operator(s) Operation(s) Order of evaluation (precedence)

Operators Associativity Type

You might also like