1 CSC160 Chapter 1: Introduction to JavaScript Chapter 2: Placing JavaScript in an HTML File

2 What is JavaScript? JavaScript is a web-specific scripting language It is usually placed in an HTML file to make Web pages more interactive, and to give Web pages some special features (visual or otherwise). HTML is used to develop static Web pages. It is not Java It is object based It is a client-side language

3 JavaScript Is NOT Java JavaScript and Java are two different languages. Java is more powerful but more complex. It is a complicated programming language that can be used to program for various kinds of applications including writing web-pages. JavaScript is web scripting language used to write web pages only.

4 JavaScript Is NOT Java (cont’d) Java is a full programming language that must be compiled before a program can be executed. Compiler can find the syntax errors so that the programmer can fix the errors before running the program. JavaScript does not need to be compiled. Instead, it is a scripting language that is interpreted on-the-fly when running. The code is interpreted as it is loaded and run. The syntax error can only be caught when actually running the program.

5 Server-Side VS. Client-Side Languages Client (Web browser) Retrieve information from the client Web Server A program in server-side language Send processed information back to the client Save information on the web server Use new information to update Web pages Server-side Client (Web browser) A JavaScript Program * Code is read & run by the client. * Data results is viewed at the client Data can be validated by the JavaScript program Client-side

6 Server-Side VS. Client-Side Languages (cont’d) A server-side language The program is run on the Web server Needs to retrieve information from the Web page or the Web browser. Often allows programmers to save information on the Web server Cannot directly access some information that a client-side language can see

7 Server-Side VS. Client-Side Languages (cont’d) A client-side language Run directly through the client (for JavaScript, the client is the Web browser) The browser reads and interprets the code Can retrieve, process data and view the results locally Without extra step of retrieving information from somewhere else This can make certain tasks run more quickly Cannot save files or updates to files on a Web server Allow information to be validated before it is sent to a server-side program or script

8 Basic Text Editor and Web Browser Knowledge Some HTML editors have problems related to adding JavaScript code Use a plain text editor or an HTML editor that handles the addition of your own JavaScript code easily Some Web browsers have trouble with the newer versions of JavaScript Use Microsoft Internet Explorer version 4.0 or later Use Netscape Navigator version 4.0 or later The following table shows the versions of JavaScript that Microsoft Internet Explorer and Netscape Navigator support MS Internet Explorer VersionNetscape Navigator VersionJavaScript Version Supported 5.5 and and /1.1

9 Where Does the JavaScript Code Go? JavaScript runs in the browser by being added directly into an existing HTML document. … Put the JavaScript code between this pair of tags Place JavaScript code into either the HEAD section or BODY section of an HTML document

10 Put JavaScript in the HEAD Section of an HTML Document Scripts that do not write to the page directly, such as those that change elements or define variables, are normally placed in the HEAD section of an HTML file In this example, a window will pop up with an alert message. This is realized by the JavaScript we insert into the HEAD section of the HTML document. My Web Page. window.alert("This is an alert message written by JavaScript"); When you open this page, a window pops up with an alert message!

11 Put JavaScript in the BODY Section of an HTML Document Scripts that write something directly to the page are normally placed in the BODY section of a HTML file In this example, text “This text was written to the page by JavaScript.” will be output to the monitor screen. This is generated by JavaScript we insert into the BODY section of the HTML document. My Web Page. This text was written by HTML. document.write( " This text is written to the page by JavaScript. " );

12 JavaScript Code document.write("This text is written to the page by JavaScript."); document: object, the HTML page dot operator (.): use an object’s methods or properties write(): method, function "This text was written to the page by JavaScript.": argument of write function, input quotation marks ("): denote a string of text semicolon (;): the end of a JavaScript statement

13 HTML SCRIPT Tags Script tags ( and ) are used to tell the browser where some type of scripting language will begin and end in an HTML document Distinguish where a script begins and ends Tell the browser which scripting language will be used Define the address for an external JavaScript file JavaScript code is put here Tells the browser where script code begins Tells the browser where script code ends

14 HTML SCRIPT Tags: Identify the Scripting Language The scripting language between and could be JavaScript, VBScript, or some other scripting language. Many browsers assume that scripting code between the opening and closing SCRIPT tags will be JavaScript, but some browsers don’t. To be safe, explicitly identify the language as JavaScript by adding the language attribute with the value of “JavaScript” to the opening SCRIPT tag JavaScript code is put here Tells the browser the scripting language will be JavaScript

15 HTML SCRIPT Tags: Identify the Version Number of JavaScript If you are writing code that works only in or above a certain version of JavaScript, you can add the version number right after the word “JavaScript” in the language attribute with no space between them Specify a version if you write scripts that use options available in only the latest versions of JavaScript JavaScript code is put here The browser will execute this code only if it can handle JavaScript 1.2 or later

16 HTML SCRIPT Tags: Identify External JavaScript Files to Be Called If you wish to call an external JavaScript file, you can add a src attribute to the opening SCRIPT tag This external JavaScript file is a text file that contains nothing but JavaScript code, and it is saved with the.js file extension If the script is extremely long, using the src attribute to add the script to multiple Web pages can be much quicker than inserting the entire code on every page This method may not be supported by some browsers Tell the browser to call an external JavaScript file named “ yourfile.js ” No spaces

17 Hide JavaScript Code from Old Browsers When the web page is opened in an old browser that does not support JavaScript, the entire content of your JavaScript code can be dumped on the page as plain text To prevent that, you can place HTML comments between the opening and closing SCRIPT tags. <!-- opens the HTML comment --> closes the HTML comment // is for the JavaScript comment JavaScript knows to ignore the opening of an HTML comment, but not the closing of an HTML comment //--> can make sure that the closing HTML comments does not cause error in the script <!-- JavaScript code is put here //--> Begins the HTML comment to hide the code from older browsers Ends the HTML comment to hide the code from older browsers

18 Case Sensitivity HTML is not case sensitive You can put the entire tag in all lowercase, uppercase, or mixed case, whatever you prefer. The SCRIPT tag is an HTML tag, so it is not case sensitive. JavaScript is case sensitive For example, “DOCUMENT.Write(“Output the text”);” is not legal JavaScript code. Instead, the correct one is “document.write("Output the text");”

19 Comments in JavaScript Comments can be used to make notes in JavaScript, such as to describe what a line of code is supposed to do disable a line in the script Inserting comment on one line (//) Anything preceding the two slashes on this line is live code which will be executed Anything after the slashes on this line will be ignored // Put your comment here Any thing after the slashes on this line is ignored

20 Comments in JavaScript (cont’d) Adding multiple-line comments (/*… */) The comments can span any number of lines We can begin the comment on one line and end it on another line /* and */ must be used in pair /* is for opening the comment */ is for closing the comment /* Put your comment here */ Any thing between /* and */ is ignored.

21 Comments in JavaScript: Examples document.write("This is CSC160: "); // document.write ("Spring, 2008,"); document.write("JavaScript"); This is CSC160: JavaScript What is displayed One-line comment document.write("This is CSC160: ") /* document.write ("Spring, 2008,"); document.write("JavaScript"); */ This is CSC160: What is displayed Multiple-line comment