View
245
Download
0
Category
Preview:
Citation preview
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
1/43
Introduction to JavaScriptVersion 1.0
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
2/43
September 3, 2009TCS Internal
What is Java Script? JavaScript is NOT Java. Developed by Netscape. Purpose: Execute on the client-side(browser)
Widely used within HTML pages, for client-side validation, etc.
It is similar to Java, but loosely typed data.
JavaScript is interpreted programminglanguage. Errors are identified by browsers.
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
3/43
September 3, 2009TCS Internal
JavaScript Within HTML page
JavaScript Page Content of the Page
ScriptDeclaration
Tag
JavaScript
Function
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
4/43
September 3, 2009TCS Internal
Data Types Numerical data
Integers Floating-point numbers
Text data
String Boolean data
True/false
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
5/43
September 3, 2009TCS Internal
Declaring variables Weekly typed language. Example:
var myname=david; var myint = 1234;
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
6/43
September 3, 2009TCS Internal
Operations Normal numerical calculations like any otherprogramming language is possible.
Example:var a = 10;
var b = 20;var c = a + b;
String operations are similar to Java.
Example:String s = one;String t = two;
String u = s + t; ( will result inonetwo
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
7/43
September 3, 2009TCS Internal
Native Objects Array
Arrays are treated as objects like in Java Multidimensional arrays are treated as
array of arrays.
Arrays can have holes. Means some elements in the array maybe empty.
Examples:var firstArray = new Array(); // creating anew array
var secondArray = new Array(Bob,Clinton, 123);
Arrays can hold
different type of data
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
8/43
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
9/43
September 3, 2009TCS Internal
Native Objects Math
Provides useful mathematical functions. Examples:
round()
floor() abs()
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
10/43
September 3, 2009TCS Internal
Native Objects Date
Handling date/colander related functions Examples:
getDate()
getDay() getMonth()
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
11/43
September 3, 2009TCS Internal
Browser Related Objects Window object
Location object History object Document object
Forms object Images object Links object
Navigator object Screen object
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
12/43
September 3, 2009RMIT - JavaScript Examples
JavaScript Examples
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
13/43
13September 3, 2009TCS Internal
Format The script must be between script tags:
Note the comments are used to preventproblems in old browsers
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
14/43
14September 3, 2009TCS Internal
Input Outputvar celsius, fahrenheitcelsius = prompt ("Enter Temperature inCelsius", "20")
celsius = parseFloat (celsius)fahrenheit= celsius * 9.0 / 5.0 + 32.0document.write ("Temperature in Fahrenheit
is: ")document.writeln (fahrenheit)
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
15/43
15September 3, 2009TCS Internal
Selection The if statement is from Java and C++:if (hours
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
16/43
16September 3, 2009TCS Internal
While The while statement is from Java and C++:number = 1while (number
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
17/43
17September 3, 2009TCS Internal
For The for statement is from Java and C++:var numberfor (number=1; number
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
18/43
18September 3, 2009TCS Internal
Function It is common to put code in the headerinside of a function
function calculate ( ){ var celsius, fahrenheit
celsius = prompt ("Enter Temperature inCelsius", "20")celsius = parseFloat (celsius)
fahrenheit= celsius * 9.0 / 5.0 + 32.0document.write ("Temperature in Fahrenheitis: ")document.writeln (fahrenheit)
}
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
19/43
19September 3, 2009TCS Internal
Function1 It is best to use arguments and a returnfunction calculate (celsius){
return (celsius * 9.0 / 5.0 + 32.0)
} To call function use:fahrenheit = calculate (celsius)
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
20/43
20September 3, 2009TCS Internal
Math Math functions are like in Java They are messages sent to the class MathnumberOut = Math.sqrt (numberIn)
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
21/43
21September 3, 2009TCS Internal
Repeat The iteration with test after is simulatedvar flag = truewhile (flag){
calculate()flag = confirm("Do you wish to do
another?")
} Note confirm dialog box
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
22/43
22September 3, 2009TCS Internal
Datefunction getFullYear(){
var year = this.getYear()year += 1900
return year}
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
23/43
23September 3, 2009TCS Internal
Date
function getActualMonth(){
var month = this.getMonth()
month ++return month}
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
24/43
24September 3, 2009TCS Internal
Date Here are some more useful ones :function getCalendarDay ( ){ var day = this.getDay ( )
var days = new Array (7)days[0] = "Sunday"
days[1] = "Monday"days[2] = "Tuesday"days[3] = "Wednesday"days[4] = "Thursday"days[5] = "Friday"days[6] = "Saturday"return days [day]
}
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
25/43
25September 3, 2009TCS Internal
Alert JavaScript also has a message box:
var stringstring = message
alert (string)
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
26/43
26September 3, 2009TCS Internal
Browser Need to tell you about the properties of theobject document
document.writeln("Browser name: " +navigator.appName)
document.writeln("Browser version: " +navigator.appVersion) document.writeln("Browser platform: " +
navigator.platform) document.writeln("Browser plugins: " +
navigator.plugins)
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
27/43
27September 3, 2009TCS Internal
Form1 This form uses a function invoked by abutton called name1function callAlert (form){ alert ("Your name is: "+
form.name1.value)}
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
28/43
28September 3, 2009TCS Internal
Form2 This form uses a function invoked by abutton to populate the formfunction convertTemp (form){ var fahrenheit, celsius
celsius = parseFloat (form.celsius.value)fahrenheit = celsius * 9.0 / 5.0 + 32.0form.fahrenheit.value = fahrenheit
}
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
29/43
29September 3, 2009TCS Internal
Form3
This form shows the mail form that will be used in the nextexamples
There is no JavaScript
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
30/43
30September 3, 2009TCS Internal
Form4
This form shows the addition of a list box to themail form
There is still no JavaScriptInterest:
World Wide WebJava Programming
C++Programming Javascript
UML
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
31/43
31September 3, 2009TCS Internal
Form5 This form uses a function invoked by ONSUBMIT =
return checkFields (form1)function checkFields(form){ var validFlag = true
for (var i = 0; i < 5; i++)
{ if (form.elements[i].value == null ||form.elements[i].value == ""){ validFlag = false
alert ("The " + form.elements[i].name+
" field is blank. Please enter avalue.")
break}
}
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
32/43
32September 3, 2009TCS Internal
Form6 This form adds more advanced checking of
formif (parseInt (form.elements[1].value) < 21){ alert ("At :" + form.age.value + " you
are too young")validFlag = false}if ( ! ( form.gender[0].checked)&& !( form.gender[1].checked)){ alert ("Please check gender")
validFlag = false}
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
33/43
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
34/43
34September 3, 2009TCS Internal
Frame Here is the frame set:
Demonstration of frames using Java
Script
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
35/43
35September 3, 2009TCS Internal
Frame Here are the functions in the left frame
invoked by radio buttons and on load:function setButton(form){ form.button1[0].checked=true
}function opendoc1(){parent.frameRight.location.href="frameright1.htm"}function opendoc2(){
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
36/43
36September 3, 2009TCS Internal
New Window
Upon clicking the Okay button, the pagelinks to another site:
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
37/43
37September 3, 2009TCS Internal
Cookie A cookie is not something to eat
It is a text file on your c:\ drive written by afunction in JavaScript; for example:www.csupomona.edu
FALSE /C|/stumpf/javascript FALSE938049354 Title Mr
FALSE /C|/stumpf/javascript FALSE938129386 UserName Robert Stumpf
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
38/43
38September 3, 2009TCS Internal
Cookie The critical parts are the cookie name and
cookie value, for example:
Title Mr
UserName Robert Stumpf
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
39/43
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
40/43
40September 3, 2009TCS Internal
Cookie Checking a cookie:
function checkCookie ( ){ var title=null, userName=nullvar name, value, expiresvar path=null ,domain=null,secure=nullexpires = new Date ( );expires.setTime (expires.getTime ( ) + 24*60*60*365*1000) //Plus one yearname = "UserName"userName = getCookie(name)
if (userName == null)userName = prompt("Please Enter Your Name:","")value = userNamesetCookie (name,value,expires,path,domain,secure)return (title + " " + userName)
}
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
41/43
41September 3, 2009TCS Internal
Password Checking a password:
function checkpw (form){ var passwordKeyed =form.passwordKeyed.value
var passwordCookie = getCookie("PassWord")if (passwordKeyed == passwordCookie)
parent.frameLeft.opendoc3 ( )else
alert ("Password did not match, tryagain.")}
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
42/43
42September 3, 2009TCS Internal
Password Verifying a new password:
function checkpw (form){ var password1 = form.password1.value
var password2 = form.password2.valuevar name, value, expires, path=null ,domain=null,secure=nullexpires = new Date ( );expires.setTime (expires.getTime ( ) + 24*60*60*365*1000)if (password1 == password2){ name = "PassWord"
value = password1setCookie(name,value,expires,path,domain,secure)parent.frameLeft.opendoc3 ( )
}else
alert("Passwords did not match, try again.")}
8/14/2019 ILP J2EE Stream J2EE 08 Javascript V0.3
43/43
Reference: Beginning JavaScript, 2 nd Edition, Paul
Wilton, Wrox Publishers, 2004.
Recommended