JavaScript: Introduction

JavaScript: Introduction • Like C/C++ and Java, JavaScript is a case sensitive • It is not a Java • Interpreted Language • Embedded into HTML • Browser Dependent • Loosely Typed Language

Basic JavaScript Code <script language = "JavaScript"></script>

Embedding JavaScript code into HTML document <html><head><title>js01</title></head> <body><script language = "JavaScript"></script></body></html>

Load the JavaScript code from external source file External source file name: myscript.js External source file content: alert("Hello, I'm from JavaScript") HTML file content: <html><head><title>js01</title></head> <body><script src = "myscript.js"></script></body></html>

Execute JavaScript code • Automaticaly when the page is loaded (in the example above) • Write the Javascript code as a function <html><head><title>js02</title> <script language = "JavaScript"></script> </head> <body> </body></html>

Execute JavaScript code Execute JavaScript function using onLoad function: <html><head><title>js02</title>. . .</head> <body onLoad="hello()"> </body></html>

Execute JavaScript function by user action: Execute JavaScript code <html><head><title>js02</title>. . .</head> <body><a href="javascript:hello()">Clik me</a>(hypertext link) to execute Javascript function <form><input type="submit" value="Click me (submit button) to execute Javascript function"onClick="hello()"></form> </body></html>

Debugging JavaScript Code Just type "javascript:" in the URL field at your browser (Netscape) For IE click the status bar (bottom left ) tofind out what the error was and what line it occurred on

if else while for break continue true false null return int var in with this function new JavaScript Keywords

Variable var myVariable = "Pi" yourVariable = 1.14159 alert(myVariable) myVariable = 3.14159 newVariable = myVariable + yourVariable alert(newVariable)

JavaScript Built-In Object Model window Navigator frame String Array history location document Date image anchor area Math applet form link text select submit textarea hidden button radio reset checkbox password file

Accessing JavaScript Object Methods/Properties object_name.object_method object_name.object_property

Accessing JavaScript Object Methods/Properties: Example <form name="my_form" method="POST"> <input type="text" name="ic" size=15> </form> To access the value of "ic", use the statement below: document.my_form.ic.value

Using JavaScript Built-In Object Model Write content into HTML document: document.open() document.write("<pre>\n") document.write("Hello World\n") document.writeln("How are You?") document.write("World: I'm fine\n") document.write("<pre>") document.close()

Using JavaScript Built-In Object Model Open and write/set content into new browser window: Syntax:windowVar = window.open("URL", "windowName", ["windowAttributes"])

Using JavaScript Built-In Object Model Open and write/set content into new browser window: Example: newWin=window.open("", "myWindwow", "width=400,height=300") newWin.document.open() newWin.document.write("Hello I\'m a new window") newWin.document.close()

Using JavaScript Built-In Object Model Get client browser information: document.open() document.writeln("<pre>") document.writeln("<b>navigator.appCodeName = </b>" + navigator.appCodeName) document.writeln("<b>navigator.appName = </b>" + navigator.appName) document.writeln("<b>navigator.appVersion = </b>" + navigator.appVersion) document.writeln("<b>navigator.mimeTypes.length = </b>" + navigator.mimeTypes.length) document.writeln("<b>navigator.mimeTypes[0].type = </b>" + navigator.mimeTypes[0].type) document.writeln("<b>navigator.mimeTypes[0].description = </b>" + navigator.mimeTypes[0].description) document.writeln("<b>navigator.mimeTypes[0].suffixes = </b>" + navigator.mimeTypes[0].suffixes) document.writeln("<b>navigator.userAgent = </b>" + navigator.userAgent) document.writeln("</pre>") document.close()

Using JavaScript Built-In Object Model Get date information: var today = new Date() document.open() document.write("Today is: " + today.getDate() + "/“ + (today.getMonth() + 1) + "/" + (today.getYear() + 1900)) document.close()

E abs LN10 cos LOG10E min tan SQRT1_2 acos LN2 eval LOG2E PI pow toString SQRT2 asin exp random valueOf atan floor round atan2 log sin ceil max sqrt Using JavaScript Built-In Object Model Math properties/operation:

Using JavaScript Built-In Object Model Define array variable using Array object: var months = new Array() months[0] = "Jan" months[1] = "Feb" . . . . . . months[11] = "Dis

Using JavaScript Built-In Object Model Define array variable using Array object: var days = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday")

Using JavaScript Built-In Object Model Define array variable using Array object: var dayOfAugust = new Array(31) for (var i = 0; i < 31; i++) { dateOfAugust[i] = i + 1 }

Using JavaScript Built-In Object Model String manipulation: var str = "Hello World"len = str.length len will get the value of 11

Method Description Example charAt(pos) Return the character at the specified index. str.charAt(0) return a value of "H" indexOf(searchText[, startPos]) Return the index of the first occurrence of searchText. str.indexOf("or") return a value of 7 lastIndexOf(searchText[, startPos]) Return the index of the last occurrence of searchText. str.lastIndexOf("l") return a value of 9 substring(startPos, endPos) Return the substring of the string starting at startPos and ending at endPos str.substring(6, 8) return a value of "Wor" Using JavaScript Built-In Object Model More string handling methods (str = “Hello World”):

Creating JavaScript new object function object_name (property_1, . . ., property_n) { this.property_1 = property_1 . . . this.property_n = property_n this.method_1 = method_name_1 . . . this.method_n = method_name_n } function method_name_1() { . . . } function method_name_n() { . . . }

Event Handler Events: Generated by the system - when the browser loading a new page (onLoad event) Generated by the user - when the user click a button (onClick event)

Event Object onClick onSubmit OnChange onFocus onBlur onLoad onUnload onMouseOver onSelect button X reset X submit X radio X checkbox X Link X X Form X Text X X X X textarea X X X X select X X X window X X Event Handler Table of events and objects:

JavaScript: Introduction

Télécharger la présentation

Plus de contenu associé