1 / 47

CIS101 Introduction to Computing

CIS101 Introduction 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.

radwan
Download Presentation

CIS101 Introduction to Computing

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CIS101Introduction to Computing Week 09

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

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

  4. JavaScript 101 Text • Introduces basic structure of programming languages using JavaScript • Variables and Data • Arithmetic • Events • Functions • Selection • Loops

  5. 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

  6. 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

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

  8. 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

  9. 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

  10. 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

  11. 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

  12. 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

  13. 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

  14. 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

  15. 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

  16. 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

  17. 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

  18. 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

  19. 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

  20. 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)

  21. 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)

  22. 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)

  23. 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

  24. 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

  25. document.write cont. • “dot notation” common to object based and object oriented languages • dot means “belongs to” • write method “belongs to” the document object

  26. 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

  27. 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

  28. 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)

  29. 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>”);

  30. 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

  31. 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

  32. 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

  33. 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

  34. 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

  35. 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)

  36. 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)

  37. 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

  38. 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;

  39. 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

  40. 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

  41. 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)

  42. 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

  43. 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)

  44. 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)

  45. 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!

  46. This week online • Readings • Ort http://doit.ort.org/, Computer Languages chapter • JavaScript 101Introduction, Lesson 01, Lesson 02 • No quiz this week

  47. 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

More Related