1 / 52

ACM 511

ACM 511. IntroductION to CLIENT-SIDE WEB PROGRAMMING. Javascript. Javascript. Javascript. Javascript. Javascript. Javascript. Javascript. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/strict.dtd"> <html> <head> <title>My Web Page</title>

kuri
Download Presentation

ACM 511

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ACM 511 IntroductION to CLIENT-SIDE WEB PROGRAMMING 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 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/strict.dtd"> <html> <head> <title>My Web Page</title> <script type="text/javascript"> alert('hello world!'); </script> </head> ACM 262 Course Notes

  9. Javascript <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/strict.dtd"> <html> <head> <title>My Web Page</title> <script type="text/javascript" src="navigation.js"></script> </head> ACM 262 Course Notes

  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 <script type="text/javascript"> var firstName = 'Cookie'; var lastName = 'Monster'; document.write('<p>'); document.write(firstName + ' ' + lastName); document.write('</p>'); </script> ACM 262 Course Notes

  21. Javascript <script type="text/javascript"> var name = prompt('What is your name?', ''); document.write('<p>Welcome ' + name + '</p>'); </script> ACM 262 Course Notes

  22. Javascript ACM 262 Course Notes

  23. Javascript Creating an Array To create and store items in an array, you first declare the array’s name (just as youwould a variable) and then supply a list of comma separated values: each value representsone item in the list. To indicatean 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 = []; ACM 262 Course Notes

  24. Javascript <script type="text/javascript"> var days = ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun']; alert(days[0]); var i = 4; //alert(days[i]); </script> ACM 262 Course Notes

  25. Javascript ACM 262 Course Notes

  26. Javascript <script type="text/javascript"> 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('</br>'); } </script> ACM 262 Course Notes

  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 if ( condition ) { // some action happens here } if (score > 100) { alert('You won!'); } if (answer == 31) { alert('Correct. Saturn has 31 moons.'); } ACM 262 Course Notes

  33. Adding Logic ACM 262 Course Notes

  34. Adding Logic ACM 262 Course Notes

  35. Adding Logic if (condition) { // write what happens } else if (condition2) { // write what happens } else { // write what happens } ACM 262 Course Notes

  36. Adding Logic <script type="text/javascript"> var num= prompt(‘Enter a number', ‘60'); if (num >= 50) { alert(‘Thanks.'); } </script> ACM 262 Course Notes

  37. Adding Logic varfridayCash = 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.'); } ACM 262 Course Notes

  38. Adding Logic Logical AND if (a < 10 && 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 } ACM 262 Course Notes

  39. Adding Logic if (dayOfWeek == 'Friday') { varfridayCash = 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.'); } } ACM 262 Course Notes

  40. Adding Logic ACM 262 Course Notes

  41. Adding Logic while (condition) { // javascript to repeat } ACM 262 Course Notes

  42. Adding Logic var num = 1; while (num <= 5) { document.write('Number ' + num + '<br>'); num = num + 1; } document.write('Number 1 <br>'); document.write('Number 2 <br>'); document.write('Number 3 <br>'); document.write('Number 4 <br>'); document.write('Number 5 <br>'); ACM 262 Course Notes

  43. Adding Logic ACM 262 Course Notes

  44. Adding Logic ACM 262 Course Notes

  45. Adding Logic do { // javascript to repeat } while (condition) ; do { varluckyNumber = prompt('What is your lucky number?',''); luckyNumber = parseInt(luckyNumber, 10); } while (isNaN(luckyNumber)); ACM 262 Course Notes

  46. Adding Logic var num = 6; do{ document.write('Number ' + num + '<br>'); num = num + 1; } while (num <= 5) var num = 6; while (num <= 5) { document.write('Number ' + num + '<br>'); num = num + 1; } ACM 262 Course Notes

  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

More Related