1. Fluency with Information Technology INFO100 and CSE100 Katherine Deibel 2012-02-03Katherine Deibel, Fluency in Information Technology1

2.  Next few lectures: JavaScript (JS)  We will not be learning all of JS  Introduction to the language  Examples and projects to explore JS  Establish foundation for learning more on your own 2012-02-03Katherine Deibel, Fluency in Information Technology2

3.  JavaScript is  used to make HTML Web pages dynamic  used by professional Web designers and programmers for things like gmail  written using Notepad++ or TextWrangler  tested by running the code in your browser 2012-02-03Katherine Deibel, Fluency in Information Technology3

4.  JavaScript is named after the object- oriented programming language Java  The George Washington Carver to President George Washington  JS was originally called LiveScript  Designed for Netscape Navigator Browser  JS released at the same time that Navigator added Java functionality  Name change was a joint marketing effort by Netscape and Sun Microsystems 2012-02-03Katherine Deibel, Fluency in Information Technology4

5.  A page written in HTML will never change its content (static)  Sometimes, you need a page to update to your needs (dynamic)  Example: Lab Grading  Each TA needs to access your HTML file 2012-02-03Katherine Deibel, Fluency in Information Technology5

6.  Create a web page with links to student pages  Problems:  Need to update page for each project  Separate pages per TA  Student switch sections, drop, add, etc.  Will have to be recreated for the next term. 2012-02-03Katherine Deibel, Fluency in Information Technology6 netID1 netID2 netID3 netID4 netID5 …

7.  Generate links on demand  Demo: proj1A-grader-helper.html 2012-02-03Katherine Deibel, Fluency in Information Technology7

8.  Image slideshows  Image magnification  Calculations  Form verification  Page style manipulation  Calculation tools (e.g., bin to hex)  Etc. 2012-02-03Katherine Deibel, Fluency in Information Technology8

9. The Secret Ingredient is XHTML 2012-02-03Katherine Deibel, Fluency in Information Technology9

10.  HTML is static … the contents of the file are displayed as given First JavaScript body {background-color: black; color: gold; font-family; corbel;} Showing Simple JS 2012-02-03Katherine Deibel, Fluency in Information Technology10

11.  JavaScript must be surrounded by tags in the HTML First JavaScript body {background-color: black; color: gold; font-family; corbel;} Showing Simple JS alert("Let's show off the alert() operation"); Note the type attribute 2012-02-03Katherine Deibel, Fluency in Information Technology11

12.  can appear anywhere in HTML  In the  Within tags within 2012-02-03Katherine Deibel, Fluency in Information Technology12

13.  When the browser comes to a script tag, it processes it immediately First JavaScript body {background-color: black; color: gold; font-family; corbel;} Showing Simple JS alert("Let's show off the alert() operation"); 2012-02-03Katherine Deibel, Fluency in Information Technology13

14.  Demo 1: One alert  Demo 2: Multiple alerts 2012-02-03Katherine Deibel, Fluency in Information Technology14

15. We're not in mathematical Kansas anymore 2012-02-03Katherine Deibel, Fluency in Information Technology15

16.  In normal language, names, and the things they name—their values— usually cannot be separated  In programming most names change values … a consequence of finite specification  Titles (US_Open_Champ), Offices (Mayor), Roles (Juliet), etc. are familiar examples of names that change values 2012-02-03Katherine Deibel, Fluency in Information Technology16

17.  Variables are named areas in memory  Recall: Computer instructions work with the memory addresses, not the values at those addresses 2012-02-03Katherine Deibel, Fluency in Information Technology17

18.  In a restaurant, each table is numbered. All night long the people and the food served at the table change, but the table still has the same number. That table number functions like a variable name. 6:40pm 7:30pm 8:20pm 9:00pm 6pm 2012-02-03Katherine Deibel, Fluency in Information Technology18

19.  Names in programming are identifiers  The things they name are their values  The package—identifier & value—is a variable, implying a possible change  Identifiers have a specific structure:  Can only use letters, digits, and _ (underscore)  Must start with a letter  Are case sensitive 2012-02-03Katherine Deibel, Fluency in Information Technology19

20. Correct identifiers  X  x  numOfStudents  numberOfStudents  g_constant  str  COST  form13  Train_36_speed Incorrect Identifiers  12x  hours/min  Important!Value  last-name  7  name(nick) 2012-02-03Katherine Deibel, Fluency in Information Technology20

