CIS 89C Client-Side Programming with JavaScript

CIS 89C Client-Side Programming with JavaScript

Unit 1 - Introduction and setup (2 hours, first night)

Topics:

Introduction

XHTML

Simple JavaScript

JavaScript in its own file

Set up accounts

***********************************************************

Introduction

What is JavaScript?

First, what JavaScript is not:

JavaScript is NOT Java.

Originally it was called LiveScript; that is probably a better name.

They changed the name, and made some changes to make it a little more like Java and C++.

The official name of JavaScript is now ECMAScript, but it is usually just called

JavaScript.

JavaScript is not exactly a script language.

It is a programming language.

It provides objects, which represent the web page environment.

JavaScript is, in many ways, not based on C, so it is different from languages built from C, including C++, Java, and Perl.

Because it is not entirely based on C, you will probably need to "unlearn" how programming languages work, if you know C, C++, Java, or Perl.

JavaScript is a little closer to Visual Basic, but is not quite like Visual Basic either.

JavaScript is not a very difficult language, but it is different.

It is a little easier to write JavaScript than some other languages,

but, it is harder to debug JavaScript.

Objects are used in JavaScript, but objects are very different than C++ or Java objects.

You use objects, like document and window, for the html page document and the window in which you display the page.

If you know object oriented programming in C++, Java, or Perl, you will find objects rather different in JavaScript. There are NO classes.

If you do not know object oriented programming, you may find it easier in JavaScript, because you do not need to "unlearn" the class bias that object oriented programmers have.

What is JavaScript good for?

JavaScript works with web pages in the browser.

It usually works on the client user machine, rather than on the server.

We will code JavaScript on the client machine, where it works directly with the browser.

Why is this good?

JavaScript can change the page dynamically, responding to what the user does. Html has VERY limited ability to dynamically respond to the user. Html can blink in some browsers. Html can change the appearance of a link when the user uses the mouse on the link. Html pages are NOT dynamic, they just sit there, and look pretty, but they do not do anything. JavaScript can make them dynamically change.

JavaScript can verify the data the user enters in a form, and request the user correct it before sending it to the server. This reduces the processing on the server. This effectively eliminates the time the user needs to wait for the error messages. This reduces the traffic on the Internet.

JavaScript is widely used in web pages

JavaScript is widely used to validate user input in forms.

Dynamic HTML (DHTML) is used in many commercial web sites to provide dynamic pages. Dynamic HTML uses several components:

- HTML or XHTML (HTML that also is XML)

- JavaScript

- CSS (Cascading Style Sheets)

- DOM (Document Object Model) (A platform and language independent standard object model for representing HTML or XML.

An example that uses DHTML are the maps provided in Yahoo in 2006.

The latest thing is Ajax. Ajax uses XHTML, and adds:

- JavaScript

- CSS

- DOM

- XML

- XMLHttpRequest object, which is used to communicate from the client web page to the server.

So, JavaScript is used with HTML. This is what we will do in this course.

This is a very valuable technology, without additional technologies.

It is very commonly used to validate user input.

Once you know JavaScript, you can go on to learn DHTML and Ajax, if you want to build a large "state of the art" commercial site. JavaScript is the center of DHTML and Ajax.

What background do you need to take this course?

There are two prerequisites:

Prerequisites are NOT enforced. You the student must decide if you are ready to take this course. If you are not well prepared, you will need to study the background material as you go along; some people choose to spend the extra effort, and do this.

1) CIS 89A World Wide Web Page Development

You should have taken this course, or learned the html tags from some other source. A course in using a web page generator, such as Dreamweaver or Frontpage, is not adequate.

2) An introductory programming course. There are two introductory programming courses at De Anza:

- CIS 15AG Introduction to Computer Programming Using C

- CIS 14A Visual Basic .NET Programming I

You should have taken one of these courses, or some other similar course.

In this course, I assume you know some programming, and will introduce each programming topic briefly, and then tell how it is done in JavaScript.

>> Ask each student in the front row: have they taken CIS 89A or what equivalent? What programming course have they taken?

There is one advisory course, which would be nice to take before this course:

1) CIS 18A Introduction to UNIX/LINUX

Ask a show of hands, who has taken a course in UNIX or LINUX or is a user?

These are the experts for the class.

***********************************************************

XHTML

In building web pages you use HTML.

There are 6 current standard versions of HTML

HTML 4.01 Transitional

HTML 4.01 Strict

HTML 4.01 Frameset

XHTML 1.0 Transitional

XHTML 1.0 Strict

XHTML 1.0 Frameset

In this course, we will use XHTML 1.0 Transitional.

Transitional allows older HTML tags, which are being phased out of the standard, but are still acceptable today. Strict does not allow old deprecated tags. Frameset is used for framesets, which are allowed today, but not included in the transitional or strict standards.

XHTML is HTML, and is also XML. XML is a new simple script language, which is important in sharing data between different programs, and between different companies.

