1. 1 JavaScript http://jjcweb.jjay.cuny.edu/ssengupta/

2. JavaScript Intro  “JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Firefox, Chrome, Opera, and Safari”  What is JavaScript? o JavaScript is a scripting language o Designed to add interactivity to HTML pages o A lightweight programming language o Can be embedded directly into HTML pages o Everyone can use JavaScript without purchasing a license 2

3. Java and JavaScript  Are Java and JavaScript the same? o NO!  Java and JavaScript are two completely different languages in both concept and design!  Java (developed by Sun Microsystems) is a programming language - in the same category as C and C++. 3

4. What can a JavaScript do?  JavaScript gives HTML designers a programming tool  JavaScript can put dynamic text into an HTML page o A JavaScript statement like this: document.write(" " + name + " ") can write a variable text into an HTML page  JavaScript can react to events o A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user opens an HTML element  JavaScript can be used to validate data o A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing  JavaScript can be used to detect the visitor's browser o A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser  JavaScript can create dynamic effects in an HTML page 4

5. JavaScript – How to start  The HTML tag is used to insert a JavaScript into an HTML page. document.write("Hello World!"); 5

6. JavaScript – How to (contd.)  You can even add HTML tags to the JavaScript document.write(" Hello World! "); 6

7. How to Handle Simple Browsers  Browsers that do not support JavaScript, will display JavaScript as page content.  To prevent them from doing this, and as a part of the JavaScript standard, the HTML comment tag should be used to "hide" the JavaScript. <!-- document.write("Hello World!"); //--> 7

8. Where to put the JavaScript  Scripts can be in document.write("This message is written by JavaScript"); 8

9. Where to put the JavaScript  Scripts can be in function message() { alert("This alert box was called with the onload event"); } 9

10. Using an External JavaScript  If you want to run the same JavaScript on several pages, without having to write the same script on every page, you can write a JavaScript in an external file  Save the external JavaScript file with a.js file extension  Note: The external script CANNOT contain the tags!  To use the external script, point to the.js file in the "src" attribute of the tag: 10

11. Using an External JavaScript 11

12. JavaScript Code  JavaScript code (or just JavaScript) is a sequence of JavaScript statements.  A JavaScript statement is a command to a browser. o The purpose of the command is to tell the browser what to do. o document.write("Hello World"); o alert("This alert box was called with the onload event");  JavaScript is Case Sensitive o Unlike HTML, JavaScript is case sensitive - therefore watch your capitalization closely when you write JavaScript statements, create or call variables, objects and functions 12

13. JavaScript Comments  Comments can be added to explain the JavaScript, or to make the code more readable  Single line comments start with //  JavaScript Multi-Line Comments o Multi line comments start with /* and end with */ 13

14. Let’s create some simple JavaScript Code 14

15. JavaScript Operators  JavaScript can be used to do Math or Math-like operations o Adding strings or numbers  JavaScript Operators o = is used to assign values o + is used to add values o var is used to declare variables inside JavaScript 15

16. JavaScript Code Adding two strings together and display: var txt1="What a very"; var txt2="nice day"; var txt3; txt3=txt1+txt2; document.write(txt3); 16

17. JavaScript Code (contd.) var txt1="What a very"; var txt2=" nice day"; var txt3; var txt4=" Hello world"; txt3=txt1+txt2; txt5=txt3+txt4; document.write(txt5); 17

18. JavaScript Arithmetic Operators 18

19. JavaScript Comparison Operators  Comparison operators can be used in conditional statements to compare values and take action depending on the result:  if (age<18) document.write("young"); 19

20. JavaScript Comparison Operators  In JavaScript we have the following conditional statements: o if statement - use this statement to execute some code only if a specified condition is true o if...else statement - use this statement to execute some code if the condition is true and another code if the condition is false o if...else if....else statement - use this statement to select one of many blocks of code to be executed o switch statement - use this statement to select one of many blocks of code to be executed 20

21. If Statement  if (condition) { code to be executed if condition is true } 21

22. If...else Statement  if (condition) { code to be executed if condition is true } else { code to be executed if condition is not true } 22

23. If...else if...else Statement  if (condition1) { code to be executed if condition1 is true } else if (condition2) { code to be executed if condition2 is true } else { code to be executed if condition1 and condition2 are not true } 23

24. JavaScript Switch Statement  switch(n) { case 1: execute code block 1 break; case 2: execute code block 2 break; default: code to be executed if n is different from case 1 and 2 } 24

25. JavaScript Objects Introduction  JavaScript is an object oriented program o Provides dynamic and customized effect in web design with these objects  Date Object o Used to work with dates and times 25

26. JavaScript Date Object  The Date object is used to work with dates and times  Date objects are created with the Date() constructor new Date() // current date and time var d=new Date(); document.write(d); document.write(d.getDay()); 26 var d=new Date(); document.write(d.getDay());

27. Date Object Methods 27

28. Practice Exercise  Create a webpage using HTML and JavaScript that dynamically displays greetings depending on hour of the day.  Anytime before 10 am: good morning  After 10 am and before 3 pm: good day  After 3 pm and before 8 pm: good evening  After 8 pm and before 11 pm: good night  Hint: o Use Date object and if…else if… statements 28

29. Part 2 29

30. JavaScript String Object  The String object is used to manipulate a stored piece of text 30 var txt="Hello world!"; document.write(txt.length); var txt="Hello world!"; document.write(txt.toUpperCase()); var txt="Hello world!"; var txt=5;

31. String manipulation  JavaScript can be used to manipulate and display texts in various formats o Big size text o Small size text o Bold o Italics o Font color o Subscript / Superscript o Blink 31

32. Example: String manipulation 32

33. Hyperlink in JavaScript 33

34. Practice Exercise  Create a JavaScript code with blinking hyperlink 34

35. JavaScript Popup Boxes  JavaScript has three kinds of popup boxes: o Alert box o Confirm box and o Prompt box  Alert box is often used to provide certain information to the user o When an alert box pops up, the user clicks "OK" to proceed  Confirm box is often used if you want the user to verify or accept something o When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed  Prompt box is often used if you want the user to input a value before entering a page 35

36. Alert Box function show_alert() { alert("Hello! I am an alert box!"); } 36

37. Confirm Box function show_confirm() { var r=confirm("Press a button!"); if (r==true) { alert("You pressed OK!"); } else { alert("You pressed Cancel!"); } 37

38. Practice Exercise  Create a confirm box button just like the previous example.  When the user presses OK or Cancel, display “You pressed OK!” or “You pressed Cancel!” as blinking text in the html webpage. 38

39. Prompt Box function show_prompt() { var name=prompt("Please enter your name","Harry Potter"); if (name!=null && name!="") { document.write("Hello " + name + "! How are you today?"); } 39

40. Extra Credit Solution Discussion 40

41. Announcements: Imp dates  Dec. 2 nd : HTML quiz (Regular class timing)  Dec 7 th : Final exam preview and quiz answer discussion; Project Submission  Dec. 9 th : No in-class meeting  Dec. 16 th : Final Exam 41

42. HTML Quiz preview 42