web programming - union collegecs.union.edu/~striegnk/courses/webprogramming/week8_tue.pdf · java...
TRANSCRIPT
![Page 1: Web Programming - Union Collegecs.union.edu/~striegnk/courses/webprogramming/week8_Tue.pdf · java script code here ... Javascript - datatypes • comments • statements • variables](https://reader033.vdocument.in/reader033/viewer/2022050402/5f7fd2a3bc8fa2188e462931/html5/thumbnails/1.jpg)
Web Programming
Kristina Striegnitz
cs.union.edu/~striegnk
Steinmetz 233
phone: x6554
![Page 2: Web Programming - Union Collegecs.union.edu/~striegnk/courses/webprogramming/week8_Tue.pdf · java script code here ... Javascript - datatypes • comments • statements • variables](https://reader033.vdocument.in/reader033/viewer/2022050402/5f7fd2a3bc8fa2188e462931/html5/thumbnails/2.jpg)
PHP / MySql – client server interaction
CLIENT
SERVER
PHP Engine
Server
MySQL server
![Page 3: Web Programming - Union Collegecs.union.edu/~striegnk/courses/webprogramming/week8_Tue.pdf · java script code here ... Javascript - datatypes • comments • statements • variables](https://reader033.vdocument.in/reader033/viewer/2022050402/5f7fd2a3bc8fa2188e462931/html5/thumbnails/3.jpg)
Javascript – client server interaction
CLIENT
SERVER
PHP Engine
Server
MySQL serverJavascript Interpreter
![Page 4: Web Programming - Union Collegecs.union.edu/~striegnk/courses/webprogramming/week8_Tue.pdf · java script code here ... Javascript - datatypes • comments • statements • variables](https://reader033.vdocument.in/reader033/viewer/2022050402/5f7fd2a3bc8fa2188e462931/html5/thumbnails/4.jpg)
• internal:<script type=”text/javascript”>
java script code here</script>
• external:<script type=”text/javascript”
scr = "first_example.js"></script>
(See hello_javascript_1/2/3/4.html)
Embedding Javascript into HTML
![Page 5: Web Programming - Union Collegecs.union.edu/~striegnk/courses/webprogramming/week8_Tue.pdf · java script code here ... Javascript - datatypes • comments • statements • variables](https://reader033.vdocument.in/reader033/viewer/2022050402/5f7fd2a3bc8fa2188e462931/html5/thumbnails/5.jpg)
• alert(string)
– produces pop-up
• document.write(string)
– writes to the html document
Javascript – simple output (for now)
![Page 6: Web Programming - Union Collegecs.union.edu/~striegnk/courses/webprogramming/week8_Tue.pdf · java script code here ... Javascript - datatypes • comments • statements • variables](https://reader033.vdocument.in/reader033/viewer/2022050402/5f7fd2a3bc8fa2188e462931/html5/thumbnails/6.jpg)
• comments
• statements
• variables
• datatypes
• operators
• control flow (conditionals, loops)
• functions
• objects
(See chapter on Blackboard.)
Javascript - Overview
![Page 7: Web Programming - Union Collegecs.union.edu/~striegnk/courses/webprogramming/week8_Tue.pdf · java script code here ... Javascript - datatypes • comments • statements • variables](https://reader033.vdocument.in/reader033/viewer/2022050402/5f7fd2a3bc8fa2188e462931/html5/thumbnails/7.jpg)
• // single line comment
• /*
multi line comment
/*
Javascript - Comments
![Page 8: Web Programming - Union Collegecs.union.edu/~striegnk/courses/webprogramming/week8_Tue.pdf · java script code here ... Javascript - datatypes • comments • statements • variables](https://reader033.vdocument.in/reader033/viewer/2022050402/5f7fd2a3bc8fa2188e462931/html5/thumbnails/8.jpg)
• comments
• statements
• variables
• datatypes
• operators
• control flow (conditionals, loops)
• functions
• objects
(See chapter on Blackboard.)
Javascript - Overview
![Page 9: Web Programming - Union Collegecs.union.edu/~striegnk/courses/webprogramming/week8_Tue.pdf · java script code here ... Javascript - datatypes • comments • statements • variables](https://reader033.vdocument.in/reader033/viewer/2022050402/5f7fd2a3bc8fa2188e462931/html5/thumbnails/9.jpg)
• don't have to end in ';'
• but it is good practice to use ';' to end them
Javascript - statements
![Page 10: Web Programming - Union Collegecs.union.edu/~striegnk/courses/webprogramming/week8_Tue.pdf · java script code here ... Javascript - datatypes • comments • statements • variables](https://reader033.vdocument.in/reader033/viewer/2022050402/5f7fd2a3bc8fa2188e462931/html5/thumbnails/10.jpg)
• comments
• statements
• variables
• datatypes
• operators
• control flow (conditionals, loops)
• functions
• objects
(See chapter on Blackboard.)
Javascript - Overview
![Page 11: Web Programming - Union Collegecs.union.edu/~striegnk/courses/webprogramming/week8_Tue.pdf · java script code here ... Javascript - datatypes • comments • statements • variables](https://reader033.vdocument.in/reader033/viewer/2022050402/5f7fd2a3bc8fa2188e462931/html5/thumbnails/11.jpg)
• don't have to be declared, but it is good practice to
declare them:
var some_variable;
some_variable = 6;
var another_variable = 5;
Javascript - variables
![Page 12: Web Programming - Union Collegecs.union.edu/~striegnk/courses/webprogramming/week8_Tue.pdf · java script code here ... Javascript - datatypes • comments • statements • variables](https://reader033.vdocument.in/reader033/viewer/2022050402/5f7fd2a3bc8fa2188e462931/html5/thumbnails/12.jpg)
• var name = prompt(“What is your name”?, “default
name”);
– opens pop up asking for input
Javascript – simple input (for now)
![Page 13: Web Programming - Union Collegecs.union.edu/~striegnk/courses/webprogramming/week8_Tue.pdf · java script code here ... Javascript - datatypes • comments • statements • variables](https://reader033.vdocument.in/reader033/viewer/2022050402/5f7fd2a3bc8fa2188e462931/html5/thumbnails/13.jpg)
• comments
• statements
• variables
• datatypes
• operators
• control flow (conditionals, loops)
• functions
• objects
(See chapter on Blackboard.)
Javascript - Overview
![Page 14: Web Programming - Union Collegecs.union.edu/~striegnk/courses/webprogramming/week8_Tue.pdf · java script code here ... Javascript - datatypes • comments • statements • variables](https://reader033.vdocument.in/reader033/viewer/2022050402/5f7fd2a3bc8fa2188e462931/html5/thumbnails/14.jpg)
• nothing surprising:
• strings: “hallo”, 'hallo'
• numbers: 4, 5.6, -3.87
• boolean: true, false
Javascript - datatypes
![Page 15: Web Programming - Union Collegecs.union.edu/~striegnk/courses/webprogramming/week8_Tue.pdf · java script code here ... Javascript - datatypes • comments • statements • variables](https://reader033.vdocument.in/reader033/viewer/2022050402/5f7fd2a3bc8fa2188e462931/html5/thumbnails/15.jpg)
• arrays (indexed):
var some_numbers = [1, 2, 3, 4];
var more_numbers = Array(5, 6, 7);
var another_array = Array();
another_array[0] = 1;
• arrays (associative):
var numbers_and_letters = Array();
numbers_and_letters[“a”] = 97
numbers_and_letters[“z”] = 122
Javascript - datatypes
![Page 16: Web Programming - Union Collegecs.union.edu/~striegnk/courses/webprogramming/week8_Tue.pdf · java script code here ... Javascript - datatypes • comments • statements • variables](https://reader033.vdocument.in/reader033/viewer/2022050402/5f7fd2a3bc8fa2188e462931/html5/thumbnails/16.jpg)
• comments
• statements
• variables
• datatypes
• operators
• control flow (conditionals, loops)
• functions
• objects
(See chapter on Blackboard.)
Javascript - Overview
![Page 17: Web Programming - Union Collegecs.union.edu/~striegnk/courses/webprogramming/week8_Tue.pdf · java script code here ... Javascript - datatypes • comments • statements • variables](https://reader033.vdocument.in/reader033/viewer/2022050402/5f7fd2a3bc8fa2188e462931/html5/thumbnails/17.jpg)
• Nothing unusual.
• string concatenation: +
Javascript - operators
![Page 18: Web Programming - Union Collegecs.union.edu/~striegnk/courses/webprogramming/week8_Tue.pdf · java script code here ... Javascript - datatypes • comments • statements • variables](https://reader033.vdocument.in/reader033/viewer/2022050402/5f7fd2a3bc8fa2188e462931/html5/thumbnails/18.jpg)
• comments
• statements
• variables
• datatypes
• operators
• control flow (conditionals, loops)
• functions
• objects
(See chapter on Blackboard.)
Javascript - Overview
![Page 19: Web Programming - Union Collegecs.union.edu/~striegnk/courses/webprogramming/week8_Tue.pdf · java script code here ... Javascript - datatypes • comments • statements • variables](https://reader033.vdocument.in/reader033/viewer/2022050402/5f7fd2a3bc8fa2188e462931/html5/thumbnails/19.jpg)
if (condition) {
...
}
else if (condition) {
...
}
else {
...
}
Javascript - conditionals
optional
optional
![Page 20: Web Programming - Union Collegecs.union.edu/~striegnk/courses/webprogramming/week8_Tue.pdf · java script code here ... Javascript - datatypes • comments • statements • variables](https://reader033.vdocument.in/reader033/viewer/2022050402/5f7fd2a3bc8fa2188e462931/html5/thumbnails/20.jpg)
• comments
• statements
• variables
• datatypes
• operators
• control flow (conditionals, loops)
• functions
• objects
(See chapter on Blackboard.)
Javascript - Overview
![Page 21: Web Programming - Union Collegecs.union.edu/~striegnk/courses/webprogramming/week8_Tue.pdf · java script code here ... Javascript - datatypes • comments • statements • variables](https://reader033.vdocument.in/reader033/viewer/2022050402/5f7fd2a3bc8fa2188e462931/html5/thumbnails/21.jpg)
while (condition) {
…
}
do {
…
} while (condition);
Javascript – loops - while
![Page 22: Web Programming - Union Collegecs.union.edu/~striegnk/courses/webprogramming/week8_Tue.pdf · java script code here ... Javascript - datatypes • comments • statements • variables](https://reader033.vdocument.in/reader033/viewer/2022050402/5f7fd2a3bc8fa2188e462931/html5/thumbnails/22.jpg)
for (var count=0; count <= 10; count++) {
…
}
for (var element in some_array) {
…
}
Javascript – loops - for
![Page 23: Web Programming - Union Collegecs.union.edu/~striegnk/courses/webprogramming/week8_Tue.pdf · java script code here ... Javascript - datatypes • comments • statements • variables](https://reader033.vdocument.in/reader033/viewer/2022050402/5f7fd2a3bc8fa2188e462931/html5/thumbnails/23.jpg)
• comments
• statements
• variables
• datatypes
• operators
• control flow (conditionals, loops)
• functions
• objects
(See chapter on Blackboard.)
Javascript - Overview
![Page 24: Web Programming - Union Collegecs.union.edu/~striegnk/courses/webprogramming/week8_Tue.pdf · java script code here ... Javascript - datatypes • comments • statements • variables](https://reader033.vdocument.in/reader033/viewer/2022050402/5f7fd2a3bc8fa2188e462931/html5/thumbnails/24.jpg)
function name (parameter, another parameter, ...) {
...
}
local vs. global scope:
• local: only visible inside function
• var inside a function creates a local variable
• global scope: visible both outside of functions and
inside
Javascript - functions
![Page 25: Web Programming - Union Collegecs.union.edu/~striegnk/courses/webprogramming/week8_Tue.pdf · java script code here ... Javascript - datatypes • comments • statements • variables](https://reader033.vdocument.in/reader033/viewer/2022050402/5f7fd2a3bc8fa2188e462931/html5/thumbnails/25.jpg)
• Write a function max that takes two numbers as
arguments and returns the larger one.
• Write two functions sum and multiply. sum should add
all numbers in an array of numbers. multiply should
multiply them.
• Write a function happyBirthday that takes a number as
argument and writes “Happy Birthday!” onto the screen
as many times.
Some simple Javascript exercises
![Page 26: Web Programming - Union Collegecs.union.edu/~striegnk/courses/webprogramming/week8_Tue.pdf · java script code here ... Javascript - datatypes • comments • statements • variables](https://reader033.vdocument.in/reader033/viewer/2022050402/5f7fd2a3bc8fa2188e462931/html5/thumbnails/26.jpg)
• comments
• statements
• variables
• datatypes
• operators
• control flow (conditionals, loops)
• functions
• objects
(See chapter on Blackboard.)
Javascript - Overview
![Page 27: Web Programming - Union Collegecs.union.edu/~striegnk/courses/webprogramming/week8_Tue.pdf · java script code here ... Javascript - datatypes • comments • statements • variables](https://reader033.vdocument.in/reader033/viewer/2022050402/5f7fd2a3bc8fa2188e462931/html5/thumbnails/27.jpg)
• What are objects?
• creating a new object instance:
var var_name = new Object_Type();
e.g.: var today = new Date();
• accessing properties/attributes/instance variables:
obj_var_name.attribute_name
• calling methods/functions
obj_var_name.method_name(...)
Javascript - objects
![Page 28: Web Programming - Union Collegecs.union.edu/~striegnk/courses/webprogramming/week8_Tue.pdf · java script code here ... Javascript - datatypes • comments • statements • variables](https://reader033.vdocument.in/reader033/viewer/2022050402/5f7fd2a3bc8fa2188e462931/html5/thumbnails/28.jpg)
• native objects
– date, strings, arrays
• host objects
– document (as in document.write(...))
– we will see much more of these
• user defined objects
– we are not going to use those
Javascript – kinds of objects
![Page 29: Web Programming - Union Collegecs.union.edu/~striegnk/courses/webprogramming/week8_Tue.pdf · java script code here ... Javascript - datatypes • comments • statements • variables](https://reader033.vdocument.in/reader033/viewer/2022050402/5f7fd2a3bc8fa2188e462931/html5/thumbnails/29.jpg)
• var date = new Date()
• methods:
The date object
![Page 30: Web Programming - Union Collegecs.union.edu/~striegnk/courses/webprogramming/week8_Tue.pdf · java script code here ... Javascript - datatypes • comments • statements • variables](https://reader033.vdocument.in/reader033/viewer/2022050402/5f7fd2a3bc8fa2188e462931/html5/thumbnails/30.jpg)
• Create a page that always displays the current date in
the following format:
Thursday, October 22, 2009
• Use a date object and its methods, and use associative
arrays to map days and months as numbers to their
names.
Exercise