Javascript talk1
0 likes289 views
1. JavaScript is a scripting language used to add interactivity to web pages. It allows dynamic updating of content and reaction to user events. 2. Code can be placed in the <head>, <body>, or externally in .js files. Events like onclick trigger JavaScript functions. 3. A simple example prompts the user to click a button, then displays an alert. Color and other document properties can also be dynamically changed.
Javascript talk1
- 1. 1 CISHCISH--6510 Web Application6510 Web Application Design and DevelopmentDesign and Development Overview of JavaScriptOverview of JavaScript 2 OverviewOverview What is JavaScript?What is JavaScript? HistoryHistory Uses of JavaScriptUses of JavaScript Location of CodeLocation of Code Simple Alert ExampleSimple Alert Example EventsEvents Events ExampleEvents Example Color ExampleColor Example
- 2. 2 3 What is JavaScript?What is JavaScript? Language used for adding dynamismLanguage used for adding dynamism to Web pages.to Web pages. Loosely typed: Variables not typed.Loosely typed: Variables not typed. ObjectObject--based: Limited support forbased: Limited support for inheritance.inheritance. Interpreted: Interpreter built intoInterpreted: Interpreter built into browsers.browsers. Modeled after C++.Modeled after C++. Similar syntaxSimilar syntax 4 What is JavaScript?What is JavaScript? (cont.)(cont.) JavaScript can:JavaScript can: Put dynamic text into an HTML page.Put dynamic text into an HTML page. React to events.React to events. E.g. when a user clicks on an HTMLE.g. when a user clicks on an HTML elementelement Read and write HTML elements.Read and write HTML elements. Be used to validate data.Be used to validate data. Saves network traffic and serverSaves network traffic and server--sideside processingprocessing
- 3. 3 5 HistoryHistory JavaScript created in 1995 byJavaScript created in 1995 by BrendanBrendan EichEich of Netscape.of Netscape. First used in Netscape 2.0.First used in Netscape 2.0. Originally called “Originally called “LiveScriptLiveScript.”.” Changed to “JavaScript” to rideChanged to “JavaScript” to ride popularity of Java.popularity of Java. 1997 European Computer1997 European Computer Manufacturers Association (ECMA)Manufacturers Association (ECMA) released ECMAreleased ECMA--262 standard.262 standard. Based on JavaScript 1.1Based on JavaScript 1.1 6 6.0x6.0x6.0x6.0x--7.0x7.0xVersion 4Version 41.51.5 5.5x5.5x5.05.0Version 3Version 31.41.4 5.0x5.0x-- 5.1x5.1x4.074.07--4.7x4.7xVersion 2Version 21.31.3 4.0x4.0x4.0x4.0x--4.054.05NotNot compatcompat..1.21.2 3.02x3.02x3.0x3.0xVersion 1Version 11.11.1 3.0x3.0x2.0x2.0x1.01.0 IEIENNNNECMASECMAS VersionVersion JSJS VerVer..
- 4. 4 7 HistoryHistory (cont.)(cont.) JavaScript 2.0 is in the works.JavaScript 2.0 is in the works. www.mozilla.orgwww.mozilla.org Under development as of spring 2004Under development as of spring 2004 Closely matches theClosely matches the ECMAScriptECMAScript Edition 4 standard.Edition 4 standard. http://www.ecmahttp://www.ecma--international.orginternational.org 8 Uses of JavaScriptUses of JavaScript Dynamism takes three forms:Dynamism takes three forms: 1.1. Events:Events: Allows you to monitorAllows you to monitor events and change positioning orevents and change positioning or content based on events.content based on events. 2.2. Dynamic positioning:Dynamic positioning: Can tell theCan tell the browser where to place contentbrowser where to place content without using tables.without using tables. 3.3. Dynamic content:Dynamic content: Allows dynamicAllows dynamic updating of data at specified timeupdating of data at specified time intervals.intervals.
- 5. 5 9 Location of CodeLocation of Code JavaScript may be three places:JavaScript may be three places: 1.1. In theIn the <head><head> element.element. Place scripts to be called or whenPlace scripts to be called or when event is triggered hereevent is triggered here Ensures script is loaded before calledEnsures script is loaded before called <html> <head> <script type="text/javascript“> script statements </script> </head> 10 Location of CodeLocation of Code (cont.)(cont.) 2.2. In theIn the <body><body> element.element. Place scripts to be executed when thePlace scripts to be executed when the page loads herepage loads here Script generates some or all of theScript generates some or all of the content of the pagecontent of the page <body> <script type="text/javascript"> script statements </script> </body>
- 6. 6 11 Location of CodeLocation of Code (cont.)(cont.) 3.3. External to the HTML file.External to the HTML file. Maximizes reuse across pagesMaximizes reuse across pages <head> <script src=“myfile.js"> </script> </head> Script could be inScript could be in <head><head> oror <body><body>.. External script shouldExternal script should notnot containcontain <script><script> tag.tag. 12 Simple Alert ExampleSimple Alert Example Try the example at:Try the example at: http://www.rh.edu/~heidic/http://www.rh.edu/~heidic/ webtechwebtech/examples/JavaScript//examples/JavaScript/ simple.htmlsimple.html Simple JavaScript Example using Alert Click on the button greetings
- 7. 7 13 Simple Alert ExampleSimple Alert Example (cont.)(cont.) <html> <head> <title> Simple JavaScript alert button example. </title> <script language=”JavaScript” type=”text/javascript”> function mywelcome () { alert("Welcome to Heidi Ellis' simple JavaScript page.");} </script> 14 Simple Alert ExampleSimple Alert Example (cont.)(cont.) </head> <body> <h1>Simple JavaScript Example using Alert. </h1> <script> document.writeln( "Click on the button.") </script>
- 8. 8 15 Simple Alert ExampleSimple Alert Example (cont.)(cont.) <form> <input type="button" name="welcome" value="greetings" onClick="mywelcome()"> </form> </body> </html> 16 EventsEvents One of the primary uses of JavaScriptOne of the primary uses of JavaScript is to make Web pages interactive.is to make Web pages interactive. Responsive to user actionsResponsive to user actions JavaScript provides event handlers.JavaScript provides event handlers. Execute segment of code based onExecute segment of code based on events occurring within the applicationevents occurring within the application E.g.,E.g., onLoadonLoad oror onClickonClick Handlers associated with elements.Handlers associated with elements. Not all elements support all eventNot all elements support all event handlers.handlers.
- 9. 9 17 EventsEvents (cont.)(cont.) <input type="button" name="clickme" value="Click Here" onClick= "window.status='Thanks'; return true;"> 18 EventsEvents (cont.)(cont.) Event handlers can be categorizedEvent handlers can be categorized into interactive and noninto interactive and non--interactive.interactive. Interactive: Depends on a userInteractive: Depends on a user action.action. E.g.,E.g., onClickonClick NonNon--interactive: Noninteractive: Non--user event.user event. E.g.,E.g., onLoadonLoad
- 10. 10 19 EventsEvents (cont.)(cont.) onAbortonAbort: Image loading is: Image loading is interrupted.interrupted. onBluronBlur: Element loses input focus.: Element loses input focus. onChangeonChange: User selects or deselects: User selects or deselects item.item. onClickonClick: User clicks once.: User clicks once. onDragDroponDragDrop:: onErroronError: Image doesn’t load: Image doesn’t load properly.properly. 20 EventsEvents (cont.)(cont.) onFocusonFocus: Element is given input: Element is given input focus.focus. onKeyPressonKeyPress:: onKeyUponKeyUp:: onLoadonLoad:: onMouseDownonMouseDown:: onMouseOveronMouseOver:: onMouseOutonMouseOut:: onMouseUponMouseUp::
- 11. 11 21 EventsEvents (cont.)(cont.) onMoveonMove: User or JavaScript moves: User or JavaScript moves window.window. onResetonReset: User clicks reset button.: User clicks reset button. onResizeonResize: User resizes window.: User resizes window. onSelectonSelect: User selects text in: User selects text in texttext oror textAreatextArea.. onSubmitonSubmit: User clicks submit button.: User clicks submit button. onUnloadonUnload: User exits document.: User exits document. GatescriptGatescript has event reference page:has event reference page: http://http://www.gatescript.comwww.gatescript.com// events.htmlevents.html 22 EventsEvents Supporting EventsSupporting Events 1.1. Give the target HTML element aGive the target HTML element a namename attribute.attribute. <input type="text" name="price" /> 2.2. Give activating HTML element eventGive activating HTML element event attribute that calls function.attribute that calls function. <input type="submit" value="Calculate total." onClick="calcTotal()"/>
- 12. 12 23 EventsEvents Supporting EventsSupporting Events 3.3. Write the JavaScript function toWrite the JavaScript function to modify the DOM element with themodify the DOM element with the name attribute.name attribute. Try the “Event page” JavaScriptTry the “Event page” JavaScript example:example: http://www.rh.edu/~heidic/http://www.rh.edu/~heidic/ webtechwebtech/examples/JavaScript//examples/JavaScript/ events.htmlevents.html 24 Events ExampleEvents Example Simple Example to Show the use of Events Enter a price ... Price of item: Quantity purchased: The total is: 10 12 120
- 13. 13 25 Events ExampleEvents Example (cont.)(cont.) <html> <head> <title> JavaScript Test </title> <script language="JavaScript" type="text/javascript"> 26 Events ExampleEvents Example (cont.)(cont.) function calcTotal() { tot = document.totalForm. price.value * document.totalForm.qty.value; document.totalForm.total.value = tot; } </script>
- 14. 14 27 Events ExampleEvents Example (cont.)(cont.) </head> <body bgcolor="papayawhip"> <h1>Simple Example to Show the use of Events</h1> <p>Enter a price and move cursor out of box. The new total will be calculated automatically. 28 Events ExampleEvents Example (cont.)(cont.) </p> <form name="totalForm"> Price of item: <input type="text" name="price" onMouseout="calcTotal()" /> <br> Quantity purchased:
- 15. 15 29 Events ExampleEvents Example (cont.)(cont.) <input type="text" name="qty" onMouseout="calcTotal()" /> <br> <br> The total is: <input type="text" name="total" /> <br> 30 Events ExampleEvents Example (cont.)(cont.) </form> </body> </html>
- 16. 16 31 Color ExampleColor Example Try the “Color example” JavaScript:Try the “Color example” JavaScript: http://http://www.rh.edu/~heidicwww.rh.edu/~heidic// webtechwebtech/examples/JavaScript//examples/JavaScript/ prop.htmlprop.html <html> <head> <title> Simple JavaScript document properties example. </title> </head> 32 Color ExampleColor Example (cont.)(cont.) <body bgcolor="white"> <script language="JavaScript" type="text/javascript"> document.bgColor="red"; alert("Press button for another color"); document.bgColor="blue"; alert("Press button for another color");
- 17. 17 33 Color ExampleColor Example (cont.)(cont.) document.bgColor="cyan"; alert("Press button for another color"); document.bgColor="indigo"; alert("Press button for a different title"); document.title= "New Document Title"; </script> 34 Color ExampleColor Example (cont.)(cont.) <center> <h1> Color Play!! </h1> </center> </body> </html>
- 18. 18 35 Workshop 1Workshop 1 Create a small Web page thatCreate a small Web page that prompts the user to enter their name.prompts the user to enter their name. Write a JavaScript function that popsWrite a JavaScript function that pops up an alert when the user has enteredup an alert when the user has entered their name.their name. Advanced: Display the user’s name inAdvanced: Display the user’s name in the alert.the alert.