INT 222 Internet Fundamentals Week 10 Math Object

INT 222 – Internet Fundamentals Week 10: Math Object, Build-in Functions/Methods, Java. Script Validation 1

Outline • Math Object • Build-in Functions/Methods • Java. Script Validation • Assignment #3 released 2

Java. Script Math Object 3

Math functions (common method of the Math object) • Math. max(ident_1, ident_2) – the maximum of n numbers – e. g. alert( Math. max(0. 52, 1) ); // 1 • Math. min(ident_1, ident_2) – the minimum of n numbers – e. g. alert( Math. min(0. 52, 1) ); // 0. 52 • Math. pow(ident_1, ident 2) – ident_1 to the power ident_2 – e. g. alert( Math. pow(2, 8) ); // 256 • Math. sqrt(ident_1) – square root of – e. g. alert( Math. sqrt(9) ); // 3 4

Rounding floating-point • Math. ceil(ident_1) – integer closest to and not less than – e. g. alert( Math. ceil(0. 52) ); // 1 alert( Math. ceil(0. 49) ); // 1 • Math. floor(ident_1) – integer closest to and not greater than – e. g. alert( Math. floor(0. 52) ); // 0 • Math. round(ident_1) – integer closest to – e. g. alert( Math. round(0. 52) ); // 1 alert( Math. round(0. 49) ); // 0 alert( Math. round(0. 5) ); // 1 5

Generating Random Number • Math. random() - pseudorandom number – Return a floating point number between 0 (inclusive) and 1 (exclusive) – e. g. alert( Math. random() ); // 0. 03517110995016992 • Generating number 1 to 10 Math. floor((Math. random()*10)+1); 6

Java. Script Built-in Functions/Methods 7

escape(my. String) function • Used to encode string, same as encode. URI(). • The function takes a non-alphanumeric string as its argument and returns the ASCII value (in hexadecimal form) for each character in the string preceded by a % sign. • If the string includes alphanumeric characters or -+*/_. @, those characters are returned unchanged. • Blank characters are returned as %20 8

Examples • alert( escape("qwertyuiopfghjklzxcvbnm") ); // qwertyuiopfghjklzxcvbnm • alert( escape("QWERTYFGHJKLZXCVBNM") ); // QWERTYFGHJKLZXCVBNM • alert( escape("1234567890 -+*/_. @") ); // 1234567890 -+*/_. @ • alert( escape(" ~`!#$%^&()=|\[]{}; ': ", <>? ") ); // %20%7 E%60%21%23%24%25%5 E%26%28%29%3 D%7 C%5 C%5 B %5 D%7 B%7 D%3 B%27%3 A%22%2 C%3 C%3 E%3 F 9

eval(my. String) function • The eval() function uses one argument: a string. – If the string is an expression, eval() evaluates/executes the expression. – If the string is made up of Java. Script statements, eval() performs the statements. 10

Example var x = 10; var y = 20; var a = eval("x*y") + "n"; var b = eval("2+2") + "n"; var c = eval("x+17") + "n"; var res = a + b + c; alert(res); Result: 200 4 27 11

is. Na. N(my. String) function • The is. Na. N() function is used to determine if an argument is "Na. N" (not a number). • example alert( is. Na. N("123") ); // false alert( is. Na. N(123) ); // false alert( is. Na. N("123 456 789") ); // true alert( is. Na. N("+123") ); // false alert( is. Na. N("123+") ); // true alert( is. Na. N(" 123 ") ); // false 12

parse. Float(my. String) function • The parse. Float() function parses a string and returns a floating point number. • If a character other than a numeral, a sign (+ or -), or an exponent is found, the function returns the value up to that point. • If the first character in the string cannot be converted to a number, the function returns "Na. N". 13

Example alert( parse. Float("15. 25") ); // 15. 25 alert( parse. Float("0. 000345") ); // 0. 000345 alert( parse. Float("0. 00159+E") ); // 0. 00159 alert( parse. Float(" 1234") ); // 1234 alert( parse. Float("x 1234") ); // Na. N alert( parse. Float("1 2 3 4") ); // 1 alert( parse. Float("1234 x 123") ); // 1234 14

