Transcript CIS101 week 09

CIS101
Introduction to Computing
Week 09
Agenda





Hand in Resume project
Your questions
Introduction to JavaScript
This week online
Next class
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 – tutorial explaining how to
use 1st Page 2000 to write JavaScript
code
Appendix C – pre-defined color names
Appendix D – tutorial on de-bugging in
JavaScript
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 1st Page 2000


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 hiding
JavaScript 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)
Set up 1st Page 2000






Start 1st Page 2000 and create new document
Put your cursor on blank line under body tag
Click “Scripting” on menu bar
Select “Define Script Language” option
Select “JavaScript” as language, click OK (p.
B-1)
This inserts script tags and hiding code
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
strings
var part1 = “This sentence ”;
var part2= “has 2 pieces”
var sentence = part1 + part2;
In the lab






This lab uses variables and the prompt
method
Start up 1st Page 2000 and 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. 27
Mad Lib




Next example is a JavaScript program that
writes a simple Mad Lib
Mad Lib is a game where potentially
humorous story is written down, with blanks
in the place of some important words
Before reading story, storyteller asks other to
fill in the blanks without knowing the context
Then resulting story is read
JavaScript Mad Lib





Save code from previous exercise
Create a new document named
lesson0202.html
Will use variables, prompt, and concatenation
to create a JavaScript Mad Lib
Enter the code on p. 2-8
Once your program is running, add
modifications (p. 2-8)
JavaScript Homework



Mad Lib Assignment (p. 2-11, exercise 2_3)
Code on p.2-8 is a simple example of a Mad
Lib
Your Mad Lib needs to have:




at least two paragraphs
must have six missing words
one missing word used more than one time
page should have title (i.e. a heading), centered at
top with your name
Mad Lib Tips




Try out code on p. 2-8, understand how it
works before you add to it
Make up your silly story on paper before you
start writing JavaScript
Create variables for each needed missing
word (remember one is a duplicate)
Use a prompt statement to ask visitor for
each missing word needed (only ask one time
for the duplicate)
Mad Lib Tips cont.




Use + (concatenation) to combine your
sentences and paragraphs
Use document.write to display your Mad
Lib
Embed html tags like <br>, <p> to
break up your paragraphs
Consider other features, like color, bold,
italics, etc. (p. 2-8)
Mad Lib Requirements



Must be uploaded to Web space
Hand in hard copy of your .htm file
(include your name)
Mad Lib must be PG!
This week online

Readings


JavaScript 101
Introduction, Lesson 01, Lesson 02
No quiz this week
Next class meeting


Bring your JavaScript book to class
Upload your Mad Lib to your Web site


Set up a JavaScript folder for the
JavaScript assignments
You will give a brief demo of your Mad
Lib in class next week