1. Tutorial 1: Introduction to JavaScript JavaScript - Introductory

2. Section A: Programming, HTML, and JavaScript

3. Objectives In this section you will learn: About the World Wide Web What JavaScript is used for About Hypertext Markup Language How to create an HTML document About the JavaScript programming language About logic and debugging

4. The World Wide Web JavaScript lives and works within Web pages on the World Wide Web World Wide Web (the “Web”) was created in 1989 at the European Laboratory for Particle Physics in Geneva, Switzerland Documents are located and opened using hypertext links, which contain a reference to a specific document Hypertext Markup Language (HTML) is a simple language used to design Web pages

5. The World Wide Web Web browser is a program that displays HTML documents on your computer screen Hypertext Transfer Protocol (HTTP) manages hypertext links used to navigate the Web Domain name is a unique address used for identifying a computer, often a Web server, on the Internet Domain name consists of two parts separated by a period:1) usually composed of text that identifies a person or organization, 2) identifies the type of institution or organization

6. Sample URL

7. JavaScript’s Role on the Web The main purpose of HTML is to tell a browser how the document should appear JavaScript brings HTML to life and makes Web pages dynamic Use JavaScript to change the contents of a Web page after it has been rendered by a browser JavaScript is used for many different purposes, including advertising and entertainment

8. Image Map

9. Online Calculator

10. Product Registration Form

11. Hypertext Markup Language HTML documents must be text documents that contain formatting instructions, called tags, along with the text that has to be displayed on a Web page HTML tags range from formatting commands that boldface and italicize text to controls that allow user input HTML documents must have a file extension of.html or.htm Assembling and formatting an HTML document is called parsing or rendering

12. Hypertext Markup Language HTML is not case-sensitive All HTML documents begin with and end with Various parameters, called attributes, are used to configure many HTML tags (i.e. tag)

13. Common HTML Tags

14. Hypertext Markup Language Two important HTML tags are the and The tag is placed at the start of an HTML document When a Web browser renders an HTML document, it ignores non-printing characters and only recognizes HTML tags and text included in the final document

15. HTML Tags Placed Within the … Tag Pair

16. Tag Attributes

17. Creating an HTML Document Since HTML documents are text files, you can create them in any text editor such as NotePad, WordPad, or any word-processing program HTML documents displayed in Internet Explorer can appear differently in Navigator To create an HTML document: –Start text editor or HTML editor and create a new document –Type to begin the HTML document. Remember that all HTML documents should begin and end with the … tag pair

18. Creating an HTML Document –Press Enter and add the following and to the document. The title will appear in your Web browser’s title bar. Remember that the … tag pair must include the … tag pair. The … tag pair and cannot exist outside of the … tag pair. Web Page Example –Press Enter and type to begin the body section of the HTML document

19. Creating an HTML Document –Press Enter and type the following tags and text to create the body of the HTML document. Hello World This is my first Web page. This line is H2 This line is H3 The following line is empty. bold, italic, underline

20. Creating an HTML Document –Press Enter, then finish the document by typing the following tags to close the … and … tag pairs: –Save the file as HelloWorld.html in the Tutorial.01 folder on your Student Disk. –Start Navigator, Internet Explorer, or another Web browser. Then open the HelloWorld.html file in your Web browser. Figure 1-10 displays the HelloWorld.html file as it appears in Navigator 4.0. –Close your Web browser by clicking the Close button.

21. HelloWorld.html in Navigator 4.0

22. The JavaScript Programming Language JavaScript is a scripting language Scripting language refers to programming languages that are executed by an interpreter from within a Web browser Interpreter translates programming code into an executable format each time the program is run Scripting engine is an interpreter that is part of the Web browser Scripting host is a web browser that contains a scripting engine

23. The JavaScript Programming Language JavaScript language was first introduced in Navigator and was originally called LiveScript JavaScript is available in two formats: client- side and server-side The standardized client-side JavaScript is the format available to HTML pages displayed in Web browsers Server-side JavaScript is proprietary and vendor-specific

