CIS101Introduction to Computing

Week 09Spring 2004

Agenda Your questions Using folders in your web space Introduction to JavaScript This week online Next class

Web space management Organize your assignments into

folders Easier for me, easier for you Set up a new folder for JavaScript

JavaScript 101 Text Introduces basic structure of

programming languages using JavaScript Variables and Data Arithmetic Events Functions Selection Loops

Overview of text Each lesson introduces and explains a

basic programming concept Then each lesson has related class

exercises (“In The Lab”) Each lab example has code example to

enter and run Students then make modifications and

enhancements to existing code Lesson ends with exercises that will be

assigned as homework

JavaScript Appendices Appendix A – JavaScript reserved

words Appendix B – pre-defined color names Appendix B – tutorial explaining how

to use HTML-Kit to write JavaScript code (in Blackboard)

Appendix D – tutorial on de-bugging in JavaScript (in Blackboard)

What is programming? A program is a set or sequence of

instructions entered into a computer to perform work

Programs are written using programming languages

What is a programming language? Programming languages consists of

ways to represent information (data), and commands used to examine and/or change (update) information

Modern programming languages resemble human languages, combined with arithmetic and special symbols

How does a computer execute a program? Computers only execute

instructions written in their own language (machine code or binary code)

Binary code consists of nothing but 0s and 1s

Programmer writes program, then that program needs to be translated into 0s and 1s

How does a program become binary code? Two possible techniques:

Compiler: software that examines all the instructions, then translates full program into binary code

Interpreter: software that examines one instruction at a time, translating it to binary code

JavaScript Next few weeks will learn about

programming with JavaScript JavaScript uses an interpreter to

translate program into binary code Browser is the interpreter for

JavaScript

About JavaScript Goal was to create a simple

language that added interactivity to Web pages

Allows code downloaded with HTML to be executed on local machine

Client Server Computer in front of you is the client Machine hosting Web pages is the

server Before JavaScript, interactive code for a

Web page always executed on the server This was very slow! Faster to download code along with html

and execute it on the client

JavaScript can Display different HTML depending

on if the browser is IE or Netscape Validate user input before

transferring it to the server Create dynamic effects and

animation

JavaScript Features Supported by IE and Netscape,

although some differences exist Source code embedded in HTML

document Programs respond to user actions,

like mouse clicks Compact and relatively easy to

learn

JavaScript is Object Based Objects are “packages” of data and

commands combined in a single name

Other object based languages include Visual Basic and VB Script

Object based languages have built in objects ready to use

JavaScript objects include document, window, and others

What software? Continue using HTML-Kit

JavaScript code is written in a Web document

Browser Screen shots in text use Internet

Explorer 6.0

The script tag JavaScript code is embedded in

HTML documents Script tag identifies JavaScript

code<script language=“JavaScript”>JavaScript code goes here</script>

Similar format to other html tags

Where to put your JavaScript Script tags can be inserted into

body or head of your document Most of your examples will go in

the body of your document

Hiding JavaScript from Old Browsers

JavaScript is a recent addition to Web pages

Browsers that pre-date JavaScript can’t run its code

Can use special symbols to hide JavaScript code from old browsers (this is less important as time goes

on)

JavaScript hiding code Insert this code:

<script language=“JavaScript”><!-- start hidingJavaScript code goes here//finish hiding --></script>

The Scripting menu in 1st Page 2000 will insert the script tags and hiding code for you (see Appendix B p. B-4)

Set up Browser Open Internet Explorer Click tools on menu bar, Select

Internet Options, Click Advanced tab

Select “disable script debugging” and “display a notification about every script error” (p. D-1)

Using document.write document.write is your first

JavaScript statement Syntax:

document.write(“text goes here”); Text within quotes will be

displayed Semi-colon is optional

document.write cont. “dot notation” common to object

based and object oriented languages

dot means “belongs to” write method “belongs to” the

document object

In the lab Name new Web document lesson0101.html Place cursor on blank line after <body> tag Use Scripting menu to insert hiding code

(see p. B-4) Place cursor on blank line after line with

<!--- (colored yellow) Enter code from p. 1-4 exactly as you see it

(enter lines 8 & 9) Click preview button to test your code

Mistakes and JavaScript If your output does not match p. 1-5

you made a mistake In programming tiny mistakes cause

big problems You must eliminate all mistakes

before code will run (called debugging)

See Appendix D for more information on debugging in JavaScript

Add more code Common development method in

programming is to try out a little piece of code, get in working, then start adding more code

After inputting and executing first code, add code that writes in color (p. 1-7)

Add the Date Computers keep an internal clock

that with the current date and time Use Date() to include the date on

your page Add the following code: document.write(“Today is

“,Date(),”<br>”);

Student Modifications Each lab exercise starts with code you

enter and run Then you will add modifications and

additions To your lesson0101 file add the following:

Display your favorite singer or band Display your e-mail address in your favorite

color Display your favorite movie Include a comment in your code file

Lesson 02: Using Variables Programs mostly collect, evaluate, and

process information Code needs to represent and manage

information (data) Programming languages use variables

to represent information or data JavaScript variables can represent

numbers, strings (character data), and Boolean(logical) values in JavaScript

Declaring Variables First step in using variables is a

declaration Declaration creates a variable Example:

var myName; “var” is a keyword that indicates that

this is a variable declaration Keyword (see Intro) has a defined meaning

in JavaScript

Variables need a name The name of a variable is called an

identifier A legal identifier in JavaScript is

governed by the following rules:The first character must be a

letter or an underscore(_)The remaining characters may

be numbers, letters, and underscore

Assigning Values to Variables The equal sign (=) is called the

assignment operator in JavaScript and it is used to assign values to variables

myName = “Fred”; Values are always copied from

right to left

Using prompt and variables The JavaScript statement prompt

asks Web visitors a question and records (saves) their answer

Example:var visitorName = prompt(“What is your name?”,”Enter your name here”);

(see p. 2-3 to see how this statement appears)

Syntax of prompt statement Syntax:

var varname=prompt(“the question”,”default entry”);

varname stores answer from visitor “the question” is what program asks

the visitor “default entry” is answer that

program will save if visitor doesn’t input a response (i.e. visitor just hits enter)

Displaying a Variable Variables contain information you

can display in a Web document Use document.write with the

variable’s name (no quote marks) Example:

var myName = “Sam”; document.write(myName);

This displays Sam in a Web document

Concatenating Strings Concatenation combines strings

(puts them together) The + operator is used to combine

stringsvar part1 = “This sentence ”;var part2= “has 2 pieces”var sentence = part1 + part2;

In the lab This lab uses variables and the prompt

method Create a new HTML document named

lesson0201.html Use the Scripting menu to add the script

tags and hiding code Enter the code on p. 2-6 exactly as you

see it Click preview button to test out the code Add modifications/changes described on

p. 2-7

JavaScript Homework

This week online Readings

JavaScript 101Introduction, Lesson 01, Lesson 02

No quiz this week Group assignment for final project

– 2 annotated bibliographies posted to group discussion

Next class meeting Everyone must have folders on

their web space!!! Complete exercises 2-1 and 2-2,

and upload both to your personal web space into your javascript folder. Do not upload them to the digital drop box

Bring your JavaScript book to class