Student Menu. © Lesson 2. Printable layout. Links won't function in print.

 

Notes Section

Main Text


Module 2.0


The materials in this lesson will be much easier to understand if you read and outline your textbook first.

 

Read Course Text.


Please read and outline the Introduction, Project 1 and Project 2 up to section J 2.18 of your textbook. Pay particular attention to the numbered orange dots representing each step, the "More About" side comments, the tan boxes containing code, the tables and the figures.


Module 2.1


The <SCRIPT> tag with the language attribute <SCRIPT LANGUAGE = "JavaScript1.2"> encloses client-side scripts.

 

What is the Difference Between Client-Side and Server-Side Scripting?

 

The client is a computer with a web browser; the server is a web server. VBScript (described below), JScript and JavaScript are all capable of running on the server or the browser depending on coding syntax.


Using the LANGUAGE attribute is important for specifying which scripting language (VBScript, JScript or JavaScript) will be used. You can also specify the version of JavaScript. No version number indicates JavaScript version 1.0. Without a language explicitly declared, both Netscape and IE browsers default to the JavaScript language.

 

By adding <SCRIPT RUNAT=SERVER> a script may be forced to run at the server rather than the client; however, this only works if the server is configured to handle that particular scripting language.

 

Module 2.2

 

 

 

 

 

 

 

 

 

 

 

 

*As JavaScript and JScript reach full compliance with ECMAScript Standards, their inconsistencies in Netscape and IE browsers will diminish and a vendor-neutral, client-side scripting language will hopefully emerge on the Web.

 

 

The European Computer Manufacturers Association’s (ECMA) goal is to foster a reliable scripting standard. Both Netscape and Microsoft have pledged future version compliance.

 

What are VBScript, JScript and JavaScript?


All are interpreted scripting languages requiring an interpreter and are capable of running on a web browser like Netscape’s Navigator or Communicator and Microsoft’s Internet Explorer (IE).

 

VBScript: Based on the Visual Basic (VB) programming  language. Both VBScript and Visual Basic for Applications (VBA) are subsets of the VB language. VBScript is an embeddable language requiring a scripting host and cannot be compiled into an independent application.

 

JScript: Introduced by Microsoft to compete against Netscape’s popular JavaScript. Both JavaScript 1.1 and JScript 2.0 were the source for ECMAScript*, the only standardized Web scripting language.

 

JavaScript: The first client-side scripting language. Originally called LiveScript. Strategically renamed under agreement with Sun Microsystems to take advantage of the Java marketing publicity. JavaScript and Java are distinctly different languages: JavaScript is interpreted while Java is compiled (into bytecode).

 

 

Advantage

Disadvantage

VBScript

Easiest to learn. Internet Explorer (IE) supported.

Netscape requires plug-in: www.ncompasslabs.com

JScript

Reverse engineering of JavaScript by Microsoft.

Rarely used. Not directly* supported by Netscape.

JavaScript

The only browser independent client-side scripting language. JavaScript interpreters are in both IE (JavaScript 1.1, as ECMAScript) and Netscape (JavaScript 1.2). Capable of server-side scripting for Active Server Pages (ASP).

 

 

Module 2.3

 

 

 

What are Data Types, Variables, Expressions, Operators and Arrays? (programming review only)

 

1. In the JScript Language Reference click the Search tab > type Data Types > click List Topics > double-click the second choice JScript Data Types > click the Refresh button to remove the highlighting.

 

2. Use the same procedure to find and critically review Variables, Expressions and Operators. Note that the word Expression may be found in the JScript Language Reference by typing JScript Code in the Search tab and then clicking the fourth topic. It is highly recommended that you paraphrase or outline this very important information in order to understand it better. The sooner you master these concepts, the easier it becomes to write your own JavaScripts.

 

3. Arrays are more effective than variables for storing a series of related data items. Each data item in the series is referenced by an index number which begins at zero. Arrays are created using the new Array ( ) Object. The power of an array is in its ability to manipulate a series of data items as if they were a single data item. See Using Arrays and the Array Object under the Search tab of the JScript Language Reference.

Please review Data Types, Variables, Expressions, Operators and Arrays in the JavaScript Guide and the JavaScript Reference.

 

Module 2.4











** Curly Braces { } are used to hold INDIVIDUAL STATEMENTS within the body of a Function. 

Curly braces are to statements what periods are to sentences in English.

 