21.  To declare variables is to state what variables will be used  Use the word: var  Follow with a list of variables separated by,  Terminate all statements with a semicolon ;  Give variables an initial value with =  Examples  var x, input1, input2, rate;  var interestRate = 4, pi = 3.14159; 2012-02-03Katherine Deibel, Fluency in Information Technology21

22.  Computer languages allow several types of values: numeric, strings of letters, Boolean  numbers: 1 0 -433 6.022e+23.01  not numbers: 1,000 10 6 5% 7±2  strings: "abc" 'efg' " " "B&B's" ""  not strings: ' " \  Boolean: true false  not Boolean: T F yes no 2012-02-03Katherine Deibel, Fluency in Information Technology22

23.  The universal form of assignment:   For example: day = hours/24;  value of the variable on the left is changed to have the new value of expression on right  read “=” as “is assigned” “becomes” “gets”  right-to-left value flow 2012-02-03Katherine Deibel, Fluency in Information Technology23

24.  In mathematics, variables and = have specific meaning  In programming, those meanings are different!  Keep this in mind  In math: x = x + 1 makes no sense  In programming: x = x + 1 just increases the value of x by 1 2012-02-03Katherine Deibel, Fluency in Information Technology24

25. The code type, not the facial type 2012-02-03Katherine Deibel, Fluency in Information Technology25

26.  Expressions are like “formulas” saying how to manipulate existing values to compute new values, e.g. hours/24  Operators: + - * / % produce numbers  Operators: = > on numbers (or strings for == and !=) produce Booleans  Operators: && || ! on Booleans produce Booleans  Grouping by parentheses is OK and smart  seconds = ((days*24 + hours)*60 + min)*60 2012-02-03Katherine Deibel, Fluency in Information Technology26

27. LineAssignment StatementmyNameyourName 1var yourName = "Sarah";Sarah 2var myName = "Andrea"; 3yourName = myName; 4myName = "Kate"; 5yourName = "myName"; 2012-02-03Katherine Deibel, Fluency in Information Technology27

28. LineAssignment StatementmyNameyourName 1var yourName = "Sarah";Sarah 2var myName = "Andrea";AndreaSarah 3yourName = myName; 4myName = "Kate"; 5yourName = "myName"; 2012-02-03Katherine Deibel, Fluency in Information Technology28

29. LineAssignment StatementmyNameyourName 1var yourName = "Sarah";Sarah 2var myName = "Andrea";AndreaSarah 3yourName = myName;Andrea 4myName = "Kate"; 5yourName = "myName"; We can also assign a value of a variable to another variable 2012-02-03Katherine Deibel, Fluency in Information Technology29

30. LineAssignment StatementmyNameyourName 1var yourName = "Sarah";Sarah 2var myName = "Andrea";AndreaSarah 3yourName = myName;Andrea 4myName = "Kate";Kate?? 5yourName = "myName"; What happens to yourName now that we changed the value of myName? 2012-02-03Katherine Deibel, Fluency in Information Technology30

31. LineAssignment StatementmyNameyourName 1var yourName = "Sarah";Sarah 2var myName = "Andrea";AndreaSarah 3yourName = myName;Andrea 4myName = "Kate";KateAndrea 5yourName = "myName"; What happens to yourName now that we changed the value of myName? Absolutely Nothing. 2012-02-03Katherine Deibel, Fluency in Information Technology31

32. LineAssignment StatementmyNameyourName 1var yourName = "Sarah";Sarah 2var myName = "Andrea";AndreaSarah 3yourName = myName;Andrea 4myName = "Kate";KateAndrea 5yourName = "myName";KatemyName Remember that there is a difference between the variable myName and the string value "myName". 2012-02-03Katherine Deibel, Fluency in Information Technology32

33. 2012-02-03Katherine Deibel, Fluency in Information Technology33 LineAssignment StatementValue in myAge 1var myAge = 32;32 2myAge = myAge + 2; 3myAge += 2; 4myAge ++; 5myAge -= 3; 6myAge -- ;

34. 2012-02-03Katherine Deibel, Fluency in Information Technology34 LineAssignment StatementValue in myAge 1var myAge = 32;32 2myAge = myAge + 2;34 3myAge += 2; 4myAge ++; 5myAge -= 3; 6myAge -- ;

