Java Script History First web scripting language n

Java. Script

History First web scripting language n Developed by Netscape and Sun n Initiated by Netscape and called Live. Script n In parallel with this, Sun was developing Java n Java. Script 2

History Netscape and Sun got together and realized that many of the specifications for Java could apply to Live. Script n Result is Java. Script n Java. Script 3

Java. Script Versus Java n Java. Script is interpreted while Java is compiled – But server-side Java. Script is compiled n Java. Script is object-based while Java is object-oriented – Object-based languages can utilize predefined objects, but you are limited in terms of creating your own objects Java. Script 4

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

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

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

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

Server-Side Java. Script n Java. Script scripts that run on the server are called Live. Wire applications because they use the Netscape Live. Wire development environment – This is the only system that supports server -side Java. Script development Java. Script 9

Server-Side Java. Script n Unlike CGI scripts, Live. Wire 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 Java. Script 10

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

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

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

Scripts Client-side and server-side Java. Script scripts are both embedded in an HTML file n For server-side Java. Script scripts, this HTML file is compiled with the Live. Wire compiler n – Creates a file that is in a platformindependent and compiled bytecode format Java. Script 14

Scripts Client-side Java. Script needs Netscape Navigator and a standard HTML server n Server-side Java. Script needs the Live. Wire compiler, the Live. Wire Application Manager, and a Netscape HTML server that supports the Live. Wire server extension n Java. Script 15

Scripts Examples js 1. htm, js 2. htm, js 3. htm n 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 n – Functions can be called in the <body> portion Java. Script 16

Java. Script Program Code Main body n Event handlers n Functions n Java. Script 17

Main Body n Main Body – Any code that is between <script> and </script> that is not a function definition Java. Script 18

Events n Events – Mouse click – Re-sizing window Java. Script 19

Event Handlers n Event handlers – Scripts that link events to Java. Script functions – Embed in HTML documents as attributes of HTML tags Java. Script n <tag event. Handler = “Java. Script Code”> n Example js 4. htm 20

More Events n Top-level actions causing change in web page being displayed – Navigation – Interaction with an element of an HTML form Java. Script 21

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

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

Java. Script Events n button – click n checkbox – click n document – load – unload Java. Script 24

Java. Script Events n form – submit n link – click – mouseover n radio – click Java. Script 25

Java. Script Events n selection – blur – change – focus n submit – click Java. Script 26

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

Java. Script Events n textarea – blur – change – focus – select Java. Script 28

Functions n Java. Script Defining a function to create an object function house(rms, stl, yr, gar){ this. rooms = rms; this. style = stl; this. year. Built = yr; this. has. Garage = gar; } var myhouse = new house(8, “Ranch”, 1990, true) 29

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

Functions Every object is also an associative array n Thus, n – myhouse[“rooms”] = 8 – myhouse[“style”] = “Ranch” – myhouse[“year. Built”] = 1990 – myhouse[“has. Garage”] = true Java. Script 31

Functions n Can dynamically extend an object instance yourhouse = new house(12, “Tudor”, 1934, true); yourhouse. has. Porch = “false”; yourhouse. windows = 46; – Doesn’t affect other object instances nor the object itself Java. Script 32

Functions n A variable-length array-of-strings object function stringarr(how. Many, init. Str) { this. length = how. Many; for (var j = 1; j <= how. Many; j++) { this[j] = init. Str; } } Java. Script 33

for. . in Statement for (var. Name in obj. Name) { for. Body } n Java. Script var. Name takes on the successive property names of the object obj. Name 34

for. . in Statement function show. Any(any. Obj) { for (var iter in any. Obj) { document. write(“ Property ” + iter + “ is ” + any. Obj[iter]); } document. write(“ ”); } Java. Script 35

Methods function house(rms, stl, yr, garp) { this. length = 5; this. rooms = rms; this. style = stl; this. year. Built = yr; this. has. Garage = gar; this. show = mshow. House; } Java. Script 36

Methods Java. Script function mshow. House( ) { var nprops = this. length; for (var iter = 1; iter < nprops; iter++) { document. write(“ Property ” + iter + “ is ” + this[iter]); } document. write(“ ”); } myhouse. show( ); 37

Techniques for Including Java. Script Code in HTML n Embed script between <script> and </script> Event-handler functions n Through the javascript: URL pseudoprotocol n The Java. Script HTML entity – &lt n Java. Script 38