What Are Control Statements? (programming review only)

 

1. Some control statements branch: If and If-Else

 

2. Other control statements loop: For, For-In, While, Do-While and Switch

Note: The Break control statement stops the execution of a loop and the Continue statement skips blocks of code while updating the counter variable.

3. Still other control statements jump: Functions*

In the JScript Language Reference click the Search tab > type Control > double-click the first choice, Controlling Program Flow and critically review the page. See also, Functions in the JScript Language Reference. Try to find, modify or create your own code examples for each type of control statement.


It is highly recommended that you paraphrase or outline this very important information in order to understand it better. The sooner you master these concepts, the easier it becomes to write your own JavaScripts.

Please review If, If-Else, For, For-In, While, Do-While, Switch, Break, Continue and Function in the JavaScript Guide and the JavaScript Reference.

 


Module 2.5

 

Commenting Code and Include Files.

 

Commenting Code.

 

It cannot be understated the importance of thoroughly commenting code or hypertext mark-up. Intellectual property like code or mark-up becomes useless without comments just like a book report is worthless without a bibliography. Headaches are created for people who weren’t the original developers of the script if there isn’t a clear step-by-step description of what the script does and how the script does it. All formally trained programming professionals thoroughly comment their code and mark-up!

 

1.      HTML: <!-- This is an HTML comment. -->

 

2.      JavaScript: Single lines are commented with the double slash  // . Blocks of code are commented with the  /*   */  syntax.

Include Files.

JavaScript include files are pure JavaScript without HTML or the <SCRIPT> tags. They have a .js extension and may not be supported by all web servers; consequently, include files won't be used in this class.


Module 2.6


Object
= Thing.

The actual object used is called the instance.

Property = Characteristic.
Properties can have values.

Method = Action.
Methods can have arguments which are values.

Event = User Action.
Event Handlers represent types of user actions. When an Event Handler's code is executed, the Event is said to have triggered.

* Parenthesis ( ) are used to hold the ARGUMENTS of a Method or the PARAMETERS of a Function.


Objects, Properties, Methods and Events.

Object-Oriented Programming (OOP) in JavaScript attempts to represent the web browser's world in everyday, real-world concepts or objects.

 

An Object is a thing. A Property is a characteristic (of the Object). A Method is an action (the Object can perform). An Event is a user action (having Event Handlers).

 

Using a real-world example, we have a Hand Object (thing) that has a Finger Property (characteristic) that has a Wave Method (action).

 

A hand with a long finger is described by the following syntax: 
Hand.Finger = "long"
  Long is the value of the Finger Property. Notice that the period or dot serves as a separator.

 

This syntax tells the hand to wave fast:

Hand.Wave("fast")  Fast is an argument or value of the Wave Method*

In     document.bgColor = "blue"     the document Object has a bgColor Property with a blue value.

 

In     document.write("Hello Everyone!")    the document Object has a write Method with a string argument.


It will take time for OOP to become familiar and easy. For now, see some of the objects in the JScript Language Reference.

Please review Objects, Properties, Methods and Events in the JavaScript Guide and the JavaScript Reference. It would be helpful to print the table of Events and Event Handlers.

 

Module 2.7

 

Exercise 2.

 

  1. Don't worry J if this week seemed overwhelming. It is my responsibility and obligation to review these numerous programming concepts. This course is introductory, and if you lack the programming background, you'll be better off just knowing that these programming terms and concepts exist.
  2. Try to find, modify or create your own code examples for each type of control statement. Many programmers have a code achieve that they share or trade with colleagues.
  3. Visit all the links shown on this lesson and define any new vocabulary terms in the JScript (JavaScript) Language Reference.
  4. Take notes on this weeks materials and paraphrase it in your own words. Discuss the correct answers to this week’s quiz (shown below) in the discussion board. You'll have several opportunities to change your answers to the quiz before it's graded.
  5. Open this script in your browser, copy and paste the text into NotePad and save the file as DateAlertScroll.htm. What happens and why?

 

 

Module 2.8

 

Quiz 2.

 

  1. Hand is to Object as Wave is to what?
  2. What is an instance of an Object? (Try to find your own definition.)
  3. What is the difference between an Event and a Method?
  4. Identify Branching, Looping and Jumping Control Statements.
  5. Describe Data Types, Variables, Expressions, Operators and Arrays.