1. Introduction To JavaScript What JavaScript Is: a general purpose scripting language that allows a static page to interact with users and respond to events that occurs on the page. JavaScript programs are executed by a JavaScript interpreter normally built right into the browser. What JavaScript Is Not: JavaScript is not Java. Java was developed by Sun Microsystems and JavaScript was developed by Netscape. JavaScript can be embedded in an HTML document and is contained between HTML tags. JavaScript has its own syntax rules and expects statements to be written in a certain way. What JavaScript Is Used For: JavaScript programs detect and react to user initiated events, such as a mouse going over a link or graphic. They provide navigational aids. JavaScript and Events: HTML is static, it does not react to user input. JavaScript is dynamic, interacting asynchronously with users on the client side.

2. Example 1 – event “onClick” Event <input type ="button" value = "Pinch me" onClick="alert('OUCH!!')" >

3. Other events that JavaScript can handle: onAbort – image loading interrupted onBlur – user moves away from a form element onChange – user changes a value in a form onClick – user clicks a button like form element onError – error loading an image onFocus – user activated a form element onLoad – document finished loading onMouseOut – mouse moved away from object onMouseOver – mouse moved over an object onSubmit – user submitted a form onUnLoad – user left the window or frame

4. What Versions? What Browsers? When the user receives a page with JavaScript, the script is sent to the JavaScript interpreter, which executes the script. Each browser has its own interpreter, so inconsistencies may occur. JavaScript 1.5 is supported by Netscape Navigator 6.0 and up, Internet Explorer 5.5 and up and Mozilla. Current version is 1.8.5

5. Where to put JavaScript Client-side JavaScript programs are embedded in an HTML document. You can place it between the “head” tags or between the “body” tags. The “head” is the best place to store function definitions and objects. For text displayed at a specific spot, you place the code in the “body”. You can have multiple scripts within a page. A JavaScript program starts with a tag and ends with a tag.

6. Example 2 First JavaScript Sample document.writeln(" Welcome to the JavaScript World! "); This is just plain old HTML stuff.

7. Output of example 2

8. JavaScript and old or disabled browsers If you write a script code in a Web page and the browser somehow does not support it, the JavaScript code will be treated as a regular HTML. So, if you hide your JavaScript code within HTML comments, the browser will ignore it.

9. Example 3 Functions <!-- Hiding JavaScript from Older Browsers document.write(" Welcome to Maine! "); //Stop Hiding JavaScript from Older Browsers --> Bailey's Island

10. Output Example 3 – browser supporting JavaScript

11. Example 4 Enabled/Disabled Browsers Sorry, you are not JavaScript enabled <!-- hiding from non-JavaScript enabled browsers document.write("Testing to see if JavaScript is turned on."); // done hiding -->

12. Example 5 Has JavaScript been turned off? <!-- document.write( " " ); document.writeln("Your browser supports JavaScript! "); //--> Please turn JavaScript on if you want to see this page! Netscape: Edit/Preferences/Advanced/Scripts and Plugins MSIE: Tools/Internet Options/Security/Custom Level/Scripting

13. JavaScript from External Files If the Web page contains long scripts or functions that will be used by other documents, these scripts can be placed in external files. The files must end with a.js extension.

14. Example 6 output First JavaScript Sample document.write(" "); document.write(" This is just plain old HTML stuff. ");

15. welcome.js file document.writeln(" Welcome, class of COMP267, to the JavaScript World! ");

16. The HTML document and JavaScript JavaScript scripts are not stand-alone programs. They run in the context of an HTML document. First Step is to create the HTML document: Hello <!-- Hide script from old browsers. document.write("Hello, world!"); // End hiding here. --> So long, world.

17. Script Execution You can type the URL in the navigation bar of your browser like: C:\DD\BCC\COMP267_1\ch2\hello.html

18. Syntactical Details You must obey rules, both HTML and JavaScript rules! HTML tags are not case sensitive. But JavaScript names ARE case sensitive. JavaScript ignore spaces if they appear between words. A function name cannot contain spaces. Spaces are preserved if embedded within a string or regular expression. As extra spaces are ignored by the JavaScript interpreter, you are free to indent, break lines, and organize your program.

19. Reserved Words abstract boolean break byte case catch char class const continue default delete do double else extends false final finally float for function goto if implements import in instanceof int interface long native new null package private protected public return short static super switch synchronized this throw throws transient true try typeof var void volatile while with

20. Statements and Semicolons; Comments Statements are executed top-down, one at a time. If there are multiple statements on a line, they must be separated by semicolons. It is good practice to terminate all statements with semicolon. Comments are ignored by the interpreter. You can have single line comments (//)or block comments(/* block */)

21. The tag JavaScript programs must start and end with the HTML tags and respectively. Those tags can be placed anywhere within the HTML document. If placed in the “head”, it will be executed before the page is displayed (this is the place for functions etc). If the script perform some action pertaining to the body of the document, then it is placed within the “body” tags.

22. Attributes of the tag language: JavaScript is the default. You could have VBScript, Jscript etc. type: Type specifies both the scripting language and the Internet content type src: src is used when the JavaScript code is in an external file.

23. String and string concatenation Although JavaScript does not understand HTML, it can generate HTML output with its built in methods write() and writeln(). String: set of characters enclosed in matching quotes. Concatenation is caused when two strings are joined together. The (+) sign is used to concatenate strings: “hot” + “ dog” = “hot dog”

24. write() and writeln() Those methods allow to generate pages dynamically. When generating output to the body of the document using those methods, put the code in the “body” part of the document, rather than in the “header”. Methods names are followed by a set of parentheses. The arguments go inside the parentheses. Without arguments, write() and writeln() would not have anything to write. JavaScript defines the current document as a document object. So, in order to display “Hello to you”, the syntax is: document.write(“Hello to you”);

25. Example 7 Printing Output Comparing the document.write and document.writeln methods document.write(" One, "); // No newline document.writeln("Two, "); document.writeln("Three, "); document.write("Blast off.... "); // break tag document.write("The browser you are using is " + navigator.userAgent + " "); document.writeln("With the HTML <pre> tags, "); document.writeln("the writeln method produces a newline."); document.writeln("Slam"); document.writeln("Bang"); document.writeln("Dunk!");