Notes for Dr. Joe Burns'
JavaScript Goodies
Chapter 1 - The Basics of JavaScript
Why Use JavaScript?
- JavaScript provides Web designers more control over a Web page's look - additional features can be provided - "more bells and whistles" (flashy)
- Make Web pages dynamic, rather than static [Interactivity is provided.]
- Rollovers
- Banners
- Open windows with desired properties - you specify window size and toolbars
- Customize the content of the Web page
- Provide content that's customized for the user's browser - Netscape vs. IE vs. other [Patterson's notes uses browser detection for Chapter 3 - there is an IE Chapter 3 page AND a Netscape Chapter 3 page. The user is automatically sent to the correct page to match his/her browser.]
- Provide content based on the time of day - night-time content vs. day-time content
- Provide content based on the answers a user provides
- Provide content based on the user's past history or cookies - user's previous interests can be tracked
- Validate Data Entered into Forms by Users
- Make use of the visitor's (customer's) computing power rather than the server's computing power
- Help provide eCommerce features - calculations for a customer's order
What Is JavaScript?
- JavaScript (created by Netscape) is NOT Java (created by Sun Microsystems)!
- JavaScript isn't compiled; Java is compiled.
- JavaScript must be interpreted (cannot stand-alone) by a browser;
Java can run independently once it's compiled. - JavaScript is in "text" form when the browser receives its instructions.
- Java is in "bytecode" form when the browser receives its instructions.
- JavaScript is loosely typed; Java is strongly typed.
- JavaScript is object-based; Java is object-oriented.
- Also, JavaScript is NOT HTML. HTML is NOT a programming language.
- JavaScript is a programming language.
- Many scripts can be found on the Web and they can be easily used. Sometimes minor changes are needed.
Preliminary Coding Information
JavaScript Is Case Sensitive
Unlike, HTML, JavaScript IS case sensitive.
|
Note: The case of the characters between the double quotes above does not matter. Elsewhere it DOES matter! document and write are a built-in JavaScript object and method. The browser that interprets your code will only recognize these "keywords" if they are in the proper case.
Lesson 1's Objective: Using JavaScript to Write Text
Insert the code that appears below somewhere in the body of a Web page. The location depends on where you want the text displayed with respect to the other items on the Web page.
<SCRIPT LANGUAGE="javascript">
<!--
document.write("This is Patterson\'s text.");
// -->
</SCRIPT>
Example 1 Example 2
Now for a little bolding...
<SCRIPT LANGUAGE="javascript"><!--
document.write("<B>This is Patterson\'s text.</B>");
// -->
</SCRIPT>
Example 3 Example 4 Burn's Example
Understanding the Script (Example 5)
Line 1: <SCRIPT LANGUAGE="javascript">
Line 2: <!--
Line 3: document.write("<FONT FACE='Arial'>This is Patterson\'s text.</FONT>");
Line 4: // -->
Line 5: </SCRIPT>
Line 1 tells the browser it's handling a script. Also, it tells the browser that it is a JavaScript script (JavaScript version 1.0) rather than a VBScript script or JScript script or ..... You can also specify the version of JavaScript that you are using. I am expecting you to use "javascript" as LANGUAGE's value for your assignments.
Line 2 and Line 4 are to "hide" this script from older browser programs (earlier versions) that cannot handle JavaScript. Otherwise, the actual code will be displayed rather than the code's output, if an older browser "sees" this code. (See page 77.) I am expecting you to hide your scripts from older browsers when you complete your assignments.
Line 5 tells the browser that this is the end of the script. It is very easy to forget this tag!
Line 3 tells the browser to use JavaScript's built-in write( ) method to "write" what is between the quotes (the instance or "message") to the object which is the document. What appears in the parentheses is called a parameter (or argument). "<FONT FACE='Arial'>This is Patterson\'s text.</FONT>" is a string that the method write ( ) needs so it can do its job. The case inside the double quotes should match what you want displayed on the screen.
Also, notice that you can insert HTML tags into the string (instance or message) and that values for HTML attributes/properties should be enclosed in single quotes (p. 11, first bulleted item).
Note: On p. 12 Dr. Burns points out that you can use \' for displaying a single quote. \' is an example of an escape character. See pages 54-57 of your text for others.
Note: Dr. Joe Burns uses the term "flag" for HTML "tag". Do not let this confuse you as you read the text.
Multiple Use of document.write( ) [p. 12]
<SCRIPT LANGUAGE="javascript"><!--
document.write("This is Patterson\'s text.");
document.write("My text is now followed by more text.");
document.write("Yes, here is more text.");
// -->
</SCRIPT>
Example 6 Notice that Example 6's rendering does NOT display the 3 lines on separate lines. Instead they are jammed together one after another.
<SCRIPT LANGUAGE="javascript">
<!--
document.write("This is Patterson\'s text.<BR>");
document.write("My text is now followed by more text.<BR>");
document.write("Yes, here is more text.");
// -->
</SCRIPT>
Example 7 Notice that Example 7's rendering DOES display the 3 lines on separate lines. <BR> provides a line feed, carriage return.
Note: In the first edition of this text, Dr. Joe mentioned the writeln() method. I did not have a successful experience with the writeln( ) method. This method only gave me a space between each sentence. writeln( ) did NOT put them on individual lines as promised in that edition of the text. Indeed, as Dr. Burn stated in that edition, it was BUGGY!
Assignment Example, p. 13
Joe's Lesson 1 Example provides text that is displayed in red. Experiment, that's how you learn JavaScript.Joe's Answer for Assignment 1 - Displaying text in two different colors.
Lesson 2's Objective: Dealing with Error Messages
|
There are two types of bugs: syntax errors (misspellings and grammatical errors) and runtime errors (incorrect commands). Use the Netscape browser to debug your scripts most of the time. You can type javascript: into the Location box to help "pinpoint" where your errors (bugs) are. Both Netscape and IE will attempt to inform you what is incorrect. You'll need to "interpret" their clues. (Line numbers referred to in error messages are in reference to the HTML document and include all lines including blank lines.) You'll want to use either the Antechinus JavaScript Editor or Arachnophilia or Programmer's File Editor (PFE) to locate the errors instead of counting yourself. Unfortunately, NotePad does NOT provide line numbers.
Ex. 8 (a bug) Ex. 9 (a 2nd bug) Ex. 10 (a 3rd bug) Ex. 11 (a 4th bug)
Ex. 12 (a 5th bug) Ex. 13 (a 6th bug)
|
Common Errors That Occur
- [Enter]'s inappropriately placed in the middle of a JavaScript statement.
- Misspelled keywords and/or variables.
- Incorrect case used. (JavaScript IS case sensitive.)
- Unbalanced quotation marks
- Missing quotation marks "
- Use of a double quote " where a single quote ' is required
- Missing parentheses ( )
- Missing braces { }
Info. About Netscape's New JavaScript Console Feature
I once left out the "c" in "JavaScript". It took me almost 10 minutes to pinpoint the error. See this example 14. Notice that no error messages appear! Believe me getting an error message is much more helpful than getting none.
Sometimes when you are debugging an especially nasty set of code, you'll want to comment out lines that are questionable to you. Dr. Burn's suggests deleting lines and retyping them - NO WAY! Just comment out those lines using this symbol // at the start of the JavaScript line OR use /* at the beginning of a group of JavaScript statements and use */ at the end of the group of JavaScript statements. Commenting forces the browser to ignore those lines.
Assignment Example, p. 18
Joe's Lesson 2 Problem provides some code for you to debug.Joe's Answer for Assignment 2.
Lesson 3's Objective: Learning about Object Properties & Hierarchy
JavaScript deals with objects like window, document, form, button, etc. Objects are like nouns. JavaScript uses methods to change the objects. Methods are like verbs. Methods are used to act on an object. They affect the associated object. On the other hand, properties are used to describe objects. Dr. Joe points out that properties are like subsections of an object. Properties are like adjectives, and sometimes they're like nouns.
JavaScript uses a certain syntax:
object.property or object.method( )
A period is used between the object and its property or method.
Notice that method names are followed by a set of parentheses whereas a property name is not followed by a set of parentheses.
|
document has these properties:
navigator (browser)
history (list of user's previous pages) has these properties:
location (current URL) has these properties:
|
Examples - First the command is shown, then the result follows on the next bulleted line
|
So now you have some lists of properties that are available for use in the scripts that you write for Web pages. These properties describe their objects. They are somewhat similar to variables. They take up space in memory and contain values that a programmer can access through his/her code.
Concatenation: "Gluing two or more strings together" (p. 22)In the examples shown in the green section, the document.write( ) statements had arguments (instances or messages) that involved the use of a (+) which pastes (glues) together strings. Some more examples... Notice above that you may omit the space before and after the +. Also, notice that the browser just goes to memory and retrieves the value for document.bgColor and converts that value automatically to a string to be combined with the other strings. |
Assignment Example, pp. 24 & 25
Joe's Lesson 3 ProblemLesson 4's Objective: Reviewing Lessons 1, 2, & 3
| Objects | Methods | Properties |
| document | write( ) | alinkColor, bgColor, fgColor, linkColor, lastModified, location, referrer, title, vlinkColor |
| history | length | |
| location | host, hostname | |
| navigator | appCodeName, appName, appVersion, userAgent | |
| window | status (lesson 5) |
Dr. Joe Burns then introduces you to combining some of the knowledge presented in the first three lessons. You can actually use JavaScript to take the user back to whichever page he/she came from to get to your page, provided a link was clicked. Cool?
|
<SCRIPT LANGUAGE="javascript"> <!-- document.write("<A HREF=" + document.referrer + ">Back</A>"); // --> </SCRIPT> |
Note: The lack of spaces within the double quotes above is essential.
(Dr. Joe says, "try the above online". His example is posted here. I didn't have any luck there on
NOTE: I've experienced some problems with document.referrer at Angelfire. It appears to contain just the folder name. It doesn't seem to include the Web page's name. I put a link on my home page. When I click the link at the bottom of my home page to go to these Burns' Chapter 1 notes, the "Back" link above and to the right works.
Assignment Example, p. 27
- Use of browser detection to present Web pages that are optimized for Netscape or IE. Recall that there are some tags and styles that are unique to one or the other.
- Displaying a message to the user that incorporates values pertaining to the user's browser or last page visited, etc.
- Answers at Joe's site
Copyright © 2000, 2003; RGPatterson, all rights reserved; last revised: 3/12/03