Presentation is loading. Please wait.

Presentation is loading. Please wait.

Essentials for Design JavaScript Level One Michael Brooks

Similar presentations


Presentation on theme: "Essentials for Design JavaScript Level One Michael Brooks"— Presentation transcript:

1 Essentials for Design JavaScript Level One Michael Brooks
Project 1: Using JavaScript

2 Copyright (c) 2004 Prentice-Hall. All rights reserved.
Objectives Integrate JavaScript into HTML documents Use inline JavaScript within HTML tags Create simple functions Insert programmer's comments into JavaScript source code Copyright (c) 2004 Prentice-Hall. All rights reserved.

3 Objectives (continued)
Hide JavaScript code from incompatible browsers Display alternate content in non-compatible browsers Copyright (c) 2004 Prentice-Hall. All rights reserved.

4 Copyright (c) 2004 Prentice-Hall. All rights reserved.
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 There are several important differences between Java and JavaScript: users don’t need to work with a developers kit to compile a JavaScript program JavaScript commands can be inserted directly into an HTML file rather than being placed in a separate program file JavaScript may not be as powerful a computing language as Java, but it is simpler to use JavaScript meets the needs of most users who want to create programmable Web pages 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 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 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 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) Copyright (c) 2004 Prentice-Hall. All rights reserved.

9 Copyright (c) 2004 Prentice-Hall. All rights reserved.
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 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 Copyright (c) 2004 Prentice-Hall. All rights reserved.

11 Visual Summary (continued)
The file name The <script> tag allows JavaScript to be inserted into an HTML document The language attribute The default language value is “JavaScript". Internet Explorer interprets “JavaScript” as being identical to “JScript.” If you omit the language attribute, the browser assumes that the program is written in JavaScript. HTML code with added JavaScript Copyright (c) 2004 Prentice-Hall. All rights reserved.

12 Visual Summary (continued)
An alert box is generated by the alert() method The user must acknowledge the message, by clicking on the OK button, to continue JavaScript is better supported, by browsers, than other scripting languages. However, when using JavaScript in designing a Web page, you still need to keep in mind some cross-browser and cross-platform issues: the same Web page may look different in different browsers or on different platforms and their functionality may also be different. Always test JavaScript programs on a variety of Web browsers and platforms (Windows, Unix, Mac, etc.). HTML code with added JavaScript displayed in a browser window 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 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 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 Client-side scripting: solves many of the problems associated with server-side scripts computing is distributed over the Web, so that no one server is overloaded with programming requests can be tested locally without first uploading it to a Web server are likely to be more responsive to the user can never completely replace CGI Currently, server-side JavaScript is proprietary and vendor specific. There are some disadvantages to the server-side approach: must be connected to the Web server to run the script only the programmer can create or alter the script the Web server’s system administrator can place limitations on how users access the script the system administrator has to be concerned about users continually accessing the server and potentially overloading the system 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 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 Embedding code: In this method, the <script> command tells the browser to use the JavaScript interpreter to interpret code until it finds the </script> tag <script language="JavaScript"> function triggerAlert() { alert("function is activated"); } </script> Embedded code Copyright (c) 2004 Prentice-Hall. All rights reserved. tags. Embedding code: In this method, the tag. Embedded. code. Copyright (c) 2004 Prentice-Hall. All rights reserved.", "width": "800" }

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 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 Placing the JavaScript code at the top of the HTML document allows developers to keep track of the code, and to reuse code several times without the need to rewrite it. Copyright (c) 2004 Prentice-Hall. All rights reserved. JavaScript code at the top of the HTML. Placing the JavaScript code at the top of the HTML document allows developers to keep track of the code, and to reuse code several times without the need to rewrite it. Copyright (c) 2004 Prentice-Hall. All rights reserved.", "width": "800" }

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 Copyright (c) 2004 Prentice-Hall. All rights reserved.

21 Incorporating JavaScript into an HTML (continued)
<HEAD> <TITLE>Using External JavaScript File</TITLE> <BODY> <SCRIPT LANGUAGE="JavaScript" SRC="ExternalScriptsSource.js"> </SCRIPT> </PRE> </BODY> </HTML Including an external JavaScript file The ExternalScriptsSource.js file document.write("This line was printed from the JavaScript source file.") 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() 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 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 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 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 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 All event handlers, methods, and other JavaScript commands are keywords in the JavaScript language. Generally, Internet Explorer and Netscape 6.0 can apply event handlers to most HTML tags. Versions of Netscape prior to 6.0 apply event handlers to a smaller number of HTML tags. Copyright (c) 2004 Prentice-Hall. All rights reserved.

