JavaScript

1. JavaScript JavaScript with form , control statement

2. JavaScript with Form --- input • Read Input from the page • Input tag <input type=“text” id=“fName”> • Interaction with this element • document.getElementById(“fName”) • Property of input element • Value : Text Box: value is the text input • Put it together var name = document.getElementById(“fName”).value;

3. JavaScript with form – Output • HTML element Properties • innerHTML • Set or return the HTML content of the element • <title> HiHi </title> • The innerHTML of title element is “HiHi” • Put it together • HTML: <p id =“result” > Here is the result </p> • JavaScript: varpE= document.getElementById(“result”); pE.innerHTML = “ The result is 5”

4. JavaScript intrinsic Event • Some common events • onclick • The onclick event occurs when the pointing device button is clicked over an element. This attribute may be used with most elements. • onmouseover • The onmouseover event occurs when the pointing device is moved onto an element. This attribute may be used with most elements. • onmouseout • The onmouseout event occurs when the pointing device is moved away from an element. This attribute may be used with most element • onfocus/onblur • The onfocus event occurs when an element receives focus either by the pointing device or by tabbing navigation. This attribute may be used with the following elements: A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.

5. JavaScript Function • No parameter function fun(){ document.write(“<p> hi </p>”); } • With parameter and return values function caltax(taxrate){ return taxrate*20 ; }

6. Document Object Model • http://www.w3.org/DOM/ • The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. --------will be discussed further • Document Object • Property : body • Method: getElementById(“id”) • Element Object • Property: innerHTML --- the HTML contents • Property: style --- the style attribute of an element • Style Object • Property: backgroundColor, backgroundImage, backgroundPosition • Property: border, margin, padding, zIndex • Input Text Object • Property: value --- set or return the value of the text field.

7. Example - onclick • How it works? • Event ---- Function call to Javascript --- Read input from HTML element– Perform calculation -- write output to HTML element • HTML: • <p id="hello" onclick=“change()" > Click to change the contents</p> • JavaScript function change(){ var content = document.getElementById("hello"); content.innerHTML = "You click"; }

8. Example- onmouseout • Add an onmouseover event to previous example • HTML <p id="click" onclick="change()" onmouseout="back()"> Click to change.</p> • JavaScript function back(){ varpE = document.getElementById("click"); pE.innerHTML="click to change"; }

9. Example - onblur • HTML: <label> Name: <input type="text" id="cName“ onblur="welcome()"> </label> <p id="message"> </p> • JavaScript: function welcome(){ //Get input from the user varinputElement = document.getElementById("cName"); var name = inputElement.value; //Display the welcome message varoutputElement = document.getElementById("message"); outputElement.innerHTML = "Welcome to JavaScript, " + name ; }

10. Example- HTML Try –it Editor • Allow user enter html code and then display the results • HTML <p>ENTER your code </p> <p> <textarea cols="70" rows="20" id="code"> </textarea> </p> <p> <input type="button" value="Click and Display" onclick="display()"> </p> <div id="message"> </div>

11. Example: a simple unit conversion calculator • Convert pound to kilogram: 1lb = 0.453592 kg • HTML <p> <label> Pound to Kilogram <input type="text" id="pound" > </label> <input type="button" value ="Convert" onclick="convert()"> </p> <p id="message"> </p>

12. JavaScript • JavaScript function convert(){ //Get input from the user varinputElement = document.getElementById("pound"); varpoundInput = parseFloat(inputElement.value); //Calculation varkiloValue = 0.453592*poundInput; //Display the result varoutputElement = document.getElementById("message"); outputElement.innerHTML = poundInput+" lb = " + kiloValue+" kg" ; }

13. Control Statement • Javascript reference : https://developer.mozilla.org/en-US/docs/JavaScript/Reference • JavaScript provides three selection structures. • The if statement either performs (selects) an action if a condition is true or skips the action if the condition is false. • Called a single-selection statement because it selects or ignores a single action or group of actions. • The if…else statement performs an action if a condition is true and performs a different action if the condition is false. • Double-selection statement because it selects between two different actions or group of actions. • The switch statement performs one of many different actions, depending on the value of an expression. • Multiple-selection statement because it selects among many different actions or groups of actions.

14. if Selection Statement • The JavaScript interpreter ignores white-space characters • blanks, tabs and newlines used for indentation and vertical spacing • A decision can be made on any expression that evaluates to a value of JavaScript’s boolean type (i.e., any expression that evaluates to true or false). • The indentation convention you choose should be carefully applied throughout your scripts • It is difficult to read scripts that do not use uniform spacing conventions • If …. else Allows you to specify that different actions should be performed when the condition is true and when the condition is false.

15. Example of IF statement if (gender==“Female”) { document.write(“Hello, Ms. “ + name); } else { document.write(“Hello, Mr. “ + name); }

16. Practice – Complete the code • You are asked to calculate student’s test average, if the average score is less than 70, print “Failed”, otherwise print “ Passed” …….. average = (n1+n2+n3)/3; // start your code here

17. Nested if else statement if (condition1) statement1 else if (condition2) statement2 else if (condition3) statement3 ... else statementN

18. Multi-selection Statement • switch multiple-selection statement • Tests a variable or expression separately for each of the values it may assume • Different actions are taken for each value • switch statement • Consists of a series of case labels and an optional default case • When control reaches a switch statement • The script evaluates the controlling expression in the parentheses • Compares this value with the value in each of the case labels • If the comparison evaluates to true, the statements after the case label are executed in order until a break statement is reached

19. Switch statement con.. switch (expression) { case label1: statements1 [break;] case label2: statements2 [break;] ... case labelN: statementsN [break;] default: statements_def [break;] }

20. Switch Example function changeTheme(){ //Get input var theme = document.getElementById("theme").value; varbcolor; switch(theme){ case "warm": bcolor="green"; break; case "cool": bcolor = "blue"; break; case "hot": bcolor = "red"; break; default: bcolor = "white"; } document.body.style.backgroundColor = bcolor; }

21. Switch Practice • Display the insurance premium for different age group. • Use selection box • Select Object • Property: selectedIndex