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 nametheir 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 packageidentifier & valueis 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, % 72 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 0x< 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