The <script>…</script> Tags n <script>-tag may appear in head or body n The language attribute is optional <script language = “Java. Script”> // Java. Script code </script> – Works for both Navigator 2. 0 and Navigator 3. 0 Java. Script – language = “Java. Script 1. 1” works only for Navigator 3. 0 39

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

The <script>…</script> Tags n 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 Java. Script program, however Java. Script <script> var x = 1; </script> … <script> document. write(x); </script> 41

The <script>…</script> Tags n Selectively displaying text in Java. Scriptignorant browsers <script language = “none”> Your browser doesn’t understand Java. Script. This page won’t work for you. </script> Java. Script 42

The <script>…</script> Tags n Java. Script Selectively displaying text in Java. Scriptignorant 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 43

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

The <script>…</script> Tags n Including Java. Script 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 n Java. Script The time savings of caching outweighs the delay incurred by the browser opening a network connection to download the Java. Script file 45

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

Event Handler Functions n Area – on. Click( ), on. Mouse. Over( ), on. Mouse. Out( ) n Button – on. Click( ) n Checkbox – on. Click( ) Java. Script 47

Event Handler Functions n File. Upload – on. Blur( ), on. Change( ), on. Focus( ) n Form – on. Submit( ) n Frame – on. Load( ), on. Unload( ) n Image – on. Abort( ), on. Error( ), on. Load( ) Java. Script 48

Event Handler Functions n Link – on. Click( ), on. Mouse. Over( ), on. Mouse. Out( ) n Radio – on. Click( ) n Reset – on. Click( ) n Java. Script Select – on. Change( ) 49

Event Handler Functions n Submit – on. Click( ) n Text – on. Blur( ), on. Change( ), on. Focus( ) n Textarea – on. Blur( ), on. Change( ), on. Focus( ) n Window – on. Blur( ), on. Error( ), on. Focus( ), on. Load( ), on. Unload( ) Java. Script 50

Java. Script in URL's n javascript: function; greeting+name +message; – Multiple statements separated by semicolons – Value of last expression evaluated becomes the document that URL refers to and this value will be formatted and displayed Java. Script 51

Java. Script in URL's n javascript: alert(“Hello World!”); – Has side-effect but returns no value – Browser executes the code but doesn’t modify currently displayed document Java. Script 52

Java. Script in URL's n Can use void operator to remove returned value and just have side-effect of assignment javascript: void function( ); n Microsoft has syntax, <a href = “script-engine: script-code”> – Supports vbscript: Java. Script 53

Java. Script Entities n &{Java. Script-statements}; – Can only appear within the value of HTML attributes <body bgcolor = “&{favorite_color( ); }; ”> Java. Script 54

Order of Execution n Scripts – Java. Script statements that appear between <script> and </script>-tags are executed in the order they appear – When more than one script appears in a page, they are executed in the order they appear Java. Script 55

Order of Execution n Scripts – Java. Script code evaluation occurs as part of the browser’s HTML parsing process Thus, if script appears in the <head> portion of an HTML document, none of the <body> of the document will have been defined yet n Thus, many Java. Script objects, such as form objects, haven’t as yet been created and cannot be manipulated by this code n Java. Script 56

Order of Execution n Functions – Functions shouldn’t be executed before the objects they manipulate exist – Functions should be defined before they are invoked – Can define function to manipulate objects before these objects exist Java. Script 57

Order of Execution n Event handlers – May be invoked before a page is fully loaded and parsed n In a slow network connection, some links can initially appear and be clicked before page fully loads – Thus, if your event handler invokes functions, you must make sure they are defined n Java. Script Put all function definitions in the <head> 58

Order of Execution n Event handlers – Also, you must take care that event handlers don’t try to manipulate HTML objects that haven’t been parsed and created n Java. Script Can test for existence of object to be manipulated if ((parent. frames[1]) && (parent. frames[1]. document. myform)) { … } 59

Order of Execution n Event handlers – Also, you must take care that event handlers don’t try to manipulate HTML objects that haven’t been parsed and created n Place this small script at very end of document which sets a flag and have event handlers test this flag <script>done_loading=1</script></body></html> Java. Script 60

