Download
introduction to javascript n.
Skip this Video
Loading SlideShow in 5 Seconds..
Introduction to JavaScript PowerPoint Presentation
Download Presentation
Introduction to JavaScript

Introduction to JavaScript

275 Views Download Presentation
Download Presentation

Introduction to JavaScript

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