1. JavaScript – part II

2. The if Statement if (condition) { block of code to be executed if the condition is true }

3. Example Display "Good day!" if the hour is less than 18:00: Good Evening! if (new Date().getHours() < 18) { document.getElementById("demo").innerHTML = "Good day!"; }

4. If … else statement if (condition) { block of code to be executed if the condition is true } else { block of code to be executed if the condition is false }

5. Example Click the button to display a time-based greeting: Try it function myFunction() { var hour = new Date().getHours(); var greeting; if (hour < 18) { greeting = "Good day"; } else { greeting = "Good evening"; } document.getElementById("demo").innerHTML = greeting; }

6. The JavaScript Switch Statement switch(expression) { case n: code block break; case n: code block break; default: default code block }

7. Example var day; switch (new Date().getDay()) { case 0: day = "Sunday"; break; case 1: day = "Monday"; break; case 2: day = "Tuesday"; break; case 3: day = "Wednesday"; break; case 4: day = "Thursday"; break; case 5: day = "Friday"; break; case 6: day = "Saturday"; break; } document.getElementById("demo").innerHTML = "Today is " + day;

8. The For Loop for (statement 1; statement 2; statement 3) { code block to be executed }

9. Example var cars = ["BMW", "Volvo", "Saab", "Ford"]; var i, len, text; for (i = 0, len = cars.length, text = ""; i < len; i++) { text += cars[i] + " "; } document.getElementById("demo").innerHTML = text;

10. The While Loop while (condition) { code block to be executed }

11. Example Click the button to loop through a block of code as long as i is less than 10. Try it function myFunction() { var text = ""; var i = 0; while (i < 10) { text += " The number is " + i; i++; } document.getElementById("demo").innerHTML = text; }

12. The do..while Loop do { code block to be executed } while (condition);

13. Example Click the button to loop through a block of code as long as i is less than 10. Try it function myFunction() { var text = "" var i = 0; do { text += " The number is " + i; i++; } while (i < 10) document.getElementById("demo").innerHTML = text; }

14. isNan() Function Click the button to check whether a number is an illegal number. Try it function myFunction() { var a = isNaN(123) + " "; var b = isNaN(-1.23) + " "; var c = isNaN(5-2) + " "; var d = isNaN(0) + " "; var e = isNaN("123") + " "; var f = isNaN("Hello") + " "; var g = isNaN("2005/12/12"); var res = a + b + c + d + e + f + g; document.getElementById("demo").innerHTML = res; } The isNaN() function returns true if the value is NaN (Not-a-Number), and false if not.

15. Input Validation Example Please input a number between 5 and 10: Test Input function myFunction() { var message, x; message = document.getElementById("message"); message.innerHTML = ""; x = document.getElementById("demo").value; try { if(x == "") throw "empty"; if(isNaN(x)) throw "not a number"; x = Number(x); if(x < 5) throw "too low"; if(x > 10) throw "too high"; } catch(err) { message.innerHTML = "Input is " + err; }

16. Fine the Value of the elements First name: Last name: Click "Try it" to display the value of each element in the form. Try it function myFunction() { var x = document.getElementById("frm1"); var text = ""; var i; for (i = 0; i < x.length ;i++) { text += x.elements[i].value + " "; } document.getElementById("demo").innerHTML = text; }

17. Submit a Form Enter names in the fields, then click "Submit" to submit the form: First name: Last name: function myFunction() { document.getElementById("frm1").submit(); } It doesn’t work at the moment as you need form_action.php

18. Reset a Form Enter names in the fields below, then click "Reset" to reset the form. First name: Last name: function myFunction() { document.getElementById("frm1").reset(); }

19. JavaScript Events: onblur function myFunction() { var x = document.getElementById("fname"); x.value = x.value.toUpperCase(); } Enter your name: When you leave the input field, a function is triggered which transforms the input text to upper case.

20. JavaScript Event: onchange function myFunction() { var x = document.getElementById("fname"); x.value = x.value.toUpperCase(); } Enter your name: When you leave the input field, a function is triggered which transforms the input text to upper case.

21. JavaScript Event: onfocus function myFunction(x) { x.style.background = "yellow"; } Enter your name: When the input field gets focus, a function is triggered which changes the background-color.

22. JavaScript Event: onsubmit function confirmInput() { fname = document.forms[0].fname.value; alert("Hello " + fname + "! You will now be redirected to www.w3Schools.com"); } Enter your name:

23. JavaScript Event: onkeydown function myFunction() { alert("You pressed a key inside the input field"); } A function is triggered when the user is pressing a key in the input field.

24. What is more onblur - When a user leaves an input field onchange - When a user changes the content of an input field onchange - When a user selects a dropdown value onfocus - When an input field gets focus onselect - When input text is selected onsubmit - When a user clicks the submit button onreset - When a user clicks the reset button onkeydown - When a user is pressing/holding down a key onkeypress - When a user is pressing/holding down a key onkeyup - When the user releases a key onkeydown vs onkeyup - Both

25. Mouse Event Mouse over this text

26. Mouse events function myFunction(elmnt, clr) { elmnt.style.color = clr; } Click the text to change the color. A function, with parameters, is triggered when the mouse button is pressed down, and again, with other parameters, when the mouse button is released.

27. What is more! onmouseover/onmouseout - When the mouse passes over an element onmouseover/onmouseout - When the mouse passes over an element onmousedown/onmouseup - When pressing/releasing a mouse button onmousedown/onmouseup - When pressing/releasing a mouse button onmousedown - When mouse is clicked: Alert which element onmousedown - When mouse is clicked: Alert which button onmousemove/onmouseout - When moving the mouse pointer over/out of an image onmousemove/onmouseout - When moving the mouse pointer over/out of an image onmouseover/onmouseout - When moving the mouse over/out of an image onmouseover/onmouseout - When moving the mouse over/out of an image onmouseover an image map

28. Practical Please see practical 7 and follow the instruction

29. Resources w3schools.com