1. Chapter 1 Introduction to JavaScript JavaScript, Third Edition

2. 2 Objectives Study the history of the World Wide Web Work with structured Web pages Learn about the JavaScript programming language Add structure to your JavaScript programs Learn about logic and debugging

3. JavaScript, Third Edition 3 The World Wide Web and JavaScript World Wide Web’s (WWW) original purpose: –Locate and display information As WWW grew, greater interactivity –Web more useful –New Web programming language needed : JavaScript created to fill programming need

4. JavaScript, Third Edition 4 The World Wide Web and JavaScript (Cont.) JavaScript: –Considered a critical part of Web page design and authoring –Can turn static documents into applications –Code can change contents of a Web page after a browser has rendered it –Creates visual effects –Can control Web browser window itself None of this was possible before the creation of JavaScript

5. JavaScript, Third Edition 5 The World Wide Web Internet is vast network that connects computers all over the world Common misconception: –That “Web” and “Internet” are synonymous The Web is only one part of the Internet –Means of communicating on the Internet The Internet is composed of other communication methods –Example: E-mail systems that send and receive messages

6. JavaScript, Third Edition 6 Web Browsers Internet Explorer and Netscape: web browsers Browser wars began over DHTML –DHTML allows a Web page to change after it has been rendered by browser –Examples of DHTML include: change document background color and create effects such as animation Earlier versions of Internet Explorer and Navigator –DHTML elements were incompatible W3C adopted formal standard of DHTML version found in version 4 of Internet Explorer

7. JavaScript, Third Edition 7 HTML Documents HTML is a simple language –Used to create Web pages that appear on World Wide Web –Based on an older language SGML: Standard Generalized Markup Language Like SGML, HTML originally designed to define elements in a document independent of how they would appear HTML now capable of defining how elements should appear in a browser

8. JavaScript, Third Edition 8 Basic HTML Syntax HTML documents are text documents –Contain formatting instructions, called tags –Should be defining the contents All HTML documents must use the element as the root element A root element contains all the other elements in a document Opening and closing... tags are required Two other important HTML elements are the element and the element

9. JavaScript, Third Edition 9 Basic HTML Syntax (Cont.) The element and elements it contains are referred to as document head Following document head is the element –Contains document body –The element and the text and elements it contains are referred to as document body Attributes are used to configure HTML elements syntax attribute=“value” is used to assign a value to an attribute

10. JavaScript, Third Edition 10 Basic HTML Syntax (Cont.)

11. JavaScript, Third Edition 11 Creating an HTML Document You can create HTML document in any text editor –Notepad and WordPad –Or in HTML editors like Macromedia Dreamweaver To view final results, open document in a Web browser HTML editors automatically add elements and attributes that may be unfamiliar to you

12. JavaScript, Third Edition 12 Creating an HTML Document (Cont.) To create a simple HTML document, follow these steps: 1.Start your text editor and create a new document, if necessary 2.Type the following elements to begin the HTML document.

13. JavaScript, Third Edition 13 Creating an HTML Document (Cont.) 3. Add the following and elements between the... tag pair Central Valley Copy Center 4. Add the following elements above the closing tag 5. Add any text above the closing element

14. JavaScript, Third Edition 14 Creating an HTML Document (Cont.) Save document as CopyCenter.html Open the CopyCenter.html document in Internet Explorer or another Web browser Close your Web browser window

15. JavaScript, Third Edition 15 Working with Well-Formed Web Pages HTML is being replaced with XHTML (extensible hypertext markup language) –HTML is useful only for rendering documents in traditional browsers Web is expanding to other media, called user agents: –Devices capable of retrieving and processing HTML and XHTML document HTML is not suitable for user agents

16. JavaScript, Third Edition 16 XHTML Document Type Definitions-DTDs A well-formed document: –Conforms to rules and requirements of XHTML –Must include a declaration and the,, and elements The declaration: –Belongs in the first line of an XHTML document –Determines the XHTML DTD with which the document complies

17. JavaScript, Third Edition 17 XHTML Document Type Definitions-DTDs (Cont.) A document type definition (DTD): –Defines the elements and attributes that can be used in a document, along with the rules that a document must follow when it includes them You can use three types of DTDs with XHTML documents: –Transitional –Strict –Frameset

18. JavaScript, Third Edition 18 XHTML Document Type Definitions-DTDs (Cont.) One of XHTML goals: –Separate the way the HTML is structured from the way the parsed Web page is displayed in the browser To accomplish this goal: –Several commonly used HTML elements and attributes for display and formatting were deprecated There are three types of DTDs: –Transitional DTD –Frameset DTD –Strict DTD

19. JavaScript, Third Edition 19 XHTML Document Type Definitions-DTDs (Cont.) The three DTDs distinguished in part by degree to which they allow or do not allow deprecated HTML Traditional DTDs –Allow you to use deprecated style elements in your XHTML documents –Only used to create Web pages that use the deprecated HTML elements

