Introduction to JavaScript Version 1.0
What is Java Script? •JavaScript is NOT Java. •Developed by Netscape. •Purpose: Execute on the client-side (browser) •Widely used within HTML pages, for clientside validation, etc. •It is similar to Java, but loosely typed data. •JavaScript is interpreted programming language. •Errors are identified by browsers. TCS Internal
September 3, 2009
JavaScript Within HTML page
JavaScript Page <script LANGUAGE=“JavaScript”> Function Content of the Page TCS Internal
September 3, 2009
Data Types •Numerical data – Integers – Floating-point numbers •Text data – String •Boolean data – True/false
TCS Internal
September 3, 2009
Declaring variables •Weekly typed language. •Example: – var myname=“david”; – var myint = 1234;
TCS Internal
September 3, 2009
Operations •Normal numerical calculations like any other programming 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 in “onetwo”) TCS Internal
September 3, 2009
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 may be empty. •Examples: var firstArray = new Array(); // creating a new array Arrays can hold var secondArray = new Array(“Bob”, different type of data “Clinton”, 123); TCS Internal
September 3, 2009
Native Objects •String – Strings are similar to Java String. – All String related methods are available. – Examples: •myString.length; •myString.subString(0, 3); •myString.charAt(3);
TCS Internal
September 3, 2009
Native Objects •Math – Provides useful mathematical functions. – Examples: •round() •floor() •abs()
TCS Internal
September 3, 2009
Native Objects •Date – Handling date/colander related functions – Examples: •getDate() •getDay() •getMonth()
TCS Internal
September 3, 2009
Browser Related Objects •Window object – Location object – History object – Document object •Forms object •Images object •Links object – Navigator object – Screen object
TCS Internal
September 3, 2009
JavaScript Examples
September 3, 2009RMIT - JavaScript Examples
Format The script must be between script tags: •<SCRIPT LANGUAGE = "JavaScript"> • • Note the comments are used to prevent problems in old browsers
TCS Internal
September 3, 2009
13
Input Output <script language=“JavaScript”> var celsius, fahrenheit celsius = prompt ("Enter Temperature in Celsius", "20") celsius = parseFloat (celsius) fahrenheit= celsius * 9.0 / 5.0 + 32.0 document.write ("Temperature in Fahrenheit is: ") document.writeln (fahrenheit) TCS Internal
September 3, 2009
14
Selection •The if statement is from Java and C++: if (hours <= 40) { wage = hours * rate } else { wage = (hours - 40) * rate * 1.5 + 40 * rate } TCS Internal
September 3, 2009
15
While •The while statement is from Java and C++: number = 1 while (number <= 4) { document.writeln (number) number ++ } •Note the number ++
TCS Internal
September 3, 2009
16
For •The for statement is from Java and C++: var number for (number=1; number <= 4; number++) { document.writeln (number) } •Note again the number ++
TCS Internal
September 3, 2009
17
Function •It is common to put code in the header inside of a function function calculate ( ) { var celsius, fahrenheit celsius = prompt ("Enter Temperature in Celsius", "20") celsius = parseFloat (celsius) fahrenheit= celsius * 9.0 / 5.0 + 32.0 document.write ("Temperature in Fahrenheit is: ") document.writeln (fahrenheit) } TCS Internal
September 3, 2009
18
Function1 •It is best to use arguments and a return function calculate (celsius) { return (celsius * 9.0 / 5.0 + 32.0) } •To call function use: fahrenheit = calculate (celsius)
TCS Internal
September 3, 2009
19
Math •Math functions are like in Java •They are messages sent to the class Math numberOut = Math.sqrt (numberIn)
TCS Internal
September 3, 2009
20
Repeat •The iteration with test after is simulated var flag = true while (flag) { calculate() flag = confirm("Do you wish to do another?") } •Note confirm dialog box
TCS Internal
September 3, 2009
21
Date function getFullYear() { var year = this.getYear() year += 1900 return year }
TCS Internal
September 3, 2009
22
Date function getActualMonth() { var month = this.getMonth() month ++ return month }
TCS Internal
September 3, 2009
23
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] } TCS Internal
September 3, 2009
24
Alert •JavaScript also has a message box: var string string = “message” alert (string)
TCS Internal
September 3, 2009
25
Browser •Need to tell you about the properties of the object 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) TCS Internal
September 3, 2009
26
Form1 •This form uses a function invoked by a button called name1 function callAlert (form) { alert ("Your name is: "+ form.name1.value) }