albert wavering bobby seng. week 4: javascript quiz announcements/questions
TRANSCRIPT
ALBERT WAVERINGBOBBY SENG
Week 4: JavaScript
Quiz Announcements/questions
What is JavaScript?
Programming language! ‘Scripting’
Lightweight Embedded or linked to HTML pages No compilation Is interpreted by a user’s browser on
page load Compatibility problems?
JavaScript’s Place
<html><head><script type="text/javascript">…JavaScript code goes here…</script></head><body></body></html>
JavaScript’s Place
<html><head><script type="text/javascript"
src="coolCode.js"></script></head><body></body></html>
Java vs. JavaScript
Similarities? Syntax Object-oriented
Differences Everything else
Good news Really simple to understand
Real Name? ECMAScript
ECMA: information systems standards organization
ECMA-262 = JavaScript
Uses of JavaScript
Information processing Updating element content
Creating interactive webpages Moving elements Changing visibility of elements
Asynchronous data transfer Ex.: Facebook, Google Instant
Cookie storage/retrieval Store user data (‘keep me logged in’, etc)
JavaScript Output to Browser For now, use
document.write(someVariable); This is not professionally used but is
good for testing and debugging Later on we’ll be able to select
elements, modify them, and generally wreak havoc
Characteristics
Normally structured with functions If/else/while/switch/for
Dynamically typed Variables are typed by their data
Object oriented Objects are collections of data and functions
Fails silently No error messages to user about code Test each segment of code as you complete
it Use Firebug or similar
Dynamic Typing
x = " Test… ";x = 5;x = 5 + 6; //x is now equal to 11
Object-Oriented Programming? An object-oriented program allows
you to make ‘objects’ and use them to store data and perform functions
An object can store variables and prototypes
You can specify a type of object, then create instances of that object with different data
Brief Intro to Objects
Declare them with name ‘function’ JS functions are objects
The keyword ‘this’ refers to elements belonging to the current object
function car(color, doors, type){this.color = color;this.doors = doors;this.type = type;
}
delorean = new car("silver", 2, "timetraveling");
Objects
function car(color, doors, type){this.color = color;this.doors = doors;this.type = type;this.speed = 0;
this.drive = drive;}
function drive(newSpeed){this.speed = newSpeed;
}
Objects
delorean = new car("silver", 4, "timetraveling");
delorean.drive(88);
//now delorean.speed equals 88
JavaScript Statements
Statements are ended with a semicolon Variable = value;
Where ‘value’ is anything that evaluates to a number, string, object, etc.
Comments denoted by: //Single line /*
Multiple-linecommentsare fun*/
JavaScript Statements
Conditional statements and loops use code blocks Curly brackets denote these blocks of
code
if(I like cookies){do some stuff;
}
Flow Control
if(logical or numerical comparison){//code executed if condition evaluates to true
}else if(another comparison){
//code executed if the first condition was not //met but this one is
}else{
//code executed if no other condition evaluated //to true
}
Mathematical Operators
Normal arithmetic operators Add + (combines strings too!) Subtract - Multiply * Divide / Modulus %
Increment ++ Decrement --
More Math
Let x = 15 Assignment operators op x is:
Set to = x = 5 5 Add and set += x += 5
20 Subtract from, set -= x -= 5
10 Multiply with, set *= x *= 2
30 Divide with, set /= x /= 5 3 Modulo with, set%= x /= 6 3
JavaScript Comparators
Logical comparisons and && or || not ! equal to == not equal to !=
JavaScript Comparators
Equal to == Not equal to != Greater than > Greater than or equal to >= Less than < Less than or equal to <=
Variable Scope
Places in the document where the variable exists to be used
Variables are global by default Can use them anywhere
Object variables only scoped within their object
To apply local scope to a variable inside a function Keyword ‘var’
Variable Scope
Inside a function, a local variable of the same name as a global variable takes precedence
When declaring variables inside functions, they are only local if the keyword ‘var’ is used
Variable Scope
x = 5;
function addFive(input){var x = 0;return input + x;
}
document.write(x);document.write("<br/>");document.write(addFive(2));
JavaScript Loops
for(var counter = start; counter <= stop; counter++)
First statement runs once before looping starts
Middle statement evaluated at the beginning of each loop; loop continues if it is true
Last statement: performed at the end of each loop
JavaScript Loop Example
for(var counter = 0; counter < 10; counter++){
document.write(counter + " Jump around!<br/> ");
}
Other Looping Constructs
while(condition) Loops until condition evaluates to false
do…while(condition) Loops until condition evaluates to false
(but always at least once)
while vs do…while
while(x < 5){some stuff
}
do{some stuff
}while(x < 5);
Homework
Write an HTML file that implements four JavaScript functions, defined on the next slide
Your file doesn’t actually have to perform the functions automatically; just implement and test them so they work
Due by next class (9/30) Don’t worry about validation for now
Homework Description
function combine(x, y) This should concatenate (combine) the strings x and y into
a single string and print it function print(words, count)
This should write the string ‘words’ as many times as is defined by the number count
function choose(x, y, z) This should write:
x if x > y > z y if y > x z otherwise
function fibonnaci(n) This should write out the Fibonacci sequence up to the nth
term ‘the first two Fibonacci numbers are 0 and 1, and each
subsequent number is the sum of the previous two’ [Wikipedia]