Intro to JavaScript Changing the Web Dynamically

INFO100 and CSE100 Fluency with Information Technology Intro to JavaScriptChanging the Web Dynamically Katherine Deibel Katherine Deibel, Fluency in Information Technology

The Plan • 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 Technology

Project 1B Extension • Project 1B is now due on Wednesday, May 2 • Turn-in on Monday for 5 extra credit points • Turn-in on Tuesday for 2 extra credit points • Why? • The TAs are nice people • Kate is… um… • Some people nicely asked • I won't be on e-mail much this weekend Katherine Deibel, Fluency in Information Technology

What is JavaScript? • 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 Technology

JavaScript is not Java • 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 Technology

Static versus Dynamic • 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 Technology

Solution 1: Repeated Links • 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. <a href="http://…/netID1/fit100/Project1A/project_plan.html">netID1</a> <a href="http://…/netID2/fit100/Project1A/project_plan.html">netID2</a> <a href="http://…/netID3/fit100/Project1A/project_plan.html">netID3</a> <a href="http://…/netID4/fit100/Project1A/project_plan.html">netID4</a> <a href="http://…/netID5/fit100/Project1A/project_plan.html">netID5</a> … Katherine Deibel, Fluency in Information Technology

Solution 2: • Generate links on demand • Demo:proj1A-grader-helper.html Katherine Deibel, Fluency in Information Technology

Other Uses of JavaScript • Image slideshows • Image magnification • Calculations • Form verification • Page style manipulation • Calculation tools (e.g., bin to hex) • Etc. Katherine Deibel, Fluency in Information Technology

Adding JavaScript The Secret Ingredient is XHTML Katherine Deibel, Fluency in Information Technology

Begin with HTML • HTML is static … the contents of the file are displayed as given <html xmlns="http;//www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>FirstJavaScript</title> <style type="text/css"> body {background-color: black; color: gold; font-family; corbel;} </style> </head> <body> <h1>ShowingSimple JS</h1>  </body> </html> Katherine Deibel, Fluency in Information Technology

JavaScript Needs HTML • JavaScript must be surrounded by <script> tags in the HTML <html xmlns="http;//www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>FirstJavaScript</title> <style type="text/css"> body {background-color: black; color: gold; font-family; corbel;} </style> </head> <body> <h1>ShowingSimple JS</h1> <script type="text/javascript"> alert("Let's show off the alert() operation"); </script> </body> </html> Note the type attribute Katherine Deibel, Fluency in Information Technology

The Script Tag • <script></script> can appear anywhere in HTML • In the <head></head> • In the <body></body> • Within tags within <body></body> Katherine Deibel, Fluency in Information Technology

Browsers Process Script Tags • When the browser comes to a script tag, it processes it immediately <html xmlns="http;//www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>FirstJavaScript</title> <style type="text/css"> body {background-color: black; color: gold; font-family; corbel;} </style> </head> <body> <h1>ShowingSimple JS</h1> <script type="text/javascript"> alert("Let's show off the alert() operation"); </script> </body> </html> Katherine Deibel, Fluency in Information Technology

Just do it! • Demo 1: One alert • Demo 2: Multiple alerts Katherine Deibel, Fluency in Information Technology

Naming and Variables We're not in mathematical Kansas anymore Katherine Deibel, Fluency in Information Technology

Names In Computing • 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 Technology

Variables • 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 Technology

Variables • 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. 6pm 6:40pm 7:30pm 9:00pm 8:20pm Katherine Deibel, Fluency in Information Technology

Variables • 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 Technology

Examples of Identifiers 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 Technology

Declarations • 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; • varinterestRate = 4, pi = 3.14159; Katherine Deibel, Fluency in Information Technology

Values • Computer languages allow several types of values: numeric, strings of letters, Boolean • numbers: 1 0 -433 6.022e+23 .01 • not numbers: 1,000 106 5% 7±2 • strings: "abc" 'efg' " " "B&B's" "" • not strings: <tab> ' " \ • Boolean: true false • not Boolean: T F yes no Katherine Deibel, Fluency in Information Technology

Assignment • The universal form of assignment: • <variable> <assignment symbol> <expression> • 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 Technology

= will annoy you • 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 Katherine Deibel, Fluency in Information Technology

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

Expressions • 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 Katherine Deibel, Fluency in Information Technology

Example: Assigning Variables Katherine Deibel, Fluency in Information Technology

Example: Assigning Variables We can also assign a value of a variable to another variable Katherine Deibel, Fluency in Information Technology

Example: Assigning Variables What happens to yourName now that we changed the value of myName? Katherine Deibel, Fluency in Information Technology

Example: Assigning Variables What happens to yourName now that we changed the value of myName? Absolutely Nothing. Katherine Deibel, Fluency in Information Technology

Example: Assigning Variables Remember that there is a difference between the variable myName and the string value "myName". Katherine Deibel, Fluency in Information Technology

Other Assignment Operators Katherine Deibel, Fluency in Information Technology

+ does more than one thing • 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” Katherine Deibel, Fluency in Information Technology

Building An Alert() Message • 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 Katherine Deibel, Fluency in Information Technology

Here is the JavaScript • JS “computes” the alert message for us <html xmlns="http;//www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>FirstJavaScript</title> <style type="text/css"> body {background-color: black; color: gold; font-family; corbel;} </style> </head> <body> <h1>ShowingSimple JS</h1> <script type="text/javascript"> alert("Let's show off the alert() operation"); alert("Here's a random number: " + Math.random()); </script> </body> </html> Katherine Deibel, Fluency in Information Technology

Spaces and Concatenation • JS “computes” the alert message for us Note the space after the colon. If we omitted that, the alert would read: Here's a random number:0.34343 <html xmlns="http;//www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>FirstJavaScript</title> <style type="text/css"> body {background-color: black; color: gold; font-family; corbel;} </style> </head> <body> <h1>ShowingSimple JS</h1> <script type="text/javascript"> alert("Let's show off the alert() operation"); alert("Here's a random number: " + Math.random()); </script> </body> </html> Katherine Deibel, Fluency in Information Technology

Parentheses Open '(' and close parentheses ')' need to be equal in number. A simple and common error is mismatched parentheses. • JS “computes” the alert message for us <html xmlns="http;//www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>FirstJavaScript</title> <style type="text/css"> body {background-color: black; color: gold; font-family; corbel;} </style> </head> <body> <h1>ShowingSimple JS</h1> <script type="text/javascript"> alert("Let's show off the alert() operation"); alert("Here's a random number: " + Math.random()); </script> </body> </html> Katherine Deibel, Fluency in Information Technology

Basic Rules of Programming You thought XHTML was picky Katherine Deibel, Fluency in Information Technology

My Approach to Teaching • 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 Technology

Some basic rules for now • 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 Technology

Some basic rules for now • There are good practice rules: • Indent nested statements (will be explained on Monday). • Put spaces before and after operators: x + 3 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 Technology

Comments • 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 Technology

Summary • 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) Katherine Deibel, Fluency in Information Technology

Intro to JavaScript Changing the Web Dynamically