24. Relationship of Client-Side and Server-Side JavaScript

25. Logic and Debugging JavaScript has its own syntax, or rules of the language Logic underlying any program involves executing the various parts of the program in correct order to produce desired results Any error in a program that causes it to function incorrectly is called a bug Debugging describes the act of tracing and resolving errors in a program. Term coined by Grace Murray Hopper, who was instrumental in developing the COBOL programming language

26. Section A: Chapter Summary Hypertext Markup Language (HTML) is a simple protocol used to design Web pages that appear on the World Wide Web The World Wide Web is driven by Hypertext Transfer Protocol (HTTP), which manages hypertext links that are used to navigate the Web Every Web document has a unique address known as a Uniform Resource Locator (URL) JavaScript brings HTML to life and makes Web pages dynamic, turning them into applications

27. Section A: Chapter Summary HTML documents must be text documents that contain formatting instructions, called tags, along with the text that is to be displayed on Web page HTML tags range from formatting commands to controls that allow user input, to tags that allow the display of graphic images and other objects An interpreter translates programming code into an executable format each time the program is run--one line at a time JavaScript is an interpreted programming language

28. Section A: Chapter Summary A scripting engine is an interpreter that is part of the Web browser which contains a scripting host All programming languages, including JavaScript, have their own syntax, or rules of the language The logic behind any program involves executing the various parts of the program in the correct order to produce the desired results

29. Section B: A First JavaScript Program

30. Objectives In this section, the student will learn: About the tag How to create a JavaScript source file How to add comments to a JavaScript program How to hide JavaScript from incompatible browsers About placing JavaScript in HEAD or BODY section of HTML documents

31. The Tag Statements that make up a JavaScript program in an HTML document are contained between the … tag pairs The tag is used to notify the Web browser that commands following it need to be interpreted by a scripting engine The language attribute of the tag tells the browser which scripting language and version is being used

32. The Tag JavaScript is default scripting language for most Web browsers If you omit the LANGUAGE attribute from the tag, the Java Script program should still run When an HTML document is being loaded, a web browser checks the JavaScript version number specified by the LANGUAGE attribute of the tag JavaScript is an object-oriented programming language

33. JavaScript Versions Supported by Navigator

34. The Tag An object is programming code and data that can be treated as an individual unit or component Individual lines in a programming language are called statements Groups of related statements associated with an object are called methods To execute, or call, an object’s methods, append the method to the object with a period, and include any required arguments or parameters between parentheses

35. The Tag An argument is any type of information that can be passed to a method The write () and writeIn() methods require a text string as an argument Text string, or literal string, is text that is contained within double quotation marks The only difference between the write() and writeIn() methods is that the writeIn () method adds a carriage return after the line of text

36. Hello World Script Using the WriteIn() Method of the Document Object

37. Output of the Hello World Script Using the WriteIn() Method of Document Object

38. Error Message in Navigator and Error Message in Internet Explorer

39. To Create a JavaScript Document Start your text editor or HTML editor and create a new document Type to start a preformatted text container Press Enter and type to begin the JavaScript document Press Enter and type document.writeIn(“This is the first line in my JavaScript file.”); Press Enter again and type document. writeIn(“This is the second line in my JavaScript file.”);

40. To Create a JavaScript Document Press Enter one more time and type to close the … tag pair Type to close the preformatted text container Save the files as MyFirstJavaScript.html in the Tutorial.01 folder on your Student Disk Open the MyFirstJavaScript.html file in your Web browser. If you receive one of the error messages displayed in Figure 1-15 or 1-16, check the case of the object and the writeIn()method in the document.writeIn() statements.

41. MyFirstJavaScript.html in Internet Explorer Figure 1-17 displays the MyFirstJavaScript.html file as it appears in Internet Explorer

