Fluency with Information Technology INFO100 and CSE100 Katherine Deibel Katherine Deibel, Fluency in Information Technology1

 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 Katherine Deibel, Fluency in Information Technology2

 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 Katherine Deibel, Fluency in Information Technology3

 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 Katherine Deibel, Fluency in Information Technology4

 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 Katherine Deibel, Fluency in Information Technology5

 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 Katherine Deibel, Fluency in Information Technology6 netID1 netID2 netID3 netID4 netID5 …

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

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

The Secret Ingredient is XHTML Katherine Deibel, Fluency in Information Technology9

 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 Katherine Deibel, Fluency in Information Technology10

 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 Katherine Deibel, Fluency in Information Technology11

 can appear anywhere in HTML  In the  Within tags within Katherine Deibel, Fluency in Information Technology12

 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"); Katherine Deibel, Fluency in Information Technology13

 Demo 1: One alert  Demo 2: Multiple alerts Katherine Deibel, Fluency in Information Technology14

We're not in mathematical Kansas anymore Katherine Deibel, Fluency in Information Technology15

 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 Katherine Deibel, Fluency in Information Technology16

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

 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 Katherine Deibel, Fluency in Information Technology18

 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 Katherine Deibel, Fluency in Information Technology19

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) Katherine Deibel, Fluency in Information Technology20

 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 = ; Katherine Deibel, Fluency in Information Technology21

 Computer languages allow several types of values: numeric, strings of letters, Boolean  numbers: e  not numbers: 1, % 7±2  strings: "abc" 'efg' " " "B&B's" ""  not strings: ' " \  Boolean: true false  not Boolean: T F yes no Katherine Deibel, Fluency in Information Technology22

 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 Katherine Deibel, Fluency in Information Technology23

 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 Katherine Deibel, Fluency in Information Technology24

The code type, not the facial type Katherine Deibel, Fluency in Information Technology25

 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)* Katherine Deibel, Fluency in Information Technology26

LineAssignment StatementmyNameyourName 1var yourName = "Sarah";Sarah 2var myName = "Andrea"; 3yourName = myName; 4myName = "Kate"; 5yourName = "myName"; Katherine Deibel, Fluency in Information Technology27

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

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 Katherine Deibel, Fluency in Information Technology29

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? Katherine Deibel, Fluency in Information Technology30

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 Katherine Deibel, Fluency in Information Technology31

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" Katherine Deibel, Fluency in Information Technology32

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

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

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

Katherine 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 -- ;

Katherine 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 -- ;

Katherine 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

 The + can be used to add numbers or join strings (concatenate)   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” Katherine Deibel, Fluency in Information Technology39

 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< Katherine Deibel, Fluency in Information Technology40

 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()); Katherine Deibel, Fluency in Information Technology41

 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: Katherine Deibel, Fluency in Information Technology42

 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 Katherine Deibel, Fluency in Information Technology43

You thought XHTML was picky Katherine Deibel, Fluency in Information Technology44

 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 Katherine Deibel, Fluency in Information Technology45

 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) Katherine Deibel, Fluency in Information Technology46

 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 */ ) Katherine Deibel, Fluency in Information Technology47

 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 /* */ Katherine Deibel, Fluency in Information Technology48

 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)

 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 Katherine Deibel, Fluency in Information Technology50