Let's look at the sample: sample1_1_xhtml.html

Note that the file extension is still html (or htm). html is more commonly used today (htm was used in DOS). Please use the extension of html, rather than htm, in this class.

Look at sample 1-1-xhtml.

sample-1-1-xhtml.html

Look at another sample 1-0-prototype

sample-1-0-prototype.html

You can copy this sample, and use it as the base to build your html pages.

Look at another sample 1-0-prototype

sample-1a-0-css-prototype.html

You can copy this sample, and use it as the base to build your html pages

containing css.

If you use Cascading Style Sheets, you may use XHTML 1.0 strict. CSS provides better ways to control the appearance of a page, rather than using the old, deprecated tags that are allowed by XHTML 1.0 transitional.

What is different about XHTML, compared with HTML

a) Add the ?xml tag, we saw in the sample.

b) Also change the !DOCTYPE tag.

2) Add the namespace attribute in the html tag, we saw in the sample.

XHTML is HTML, but has some restrictions in how you type your tags.

3) tag names, attribute names, and style property names must be in lower case. HTML does not care about case, XML does. XHTML uses lower case.

4) Always use closing tags for containers.

Example:

<p>Hello</p>

Do NOT omit the /p tag.

5) put space slash at the end of all singleton tags.

Example:

<hr />

The slash is required for XML. The space is required for HTML, to separate the slash from the html element name or attribute value.

6) Enclose all attribute values in quotes.

Example:

The quotes are always required in XHTML. (Sometimes they could be omitted in HTML.) (They can be double quotes " or single quotes '

7) All attributes must have values. If they have no value in HTML, use the name of the attribute as the value.

Example:

The noshade attribute has no value in HTML, but must have one in XHTML.

These are the main differences between valid HTML 4.01 and valid XHTML 1.0

There is a longer list given in:

Programming the Web

XHTML and JavaScript

by Larry Randles Lagerstrom.

Enough gobbledygook. Copy the sample to start your page. If you code in lower case, put a space slash at the end of singleton tags, and always enclose attribute values in quotes, you will be mostly OK.

***********************************************************

Simple JavaScript

Let's look at a simple line of code in JavaScript:

document.write("hello");

document is the html document. This object is provided by JavaScript for us to use. We use an object by giving its name, followed by a dot.

write is a function provided for use with the document object. A function provided for use with an object is called a member function, or a method. We will use the write method to write text into the html document.

"hello" is the argument passed to the write function. This is the string of text, that will be written into the html document.

; the semicolon ends the statement. I like to end statements with a semicolon. If you do not use a semicolon, the statement ends at the end of the line.

Should you use semicolons? I suggest you do make it a habit to use semicolons, because most languages use them, even if they are optional here.

Look at sample 1-2-oneLine.

sample-1-2-one-line.html

In this sample, the first and last paragraphs are ordinary html. The other paragraph is created using the html <p> and </p> tags, but there is JavaScript in the paragraph, rather than text.

The JavaScript is contained in the

In the JavaScript is our one line of code, which writes hello into the html document, into the paragraph.

We could write hello twice:

Look at sample 1-3-twoLines.

sample-1-3-two-lines.html

I just copied the first two paragraphs, and pasted them in again to build this page.

We can have more than one script in an html document.

***********************************************************

JavaScript in its own file

There is nothing really wrong with the last examples. Some browsers have trouble with putting the JavaScript in the html document. There are some fancy techniques to use special arrangements of comments, to overcome this problem with some browsers. This sometimes works.

A better way to build JavaScript is to put it into a separate file.

Let's look at a sample:

sample-1-4-externalFile.js

contains just:

document.write("hello");

It contains the JavaScript code, only.

The JavaScript file has the file extension of .js

Look at sample 1-4-external-file.

sample-1-4-external-file.html

The result is the same as the previous example.

The only difference is that the JavaScript code is in a different file.

In this example, the JavaScript file is in the same directory; if it is in a different directory it needs the relative or absolute path to the file, or its URI.

Note that the script tag is now a singleton tag.

The script tag has a src attribute, that tells what file has the JavaScript.

Should you put your JavaScript is the HTML file, or in a separate JavaScript file?

If you are using a short, simple script, and if you do not plan to use the script in more than one place, and if your users are all using modern browsers, then you can do either. Otherwise, put it in a separate JavaScript file.

In general it is good practice to put the JavaScript in its own file;

that is what we will do in this course.

***********************************************************

Set up Microsoft Windows account

I have the instructions for setting up your windows account on-line.

Look at:

http://voyager.deanza.edu/~oldham

Select - CIS 89C Client-Side Programming with JavaScript

Select - unit1. In unit 1, Lab A includes setting up your windows account, building a simple XHTML page, and sending an e-mail to the instructor, saying your lab is ready.

Also in my web site you will find the green sheet and the schedule, as well as the study units.