Get Playful With Javascript

GET PLAYFUL
WITH
JAVASCRIPT
• The javaScript programming language is used to write
programs that run in web pages.
• Javascript can control how a web page looks or make
the page respond when a viewer clicks a button or
moves the mouse.
• Javascript is more easier and fun to learn than any
other programming language.
• In order to write and run programs, all you need is a
web browser like Internet Explorer , Mozilla Firefox or
Google Chrome
Features of Java Script
• It is fast – It loads quickly from the server to the user’s
computer . It does not have to download any additional
applications to do its job.
• It can be mixed with HTML- Use the HTML tag
combination < Script> and </Script> to identify
javascript. This makes it HTML friendly.
• Javascript is simple- It is simple to write and does not
need anything special to be added to a browser, and
does not need any special software for its creation.
• Javascript is loosely typed language – It is not necessary to
declare variables in advance. Moreover it allows type casting
which allows internal conversion of one variable type to
another based on the type of operation to be performed.
• Javascript is object based language- It is composed of objects
that have properties and methods.
• Javascript is event driven language- Scripts can also define
functions for handling events such as clicking of a button or
clicking on a link.
• Javascript can do cool things to a web page such as creating
pop up windows, image rollovers , drop down menus and
much more.
Embedding Javascript in HTML document
The <Script> Tag
• Java script statements can be included in HTML
documents by enclosing the statements between an
opening <script>tag and closing </script> tag.
• The section between opening <script>tag and closing
</script> tag is called Script block.
• The LANGUAGE attribute is used to specify the
scripting language and hence needs to be set to
“JavaScript”.
Displaying simple text
• Javascript uses an object
<html> called document, which
<head> refers to the current
<title>learning javascript</title> document on the browser
</head> window.
<body> • One of the methods of this
<script language = "javascript"> object is to display a string
document.write(" Java script") ( a text ) on the screen.
</script> • The method used is called
</body> write.
</html>
Displaying text in multiple lines
<html> • Another method of the
<head> document object, the
<title>learning javascript</title>
</head> document.writeln() outputs
<body> text with a line break added
<pre>
<script language = "javascript"> at the end of the string
document.write("course name:"); being displayed.
document.writeln("multimedia and web technology")
document.write("topic:"); • This method is valid only
document.writeln(" Java script") when the <PRE> tag of
</script>
</body> HTML is added in the code.
</html>
Dialog boxes • Dialog boxes are small
windows with predefined
ALERT boxes buttons. These include alert
<html>
<head> boxes, prompt boxes and
<title>learning javascript</title> confirm boxes.
</head>
<body>
<script language = "javascript"> • A single ‘OK’ button is provided
alert(“Welcome to JavaScript") to choose the alert box.
</script> • It is often used to pause the
</body>
</html>
execution of script until the user
approves its continuation.
confirm boxes • The confirm box includes both
‘OK’ and ‘cancel’ button.
<html> • It returns True if OK is pressed
<head>
and False if cancel is pressed.
</head>
<body>
<script language = "javascript">
var reply = confirm ("Are you above 18")
document.write(reply)
</script>
</body>
</html>
prompt boxes • The prompt box displays a
prompt dialog box with a
<html> message and an input field. It is
<head>
used to accept input from the
</head> user. • The prompt box always
<body> returns a value of type
var age = parseInt(prompt("Enter your age",0)) string.
document.write(age, " is of type ",typeof(age)) • To convert string value
</script> to integer value , we
</body>
use the built in
</html>
function parseInt()
Control Statements
• Usually in a script, decisions need to be made depending on
some condition and some actions need to be performed
repeatedly.
• Programming languages like Java Script allow the
programmer to control the flow of program with Flow
Control Statements.
• Such statements are called Control Statements as they
control the flow of the script.
There are two types of control statements :
i. Conditional statements
ii. Looping or Iterative statements
• If…..Else statement
• The If…Else statement is used to add decision making
capabilities to a script.
• The If...Else statement is used to evaluate whether a condition
is true or false, and depending on the result executes one or
more statements.
• Syntax :
• If (condition) If (condition)
statement { statement 1
If there are many statements it is necessary to statement 2
enclose them in curly braces .
For one statement, the braces are optional. statement 3}
Example if (Amount >10000)
if (Amount >10000) { Discount = amount * .10
Discount = amount * .10 Price = Amount – Discount }
<html>
<head>
</head>
<body>
var age = parseInt(prompt("Enter your age"))
if (age>=18)
{alert("eligible to vote") }
else
document.write("age is below 18")
</script>
</body>
</html>
• Switch statement
• The switch statement provides an alternative to the if…. Else statement.
• It provides additional control and readability.
• It is used for situations where there are a large number of possible conditions
for the value being checked.
• Syntax :
switch (Test expression)
{ case value 1:
Statement 1; • Curly braces must enclose all the case and default statements.
Break;
case value 2: • Also each case statement must end with a break statement.
Statement 2;
• The break statement tells Java Script to stop executing at that
Break;
case value 3: point and exit the switch statement.
Statement 3;
Break;
default
statement k; }
</head>
<body>
var shippingfee ;
var loc= prompt("Enter location");
switch (loc)
{
case "delhi":
shippingfee = 400;
break;
case "mumbai":
shippingfee = 300;
break;
default:
shippingfee = 500;
}
document.write("shippingfee is ", shippingfee);
</script>
</body>
</html>
• Iterative or Looping statement
• Looping means repeating a block of code while a condition is true.
Java Script provides three forms of looping statements.
• For loop.
• While loop.
• Do – While loop
• The For Loop
• The for loop is used to perform a loop specific number of times.
• It uses a counter variable, which is incremented or decremented with each repetition of the loop
• The for loop is used in situations where it is known how many times a statement needs to be executed
Syntax:
For ( initial expression; condition; operation)
{ statement 1
statement 2
}
FOR LOOP – PRINTING SERIES OF NUMBERS OUTPUT
html> 1
<head> 2
<title>for loop</title> 3
</head> 4
<body> 5
<script language = "javascript"> 6
for ( var a=1;a<=10;a++) 7
{ 8
document.write(a); 9
document.write("<br>"); 10
}
</script>
</body>
</html>
FOR LOOP – PRINTING SERIES OF NUMBERS IN DESCENDING ORDER
html> OUTPUT
<head>
<title>for loop</title> 10
</head> 9
<body> 8
for ( var a=10;a>=1;a--) 6
{ 5
document.write(a); 4
document.write("<br>"); 3
} 2
</script> 1
</body>
</html>
FOR LOOP – PRINTING PATTERN
OUTPUT
<html>
<head> *Hello*
<title>for loop</title> *Hello*
</head> *Hello*
<body>
*Hello*
for ( var a=1;a<=10;a++) *Hello*
{ *Hello*
document.write("*"); *Hello*
document.write("Hello"); *Hello*
document.write("*"); *Hello*
document.write("<br>");
*Hello*
}
</script>
</body>
</html>
FOR LOOP – PRINTING TABLE OF NUMBERS
<html> OUTPUT
<head> 5X1=5
<title>for loop table</title> 5 X 2 = 10
</head> 5 X 3 = 15
<body> 5 X 4 = 20
<script language = "javascript"> 5 X 5 = 25
for ( var a=1;a<=10;a++) 5 X 6 = 30
{ 5 X 7 = 35
document.write("5 x " + a + " = " + 5*a); 5 X 8 = 40
document.write("<br>"); 5 X 9 = 45
} 5 X 10 = 50
</script>
</body>
</html>
FOR LOOP – TO PRINT A SERIES ON THE SCREEN FOR ‘N’ TERMS WHERE ‘N’ IS ENTERED BY THE USER
<html>
OUTPUT
<head> 2
<title>printing series of numbers</title> 4
</head> 6
8
<body> 10
14
var num = parseInt(prompt("Enter the number",0)) 16
for ( var a=2;a<=num;a=a+2) 18
{ 20
.
document.write(a); .
document.write("<br>"); .
.
} .
</script> .
</body> TILL N
</html>
EVENT HANDLING
• Events are the mechanism by which browsers respond
to user actions.
• Events are the actions that occur as the result of user
interaction with a web page.
• This enables the user to develop web pages that are
more interactive and easier to use.
• For example, when a user clicks a hyperlink or a button,
or enters data in a form, an event is generated.
• All objects that interact with the user have a predefined
set of events.
• The browser waits for the events to occur, and when
they do, it performs whatever processing is assigned to
those events.
• The special functions that are linked to specific events
are called Event Handlers.
• Event Handlers correspond to their associated events.
• They are scripts that execute automatically when events
occur.
• Event Handlers are made up of the word On and the
event that they will handle.
<<html>
<head> else
<title>Working with Forms</title> {
<script language="javascript"> alert (" Thanks for providing your name and age")
function check() document.frm1.submit
{ }
if((document.frm1.txtName.value)=="") }
{ }
alert("You must enter your name before submitting") }
document.frm1.txtName.focus() </script>
} </head>
else <body>
{ <h1> Example of a form </h1>
if (isNaN(document.frm1.txtAge.value)==true) <form name ="frm1">
{ Enter your name:
alert("You must enter a number for your age")
<Input type = " Text " Name = "txtName" size="20"><br><br>
frm1.txtAge.focus()
Enter your age :
}
<Input type = " Text " Name = "txtAge" size="2"><br><br>
else
{ <input type="submit" name="BSubmit" value="Submit"
if ((document.frm1.txtAge.value onclick="check()">
<=0)||(document.frm1.txtAge.value>100)) </form>
{ </body>
alert("The age you entered is invalid.") </html>
frm1.txtAge.focus()
}
The focus event occurs when the <input> field gets focus
The focus event occurs when an element gets focus (when selected by a mouse click or by "tab-
navigating" to it).

Get Playful With Javascript

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

Get Playful With Javascript

Uploaded by

Copyright:

Available Formats

GET PLAYFUL

You might also like