cis101 introduction to computing week 09. agenda hand in resume project your questions introduction...
Post on 21-Dec-2015
213 views
TRANSCRIPT
CIS101Introduction 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 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)
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
stringsvar 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. 2-7
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 Must update index.htm to include
link to your Mad Lib Hand in hard copy of your htm file
(include your name) Mad Lib must be PG!
This week online Readings
Ort http://doit.ort.org/, Computer Languages chapter
JavaScript 101Introduction, 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, include link to it from your home page (index.htm)
You will give a brief demo of your Mad Lib in class next week