intro to javascript changing the web dynamically

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


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



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


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>…

Solution 2: Generate links on demand Demo:

proj1A-grader-helper.html


Other Uses of JavaScript Image slideshows Image magnification Calculations Form verification Page style manipulation Calculation tools (e.g., bin to hex) Etc.


Adding JavaScriptThe Secret Ingredient is XHTML


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>  </body></html>

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


The Script Tag <script></script> can appear

anywhere in HTML In the <head></head> In the <body></body> Within tags within <body></body>


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>


Just do it!

Demo 1: One alert Demo 2: Multiple alerts


Naming and VariablesWe're not in mathematical Kansas anymore


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


Variables Variables are named

areas in memory Recall:

Computer instructions work with the memory addresses, not the values at those addresses


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


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


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)


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;


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


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


= 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


ExpressionsThe code type, not the facial type


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


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




2 var myName = "Andrea"; Andrea Sarah

3 yourName = myName;

4 myName = "Kate";






3 yourName = myName; Andrea Andrea

4 myName = "Kate";


We can also assign a value of a variable to another variable






4 myName = "Kate"; Kate ??


What happens to yourName now that we changed the value of myName?






4 myName = "Kate"; Kate Andrea


What happens to yourName now that we changed the value of myName?

Absolutely Nothing.2012-04-27 Katherine Deibel, Fluency in Information Technology 32





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


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





2 myAge = myAge + 2; 34

3 myAge += 2;

4 myAge ++;

5 myAge -= 3;

6 myAge -- ;






3 myAge += 2; 36

4 myAge ++;

5 myAge -= 3;

6 myAge -- ;






3 myAge += 2; 36

4 myAge ++; 37

5 myAge -= 3;

6 myAge -- ;






3 myAge += 2; 36

4 myAge ++; 37

5 myAge -= 3; 34

6 myAge -- ;






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”


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


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>


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


Parentheses JS “computes” the alert message for us


Open '(' and close parentheses ')' need to be equal in number. A simple and common error is mismatched parentheses.


Basic Rules of ProgrammingYou thought XHTML was picky


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



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


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 /* */


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)


intro to javascript changing the web dynamically

Documents

information technology8other

information technology2project

information technology5static

information technology10

information technology3what

information technologyinfo100

html web pages

javascript body