1 / 19

Introduction to JavaScript

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.

mike_john
Download Presentation

Introduction to JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to JavaScript Dr. John P. Abraham University of Texas – Pan American

  2. 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.

  3. 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

  4. Flavors of Java Script • Core • Basic Java script language. It includes the operators control structures and built-in functions. • Client side • Server side

  5. 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.

  6. 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.

  7. Server side • Provides access to databases and converts results into HTML format and delivers to the browser.

  8. 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

  9. JavaScript and HTML • HTML tag attributes can be accessed as object properties with javaScript. • Document.write(“Hello”)

  10. 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>

  11. Example 2 • <html> • <head> • <title>Script 1.3: Changing Background &amp; 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>

  12. 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 // 

  13. 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”

  14. 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)

  15. Arithmatic + - * / %

  16. 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

  17. Netscape Navigator • Can execute javascript directly by typing (in the browser area) • javascript: location.href • Shows the url

  18. 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

  19. 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>

More Related