42. Creating a JavaScript Source File JavaScript is often incorporated directly into an HTML document Can also save JavaScript code in an external file called a source file with file extension.js The SRC attribute accepts a text string that specifies the URL or directory location of a JavaScript source file JavaScript source files cannot include HTML tags If JavaScript code intended for use in HTML document is fairly short, usually easier to include the code in an HTML document.

43. Creating a JavaScript Source File For longer JavaScript code, it is easier to include the code in a.js source file There are several reasons you may want to use.js source files instead of adding code to HTML: –Your HTML document will be neater –The JavaScript code can be shared among multiple HTML documents –JavaScript source files hide JavaScript code from incompatible browsers

44. Creating a JavaScript Source File You can use a combination of embedded JavaScript code and source files in your HTML document

45. To Create JavaScript Source File and Open Multiple JavaScriptCalls.html Create a new document in your text editor or HTML editor Type document.write(“this line was printed from the JavaScript source file.”). This will be the only line in the document. Remember that you do not include the tag within a source file. Save the file as JavaScriptSource.js in the Tutorial.01 folder on your Student Disk.

46. To Create JavaScript Source File and Open Multiple JavaScriptCalls.html Open the MultipleJavaScriptCall s.html file in your Web browser. Figure 1-19 displays the MultipleJavaScriptCall s.html file as it appears in Navigator 4.0.

47. Adding Comments to a JavaScript Program Comments are nonprinting lines that you place in code to contain various types of remarks. For example,name of program, your name, date created, notes to self, or instructions to future programmers to modify your work Line comments are created by adding two slashes // before the text Block comments span multiple lines and are created by adding /* to the first line to be included in the block

48. JavaScript File With Line and Block Comments

49. Hiding JavaScript from Incompatible Browsers JavaScript source files hide code from incompatible browsers If your HTML document contains embedded JavaScript codes instead of calling an external.js source file, then an incompatible browser will display the codes Alternate text in the tag is also displayed if a user has disabled JavaScript support in the Web browser

50. HTML Document With Comments

51. Output of HTML Document With Comments

52. JavaScript Code Hidden From Incompatible Browsers, Using HTML Comments

53. JavaScript Code with Tag

54. Placing JavaScript in HEAD or BODY Sections A Web browser renders tags in an HTML document in the order in which they are encountered When there are multiple JavaScript code sections in an HTML document, each section is also executed in the order in which it appears The order in which a browser executes JavaScript code also depends on which section of the HTML document the JavaScript code is placed in

55. Section B: Chapter Summary The statements that make up JavaScript program in HTML document are contained between the … tag pairs The LANGUAGE attribute of the tag specifies which scripting language is being used and the version JavaScript is the default scripting language for most Web browsers The Document object represents the content of a browser’s window

56. Section B: Chapter Summary You can create new text on a Web page using the write() or the writeIn() method of the Document object The only difference between the write() and writeIn() methods is that the writeIn() method adds a carriage return after the line Unlike HTML, JavaScript is case-sensitive A JavaScript source file is usually designated with the extension.js and contains only JavaScript statement; it doe not contain the tag pair...

57. Section B: Chapter Summary The SRC attribute accepts a text string that specifies the URL or directory location of a JavaScript source file HTML documents can use a combination of embedded JavaScript code and source files When you include multiple JavaScript sections in HTML document, you must include the … tag pair for each section Comments are nonprinting lines placed in code to contain various types of remarks

58. Section B: Chapter Summary Create line comments by adding two slashes // before the text to be used as a comment Create a block comment by adding /* to the first line included in the block and end by typing */ after the last text included in block To hide embedded JavaScript code from incompatible browsers, enclose code between … tag pair in HTML comment block Browsers compatible with JavaScript ignore HTML comment tags and execute JavaScript normally

59. Section B: Chapter Summary An alternate message is displayed to users of incompatible browsers with... tag pair When there are multiple JavaScript code sections in an HTML document, each section is also executed in the order in which it appears Place as much JavaScript code as possible in the section, since the section of an HTML document is rendered before the section