Web Designing Presentation 5 PDF

BSc IT
Web Designing
Semester - III
Copyright @ Amity University

Contents
• Introduction to Java Script

• Syntax and Flow Control
• Data Types
• Making Decisions
• Working with if Statements

Contents
• Comparing Strings
• Loops
• for Loops
• Events And Events Handling

Contents
• JavaScript Dialog Boxes

• Forms and Functions
• Introduction to XML
• XML Basics
• XML Structure
• Developing a DTD from XML code

Introduction to Java Script
• JavaScript is an object-based scripting language
• Invented by Netscape in 1995.
•JavaScript is interpreted at the browser machine rather

than compiling on a specific machine.
•JavaScript is mainly based on the HTML
•JavaScript is most popular for writing scripts for client-side

applications over other script languages.

Cont…
• Similar syntax to C, C++, and Java

• Interpreted, scripting language, not a full
programming language
• Platform-independent.
• Not really related to Java.
• Both client-side (browser-based)
JavaScript and server-side JavaScript.
Most focus is on the client.
Cont…
• For Example JavaScript must be used in

creating applications like forms in which
you need to check whether the applicant
had entered valid data or not for further
processing of data.

Java Script Applications
• We can create client-side forms with

validations of form’s fields
• We can create many interactive games
and multimedia applications
• We can create digital clocks which shows
client-side time rather server-side time.

Starting Java Script
• To begin JavaScript we need
– Text Editor
– Browser
– To run JavaScript we need a compatible
browser like Netscape Navigator 2 .0 and up

Object Oriented programming
• OOP is a programming technique

designed to simplify complicated
programming concepts.
• Object oriented programming revolves
around the objects.
• Object oriented programming consists of
objects ,Methods and Properties

Objects ,Methods and Properties
• Objects
– An object is basically collection of properties
and methods with some characteristics with
which we can read, write ,modify and interact.
– E.g. Web page document is an object
– Each object has certain properties about the
object for e.g. the background color of
document object is written as document
.bgcolor
Methods
• Methods are collection of actions that an

object can do.
• Different object performs different
activities.
• For e.g. We can open new document with
the help of a method called
document.open()
• We can pass and access the data through
these methods
Functions
JavaScript instructions are usually grouped

together in a function:
• <script language=“javascript”>
• function myFunction(parameters) {
• // some logical grouping of code
• }
• </script>
• Like a method, procedure, or subroutine.
• Functions are called by events
Example
• <html>
• <head>
• function funct() {
• // code
• }
• </script>
• </head>
• <body>
• <input type=button onClick=“funct()”>
• </body>
• </html>
Events
• JavaScript is event-driven.
• Something has to happen before the
JavaScript is executed.
• JavaScript defines various events:
• onClick – link or image is clicked
• onSubmit – a form is submitted
• onMouseOver – the mouse cursor moves
over it
• onChange – a form control is changed
• onLoad – something gets loaded in the
browser
• Events are specified in the HTML code.

Events
• Many more events are:

– OnMouseClick
– OnMouseOver
– OnFocus
– OnBlur
– OnLoad
– OnUnload

First program
• One way to put JavaScript in a page is

with the <SCRIPT> tag
• Start tag with <SCRIPT
LANGUAGE="javascript">
• End tag with </SCRIPT>
• Put JavaScript between the tags.

Example
• <SCRIPT LANGUAGE="javascript">
document.write("Hello, world")
</SCRIPT>
Output:
• Hello, world

Comment Statements
• Comment statements are used to prevent

