Embed Size (px)
Citation preview
The if Statement if (condition) { block of code to be executed if the condition is true}
Example<!DOCTYPE html><html><body>
<p>Display "Good day!" if the hour is less than 18:00:</p>
<p id="demo">Good Evening!</p>
<script>if (new Date().getHours() < 18) { document.getElementById("demo").innerHTML = "Good day!";}</script>
</body></html>
If … else statementif (condition) { block of code to be executed if the condition is true} else { block of code to be executed if the condition is false}
Example<!DOCTYPE html><html><body><p>Click the button to display a time-based greeting:</p><button onclick="myFunction()">Try it</button><p id="demo"></p><script>function myFunction() { var hour = new Date().getHours(); var greeting; if (hour < 18) { greeting = "Good day"; } else { greeting = "Good evening"; } document.getElementById("demo").innerHTML = greeting;}</script></body></html>
The JavaScript Switch Statementswitch(expression) { case n: code block break; case n: code block break; default: default code block}
Example<!DOCTYPE html><html><body> <p id="demo"></p>
<script>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;</script>
</body></html>
The For Loopfor (statement 1; statement 2; statement 3) { code block to be executed}
Example<!DOCTYPE html><html><body>
<p id="demo"></p>
<script>var cars = ["BMW", "Volvo", "Saab", "Ford"];var i, len, text;for (i = 0, len = cars.length, text = ""; i < len; i++) { text += cars[i] + "<br>";}
document.getElementById("demo").innerHTML = text;</script>
</body></html>
The While Loopwhile (condition) { code block to be executed}
Example<!DOCTYPE html><html><body>
<p>Click the button to loop through a block of code as long as i is less than 10.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>function myFunction() { var text = ""; var i = 0; while (i < 10) { text += "<br>The number is " + i; i++; } document.getElementById("demo").innerHTML = text;}</script>
</body></html>
The do..while Loopdo { code block to be executed}while (condition);
Example <!DOCTYPE html><html><body>
<p>Click the button to loop through a block of code as long as i is less than 10.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>function myFunction() { var text = "" var i = 0; do { text += "<br>The number is " + i; i++; } while (i < 10) document.getElementById("demo").innerHTML = text;}</script>
</body></html>
isNan() Function <!DOCTYPE html><html><body>
<p>Click the button to check whether a number is an illegal number.</p><button onclick="myFunction()">Try it</button><p id="demo"></p>
<script>function myFunction() { var a = isNaN(123) + "<br>"; var b = isNaN(-1.23) + "<br>"; var c = isNaN(5-2) + "<br>"; var d = isNaN(0) + "<br>"; var e = isNaN("123") + "<br>"; var f = isNaN("Hello") + "<br>"; var g = isNaN("2005/12/12");
var res = a + b + c + d + e + f + g; document.getElementById("demo").innerHTML = res;}</script>
</body></html>
• The isNaN() function returns true if the value is NaN (Not-a-Number), and false if not.
Input Validation Example
<!DOCTYPE html><html><body>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text"><button type="button" onclick="myFunction()">Test Input</button><p id="message"></p>
<script>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; }}</script>
</body></html>
Fine the Value of the elements
<!DOCTYPE html><html><body>
<form id="frm1" action="form_action.asp"> First name: <input type="text" name="fname" value="Donald"><br> Last name: <input type="text" name="lname" value="Duck"><br><br> <input type="submit" value="Submit"></form>
<p>Click "Try it" to display the value of each element in the form.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>function myFunction() { var x = document.getElementById("frm1"); var text = ""; var i; for (i = 0; i < x.length ;i++) { text += x.elements[i].value + "<br>"; } document.getElementById("demo").innerHTML = text;}</script>
</body></html>
Submit a Form <!DOCTYPE html><html><body>
<p>Enter names in the fields, then click "Submit" to submit the form:</p>
<form id="frm1" action="form_action.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br><br> <input type="button" onclick="myFunction()" value="Submit"></form>
<script>function myFunction() { document.getElementById("frm1").submit();}</script>
</body></html>
It doesn’t work at the moment as you need form_action.php
Reset a Form<!DOCTYPE html><html><body>
<p>Enter names in the fields below, then click "Reset" to reset the form.</p>
<form id="frm1"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br><br> <input type="button" onclick="myFunction()" value="Reset"></form>
<script>function myFunction() { document.getElementById("frm1").reset();}</script>
</body></html>
JavaScript Events: onblur<!DOCTYPE html><html><head><script>function myFunction() { var x = document.getElementById("fname"); x.value = x.value.toUpperCase();}</script></head><body>
Enter your name: <input type="text" id="fname" onblur="myFunction()">
<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>
</body></html>
JavaScript Event: onchange<!DOCTYPE html><html><head><script>function myFunction() { var x = document.getElementById("fname"); x.value = x.value.toUpperCase();}</script></head><body>
Enter your name: <input type="text" id="fname" onchange="myFunction()"><p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>
</body></html>
JavaScript Event: onfocus<!DOCTYPE html><html><head><script>function myFunction(x) { x.style.background = "yellow";}</script></head><body>
Enter your name: <input type="text" onfocus="myFunction(this)">
<p>When the input field gets focus, a function is triggered which changes the background-color.</p>
</body></html>
JavaScript Event: onsubmit<!DOCTYPE html><html><head><script>function confirmInput() { fname = document.forms[0].fname.value; alert("Hello " + fname + "! You will now be redirected to www.w3Schools.com");}</script></head>
<body><form onsubmit="confirmInput()" action="http://www.w3schools.com/">Enter your name: <input id="fname" type="text" size="20"><input type="submit"></form></body>
</html>
JavaScript Event: onkeydown<!DOCTYPE html><html><head><script>function myFunction() { alert("You pressed a key inside the input field");}</script></head><body>
<p>A function is triggered when the user is pressing a key in the input field.</p>
<input type="text" onkeydown="myFunction()">
</body></html>
What is moreonblur - When a user leaves an input fieldonchange - When a user changes the content of an input fieldonchange - When a user selects a dropdown valueonfocus - When an input field gets focusonselect - When input text is selectedonsubmit - When a user clicks the submit buttononreset - When a user clicks the reset buttononkeydown - When a user is pressing/holding down a keyonkeypress - When a user is pressing/holding down a keyonkeyup - When the user releases a keyonkeyup - When the user releases a keyonkeydown vs onkeyup - Both
Mouse Event<!DOCTYPE html><html><body>
<h1 onmouseover="style.color='red'" onmouseout="style.color='black'">Mouse over this text</h1>
</body></html>
Mouse events<!DOCTYPE html><html><head><script>function myFunction(elmnt, clr) { elmnt.style.color = clr;}</script></head><body>
<p onmousedown="myFunction(this,'red')" onmouseup="myFunction(this,'green')">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.</p>
</body></html>
What is more!• onmouseover/onmouseout - When the mouse
passes over an element• onmousedown/onmouseup - When pressing/r
eleasing a mouse button• onmousedown - When mouse is clicked: Alert
which element• onmousedown - When mouse is clicked: Alert
which button• onmousemove/onmouseout - When moving th
e mouse pointer over/out of an image• onmouseover/onmouseout - When moving the
mouse over/out of an image• onmouseover an image map
Practical• Please see practical 7 and follow the instruction
Resources• w3schools.com
