intro to javascript changing the web dynamically
DESCRIPTION
INFO100 and CSE100. Fluency with Information Technology. Intro to JavaScript Changing the Web Dynamically. Katherine Deibel. 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 - PowerPoint PPT PresentationTRANSCRIPT
Intro to JavaScriptChanging the Web Dynamically
Fluency with Information Technology
INFO100 and CSE100
Katherine Deibel
2012-04-27 Katherine Deibel, Fluency in Information Technology 1
Katherine Deibel, Fluency in Information Technology 2
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
2012-04-27
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
2012-04-27 Katherine Deibel, Fluency in Information Technology 3
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
2012-04-27 Katherine Deibel, Fluency in Information Technology 4
Katherine Deibel, Fluency in Information Technology 5
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 Microsystems2012-04-27
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
2012-04-27 Katherine Deibel, Fluency in Information Technology 6
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.
2012-04-27 Katherine Deibel, Fluency in Information Technology 7
<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>…
Solution 2: Generate links on demand Demo:
proj1A-grader-helper.html
2012-04-27 Katherine Deibel, Fluency in Information Technology 8
Other Uses of JavaScript Image slideshows Image magnification Calculations Form verification Page style manipulation Calculation tools (e.g., bin to hex) Etc.
2012-04-27 Katherine Deibel, Fluency in Information Technology 9
Adding JavaScriptThe Secret Ingredient is XHTML
2012-04-27 Katherine Deibel, Fluency in Information Technology 10
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>First JavaScript</title> <style type="text/css"> body {background-color: black; color: gold; font-family; corbel;} </style> </head> <body> <h1>Showing Simple JS</h1> <!-- No JavaScipt yet, just HTML --> </body></html>
2012-04-27 Katherine Deibel, Fluency in Information Technology 11
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>First JavaScript</title> <style type="text/css"> body {background-color: black; color: gold; font-family; corbel;} </style> </head> <body> <h1>Showing Simple JS</h1> <script type="text/javascript"> alert("Let's show off the alert() operation"); </script></body></html>
Note the type attribute
2012-04-27 Katherine Deibel, Fluency in Information Technology 12
The Script Tag <script></script> can appear
anywhere in HTML In the <head></head> In the <body></body> Within tags within <body></body>
2012-04-27 Katherine Deibel, Fluency in Information Technology 13
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>First JavaScript</title> <style type="text/css"> body {background-color: black; color: gold; font-family; corbel;} </style> </head> <body> <h1>Showing Simple JS</h1> <script type="text/javascript"> alert("Let's show off the alert() operation"); </script></body></html>
2012-04-27 Katherine Deibel, Fluency in Information Technology 14
Just do it!
Demo 1: One alert Demo 2: Multiple alerts
2012-04-27 Katherine Deibel, Fluency in Information Technology 15
Naming and VariablesWe're not in mathematical Kansas anymore
2012-04-27 Katherine Deibel, Fluency in Information Technology 16
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
2012-04-27 Katherine Deibel, Fluency in Information Technology 17
Variables Variables are named
areas in memory Recall:
Computer instructions work with the memory addresses, not the values at those addresses
2012-04-27 Katherine Deibel, Fluency in Information Technology 18
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.
6:40pm
7:30pm8:20pm9:00pm
6pm
2012-04-27 Katherine Deibel, Fluency in Information Technology 19
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
2012-04-27 Katherine Deibel, Fluency in Information Technology 20
Examples of IdentifiersCorrect 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-04-27 Katherine Deibel, Fluency in Information Technology 21
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; var interestRate = 4, pi = 3.14159;
2012-04-27 Katherine Deibel, Fluency in Information Technology 22
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
2012-04-27 Katherine Deibel, Fluency in Information Technology 23
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
2012-04-27 Katherine Deibel, Fluency in Information Technology 24
= 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
2012-04-27 Katherine Deibel, Fluency in Information Technology 25
ExpressionsThe code type, not the facial type
2012-04-27 Katherine Deibel, Fluency in Information Technology 26
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
2012-04-27 Katherine Deibel, Fluency in Information Technology 27
Example: Assigning VariablesLine Assignment Statement myName yourName
1 var yourName = "Sarah"; Sarah
2 var myName = "Andrea";
3 yourName = myName;
4 myName = "Kate";
5 yourName = "myName";
2012-04-27 Katherine Deibel, Fluency in Information Technology 28
Example: Assigning VariablesLine Assignment Statement myName yourName
1 var yourName = "Sarah"; Sarah
2 var myName = "Andrea"; Andrea Sarah
3 yourName = myName;
4 myName = "Kate";
5 yourName = "myName";
2012-04-27 Katherine Deibel, Fluency in Information Technology 29
Example: Assigning VariablesLine Assignment Statement myName yourName
1 var yourName = "Sarah"; Sarah
2 var myName = "Andrea"; Andrea Sarah
3 yourName = myName; Andrea Andrea
4 myName = "Kate";
5 yourName = "myName";
We can also assign a value of a variable to another variable
2012-04-27 Katherine Deibel, Fluency in Information Technology 30
Example: Assigning VariablesLine Assignment Statement myName yourName
1 var yourName = "Sarah"; Sarah
2 var myName = "Andrea"; Andrea Sarah
3 yourName = myName; Andrea Andrea
4 myName = "Kate"; Kate ??
5 yourName = "myName";
What happens to yourName now that we changed the value of myName?
2012-04-27 Katherine Deibel, Fluency in Information Technology 31
Example: Assigning VariablesLine Assignment Statement myName yourName
1 var yourName = "Sarah"; Sarah
2 var myName = "Andrea"; Andrea Sarah
3 yourName = myName; Andrea Andrea
4 myName = "Kate"; Kate Andrea
5 yourName = "myName";
What happens to yourName now that we changed the value of myName?
Absolutely Nothing.2012-04-27 Katherine Deibel, Fluency in Information Technology 32
Example: Assigning VariablesLine Assignment Statement myName yourName
1 var yourName = "Sarah"; Sarah
2 var myName = "Andrea"; Andrea Sarah
3 yourName = myName; Andrea Andrea
4 myName = "Kate"; Kate Andrea
5 yourName = "myName"; Kate myName
Remember that there is a difference between the variable myName and the
string value "myName".2012-04-27 Katherine Deibel, Fluency in Information Technology 33
Other Assignment Operators
2012-04-27 Katherine Deibel, Fluency in Information Technology 34
Line Assignment Statement Value in myAge
1 var myAge = 32; 32
2 myAge = myAge + 2;
3 myAge += 2;
4 myAge ++;
5 myAge -= 3;
6 myAge -- ;
Other Assignment Operators
2012-04-27 Katherine Deibel, Fluency in Information Technology 35
Line Assignment Statement Value in myAge
1 var myAge = 32; 32
2 myAge = myAge + 2; 34
3 myAge += 2;
4 myAge ++;
5 myAge -= 3;
6 myAge -- ;
Other Assignment Operators
2012-04-27 Katherine Deibel, Fluency in Information Technology 36
Line Assignment Statement Value in myAge
1 var myAge = 32; 32
2 myAge = myAge + 2; 34
3 myAge += 2; 36
4 myAge ++;
5 myAge -= 3;
6 myAge -- ;
Other Assignment Operators
2012-04-27 Katherine Deibel, Fluency in Information Technology 37
Line Assignment Statement Value in myAge
1 var myAge = 32; 32
2 myAge = myAge + 2; 34
3 myAge += 2; 36
4 myAge ++; 37
5 myAge -= 3;
6 myAge -- ;
Other Assignment Operators
2012-04-27 Katherine Deibel, Fluency in Information Technology 38
Line Assignment Statement Value in myAge
1 var myAge = 32; 32
2 myAge = myAge + 2; 34
3 myAge += 2; 36
4 myAge ++; 37
5 myAge -= 3; 34
6 myAge -- ;
Other Assignment Operators
2012-04-27 Katherine Deibel, Fluency in Information Technology 39
Line Assignment Statement Value in myAge
1 var myAge = 32; 32
2 myAge = myAge + 2; 34
3 myAge += 2; 36
4 myAge ++; 37
5 myAge -= 3; 34
6 myAge -- ; 33
+ 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”
2012-04-27 Katherine Deibel, Fluency in Information Technology 40
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
2012-04-27 Katherine Deibel, Fluency in Information Technology 41
Here is the JavaScript JS “computes” the alert message for us
<html xmlns="http;//www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>First JavaScript</title> <style type="text/css"> body {background-color: black; color: gold; font-family; corbel;} </style> </head> <body> <h1>Showing Simple 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>
2012-04-27 Katherine Deibel, Fluency in Information Technology 42
Spaces and Concatenation JS “computes” the alert message for us
<html xmlns="http;//www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>First JavaScript</title> <style type="text/css"> body {background-color: black; color: gold; font-family; corbel;} </style> </head> <body> <h1>Showing Simple 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>
Note the space after the colon. If we
omitted that, the alert would read:Here's a random number:0.34343
2012-04-27 Katherine Deibel, Fluency in Information Technology 43
Parentheses JS “computes” the alert message for us
<html xmlns="http;//www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>First JavaScript</title> <style type="text/css"> body {background-color: black; color: gold; font-family; corbel;} </style> </head> <body> <h1>Showing Simple 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>
Open '(' and close parentheses ')' need to be equal in number. A simple and common error is mismatched parentheses.
2012-04-27 Katherine Deibel, Fluency in Information Technology 44
Basic Rules of ProgrammingYou thought XHTML was picky
2012-04-27 Katherine Deibel, Fluency in Information Technology 45
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
2012-04-27 Katherine Deibel, Fluency in Information Technology 46
Katherine Deibel, Fluency in Information Technology 47
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)
2012-04-27
Katherine Deibel, Fluency in Information Technology 48
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 */ )
2012-04-27
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 /* */
2012-04-27 Katherine Deibel, Fluency in Information Technology 49
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)
2012-04-27 Katherine Deibel, Fluency in Information Technology 50