the browser from executing certain parts of
code that you designate as non-code.
• The single line comment is just two
slashes (//) and the multiple line comment
starts with (/*) and ends with (*/). We will
talk about comments in greater depth in a
later lesson.
Single Line comments
• <script type="text/javascript">

</script>

Output
• I have comments in my JavaScript code!

Multi- Line comments
• 
</script>
Output
• I have multi-line comments!

JavaScript Data Types
• JavaScript has only three primitive

data types
strings : "foo" 'howdy do' "I

said 'hi'." ""
numbers : 12 3.14159 1.5E6
booleans : true false

Example
• <html>
• 
• <head>
• <title>Data Types and Variables</title>
• </head>
• <body>
• x = 1024;
• document.write("<p>x = " + x + "</p>");
• x = “Peter";
• document.write("<p>x = " + x + "</p>");
• </script>
• </body>
• </html>
Variables
• A variable is a named area in computer

memory that is used to store information
and from which information can be
retrieved. As JavaScript is a relatively
high-level language, it is not necessary to
know most of the details of how
information is stored in memory by a
JavaScript interpreter. JavaScript provides
for the automatic creation of variables
whenever values are assigned to them.
Cont…
• Variables are declared with the var

keyword:
• var num = “1”;
• var name = “Mel”;
• var phone = “123-456-7890”;

Types of creating variables
• var x1 = 'He said "be seeing you" as he

left.'
• document.write(x1)
• x = "New Message“
• document.write(x1)

Example
<script language=“JavaScript”>

</script>

alert(), confirm(), and prompt()
functions
Alert
A JavaScript alert is a little window

that contains some message:
alert(“This is an alert!”);
• Are generally used for warnings.

Example
• <html>
• <head>
• function showAlert(text) {
• alert(text);
• }
• </script>
• </head>
• <body onload=“showAlert(„This alert displays when
• the page is loaded!‟);”>

Prompt
• A prompt box is used when user wants to

input a value before entering a page.
• When a prompt box pops up, the user will
have to click either "OK" or "Cancel" to
proceed after entering an input value.
• If the user clicks "OK" the box returns the
input value. If the user clicks "Cancel" the
box returns null.
Syntax
• prompt("sometext","defaultvalue");

Example
• <html>
<head>
<script type="text/javascript">
function show_prompt()
{
var name=prompt("Please enter your name","Harry Potter");
if (name!=null && name!="")
{
document.write("Hello " + name + "! How are you today?");
}
}
</script>
</head>
<body>
<input type="button" onclick="show_prompt()" value="Show prompt
box" />
</body>
</html>

Confirm Box
• A confirm box is often used if you want the

user to verify or accept something.
• When a confirm box pops up, the user will
have to click either "OK" or "Cancel" to
proceed.
• If the user clicks "OK", the box returns
true. If the user clicks "Cancel", the box
returns false
Syntax
• confirm("sometext");

Confirm
• html>
<head>
function show_confirm()
{
var r=confirm("Press a button");
if (r==true)
{
alert("You pressed OK!");
}
else
{
alert("You pressed Cancel!");
}
}
</script>
</head>
<body>
<input type="button" onclick="show_confirm()" value="Show confirm box" />
</body>
</html>
Operators and expressions
– +, -, /, % (arithmetic)
– >, <, >=, lt=, ==, != (comparisons)
– &&, ||, ! (boolean)

Cont..
• == the numbers or objects or values must

be equal
• ! Logical NOT
• || Logical OR
• != the numbers or objects or values must
not be equal
• >= number on the right must be less than
or equal to the number on the left
• && Logical AND
Cont..
• < number on the right must be greater

than or equal to the number on the left
• <=
• < number on the right must be greater
than the number on the left
• > number on the left must be greater than
the number on the right

Cont..
• = assigns the value on the right to the

object on the left
• the object on the left = the object on the
left + the value on the right
• this also works when appending strings
• +=
• -= the object on the left = the object on the
left - the value on the right
Cont..
• % Modulus - divide the first number by the

second and return the remainder
• * multiplies two numbers
• ++ / -- Increment / Decrement a number

Cont..
• / divides the first number by the second

• - subtracts the second number from the
first
• adds two numbers or appends two strings.
If more than one type of
• variable is appended, including a string
appended to a number or viceversa,
• the result will be a string
If Statement
• To make use of conditional statements

that allow program to make decisions
• The "If Statement" is a way to make
decisions based on a variable or some
other type of data.

If Statement
• In JavaScript we have the following

conditional statements:
Syntax
• if (condition)
{
code to be executed if condition is true
}
If Statement
• if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not
true
}
if-else statement
var rightAnswer = 57;

