CIS101 Introduction to Computing

CIS101Introduction to Computing Week 09

Agenda • Hand in Resume project • Your questions • Introduction to JavaScript • This week online • Next class

This week’s discussion board • This week it is Kim’s and Laura’s turn

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”></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. 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

CIS101 Introduction to Computing