javascript friend or foe?. history of java and javascript oak and coffee? ecmascript european...
Post on 20-Dec-2015
220 views
TRANSCRIPT
JavaScript
Friend or Foe?
History of Java and JavaScript
Oak and Coffee?
ECMAscriptEuropean Computer Manufacturers Association
JScript?
What Side?
Server-SideCGI
Client-sideJavaScript
Java vs. JavaScript
JavaMore Complicated
Requires JDK
Programs compiled and saved as different files
Powerful object language
JavaScriptEasy to learn and use
No JDK
Scripts right in HTML
Simple Tasks
Running JavaScriptLook on page 8.05 - Recommend you work through this
<script src=url language=“JavaScript">
commands
</script>
Using the HEAD tag to your advantage.
Hiding JavaScript<script language=“JavaScript">
<!--hide script from browsers that don’t support javascript
all your javascript cool commands
//stop hiding from those browsers -->
</script>
Displaying Text
<script language=“JavaScript">
document.write("First statement ");document.write("Second statement ");document.write("Third statement ");document.write("<br>");document.writeln("First statement ");document.writeln("Second statement ");document.writeln("Third statement ");
</script>
Can I quote you on that?
Single and double quotation marks for syntax:
document.write("Come meet David ‘Bud’ Davis");
All JavaScript commands are case sensitive!!!
Variables and Data (8.11)
Variable: a named element in a program used to store and retrieve data
Given values with assignment operatorsvar Year=2002;
document.write(Year);
document.write("The year is " + Year);
4 Types of Variable Values(Data Types)
Number
String
Boolean variables
Null value
Declaring a Variable (8.13)
Month="December";
var Month; Month=“December”;
var Month="December";
Notice the ;
Dates (Objects, not getting them)
Data Objects: an object containing date information
new (keyword)var SomeDay = new Date("June, 15, 2001, 14:25:00");
var SomeDay = new Date(2001, 5, 15, 14, 25, 0);
Today = new Date();
Extracting Day Information (8.17)
Need to now extract the information from Today
Use a Method calledgetDate();
var Day = Today.getDate();
document.write(Day);
Day will contain day of the month
DateObject (Today) contains complete date and time information
Month and Year Information
var Today = new Date();
var Month = Today.getMonth()+1
var Today = new Date();
var Year = Today.getYear();
The Y2K problem
getYear() in Navigator98, 99, 2000, 2001
in Explorer98, 99, 100, 101
The Solution
var Year = Today.getFullYear();
Expressions and Operators
Expressions -- JavaScript commands that assign values to your variables
Operators -- like + operator
var ThisMonth = Today.getMonth()+1;
Expressions and Operators
document.write("Only " + DaysLeft + " days until Christmas");
Look at table on 8.20
Operators
Binary operators (work on two elements in an operation)
Unary operators (work on one variable)
Increment operators (increase variable by 1)
Decrement operator
Negation operator
Logical and Comparison Operators
Comparisonx < 100;
y == 20;
Logical(x < 100) && (y==20);
Logical and Comparison Operators
Assignment Operatorsx = x + y;
x += y;
Both examples x variable is added to y and stored in x.x = x +2;
x += 2;
JavaScript Functions (8.22)
Way to save time and reuse scriptfunction function_name(parameters){
JavaScript Commands
}
{Command Block}
Action Function
function ShowDate(date) {
document.write("Today is " + date + "<BR>");
}
-------in Web Page-----------var Today = “04/20/02";
ShowDate(Today);
Placing Functions
Definitions in <head></head>: Interpreted before called
Browser passes over command block until it is called in the HTML file. . .
Return of JavaScript
Creating Arrays
Working with Loops and Conditionals
Arrays (8.32)
An ordered collection of values referenced by a single variable.
Weekdayvar Month = new Array();
Weekday[0]="Sunday";
Weekday[1]="Monday";
Weekday[2]="Tuesday";
Weekday[3]="Wednesday";
Weekday[4]="Thursday";
Weekday[5]="Friday";
Weekday[6]="Saturday";
Syntax
var Month = new Array();
Month[11]="December";
Automatically Populated with null values
Examplevar Weekday = new Array();
Weekday[0]="Sunday";
Weekday[1]="Monday";
Weekday[2]="Tuesday";
Weekday[3]="Wednesday";
Weekday[4]="Thursday";
Weekday[5]="Friday";
Weekday[6]="Saturday";
var DayofWeek = Today.getDay();
document.write("Today is " + Weekday[DayofWeek]);
Loops (8.37)
A set of instructions that is executed repeatedly. . .
For
While
For
For(start; stop; update) {
JavaScript Commands
}
For. . .
for(Num=1; Num<4; Num++) {
document.write("The value of the Num is " + Num + "<br>");
}
The value of the Num is 1
The value of the Num is 2
The value of the Num is 3
While
while(condition) {
JavaScript Commands
}
While
var Num=1
while(Num<4) {
document.write("The value of the Num is " + Num);
Num++
}
For versus While
In the example the results are the same
You would use a While loop in situations where
no counter is available
you want to run a loop while a condition exists
Conditional Statements [8.28]
Runs only if certain conditions are met.
if(condition) {
JavaScript Commands
}
Weekend?
if(Day=="Friday"){
document.write("Have a nice weekend!");
}
Modulus
Year % 4 == 0 (Evenly divisible by 4 -- No remainder)
if(Year % 4 == 0) {
MonthCount[2]=29;
}
If . . . Else Structures [8.30]
If(condition) {
JavaScript Commands if true
} else {
JavaScript Commands if false
}
Weekend or Work?if(Day=="Friday"){document.write("Have a nice weekend!");
} else {if(Day=="Monday") {
document.write("Ha-Ha");} else {
document.write("You're either enjoying your weekend or working toward it.");}
}Note: You'll want string on one line or break string up and use concatenation.
Recommendations
Work through tutorial
File can be downloaded off of resources page--Class/Course Technology Files
http://unix.cc.wmich.edu/rea/380/resources/
Ask questions
Help one another