parse. Int(my. String) function • The parse. Int() function parses its first argument (a string), and then • tries to return an integer of the specified radix (or base). • If a number in the string is beyond the base, parse. Int() ignores the rest of the characters and returns an integer value up to that point. 15

Examples • base 10 (decimal) examples parse. Int('15', 10) returns 15 parse. Int('15') returns 15 parse. Int(15. 99, 10) returns 15 parse. Int('15*3', 10) returns 15 parse. Int('Hello') returns Na. N • base 16 (hex) examples parse. Int('F', 16) returns 15 parse. Int('FXX 123', 16) returns 15 16

Examples • base 8 (octal) example parse. Int('17', 8) returns 15 parse. Int('18', 8) returns 1 • base 2 (binary) example parse. Int('1111', 2) returns 15 parse. Int('1211', 2) returns 1 17

Note the following problems parse. Int('015', 10) with base 10 returns 15 parse. Int('015', 8) with base 8 returns 13 parse. Int('015', 16) with base 16 returns 21 parse. Int('15') with no base returns 15 - treated as decimal parse. Int('015') with no base returns 15 - treated as octal parse. Int('0 x 15') with no base returns 21 - treated as hex parse. Int(' 15') with a blank returns 15 18

unescape(my. String) function • The unescape() function is the exact opposite of the escape() function. Its argument is a string of ASCII values (in hexadecimal form), each preceded by a % sign. The function returns the character string. var my. String 1 = "%20%7 E%60%21%23%24%25%5 E%26%28%29%3 D%7 C%5 C %5 B%5 D%7 B%7 D%3 B%27%3 A%22"; unescape(my. String 1) returns ~`!@#$%^&()=|[]{}; ': " 19

Number() function • The Number() function returns the actual number value - when possible var 1= new Boolean(true); var 2= new Boolean(false); var 3= new Date(); var 1 = true var 2 = false var 3 = Mon Mar 17 2014 00: 04: 29 GMT-0400 (Eastern Daylight Time) Number(var 1) = 1 Number(var 2) = 0 Number(var 3) = 1395029069226 20

Examples var 4= new String("999"); var 5= new String("999 888"); var 6= "999"; var 7= "abc"; var 4 = 999 var 5 = 999 888 var 6 = 999 var 7 = abc Number(var 4) = 999 Number(var 5) = Na. N Number(var 6) = 999 Number(var 7) = Na. N 21

Parsing String to Number Without using functions var str 1 = "1234"; var num 1 = str 1 * 1; str 1 * 1 alert(num 1 + "n" + typeof num 1); var str 2 = "1234. 5678"; var num 2 = +str 2; +str 2 alert(num 2 + "n" + typeof num 2); 22

to. Fixed() Method • The to. Fixed() method formats a number to a specific number of digits to the right of the decimal. var amount = 165. 25456; amount. to. Fixed() is : 165 amount. to. Fixed(6) is : 165. 254560 amount. to. Fixed(2) is : 165. 25 23

Popup window, get. Element. By. Id and more • A demo: 24

Popup window syntax 1. Generate a popup window – on the fly : message. Window=window. open('', 'window target name', 'window properties'); message. Window. document. write(content); message. Window. document. close(); • Example: – HTML form button: <input type="button" name='example 1' class='nice' value=' Popup and focus ' onclick="get. Started( ); " /> – JS: get. Started() function in javascript. Code. js 25

Popup window syntax 2. Generate a popup window – Static : message. Window=window. open('url', 'window target name', 'window properties'); message. Window. document. close(); 26

Get value of input field (type=text or similar) • Include – Input type: text, number, password, date, email, … – textarea • A values of input fields are strings, even if input type is number. • Example: HTML form and fields <form method='post' action=‘#' name='formexample'> …… <input type="text" name="example 2" id="example 2" size='35' class='inputtext' /> </form> 27

Get value of input field (type=text or similar) Three basic ways: 1. Check field value by Id var text. Length = document. get. Element. By. Id("example 2"). value. length; var actual. Text = document. get. Element. By. Id("example 2"). value; – HTML: <a href="" onclick="return check. Text 2(); ">Check By Id</a><br /> – Java. Script check. Text 2() function in javascript. Code. js 28

Get value of input field (type=text or similar) 2. Check field value by Document reference var text. Length = document. formexample 2. value. length; var actual. Text = document. formexample 2. value; – HTML: <a href="" onclick="return check. Text 1(); ">Check Document reference</a> – Java. Script check. Text 1() function in javascript. Code. js 29

Get value of input field (type=text or similar) 3. Check field value by object location var text. Length = document. forms[0]. elements[2]. value. length; var actual. Text = document. forms[0]. elements[2]. value; – The index is based on • how many forms/elements in a page/form. • The sequence of the forms/elements in a page/form – HTML: <a href="" onclick="return check. Text 3(); ">Check By Ojbect Location</a> – Java. Script check. Text 3() function in javascript. Code. js 30

Common sense logic • Checkbox fields <input type='checkbox' name='example 4' value='1' onclick='common. Sense(); ' />Option 1<br /> <input type='checkbox' name='example 4' value='2' onclick='common. Sense(); ' />Option 2<br /> <input type='checkbox' name='example 4' value='3' onclick='common. Sense(); ' />Option 3<br /> <input type='checkbox' name='example 4' value='4' onclick='common. Sense(); ' />Option 4<br /> <input type='checkbox' name='example 4' value='any' onclick='uncheck. The. Above(); ' />Any of the above 31

Common sense logic • Java. Script Code function common. Sense() { document. formexample 4[document. formexample 4. length - 1]. checked = false; } function uncheck. The. Above() { var number. Of. Checkboxes 2 = document. formexample 4. length - 1; for (var j = 0; j < number. Of. Checkboxes 2 ; j++) { document. formexample 4[j]. checked = false; } } 32

Java. Script Validation 33

JS validation example of type="text" • By name – document. formname. elementname • By element. By. Id – document. get. Element. By. Id("elementid") method • By element. By. Name – document. get. Elements. By. Name("elementname") method – returns a collection • By form and element index – document. forms[index]. elements[index] – Not recommended • With this key word – Using this key word in form element 34

Java. Script validation - textarea example function check. Form() { var textarea. Length = document. example. comments. value. length; var messages="<p>No. of characters in textarea = <mark>" + textarea. Length + "</mark></p>"; if (textarea. Length==0) { messages+= "<p>You did not type any text in the textarea</p>"; show. Errors(messages); return false; // return false - allow for changes - form not submitted } else { messages +="<p>You typed</p><p>" + document. example. comments. value + "</p>"; show. Errors(messages); return false; // return true - form will be submitted } } // End of function … … 35

JS validation - type="checkbox" example • Checkbox logic – Get the number of the checkboxes using length – Loop to check which one was checked – To determine which one is checked - if any document. example. system_type[i]. checked == true; // checked document. example. system_type[i]. checked == false; // not checked 36

JS validation - type="radio" example • radio logic – Get the number of the radio using length – Loop to check which one was checked – To determine which one is checked - if any document. example. system_type[i]. checked == true; // checked document. example. system_type[i]. checked == false; // not checked 37

Java. Script validation - select examples • Select options logic – Get the selected. Index: var x = document. example. what. To. Do. selected. Index; – If selected. Index == -1 • None are selected – If the selected. Index is NOT -1 • document. example. what. To. Do. options[x]. value; – for the value • document. example. what. To. Do. options[x]. text; – for the text 38

Text vs Value • For the <select> <option> elements – dropdown list <select> <option value=“This is a value">This is the text</option> <option value=" This is a value " selected> This is another text </option> </select> • Any other form fields/controls have text attribute? 39

Java. Script validation - select / options - with multiple selections • Select options logic : **multiple="multiple" ** – Get the number of the select options using length document. example. what. To. Do. options. length; – Loop to check which one was selected – To determine which one is selected • if any - check : if (document. example. what. To. Do[i]. selected == true) // selected – document. example. what. To. Do[i]. value – document. example. what. To. Do[i]. text 40

Thank You! 41