20. JavaScript, Third Edition 20 XHTML Document Type Definitions-DTDs (Cont.) Frameset DTD –Identical to transitional DTD, except it includes the and elements Allows you to split browser window into two or more frames –Frames have been deprecated in favor of tables –However, frameset documents are still widely used

21. JavaScript, Third Edition 21 XHTML Document Type Definitions-DTDs (Cont.) Strict DTD –Eliminates elements that were deprecated in the transitional DTD and frameset DTD –Always try to use the strict DTD

22. JavaScript, Third Edition 22 XHTML Document Type Definitions-DTDs (Cont.)

23. JavaScript, Third Edition 23 Writing Well-formed Documents Well-formed document: –Must include a declaration and the,, and elements Important components: –XHTML documents must use as the root element –XHTML is case sensitive –XHTML elements must have a closing tag –Attribute values must appear within quotation marks –Empty elements must be closed –XHTML elements must be properly nested

24. JavaScript, Third Edition 24 Writing Well-formed Documents (Cont.) Nesting refers to how elements are placed inside other elements In an HTML document, it makes no difference how the elements are nested In XHTML, each innermost element must be closed before another element is closed

25. JavaScript, Third Edition 25 Writing Well-formed Documents (Cont.) Three most common empty elements in HTML are: –the element To close an empty element in XHTML: –Add a space and a slash before the element’s closing bracket XHTML documents do not use a root element of

26. JavaScript, Third Edition 26 Validating Web Pages The Web browser cannot tell whether or not the XHTML document is well formed To ensure that your XHTML document is well formed and its elements are valid: –Use a validating parser Program that checks whether an XHTML document is well formed and whether the document conforms to a specific DTD

27. JavaScript, Third Edition 27 Validating Web Pages (Cont.) Validation: –Process of verifying that your XHTML document is well formed –Check that document elements are correctly written according to element definitions in a specific DTD If an XHTML document is not validated and contains errors: –Most Web browsers will probably Treat it as an HTML document Ignore the errors Render the page anyway

28. JavaScript, Third Edition 28 The JavaScript Programming Language JavaScript –Client-side scripting language –Allows Web page authors to develop interactive Web pages and sites –Used in most Web browsers including Internet Explorer

29. JavaScript, Third Edition 29 The JavaScript Programming Language (Cont.) Client-side scripting –Scripting language that runs on local browser (the client) instead of on Web server Server-side scripting –Scripting language that executes on a Web server

30. JavaScript, Third Edition 30 The JavaScript Programming Language (Cont.) Some popular server-side scripting languages include: –Common Gateway Interface (CGI), Active Server Pages (ASP), and Java Server Pages (JSP) Scripting language: –Originally, fairly simple programming languages –Today’s Web-based scripting languages are anything but simple

31. JavaScript, Third Edition 31 The JavaScript Programming Language (Cont.) Browser’s scripting engine: –Executes scripting language code –Just one kind of interpreter Scripting host –Web browser that contains scripting engine –Example: Internet Explorer and Netscape

32. JavaScript, Third Edition 32 The JavaScript Programming Language (Cont.) JavaScript and Java programming language are entirely different Java –Advanced programming language –Created by Sun Microsystems –Considerably more difficult to master than JavaScript –Java programs are external programs that execute independent of browser In contrast, JavaScript programs run within a Web page and control the browser

33. JavaScript, Third Edition 33 The Element JavaScript programs –Run from within a Web page (either an HTML or XHTML document) –Code is typed directly into Web page code as separate section –Contained within a Web page are often called scripts The element tells Web browser that the scripting engine must interpret the commands it contains

34. JavaScript, Third Edition 34 The Element (Cont.) The type attribute of the element –Tells browser which scripting language and which version is being used –You assign a value of “text/javascript” to the type attribute to indicate that the script is written with JavaScript –You include the following code in a document to tell Web browser the statements that follow must be interpreted by JavaScript scripting engine: statements

35. JavaScript, Third Edition 35 Understanding JavaScript Objects JavaScript is also considered an Object-based programming language An object –Programming code and data that can be treated as individual unit or component A method –Procedures associated with an object A property –Piece of data, such as a color or a name that is associated with an object

36. JavaScript, Third Edition 36 Understanding JavaScript Objects (Cont.) To incorporate an object and associated method in JavaScript code: –Type the object’s name, followed by a period, followed by the method Many methods need to be provided with more specific information, called an argument, between the parentheses Some methods require numerous arguments, while others don’t require any Providing an argument for a method is referred to as passing arguments

37. JavaScript, Third Edition 37 Using the write() and writeln() Methods JavaScript treats many things as objects Document object –One of the most commonly used objects in JavaScript programming –Represents browser window’s content To create new text on a Web page –use the write() method or the writeln() method of the Document object Only reason to use the write() and writeln() methods is to add new text to a Web page while it is being rendered

