![Page 1: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/1.jpg)
Project 1: Using JavaScript
Essentials for DesignJavaScript
Level OneMichael Brooks
![Page 2: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/2.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 2
Objectives
Integrate JavaScript into HTML documents
Use inline JavaScript within HTML tags
Create simple functions
Insert programmer's comments into JavaScript source code
![Page 3: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/3.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 3
Objectives (continued)
Hide JavaScript code from incompatible browsers
Display alternate content in non-compatible browsers
![Page 4: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/4.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 4
Why Would I Do This?
The JavaScript language was created to overcome the limitations of HTML HTML is a simple scripting language that tells a
Web browser how to display a Web page Netscape developed the LiveScript language
for use in its Netscape Navigator Web browser LiveScript’s name was changed to JavaScript with
the release of Navigator 2.0 Java and JavaScript are distinct languages
and should not be confused
![Page 5: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/5.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 5
Why Would I Do This? (continued) Microsoft developed its own version of
JavaScript in Internet Explorer 4.0 called Jscript
The differences between JScript and JavaScript created problems for Web developers
The European Computer Manufacturers Association (ECMA) developed a standardized version of JavaScript, which became known as ECMAScript
![Page 6: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/6.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 6
Why Would I Do This? (continued) JavaScript:
Allows users to interact with Web pages
Allows developers to:
create content based on user choices
take greater control over the Web browser
Can be used for a number of common applications
![Page 7: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/7.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 7
Why Would I Do This? (continued) JavaScript common
applications include:
Creating a rollover, such as a button graphic, that changes when the user rolls the mouse over it
Validating the content of a field in a form
Computing a calculation
![Page 8: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/8.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 8
Why Would I Do This? (continued) Creating a pop-up
window to display an ad
Creating animation using a combination of JavaScript and other technologies, such as Cascading Style Sheets (CSS)
![Page 9: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/9.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 9
Visual Summary JavaScript was designed to
enhance HTML, not to replace it
JavaScript is often used in HTML documents by simply using the <script> tag The <script> tag is an HTML
tag created to allow the incorporation of other scripting languages within HTML pages
![Page 10: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/10.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 10
Visual Summary (continued)
The file name is identified at the top of the window in the main Menu bar
The <SCRIPT> tag allows JavaScript to be inserted into an HTML document
The language attribute specifies the scripting language that appears within the HTML
Browsers often support a variety of different scripting languages, but JavaScript is the most popular
![Page 11: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/11.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 11
Visual Summary (continued)
The <script> tag allows JavaScript to be inserted into an HTML document
The language attribute
The file name
HTML code with added JavaScript
![Page 12: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/12.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 12
Visual Summary (continued)
HTML code with added JavaScript displayed in a browser window
The user must acknowledge the message, by clicking on the OK button, to continue
An alert box is generated by the alert() method
![Page 13: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/13.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 13
Incorporating JavaScript into an HTML JavaScript is a scripting language
A scripting language: is similar to a traditional programming language is usually less powerful and often designed for
a specific function In JavaScript’s case, that specific function is
making Web pages more interactive
![Page 14: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/14.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 14
Incorporating JavaScript into an HTML (continued) When you view a Web page in a browser, an
interpreter decides how to display the HTML or JavaScript code, and then returns information to the screen This process is known as parsing
![Page 15: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/15.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 15
Incorporating JavaScript into an HTML (continued) JavaScript is primarily used for client-side
scripting Web browser usually interprets JavaScript code
Server-side scripting means the Web server processes the script instead of the user’s computer Requires more computer resources Is often necessary for tasks that require secure
information, such as processing a credit card transaction
![Page 16: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/16.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 16
Incorporating JavaScript into an HTML (continued) Common languages used for server-side
scripting include ASP, Java, Visual Basic, and PHP
![Page 17: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/17.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 17
Incorporating JavaScript into an HTML (continued) JavaScript is simply text that is interpreted by
the browser when it is encountered You can use JavaScript in Web sites in
several ways: Embedding code between the HTML <script> and
</script> tags<script language="JavaScript">function triggerAlert() { alert("function is activated"); }</script>
Embeddedcode
![Page 18: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/18.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 18
Incorporating JavaScript into an HTML (continued)
Using inline code within HTML code Inline code usually means that a single JavaScript
command appears inside an HTML tag Typically, this command is associated with an event,
such as when someone clicks on a hyperlink
<body onLoad="alert(’Welcome to my Web site!’);">
Inline code
![Page 19: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/19.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 19
Incorporating JavaScript into an HTML (continued)
Defining code within the <head> section of an HTML document as a function that can be called upon within the body of the HTML document
<head><script language="JavaScript">function triggerAlert() { alert("function is activated"); }</script></head>
JavaScript code at the top of the HTML
![Page 20: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/20.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 20
Incorporating JavaScript into an HTML (continued)
Storing JavaScript code in an external file that can be linked to the HTML document This method offers a powerful way to share JavaScript
code between multiple documents Example of storing JavaScript code in an external
file that can be linked to the HTML document
![Page 21: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/21.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 22
Incorporating JavaScript into an HTML (continued)
Methods JavaScript commands
follow a specific syntax that is stricter than HTML
Commands that perform actions are called methods
A method is always written with parentheses, such as alert()
![Page 22: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/22.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 23
Incorporating JavaScript into an HTML (continued)
Methods may need additional information to perform a specific action
When sending information, such as a text message, quotations are used to mark the beginning and ending of the text
![Page 23: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/23.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 24
Incorporating JavaScript into an HTML (continued)
The alert() method
Additional information sent to the alert() method to perform a specific action
An example of using the JavaScript alert() method
![Page 24: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/24.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 25
Incorporating JavaScript into an HTML (continued) Scripting Versus Programming Languages
Traditional programming languages are converted to “machine code” that can only be read by the intended type of machine (they are platform specific)
Scripting languages are interpreted (parsed) by the software that reads them
The result of this difference is that scripting languages usually run slower, but can be used on different hardware platforms (they are platform independent)
Scripting languages also have built-in security features that keep developers from building harmful or malicious code that could harm a Web surfer’s
![Page 25: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/25.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 26
Using Inline JavaScript
Inline JavaScript refers to JavaScript code that is used within an HTML tag
Inline JavaScript appears within quotes, the same as HTML tag attributes
With inline JavaScript, you do not use the <script> tag
<body onLoad="alert('Welcome to my Web site!');">
Including an Inline JavaScript
![Page 26: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/26.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 27
Using Inline JavaScript (continued) Inline JavaScript is triggered by an event,
which is an action the user performs, such as clicking an image or a button An event handler is a keyword (a word that has
a meaning in the language used) that allows the computer to detect an event
JavaScript event handlers can appear as HTML tag attributes or properties
The event handler tells JavaScript when to carry out a command
![Page 27: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/27.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 28
Using Inline JavaScript (continued)
In the above example, the alert() command is activated when the mouse is clicked (onClick)
The Event Handler
![Page 28: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/28.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 29
Using Inline JavaScript (continued)
In the above example, the alert() command is activated when the mouse is clicked (onClick) on the image
<img src="TIGER.JPG" onClick=" triggerAlertTiger();">
![Page 29: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/29.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 30
Using Inline JavaScript (continued)
The above example shows an event handler to the <body> tag as inline JavaScript (Internet browser display of this example)
The Event Handler
![Page 30: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/30.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 32
Using Inline JavaScript (continued) Functions
Functions are named, reusable sections of code that can exist in the head or body section of an HTML document, or in an external file
Functions allow developers to reuse code without having to retype it every time it is needed
When you place a function in an external file, it can be shared between all the documents in a Web site
Information can be sent to a function and a function can send information back to other scripts or other functions
![Page 31: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/31.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 33
Using Inline JavaScript (continued)
The keyword function is used to create a reusable, named section of code
Functions are typically triggered by event handlers using inline code that appear as an HTML tag attribute
![Page 32: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/32.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 34
Using Inline JavaScript (continued)
In the example above, the function is triggered when the user clicks on the image
The function triggerAlert()
The function triggerAlert() is triggered by the onclick event handlers
![Page 33: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/33.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 36
Programmer's Comments
Programmer’s comments
Programmer’s comments are messages that programmers insert directly into their source code to explain how the code was written
Programmer’s comments are invisible to end users who view the page in the browser, and they are ignored by the JavaScript interpreter
![Page 34: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/34.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 37
Programmer's Comments (continued)
The browser does not display any information contained in a JavaScript comment
This keeps the text created by the second document writeln() command from appearing in the browser window
<html><head></head><body><script language=”JavaScript”>//this page outputs text to the windowdocument.write(“Hello”);/* document.write(“How are you?”); */</script></body></html>Comments not shown in the
browser window
![Page 35: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/35.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 38
Hide JavaScript Code from Incompatible Browsers
Newer versions of the most commonly used browsers can all interpret comments correctly
Older versions of IE, Navigator, and other browsers, however, cannot interpret the comments Many times, this results in the comments being
displayed in the browser window
![Page 36: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/36.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 39
Hide JavaScript Code from Incompatible Browsers (continued) The workaround for this problem is: combining
programmer’s comments with HTML comment tags to hide JavaScript code from browsers that cannot interpret the <script> tag or the scripting language contained between the <script> and </script> tags
Example
![Page 37: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/37.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 41
Hide JavaScript Code from Incompatible Browsers (continued) The <No-script> Tag
The <noscript> tag allows you to create content that will only display in browsers that cannot display the <script> tag
Even if most modern browsers usually support the <script>, it is considered good form to be prepared for the rare circumstance when a particular browser does not support the feature by always including the <noscript> tag
![Page 38: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/38.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 42
Hide JavaScript Code from Incompatible Browsers (continued)
Example of using the <No-script> tag
The text contained between the <NOSCRIPT> pair tags will only display in browsers that cannot display the <script> tag
![Page 39: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/39.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 43
Hide JavaScript Code from Incompatible Browsers (continued)
By default, most browsers are configured to ignore errors generated by scripting languages such as JavaScript
To view errors that are generated by scripting languages, you can turn on the error notifications feature
![Page 40: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/40.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 44
Hide JavaScript Code from Incompatible Browsers (continued)
<html><head><title>comments.html</title></head><body><script language="JavaScript"><!-- this line starts an HTML comment to hide JavaScript codeDocument.writeln("Hello");// this line ends the HTML comment block --></script><noscript>Your browser doesn’t support JavaScript or JavaScript is disabled. JavaScript is required to view this page correctly. </noscript></body></html>
IE browser Error Notification
![Page 41: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/41.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 45
Case Sensitivity
Case sensitivity refers to a language’s ability to distinguish between uppercase (capital) and lowercase (small) letters
Languages that distinguish between uppercase and lowercase letters are said to be case sensitive
A case-sensitive program that expects you to enter all commands in uppercase will not respond correctly if you enter one or more characters in lowercase
![Page 42: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/42.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 46
Case Sensitivity (continued)
JavaScript is a case-sensitive language It is different than HTML, which ignores
differences between upper-and lowercase letters
Users must be aware of the proper spelling of JavaScript commands
Errors in case often cause difficult-to-find problems in JavaScript code
![Page 43: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/43.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 47
Case Sensitivity (continued)
<html><head><title>comments.html</title></head><body><script language="JavaScript"><!-- this line starts an HTML comment to hide JavaScript codeDocument.writeln("Hello");// this line ends the HTML comment block --></script><noscript>Your browser doesn’t support JavaScript or JavaScript is disabled. JavaScript is required to view this page correctly. </noscript></body></html>
Since line 7 contains an error: “Document” should start with lower case “d”, depending on which browser you are using and how it is configured, the JavaScript interpreter may display an error message
![Page 44: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/44.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 48
Case Sensitivity (continued)
Error shown in the Internet Explorer browser
![Page 45: Project 1: Using JavaScript Essentials for Design JavaScript Level One Michael Brooks](https://reader035.vdocuments.us/reader035/viewer/2022062417/551b6c9f550346ae7a8b60cf/html5/thumbnails/45.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 49
Case Sensitivity (continued)
Event handlers used in HTML commands aren’t case sensitive because they appear as HTML attributes
Some browsers ignore some case mistakes in JavaScript code and this often creates problems since the developer doesn’t notice the error until the code is tested in another browser