Download presentation
Presentation is loading. Please wait.
1
INTRODUCTION TO CLIENT-SIDE WEB PROGRAMMING ACM 511 ACM 262 Course Notes
2
Javascript ACM 262 Course Notes
3
Javascript ACM 262 Course Notes
4
Javascript ACM 262 Course Notes
5
Javascript ACM 262 Course Notes
6
Javascript ACM 262 Course Notes
7
Javascript ACM 262 Course Notes
8
Javascript ACM 262 Course Notes <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/strict.dtd"> My Web Page alert('hello world!');
9
Javascript ACM 262 Course Notes <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/strict.dtd"> My Web Page
10
Javascript ACM 262 Course Notes
11
Javascript ACM 262 Course Notes
12
Javascript ACM 262 Course Notes
13
Javascript ACM 262 Course Notes
14
Javascript ACM 262 Course Notes
15
Javascript ACM 262 Course Notes
16
Javascript ACM 262 Course Notes
17
Javascript ACM 262 Course Notes
18
Javascript ACM 262 Course Notes
19
Javascript ACM 262 Course Notes
20
Javascript ACM 262 Course Notes var firstName = 'Cookie'; var lastName = 'Monster'; document.write(' '); document.write(firstName + ' ' + lastName); document.write(' ');
21
Javascript ACM 262 Course Notes var name = prompt('What is your name?', ''); document.write(' Welcome ' + name + ' ');
22
Javascript ACM 262 Course Notes
23
Javascript ACM 262 Course Notes Creating an Array To create and store items in an array, you first declare the array’s name (just as you would a variable) and then supply a list of comma separated values: each value represents one item in the list. To indicate an array, you put the list of items between opening and closing brackets—[ ]. var days = ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun']; The brackets—[ ]—are very important. You can create an empty array without any elements like this: var playList = [];
24
Javascript ACM 262 Course Notes var days = ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun']; alert(days[0]); var i = 4; //alert(days[i]);
![Javascript ACM 262 Course Notes var days = [ Mon , Tues , Wed , Thurs , Fri , Sat , Sun ]; alert(days[0]); var i = 4; //alert(days[i]);](http://images.slideplayer.com./23/6887382/slides/slide_24.jpg "Javascript ACM 262 Course Notes var days = [ Mon , Tues , Wed , Thurs , Fri , Sat , Sun ]; alert(days[0]); var i = 4; //alert(days[i]);")
25
Javascript ACM 262 Course Notes
26
Javascript ACM 262 Course Notes var properties = ['red', '14px', 'Arial']; properties[3] = 'bold'; properties[properties.length] = 'italic'; properties.push('bold'); properties.push('bold', 'italic', 'underlined'); properties.unshift('12px'); for(i=0;i<properties.length;i++) { document.write(properties[i]); document.write(' '); }
![Javascript ACM 262 Course Notes var properties = [ red , 14px , Arial ]; properties[3] = bold ; properties[properties.length] = italic ; properties.push( bold ); properties.push( bold , italic , underlined ); properties.unshift( 12px ); for(i=0;i<properties.length;i++) { document.write(properties[i]); document.write( ); }](http://images.slideplayer.com./23/6887382/slides/slide_26.jpg "Javascript ACM 262 Course Notes var properties = [ red , 14px , Arial ]; properties[3] = bold ; properties[properties.length] = italic ; properties.push( bold ); properties.push( bold , italic , underlined ); properties.unshift( 12px ); for(i=0;i<properties.length;i++) { document.write(properties[i]); document.write( ); }")
27
Javascript ACM 262 Course Notes
28
Javascript ACM 262 Course Notes
29
Javascript ACM 262 Course Notes
30
Javascript ACM 262 Course Notes
31
Javascript ACM 262 Course Notes
32
Adding Logic ACM 262 Course Notes if ( condition ) { // some action happens here } if (score > 100) { alert('You won!'); } if (answer == 31) { alert('Correct. Saturn has 31 moons.'); }
33
Adding Logic ACM 262 Course Notes
34
Adding Logic ACM 262 Course Notes
35
Adding Logic ACM 262 Course Notes if (condition) { // write what happens } else if (condition2) { // write what happens } else { // write what happens }
36
Adding Logic ACM 262 Course Notes var num= prompt(‘Enter a number', ‘60'); if (num >= 50) { alert(‘Thanks.'); }
37
Adding Logic ACM 262 Course Notes var fridayCash = prompt('How much money can you spend?', ''); if (fridayCash >= 50) { alert('You should go out to a dinner and a movie.'); } else if (fridayCash >= 35) { alert('You should go out to a fine meal.'); } else if (fridayCash >= 12) { alert('You should go see a movie.'); } else { alert('Looks like you'll be watching TV.'); }
38
Adding Logic ACM 262 Course Notes Logical AND if (a 1) { alert("The value " + a + " is between 1 and 10"); } Logical OR if (key == 'n' || key == 'N') { //move to the next photo } Logical NOT if (! valid) { //print errors and don't submit form }
39
Adding Logic ACM 262 Course Notes if (dayOfWeek == 'Friday') { var fridayCash = prompt('How much money can you spend?', ''); if (fridayCash >= 50) { alert('You should go out to a dinner and a movie.'); } else if (fridayCash >= 35) { alert('You should go out to a fine meal.'); } else if (fridayCash >= 12) { alert('You should go see a movie.'); } else { alert('Looks like you'll be watching TV.'); }
40
Adding Logic ACM 262 Course Notes
41
Adding Logic ACM 262 Course Notes while (condition) { // javascript to repeat }
42
Adding Logic ACM 262 Course Notes var num = 1; while (num <= 5) { document.write('Number ' + num + ' '); num = num + 1; } document.write('Number 1 '); document.write('Number 2 '); document.write('Number 3 '); document.write('Number 4 '); document.write('Number 5 ');
43
Adding Logic ACM 262 Course Notes
44
Adding Logic ACM 262 Course Notes
45
Adding Logic ACM 262 Course Notes do { // javascript to repeat } while (condition) ; do { var luckyNumber = prompt('What is your lucky number?',''); luckyNumber = parseInt(luckyNumber, 10); } while (isNaN(luckyNumber));
46
Adding Logic ACM 262 Course Notes var num = 6; do{ document.write('Number ' + num + ' '); num = num + 1; } while (num <= 5) var num = 6; while (num <= 5) { document.write('Number ' + num + ' '); num = num + 1; }
47
Adding Logic ACM 262 Course Notes
48
Functions ACM 262 Course Notes
49
Functions ACM 262 Course Notes
50
Functions ACM 262 Course Notes
51
Functions ACM 262 Course Notes
52
Functions ACM 262 Course Notes
Similar presentations