38. JavaScript, Third Edition 38 Using the write() and writeln() Methods (Cont.) the write() and writeln() methods –Require a text string as an argument –Perform essentially the same function that is performed when a text is manually added to the body of a standard Web page document The only difference between the write() and writeln() methods is that the writeln() method adds a line breaks after the line of text

39. JavaScript, Third Edition 39 Case Sensitivity in JavaScript JavaScript –Like XHTML, is case sensitive –Within JavaScript code, object names must always be all lower case Comments –Good programming practice to add comments to your code –Nonprinting lines placed in the code to contain various types of remarks

40. JavaScript, Third Edition 40 Case Sensitivity in JavaScript (Cont.) JavaScript supports two kinds of comments: line comment –Hides single line of code –To create: Add two slashes // before the text you want to use as a comment Block comments –Hide multiple lines of code –To create: Add /* to the first line that you want included in the block Close by typing */ after the last character in the block

41. JavaScript, Third Edition 41 Structuring JavaScript Code When adding JavaScript code, follow these rules: –Include a Element for Each Code Section –Place JavaScript in the Document Head or Document Body –Create a JavaScript Source File

42. JavaScript, Third Edition 42 Include a Element for Each Code Section You can include as many script sections as you like within a document. However, when you include multiple script sections in a document –You must include a element for each section

43. JavaScript, Third Edition 43 Placing JavaScript in the Document Head or Document Body You can place elements in either the document head or document body Where you place your elements varies, depending on the program you are writing The statements in a script are rendered in the order in which they appear in the document

44. JavaScript, Third Edition 44 Placing JavaScript in the Document Head or Document Body (Cont.) Good idea to place as much of your JavaScript code as possible in document head because: –Head of a document is rendered before the document body –JavaScript code is processed before the main body of the document is displayed –Your code might be performing behind-the-scenes tasks that are required by script sections located in document body

45. JavaScript, Third Edition 45 Creating a JavaScript Source File You can also save JavaScript code in an external file called a JavaScript source file You can then write a statement in the document that executes (or “calls”) the code saved in the source file When a browser encounters a line calling a JavaScript source file –It looks in the JavaScript source file and executes it

46. JavaScript, Third Edition 46 Creating a JavaScript Source File (Cont.) A JavaScript source file –Is usually designated by the file extension.js and contains only JavaScript statements –It does not contain a element –To access JavaScript code that is saved in an external file, you use the src attribute of the element

47. JavaScript, Third Edition 47 Creating a JavaScript Source File (Cont.) A Java Script Source File –You assign to the src attribute the Uniform Resource Locator (URL) of a JavaScript source file –Cannot include XHTML elements –When you specify a source file in your document using the src attribute, the browser ignores any other JavaScript code located within the element

48. JavaScript, Third Edition 48 Creating a JavaScript Source File (Cont.) There are several reasons to use a.js source file instead of adding the code directly to a document: 1.The document will be neater 2.The JavaScript code can be shared among multiple Web pages 3.JavaScript source files hide JavaScript code from incompatible browsers 4.A combination of embedded JavaScript code and JavaScript source files can be used in the document

49. JavaScript, Third Edition 49 Hiding JavaScript Code You can enclose the code within a element in an XHTML comment block –Hides embedded code from incompatible browsers Browsers compatible with JavaScript will ignore XHTML comment tags and execute the JavaScript code normally

50. JavaScript, Third Edition 50 Hiding JavaScript Code (Cont.) JavaScript-compatible browsers never display JavaScript code –Instead, code is interpreted by browser’s scripting engine Only JavaScript comment tags can be used to hide JavaScript code from the interpreter

51. JavaScript, Third Edition 51 Logic and debugging All programming languages, including JavaScript, have their own syntax, or rules To write a program, you must understand the syntax of the programming language and computer- programming logic The term logic –Refers to the order in which various parts of a program run, or execute

52. JavaScript, Third Edition 52 Logic and debugging (Cont.) A logical error –Might be multiplying two values when you meant to divide them bug –Any error in a program that causes it to function incorrectly debugging –refers to the act of tracing and resolving errors in a program

53. JavaScript, Third Edition 53 Chapter Summary HTML documents –Text documents that contain formatting instructions called tags DTDs (Document type definition) –Define elements and attributes that can be used in a document and the rules that a document must follow JavaScript –Client-side scripting language that allows Web pages to be interactive

54. JavaScript, Third Edition 54 Chapter Summary (Cont.) Object –Programming code and data that can be treated as an individual unit External files –Files that contain JavaScript code –Also called source files

55. JavaScript, Third Edition 55 W3C Links: http://www.w3schools.com/ JavaScript Reference: http://www.w3schools.com/jsref/default.asp JavaScript Tutorial: http://www.w3schools.com/js/default.asp Validation: http://validator.w3.org/