1 / 83

JAVASCRIPT TUTORIAL

WE PROVIDE PREMIUM MOCKUPS

barkha72451
Download Presentation

JAVASCRIPT TUTORIAL

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

  2. History • First web scripting language • Developed by Netscape and Sun • Initiated by Netscape and called LiveScript • In parallel with this, Sun was developing Java JavaScript

  3. History • Netscape and Sun got together and realized that many of the specifications for Java could apply to LiveScript • Result is JavaScript JavaScript

  4. JavaScript Versus Java • JavaScript is interpreted while Java is compiled • But server-side JavaScript is compiled • JavaScript is object-based while Java is object-oriented • Object-based languages can utilize pre-defined objects, but you are limited in terms of creating your own objects JavaScript

  5. JavaScript Versus Java • JavaScript has loose data typing, while Java has strong data typing • Loose data typing means that a variable can hold any kind of data • JavaScript code is embedded in an HTML document while Java applets are stand-alone applications that can be accessed from HTML JavaScript

  6. JavaScript Versus Java • JavaScript has dynamic binding, while Java has static binding • Names bound at runtime • JavaScript can access browser objects and functionality, while Java cannot JavaScript

  7. Client-Side JavaScript • Client-side JavaScript scripts operate on a client running Netscape Navigator (Microsoft Internet Explorer also supports it now) and are interpreted by Netscape Navigator JavaScript

  8. Client-Side JavaScript • Detect whether the browser supports a certain plug-in • Control a plug-in • Validate user form input • Prompt a user for confirmation • Perform post-processing of information retrieved from server-side JavaScript scripts JavaScript

  9. Server-Side JavaScript • JavaScript scripts that run on the server are called LiveWire applications because they use the Netscape LiveWire development environment • This is the only system that supports server-side JavaScript development JavaScript

  10. Server-Side JavaScript • Unlike CGI scripts, LiveWire applications are more closely integrated to the HTML pages that control them • Can have a page that accepts credit card payments and gives user immediate feedback on the same page about whether card was accepted JavaScript

  11. Client Scripts • To display error or information boxes • To validate user input • To display confirmation boxes • To process server data, such as aggregate calculations • To add programmable logic to HTML JavaScript

  12. Client Scripts • To perform functions that don’t require information from the server • To produce a new HTML page without making a request to the server JavaScript

  13. Server Scripts • To maintain data shared among applications or clients • To maintain information during client accesses • To access a database • To access server files • To call server C libraries • To customize Java applets JavaScript

  14. Scripts • Client-side and server-side JavaScript scripts are both embedded in an HTML file • For server-side JavaScript scripts, this HTML file is compiled with the LiveWire compiler • Creates a file that is in a platform-independent and compiled bytecode format JavaScript

  15. Scripts • Client-side JavaScript needs Netscape Navigator and a standard HTML server • Server-side JavaScript needs the LiveWire compiler, the LiveWire Application Manager, and a Netscape HTML server that supports the LiveWire server extension JavaScript

  16. Scripts • Examples js1.htm, js2.htm, js3.htm • The <head> portion of an HTML page is the first to load, so it is best to define the functions for a page in this portion • Functions can be called in the <body> portion JavaScript

  17. JavaScript Program Code • Main body • Event handlers • Functions JavaScript

  18. Main Body • Main Body • Any code that is between <script> and </script> that is not a function definition JavaScript

  19. Events • Events • Mouse click • Re-sizing window JavaScript

  20. Event Handlers • Event handlers • Scripts that link events to JavaScript functions • Embed in HTML documents as attributes of HTML tags • <tag eventHandler = “JavaScript Code”> • Example js4.htm JavaScript

  21. More Events • Top-level actions causing change in web page being displayed • Navigation • Interaction with an element of an HTML form JavaScript

  22. Navigation • Selecting a hypertext link • Moving forward or backward in the history list • Opening a new URL • Quitting the browser JavaScript

  23. Navigation • In these events, some page is being loaded or unloaded • These are document-level events that can be handled by JavaScript JavaScript

  24. JavaScript Events • button • click • checkbox • click • document • load • unload JavaScript

  25. JavaScript Events • form • submit • link • click • mouseover • radio • click JavaScript

  26. JavaScript Events • selection • blur • change • focus • submit • click JavaScript

  27. JavaScript Events • text • change • focus • A text field is said to have focus when it is currently accepting typed input • Clicking anywhere inside a text item gives it focus • Moving the mouse over the text field may give it focus • blur • The opposite of focus • select JavaScript

  28. JavaScript Events • textarea • blur • change • focus • select JavaScript

  29. Functions • Defining a function to create an object function house(rms, stl, yr, gar){ this.rooms = rms; this.style = stl; this.yearBuilt = yr; this.hasGarage = gar; } var myhouse = new house(8, “Ranch”, 1990, true) JavaScript

  30. Functions • Every object is an array of its property values and every array is an object • 0-based indexing • Thus, • myhouse[0] = 8 • myhouse[1] = “Ranch” • myhouse[2] = 1990 • myhouse[3] = true JavaScript

  31. Functions • Every object is also an associative array • Thus, • myhouse[“rooms”] = 8 • myhouse[“style”] = “Ranch” • myhouse[“yearBuilt”] = 1990 • myhouse[“hasGarage”] = true JavaScript

  32. Functions • Can dynamically extend an object instance yourhouse = new house(12, “Tudor”, 1934, true); yourhouse.hasPorch = “false”; yourhouse.windows = 46; • Doesn’t affect other object instances nor the object itself JavaScript

  33. Functions • A variable-length array-of-strings object function stringarr(howMany, initStr) { this.length = howMany; for (var j = 1; j <= howMany; j++) { this[j] = initStr; } } JavaScript

  34. for..in Statement for (varName in objName) { forBody } • varName takes on the successive property names of the object objName JavaScript

  35. for..in Statement function showAny(anyObj) { for (var iter in anyObj) { document.write(“<br>Property ” + iter + “ is ” + anyObj[iter]); } document.write(“<br>”); } JavaScript

  36. Methods function house(rms, stl, yr, garp) { this.length = 5; this.rooms = rms; this.style = stl; this.yearBuilt = yr; this.hasGarage = gar; this.show = mshowHouse; } JavaScript

  37. Methods function mshowHouse( ) { var nprops = this.length; for (var iter = 1; iter < nprops; iter++) { document.write(“<br>Property ” + iter + “ is ” + this[iter]); } document.write(“<br>”); } myhouse.show( ); JavaScript

  38. Techniques for Including JavaScript Code in HTML • Embed script between <script> and </script> • Event-handler functions • Through the javascript: URL pseudo-protocol • The JavaScript HTML entity • &lt JavaScript

  39. The <script>…</script> Tags • <script>-tag may appear in head or body • The language attribute is optional <script language = “JavaScript”> // JavaScript code </script> • Works for both Navigator 2.0 and Navigator 3.0 • language = “JavaScript1.1” works only for Navigator 3.0 JavaScript

  40. The <script>…</script> Tags • JavaScript is not the only language to use the <script>-tag <script language = “VBScript”> ' VBScript code </script> • JavaScript is the default scripting language • Can leave out the language attribute JavaScript

  41. The <script>…</script> Tags • An HTML document may contain more than one pair of non-overlapping <script> and </script>-tags • Statements executed in order of appearance • They constitute part of the same JavaScript program, however <script> var x = 1; </script> … <script> document.write(x); </script> JavaScript

  42. The <script>…</script> Tags • Selectively displaying text in JavaScript-ignorant browsers <script language = “none”> Your browser doesn’t understand JavaScript. This page won’t work for you. </script> JavaScript

  43. The <script>…</script> Tags • Selectively displaying text in JavaScript-ignorant browsers • Browsers that recognize the <script>-tag will know there is no such language as none and will ignore everything between the <script>and <script>-tags • Browsers that don’t understand the <script>and </script>-tags will ignore them and display the two lines in-between them JavaScript

  44. The <script>…</script> Tags • Including JavaScript files <script src = “../../javascript /prog.js”> </script> • Simplifies your HTML files • Can share JavaScript among different HTML files JavaScript

  45. The <script>…</script> Tags • Including JavaScript files • When they are used by more than one HTML file, this allows them to be cached by the browser, allowing them to load more quickly • The time savings of caching outweighs the delay incurred by the browser opening a network connection to download the JavaScript file JavaScript

  46. The <script>…</script> Tags • Including JavaScript files • A JavaScript program from one machine can use code located on other machines • This only works for Netscape 3.0 and higher • Can include JavaScript code in-between the <script> and </script>-tags for Netscape 2.0 browsers, as this is ignored by Netscape 3.0 browsers if the SRC attribute is defined JavaScript

  47. Event Handler Functions • Area • onClick( ), onMouseOver( ), onMouseOut( ) • Button • onClick( ) • Checkbox • onClick( ) JavaScript

  48. Event Handler Functions • FileUpload • onBlur( ), onChange( ), onFocus( ) • Form • onSubmit( ) • Frame • onLoad( ), onUnload( ) • Image • onAbort( ), onError( ), onLoad( ) JavaScript

  49. Event Handler Functions • Link • onClick( ), onMouseOver( ), onMouseOut( ) • Radio • onClick( ) • Reset • onClick( ) • Select • onChange( ) JavaScript

  50. Event Handler Functions • Submit • onClick( ) • Text • onBlur( ), onChange( ), onFocus( ) • Textarea • onBlur( ), onChange( ), onFocus( ) • Window • onBlur( ), onError( ), onFocus( ), onLoad( ), onUnload( ) JavaScript

More Related