Order of Execution n Event handlers – on. Load( ) and on. Unload( ) event handlers n In Netscape 3. 0, the on. Load( ) handler is executed when document or frameset is fully loaded – When using multiple frames, one doesn’t know in what order the on. Load( ) handler will be invoked for the various frames n Handler for child frames can be invoked before handler for parent frame Java. Script 61

Order of Execution n Event handlers – on. Load( ) and on. Unload( ) event handlers n The on. Unload( ) handler is executed when user requests the browser to move to some other page and just before the browser leaves current document Java. Script 62

Order of Execution n Java. Script URLs – This is not executed when the document containing the URL code is loaded – Only interpreted when the browser tries to load the document to which URL refers Java. Script 63

Order of Execution n Java. Script entities – Executed during process of HTML parsing Java. Script 64

Java. Script Object Hierarchy n The current window n navigator (navigator object) – self, window, parent, top (various Window objects) – plugins[ ] (array of plugin objects) n Java. Script mime. Types[ ] (array of mime. Type objects) 65

Java. Script Object Hierarchy frames[ ] (array of window objects) n location (location object) n – location. href = “needsjava. html”; n history (history object) – <input type=button value = “back” on. Click = “history. back( ); ”> Java. Script 66

Java. Script Object Hierarchy n document (document object) – forms[ ] (array of form objects) n elements[ ] (array of HTML form element objects) – button – checkbox – fileupload (3. 0) – hidden – password – radio – reset Java. Script 67

Java. Script Object Hierarchy n document (document object) – forms[ ] (array of form objects) n elements[ ] (array of HTML form element objects) – select n options[ ] (array of option objects) – submit – textarea Java. Script 68

Java. Script Object Hierarchy n document (document object) – anchors[ ] (array of anchor objects) – links[ ] (array[ ] of link objects) – images[ ] (array of image objects) (3. 0) – applets[ ] (array of Java. Object objects) (3. 0) – embeds[ ] (array of Java. Object objects) (3. 0) Java. Script 69

Java. Script Object Hierarchy n packages (Java. Package object) – Various Java. Package and Java. Class objects (3. 0) Java. Script 70

Java. Script Objects Built-in objects n HTML objects n Browser objects n Java. Script 71

Built-in Objects string objects n date object n math object n Java. Script 72

string Objects n string object methods for HTML formatting – anchor n “Bill”. anchor(“anchortext”) – <a name = “anchortext”>Bill</a> – big n “Bill”. big( ) – <big>Bill<big> Java. Script 73

string Objects n string object methods for HTML formatting – blink n “Bill”. blink( ) – <blink>Bill</blink> – bold n “Bill”. bold( ) – <b>Bill</b> Java. Script 74

string Objects n string object methods for HTML formatting – fixed n “Bill”. fixed( ) – <tt>Bill</tt> – fontcolor n “Bill”. fontcolor(“blue”) – <font color = “blue”><Bill></font> Java. Script 75

string Objects n string object methods for HTML formatting – fontsize n “Bill”. fontsize(-1) – <font size = -1>Bill</font> – italics n “Bill”. italics( ) – <i>Bill</i> Java. Script 76

string Objects n string object methods for HTML formatting – link n “Bill”. link(“linktext”) – <a href = “linktext”>Bill</a> – small n “Bill”. small( ) – <small>Bill</small> Java. Script 77

string Objects n string object methods for HTML formatting – strike n “Bill”. strike( ) – <strike>Bill</strike> – sub n “Bill”. sub( ) – <sub>Bill</sub> Java. Script 78

string Objects n string object methods for HTML formatting – sup n “Bill”. sup( ) – <sup>Bill</sup> – to. Lower. Case n “Bill”. to. Lower. Case( ) – bill Java. Script 79

string Objects n string object methods for HTML formatting – to. Upper. Case n “Bill”. to. Upper. Case( ) – BILL Java. Script 80

string Objects n string object methods for displaying subsets of strings – char. At n “Bill”. char. At(1) is “i” – index. Of n Java. Script “Bill”. index. Of(“il”) is 1 81

string Objects n string object methods for displaying subsets of strings – last. Index. Of n “Bill”. last. Index. Of(“l”) is 3 – substring n “Bill”. substring(1, 2) is “il” – length n Java. Script “Bill”. length is 4 82

date Object n Java. Script See js 11. htm 83