35. 2012-02-03Katherine Deibel, Fluency in Information Technology35 LineAssignment StatementValue in myAge 1var myAge = 32;32 2myAge = myAge + 2;34 3myAge += 2;36 4myAge ++; 5myAge -= 3; 6myAge -- ;

36. 2012-02-03Katherine Deibel, Fluency in Information Technology36 LineAssignment StatementValue in myAge 1var myAge = 32;32 2myAge = myAge + 2;34 3myAge += 2;36 4myAge ++;37 5myAge -= 3; 6myAge -- ;

37. 2012-02-03Katherine Deibel, Fluency in Information Technology37 LineAssignment StatementValue in myAge 1var myAge = 32;32 2myAge = myAge + 2;34 3myAge += 2;36 4myAge ++;37 5myAge -= 3;34 6myAge -- ;

38. 2012-02-03Katherine Deibel, Fluency in Information Technology38 LineAssignment StatementValue in myAge 1var myAge = 32;32 2myAge = myAge + 2;34 3myAge += 2;36 4myAge ++;37 5myAge -= 3;34 6myAge -- ;33

39.  The + can be used to add numbers or join strings (concatenate)  5 + 5  10  "a" + "b" + "c"  "abc"  '5' + '5'  '55'  The operand type determines the operation  Combine a number and string???  5 + '5'  '55'  Rule: With an operand of each type, convert number to string, concatenate is the symbol for “has the value” 2012-02-03Katherine Deibel, Fluency in Information Technology39

40.  Use concatenate to build an alert message: " Here's a random number: " + Math.random()  In this case the letter string tells us that the plus means concatenate;  Math.random() is a JS function that gives a random decimal number x from the range 0≤x<1 2012-02-03Katherine Deibel, Fluency in Information Technology40

41.  JS “computes” the alert message for us First JavaScript body {background-color: black; color: gold; font-family; corbel;} Showing Simple JS alert("Let's show off the alert() operation"); alert("Here's a random number: " + Math.random()); 2012-02-03Katherine Deibel, Fluency in Information Technology41

42.  JS “computes” the alert message for us First JavaScript body {background-color: black; color: gold; font-family; corbel;} Showing Simple JS alert("Let's show off the alert() operation"); alert("Here's a random number: " + Math.random()); Note the space after the colon. If we omitted that, the alert would read: Here's a random number:0.34343 2012-02-03Katherine Deibel, Fluency in Information Technology42

43.  JS “computes” the alert message for us First JavaScript body {background-color: black; color: gold; font-family; corbel;} Showing Simple JS alert("Let's show off the alert() operation"); alert("Here's a random number: " + Math.random()); Open '(' and close parentheses ')' need to be equal in number. A simple and common error is mismatched parentheses. 2012-02-03Katherine Deibel, Fluency in Information Technology43

44. You thought XHTML was picky 2012-02-03Katherine Deibel, Fluency in Information Technology44

45.  JavaScript has many rules for how it is written  The book condenses these for you  I will condense them further  My goal:  Get you started with good practices that prevent common errors 2012-02-03Katherine Deibel, Fluency in Information Technology45

46.  There are absolute rules:  Open and close parentheses must match  Variable names cannot begin with a number  There are 95% true rules  Every line of JS should end with a ; semicolon (exceptions will be shown on Monday) 2012-02-03Katherine Deibel, Fluency in Information Technology46

47.  There are good practice rules:  Indent nested statements (will be explained on Monday).  Put spaces before and after operators: 3 + x not x+3  Declare one variable per line  Declare variables at the start of the script  Comment your code ( /* text */ ) 2012-02-03Katherine Deibel, Fluency in Information Technology47

48.  Two ways to add comments in JS  // … JS will ignore everything after the // until the next line  /* … */ JS will ignore everything between the /* and */ even across multiple lines  Just use the /* */ 2012-02-03Katherine Deibel, Fluency in Information Technology48

49.  JavaScript is a typical programming language in that it has many rules  Learning strategy  Do the reading first  Practicing is better than memorizing for learning the rules  Feel free to experiment but backup your work from time to time  Great to learn from examples (w3Schools)

50.  RGB/Binary Exercise Due Monday  It is required!  Turn-in your answers in the Word document using Drop Box  Continue working on Project 1B  Keep an eye on when GoPost discussions will be due 2012-02-03Katherine Deibel, Fluency in Information Technology50