javascript1
advertisement
Chapter 4
Java Script -
Part1
Outlines
Introduction to Java Script
Variables, Operators and Functions
Conditional statements
JavaScript Objects
Forms Validation
2
Introduction to Java Script
It is a scripting language.
Used for client side validations
Decreasing the network traffic.
Increasing the functionality of web server
Java script is embedded into HTML
It is an interpreter language
No Data Types – Loosely typed language – Declare
variables any where.
Event driven language
3
Generating HTML Dynamically
Idea
Script is interpreted when the page is loaded, and uses document.write
or document.writeln to insert HTML at the location the script occurs
Template
...
<BODY>
Regular HTML
<SCRIPT TYPE="text/javascript">
<!-Build HTML Here
// -->
</SCRIPT>
More Regular HTML
</BODY>
4
A Simple Script
See Program 1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>First JavaScript Page</TITLE>
</HEAD>
<BODY>
<H1>First JavaScript Page</H1>
<SCRIPT TYPE="text/javascript">
window.document.write("<HR>");
window.document.write("Hello World Wide Web");
window.document.write("<HR>");
</SCRIPT>
</BODY>
</HTML>
5
Simple Script, Result
6
Variables in JavaScript
A Simple Script to print Numbers
See Program 2
<HTML>
<HEAD>
<TITLE>Variables in JavaScript</TITLE>
</HEAD>
<BODY>
<H1>To print 1 to 10 numbers in JavaScript</H1>
<SCRIPT TYPE="text/javascript">
for(var i=1;i<=10;i++)
{
window.document.write(i);
window.document.write("<br>");
}
</SCRIPT>
</BODY>
</HTML>
7
A Simple Script to print String
See Program 3
<HTML>
<HEAD>
<TITLE>Variables in JavaScript</TITLE>
</HEAD>
<BODY >
<H1>To print a string 10 times in JavaScript</H1>
<SCRIPT TYPE="text/javascript">
for(var i=1;i<=10;i++)
{
window.document.write("<body bgcolor=red text=yellow>Hello World</body>");
window.document.write("<br>");
}
</SCRIPT>
</BODY>
</HTML>
8
Functions in JavaScript
See Program 4
<HTML>
<HEAD>
<TITLE>Functions JavaScript</TITLE>
<script type="text/javascript">
function display()
{
window.document.write("<h1>Hello World</h1>");
}
</script >
</HEAD>
<BODY >
<SCRIPT TYPE="text/javascript">
display();
</SCRIPT>
</BODY>
</HTML>
9
Passing string to a function
See Program 5
<HTML>
<HEAD>
<TITLE>Functions JavaScript</TITLE>
<script type="text/javascript">
function display(str)
{
window.document.write("<h1 align=right>"+str+"</h1>");
}
</script >
</HEAD>
<BODY >
<SCRIPT TYPE="text/javascript">
display("Hello");
</SCRIPT>
</BODY>
</HTML>
10
Calling function from one file to another
See Program 6
<HTML>
<HEAD>
<TITLE>Functions JavaScript</TITLE>
<script type="text/javascript"
src="fun.js">
</script >
</HEAD>
function display(str)
{
window.document.write("<h1>"+str+"</h1>")
;
}
<BODY >
<SCRIPT TYPE="text/javascript">
display("Imam Muhammed Ibn Saud Islamic
Uiversity");
</SCRIPT>
</BODY>
</HTML>
11
Events In JavaScript
onLoad
onUnload
onClick
onMouseOver
onMouseOut
onFocus
onBlur
onSelect
onSubmit etc…
12
Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Simple JavaScript Button</TITLE>
<SCRIPT TYPE="text/javascript">
<!-function dontClick() {
alert("I told you not to click!");
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="WHITE">
<H1>Simple JavaScript Button</H1>
<FORM>
<INPUT TYPE="BUTTON"
VALUE="Don't Click Me"
onClick="dontClick()">
</FORM>
</BODY>
</HTML>
Result
Object Hierarchy
15
Window Object
Every object has properties and methods
Using a special loop called for in is used to display
properties of window object
Properties – See Program 7
Methods – open(), close(), focus(), blur(), moveBy(),
moveTo(), resizeBy(), resizeTo() etc…
16
Program 7.html
<HTML>
<HEAD>
<TITLE>Functions JavaScript</TITLE>
<script type="text/javascript" >
for (var i in window)
{
window.document.write(i+"="+window[i]+"<br>");
}
</script >
</HEAD>
<BODY >
</BODY>
</HTML>
17
7.html, Result
18
Window Object
Example for window methods
Program 8.html
<HTML>
<BODY >
<form>
<input type=button value="Click" onclick=window.open()>
</form>
</BODY>
</HTML>
Some more methods of window are
alert(), prompt(), confirm()
20
Example for onclick writes the text in
new document - See Program 9
<HTML>
<head>
<script>
function dis()
{
var w=window.open()
w.document.write("hello world"+"<br>")
}
</script></head>
<BODY >
<form>
<input type=button value="Click" onclick=dis()>
</form>
</BODY>
</HTML>
21
Program 9 - Result
22
Example using confirm() and alert()
See Program 10
<HTML><head><script>
function dis()
{
var ch=window.confirm("open a window");
if (ch)
{
window.open();
}
else
{
alert("Dont open a window");
}
}
</script></head>
<BODY ><form>
<input type=button value="Click" onclick=dis()>
23
</form></BODY></HTML>
Example 10 - Result
24
E.g.Dynamic Welcome Page
<html>
<head>
<title>Using Prompt and Alert Boxes</title>
<script type = "text/javascript">
<!-var name; // string entered by the user
// read the name from the prompt box as a string
name = window.prompt( "Please enter your name", "GalAnt" );
document.writeln( "<h1>Hello " + name +
", welcome to JavaScript programming!</h1>" );
// -->
</script>
</head>
<body>
<p>Click Refresh (or Reload) to run this script again.</p>
</body>
</html>
Result