var num = prompt("Please guess a number
below 100: ","");
if (num < rightAnswer)
{
alert("Your guess was too low");
}

Cont..
else
if (num > rightAnswer)
{
alert("Your guess was too high");
}
else
{
alert("Congratulations!");
}
else
{
alert("Too bad!");
}

Example
var red = 5;
var blue = 3;
var match = null;
if (red == blue) {
match = 'equal';
} else {
match = 'unequal';
}
document.write(red + ' and ' + blue + ' are ' +
match);
</script>
output
• 5 and 3 are unequal

JavaScript Switch Statement
• switch statement is used to select one of

many blocks of code to be executed.
• Multiway branch
• The switch value does not need to a

number. It can be a string.
• The case values can be expressions.

JavaScript Switch Statement
Syntax
switch (expression) {
case ';':
case ',':
case '.':
punctuation();
break;
default:
noneOfTheAbove();
}
JavaScript Switch Example
• <html>
• <head>
• 
• </script>
• </head>
• </html>

Output
• While loop is beginning
myCounter = 0
myCounter = 1
myCounter = 2
myCounter = 3
myCounter = 4
myCounter = 5
myCounter = 6
myCounter = 7
myCounter = 8
myCounter = 9
While loop is finished!

for
• Iterate through all of the elements of

an array:
for (var i = 0; i < array.length; i += 1)

{

for loop
var MAX = 10;

var count;
for (count = MAX; count >= 1; count--)
{
document.write("Countdown: " + count +
"<BR>");
}

Output
• Countdown: 10
Countdown: 9
Countdown: 8
Countdown: 7
Countdown: 6
Countdown: 5
Countdown: 4
Countdown: 3
Countdown: 2
Countdown: 1

Examples Using Events
onMouseOver() event:
• <html>
• <head>
<SCRIPT LANGUAGE="javascript">
function oops()
{
alert("You got too close!")
}
</SCRIPT>
</head>
<body>
<Input type=button value=Move mouse over this for a test
onMouseOver="oops()">
</body>
</html>

OnClick
<html>
<head>

</script>
</head>
<body>
<input type="button" value="Click Me!" onclick="popup()"><br />
</body>
</html>

on Change() event:
• <html>
• <head>
• <script type="javascript">
• </script>
• </head>
• <body>
• <FORM name=myform>
• From Field <INPUT TYPE="text" NAME="text1"
onChange="document.myform.text2.value =
• document.myform.text1.value"><BR>
• To Field <INPUT TYPE="text" NAME="text2">
• </FORM>
• </body>
• </html>
Output
• From Field
• To Field

• Please enter your name: <input type="text"
name="your_name" onchange="validateField(this)"/>
<script type="text/javascript"> function validateField (
fieldname ) { if ( ( fieldname.value ) && ( !
fieldname.value.match ( " " ) ) ) { alert ( "Please enter
your first and last names!" ); fieldname.focus ( ); } }
</script>

output
• Please enter your name:
After entering Name it will display alert box

showing the message
“please enter your first and last name

onFocus
• onFocus is executed whenever the

specified object gains focus. This usually
happens when the user clicks on the
object with the mouse button, or moves to
the object using the TAB key. onFocus
can be used on most form elements.

Example
• <html>
• <head>
• </script>
• </head>
• <body>
• <form>
• <form>
• <input type="text" name="email_address"
• size="40" value="Please enter your email address"
• onfocus="this.value=''"/>
• </form>
• </body>
• </html>

Output
Please enter your email address

onLoad
• The onLoad event handler is triggered

when the page has finished loading.
Common uses of onLoad include the
dreaded pop-up advertisement windows,
and to start other actions such as
animations or timers once the whole page
has finished loading.
• Example

Example
• <html>
• <head>
• </script>
• </head>
• <body onload = "alert('Thanks for visiting my page!')">
• My Page
• </body>
• </html>

Output
• My Page
Thanks for visiting my site

Arrays
var score = new Array(3);
score[0] = 35
score[1] = 56
score[2] = 10
Alternative : var score = new Array(35,56,10);
sum=score[0]+score[1]+score[2];
alert(sum) ;
Example
• <html>
• <HEAD>
• <SCRIPT language="JavaScript">
• 
• </SCRIPT>
• </HEAD>
• <BODY>
• <input type=button onClick="display_quote()">Click Here, I dare you!
• </BODY>
• </html>

Function
• A function contains code that will be executed by

an event or by a call to the function
• Functions can be defined both in the <head>
and in the <body> section of a document.
However, to assure that a function is
read/loaded by the browser before it is called, it
could be wise to put functions in the <head>
section.

Syntax
• function functionname(var1,var2,...,varX)
{
some code
}
• The parameters var1, var2, etc. are
variables or values passed into the
function. The { and the } defines the start
and end of the function.

Example
• <html>
<head>
function displaymessage()
{
alert("Hello World!");
}
</script>
</head>
<body>
<input type="button" value="Click me!"
onclick="displaymessage()" />
</body>
</html>

Thank You

Web Designing Presentation 5 PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Designing Presentation 5 PDF

Uploaded by

Copyright:

Available Formats

BSc IT

Copyright @ Amity University

• Introduction to Java Script

Copyright @ Amity University

Copyright @ Amity University

• JavaScript Dialog Boxes

Copyright @ Amity University

• Invented by Netscape in 1995.

•JavaScript is interpreted at the browser machine rather

•JavaScript is mainly based on the HTML

•JavaScript is most popular for writing scripts for client-side

Copyright @ Amity University

• Similar syntax to C, C++, and Java

• For Example JavaScript must be used in

Copyright @ Amity University

• We can create client-side forms with

Copyright @ Amity University

• To begin JavaScript we need

Copyright @ Amity University

• OOP is a programming technique

Copyright @ Amity University

• Methods are collection of actions that an

JavaScript instructions are usually grouped

Copyright @ Amity University

• Many more events are:

Copyright @ Amity University

• One way to put JavaScript in a page is

Copyright @ Amity University

Copyright @ Amity University

• Comment statements are used to prevent

Copyright @ Amity University

• I have comments in my JavaScript code!

Copyright @ Amity University

• I have multi-line comments!

Copyright @ Amity University

• JavaScript has only three primitive

strings : "foo" 'howdy do' "I

Copyright @ Amity University

• A variable is a named area in computer

• Variables are declared with the var

Copyright @ Amity University

• var x1 = 'He said "be seeing you" as he

Copyright @ Amity University

<!-- definition of variables

//calculation of total number of people

// end of script -->

Copyright @ Amity University

A JavaScript alert is a little window

Copyright @ Amity University

Copyright @ Amity University

• A prompt box is used when user wants to

Copyright @ Amity University

Copyright @ Amity University

• A confirm box is often used if you want the

Copyright @ Amity University

– >, <, >=, lt=, ==, != (comparisons)

– &&, ||, ! (boolean)

Copyright @ Amity University

• == the numbers or objects or values must

• < number on the right must be greater

Copyright @ Amity University

• = assigns the value on the right to the

• % Modulus - divide the first number by the