Introduction to JavaScript Dr. John P. Abraham University of Texas – Pan American
What is JavaScript Object-based scripting language Developed by Sun Microsystems Syntax is similar to C++ HTML is static, JavaScript adds interactivity. JavaScript can store information as cookies.
SCRIPTING LANGAUGES Programming languages developed to serve a particular purpose. JAVA SCRIPT was developed to add interactivity to Web pages Interpreted rather than compiled Interpreter is built into the web browsers First made available as part of Netscape 2.0
Flavors of Java Script Core Client side Server side Basic Java script language. It includes the operators control structures and built-in functions. Client side Server side
Client side javascript Extends the core to provide access to browser and documents via DOM (document Object Model). Runs on the client’s (visitor) computer. Example an image on the web page can be manipulated by JavaScript, we can change its source property (src) to display a different image in response to something the user is doing such as moving the mouse. Javascript can be used to create cookies and read from it. Also can be used for form validation saving time for a response from the server.
Popular Uses for JavaScript Rollovers, status bar messages, browser detection, redirecting the visitor, random images and quotes, pop-up windows, form validations, loading multiple frames at once, cookies, slide shows, calculations, plug-in detection, random sounds, cycling banners, displaying current date, displaying last modified date, etc.
Server side Provides access to databases and converts results into HTML format and delivers to the browser.
Other approaches to making web interactive Common Gateway Interface, CGI Java applets, Client pull (eg <meta http-equiv=“refresh” content = “7”> reload every 7 sec. Server push. (server maintains the connection and delivers additional data over a period of time) Plug-ins (adds animation and interactivity) Various other scripting languages
JavaScript and HTML HTML tag attributes can be accessed as object properties with javaScript. Document.write(“Hello”)
Example <html> <head> <title>Script 1.1: Using the Write Method</title> </head> <body bgcolor="white" text="black"> <script language="JavaScript" type="text/javascript"> document.write("Hello") </script> </body> </html>
Example 2 <html> <head> <title>Script 1.3: Changing Background & Foreground Colors</title> </head> <body bgcolor="white" text="black"> <script language="JavaScript" type="text/javascript"> document.write("<h1 align=center>Hello</h1>") document.bgColor = "blue" document.fgColor = "white" </script> </body> </html>
Script in HTML head <script type = “text/javascript”> says it a text file and the scripting language is javaScript <!— Those browsers that do not support script will consider this as comments and ignore SCRIPT CODE HERE //
Document Object The most import object in JavaScript is the document object To refer to a method for this object we write: document.write(“hello”) document.write(“<h1 align=center> hello”</h1>”) document.bgColor = “blue”
Obtaining user input with prompt dialog After <script – declare variables Var visitorName Read it this way: vistorName=window.prompt(“Please enter your name”); Display it Document.writeln(“Hello, “ + name)
Arithmatic + - * / %
Examine properties Document.write (“appName: “, navigator.appName); Microsoft explorer Document.write(“Window location: “,window.location) File:///A:/script.html Document.write(“history: “, window.history.length) Length: 1
Netscape Navigator Can execute javascript directly by typing (in the browser area) javascript: location.href Shows the url
The Event Model Most popularly capture events Load – finishes loading a page Unload – loads a new one Mouseover – mouse moved Mouseout – move mouse off of object Click Focus – make active an object Change – changes data selected Submit – submits a form Reset – resets a form Event handlers are onLoad, onClick, onChange, etc. http://members.ozemail.com.au/~dcrombie/javascript/chap07.html
First JavaScript program <html> <head> <title>Reporting Browser Information</title> </head> <body> <h1>Your Browser</h1> <script language = "JavaScript" type ="text/javascript"> document.write("<b>appCodeName:</b> ", navigator.appCodeName, "<br>") document.write("<b>appName:</b> ", navigator.appName, "<br>") document.write("<b>appVerson:</b> ", navigator.appVersion, "<br>") document.write("<b>Platform:</b> ", navigator.platform, "<br>") </script> </body> </html>