28 Using Inline JavaScript (continued)
The Event Handler In the above example, the alert() command is activated when the mouse is clicked (onClick) Copyright (c) 2004 Prentice-Hall. All rights reserved.

29 Using Inline JavaScript (continued)
<img src="TIGER.JPG" onClick=" triggerAlertTiger();"> In the above example, the alert() command is activated when the mouse is clicked (onClick) on the image Copyright (c) 2004 Prentice-Hall. All rights reserved.

30 Using Inline JavaScript (continued)
The Event Handler The above example shows an event handler to the <body> tag as inline JavaScript (Internet browser display of this example) Copyright (c) 2004 Prentice-Hall. All rights reserved.

31 Using Inline JavaScript (continued)
Most practical uses of JavaScript involve event handlers used inline in HTML. Usually, developers are interested in triggering chunks of scripting code when a specific event occurs in HTML such as the submission of a form or the user rolling over an image. Once the page is loaded, you will see a welcome message 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 A function is a series of commands that performs an action or calculates a value. A function consists of the function name, which identifies it, parameters that are values used by the function, and a set of commands that are run when the function is used. Not all functions require parameters. The general syntax of a JavaScript function is: function function_name(parameters) { JavaScript commands } 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 Copyright (c) 2004 Prentice-Hall. All rights reserved.

34 Using Inline JavaScript (continued)
The function triggerAlert() The function triggerAlert() is triggered by the onclick event handlers Inline JavaScript can contain multiple code statements, but this can quickly get cumbersome and difficult to read. It is much more common to use inline JavaScript to trigger a function. In the example above, the function is triggered when the user clicks on the image Copyright (c) 2004 Prentice-Hall. All rights reserved.

35 Using Inline JavaScript (continued)
The function triggerAlert() is triggered when user click on the image Copyright (c) 2004 Prentice-Hall. All rights reserved.

36 Copyright (c) 2004 Prentice-Hall. All rights reserved.
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 Copyright (c) 2004 Prentice-Hall. All rights reserved.

37 Programmer's Comments (continued)
<html> <head> </head> <body> <script language=”JavaScript”> //this page outputs text to the window document.write(“Hello”); /* document.write(“How are you?”); */ </script> </body> </html> Comments not shown in the browser window Use comments to leave notes to yourself or other programmers about the purpose of code statements. These comments are particularly useful when viewing complex code. 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 Copyright (c) 2004 Prentice-Hall. All rights reserved. Comments not shown in the browser window. Use comments to leave notes to yourself or other programmers about the purpose of code statements. These comments are particularly useful when viewing complex code. 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. Copyright (c) 2004 Prentice-Hall. All rights reserved.", "width": "800" }

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 Browsers that do not support JavaScript may display the program code as part of the Web page body. 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 Copyright (c) 2004 Prentice-Hall. All rights reserved. tags. Example. Copyright (c) 2004 Prentice-Hall. All rights reserved.", "width": "800" }

40 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 code document.writeln("Hello"); // this line ends the HTML comment block --> </script> </body> </html> Comments not shown in the browser window Copyright (c) 2004 Prentice-Hall. All rights reserved. Comments not shown in the browser window. Copyright (c) 2004 Prentice-Hall. All rights reserved.", "width": "800" }

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 Copyright (c) 2004 Prentice-Hall. All rights reserved.

42 Hide JavaScript Code from Incompatible Browsers (continued)
The text contained between the <NOSCRIPT> pair tags will only display in browsers that cannot display the <script> tag Internet Explorer does not allow you to disable JavaScript for a file stored on the local system. To set up a lecture example, the file testing the <NOSCRIPT> tag would need to be located on a server, and you would need to load the page into the browsers from that server. Netscape allows you very easily to disable JavaScript (see Web Project B). Example of using the <No-script> tag 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 In newer versions of Internet Explorer, choose Tools>Internet Options>Advanced, and then check the box marked “Display a Notification about Every Script Error”. 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 code Document.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 Copyright (c) 2004 Prentice-Hall. All rights reserved. IE browser. Error Notification. Copyright (c) 2004 Prentice-Hall. All rights reserved.", "width": "800" }

45 Copyright (c) 2004 Prentice-Hall. All rights reserved.
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 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 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 code Document.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 Copyright (c) 2004 Prentice-Hall. All rights reserved. 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. Copyright (c) 2004 Prentice-Hall. All rights reserved.", "width": "800" }

48 Case Sensitivity (continued)
Error shown in the Internet Explorer browser 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 For best results, always check a good reference book (such as this one) if you are unsure about the proper case to use. Copyright (c) 2004 Prentice-Hall. All rights reserved.


Download ppt "Essentials for Design JavaScript Level One Michael Brooks"

Similar presentations


Ads by Google