Programs
a scripting language is a simple, interpreted
programming language
Relation to Java
Similar in syntax
<!-- is a single line comment also- JavaScript does not recognize the
--> closing bracket
JavaScript
<html>
<head>
<title>JavaScript Page</title>
</head>
<body>
<script type="text/javascript">
// silly code to demonstrate output
document.write("<p>Hello world!</p>");
document.write("<p>How are <br/> " + "
<i>you</i>?</p> ");
</script>
</body>
</html>
JavaScript Data Types & Variables
<html>
<head>
<title>Data Types and Variables</title>
</head>
<body>
<script type="text/javascript">
var x, y;
x= 1024;
y= bias;
document.write("<p>x = " + x + "</p>");
document.write("<p>y = " + y + "</p>");
</script>
<</body>
/</html>
variables names are case-sensitive you don't have to declare variables, will be created the first time used, but its
better if you use var statements
var message, pi=3.14159; message = howdy;
JavaScript Data Types & Variables
<html>
<head>
<title>Data Types and Variables</title>
</head>
<body>
<script type="text/javascript">
var x,y,z;
x= 24;
y=100;
z=parseInt(x)+parseInt(y);
document.write("<B>Sum = " + z + "</B>");
</script>
<</body>
/</html>
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
JavaScript and HTML Forms
event-driven programming
onClick,
onChange,
onLoad/onUnload
onClick,
onMouseOver,
onMouseOut
Etc.
DOM Events
User-Initiated scroll
click select
dlbclick
keydown
blur
keyup focus
keypress reset
mouseover Submit
mouseout
mousedown
Browser-Initiated
mouseup load
mousemove unload
change error
resize
abort
Using Form Data
alert box
<form name="alertform">
Enter your name:
<input type="text" name=name">
<input type="button" value= "Go"
onClick="window.alert('Hello ' +
document.alertform.name.value);">
</form>
Interactive Pages Using Prompt
<html>
<head>
<title>Interactive page</title>
user interaction
</head>
<body>
can take
<script type="text/javascript"> place using
var userName = prompt("What is your name?", "");
var userAge = prompt("Your age?", ""); prompt
var userAge = parseFloat(userAge);
document.write("Hello " + userName + ".")
if (userAge < 18) if value is a
{
document.write( Do your parents know " number, must
use parseFloat
+"you are online?"); (or parseInt) to
}
else convert
{
document.write(" Welcome friend!");
}
</script>
<p>The rest of the page...</p>
</body>
</html>
Array and looping statement
<HTML>
<SCRIPT type=text/javascript>
var names=new Array(5);
var i=0;
do
{
names[i]=window.prompt(Enter next name);
}while(i<5)
document.write(Output<BR>);
for(i in names)
{
document.write(names[i]+<BR>);
}
</SCRIPT>
</HTML>
User-Defined Functions
function isPrime(n)
if the first use of a
{ if (n < 2) variable is preceded
{ return false; with var, then that
} variable is local to
the function
else if (n == 2)
{ return true; for modularity,
} should make all
variables in a
else function local
{ for (var i = 2; i <= Math.sqrt(n); i++)
{
if (n % i == 0)
{
return false;
}
}
return true;
}
}
Function Example
<html>
<head>
<title>Prime Tester</title>
<script type="text/javascript">
function isPrime(n)
{ // CODE AS SHOWN ON PREVIOUS SLIDE }
</script>
</head>
<body>
<script type="text/javascript">
testNum = parseFloat(prompt("Enter a positive integer", 99"));
if (isPrime(testNum))
{ document.write(testNum + " <b>is</b> a prime number."); }
else
{ document.write(testNum + " <b>is not</b> a prime number."); }
</script>
</body>
</html>
set_Time_Out Function
<HTML><HEAD>
<SCRIPT>
var C=0;
ID1=window.setTimeout(update,2000);
function update()
{
C++;
alert(The counter is at+C);
Window.status=The counter is at+C;
ID1=window.setTimeout(update,2000);
}
</SCRIPT>
</HEAD>
<HR>
<BODY>
<FORM NAME=Time>
<INPUT TYPE=button VALUE=STOP
onclick
=Window.clearTimeout(ID1);>
</FORM>
</BODY></HTML>
Using timeouts to update a page every
two seconds
<HTML>
<SCRIPT type=text/javascript>
var counter =0;
ID1 =window.setTimeout(update();,2000);
function update()
{ counter++;
window.status=The counter is at+counter;
document.form.input.value=the counter is now
at+counter;
ID1=window.setTimeout(Update();,2000);
}
</SCRIPT>
<BODY>
<HI>Time out Example </HI><HR>
<FORM NAME=form>
<INPUT TYPE=Text NAME=input SIZE=40><BR>
<INPUT TYPE=button VALUE =RESET
onclick=counter=0;><BR>
<INPUT TYPE=button VALUE=STOP
onClick=Window.clearTimeout(ID1);>
</form>
<html><body>
<script>
var page=prompt("Enter page value(next/previous)");
switch(page)
{ case "next" :window.location="next.htm";
break;
case "previous" :window.location="previous.htm";
break;
default : alert("Wrong choice");
}
</script>
</body></html>
The 2015 Top Ten Programming Languages
The 2015 Top Ten Programming Languages
The big fiveJava, C, Python, and C#remain on top.
Last year it was in ninth place, and its move reflects the
growing importance of big data to a number of fields.
<html>
<head>
<script>
function open_win()
{
Window.open("http://www.w3schools.com");
}
</script>
</head>
<body>
<input type="button" value="Open Window"
onClick="open_win();">
</body>
</html>
JavaScript and HTML Forms
<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript>
function plus()
{ <BODY BGCOLOR="#FFFFCC">
var n1; <P>
var n2; <FORM name=addmultiply>
n1=document.addmultiply.num1.value;
n2=document.addmultiply.num2.value; <P>Enter a number in each field:
<INPUT TYPE=text NAME=num1 VALUE=""
n1=parseFloat(n1); SIZE=5>
n2=parseFloat(n2); <INPUT TYPE=text NAME=num2 VALUE=""
SIZE=5> <BR>
<INPUT TYPE=button VALUE="+"
document.addmultiply.result.value=n1+n2; onClick="plus();">
} <INPUT TYPE=button VALUE="*"
function times() onClick="times();">
{ <BR>
var n1; <INPUT TYPE=reset VALUE="Reset Form">
var n2; <BR>
n1=document.addmultiply.num1.value; <TEXTAREA NAME=result ROWS=3 COLS=27>
n2=document.addmultiply.num2.value; </TEXTAREA>
n1=parseFloat(n1);
</FORM>
n2=parseFloat(n2); </BODY>
</HTML>
document.addmultiply.result.value=n1*n2;
} </SCRIPT> </HEAD>
JavaScript objects and events
event-driven programming
onClick,onChange, onLoad/onUnload
onClick, onMouseOver, onMouseOut
Etc.
to create a string, assign using new or (in this case) just make a direct
assignment (new is implicit)
word = new String("foo"); word = "foo";
methods include:
<html>
<head>
<title>Time page</title>
</head> Here, set to the current date and
time using the default
<body>
Time when page was loaded: constructor
<script language="JavaScript">
now = new Date();
toString displays the full date
document.write(now.toString() + "<br><br>"); using month and day names
</html>
<html>
<head>
</head>
<body>
<script type=text/javascript>
setInterval(printTime(), 1000);
function printTime()
{
Var now=new Date();
Var hours=now.getHours();
Var mins=now.getMinutes();
Var secounds=now.getSecounds();
Document.write(hours+:+mins+:+secounds+<br/>);
setInterval(printTime(), 1000);
}
</script>
</body>
view page in browser
</html>
User defined New Window
onClick="window.open('examples/sample
.htm,'Sample', 'toolbar=no, width=190,
height=190, left=500, top=200,
status=no, scrollbars=no, resize=no');
where examples/sample.htm is the path to
the file that will appear in the new window.
the ONLOAD attribute of the BODY tag specifies JavaScript code that is automatically
executed when the page is loaded
the ONUNLOAD attribute similarly specifies JavaScript code that is automatically
executed when the browser leaves the page
<html> <head> </head> Class and Object
<body> <script type="text/javascript">
function Emp(emp_name,emp_age,emp_sal)
{
this.emp_name=emp_name;
this.emp_age=emp_age;
this.emp_sal=emp_sal;
}
arrobj = [];
var num= parseInt(prompt("Enter No. of records","***"));
alert("Num="+num);
for(i=0;i<num;i++)
{
arrobj[i]=new Emp((prompt("Enter the Name of Employee","****")),(prompt("Enter the
Age of Employee","****")),(prompt("Enter the Salary of
Employee","****")));
}
if(confirm("Do you want to Retrieve?"))
{
var ind=parseInt(prompt("Enter the Array Index to Retrieve the record","***"));
document.write("The Name is"+arrobj[ind].emp_name);
document.write("The Age is"+arrobj[ind].emp_age);
document.write("The Sal is"+arrobj[ind].emp_sal);
}
else
{
alert("The Program is Over");
}
</script> </body> </html>
The Math Object & Math Methods
The syntax for applying a Math method is: value = Math.method(variable);
For example, AbsValue = Math.abs(NumVar);
48
Math Class Methods
Site navigation
Perform calculations
Validation of input
Other technologies
JavaScript and HTML Forms
height="47 border=0>
</SCRIPT>
</BODY>
</html>
Ajax
Ajax allows a JavaScript procedure to
execute an HTTP transaction in the
background