int222 internet fundamentals n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
INT222 – Internet Fundamentals PowerPoint Presentation
Download Presentation
INT222 – Internet Fundamentals

Loading in 2 Seconds...

play fullscreen
1 / 41

INT222 – Internet Fundamentals - PowerPoint PPT Presentation


  • 77 Views
  • Uploaded on

INT222 – Internet Fundamentals. Week 10: Math Object, Build-in Functions/Methods, JavaScript Validation . Outline. Math Object Build-in Functions/Methods JavaScript Validation Assignment #3 released. JavaScript Math Object. Math functions ( common method of the Math object).

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'INT222 – Internet Fundamentals' - rusti


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
int222 internet fundamentals

INT222 – Internet Fundamentals

Week 10: Math Object, Build-in Functions/Methods, JavaScript Validation

outline
Outline
  • Math Object
  • Build-in Functions/Methods
  • JavaScript Validation
  • Assignment #3 released
math functions common method of the math object
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, ident2)
    • 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
rounding floating point
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

generating random number
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);

escape mystring function
escape(myString) function
  • Used to encode string, same as encodeURI() .
  • 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
e xamples
Examples
  • alert( escape("qwertyuiopfghjklzxcvbnm") );// qwertyuiopfghjklzxcvbnm
  • alert( escape("QWERTYFGHJKLZXCVBNM") );// QWERTYFGHJKLZXCVBNM
  • alert( escape("1234567890-+*/_.@") );// 1234567890-+*/_.@
  • alert( escape(" ~`!#$%^&()=\|\\[]{};':\",<>?") );

// %20%7E%60%21%23%24%25%5E%26%28%29%3D%7C%5C%5B%5D%7B%7D%3B%27%3A%22%2C%3C%3E%3F

eval mystring function
eval(myString) 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 JavaScript statements, eval() performs the statements.
example
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

isnan mystring function
isNaN(myString) function
  • The isNaN() function is used to determine if an argument is "NaN" (not a number).
  • example
  • alert( isNaN("123") ); // false
  • alert( isNaN(123) ); // false
  • alert( isNaN("123 456 789") ); // true
  • alert( isNaN("+123") ); // false
  • alert( isNaN("123+") ); // true
  • alert( isNaN(" 123 ") ); // false
parsefloat mystring function
parseFloat(myString) function
  • The parseFloat() 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 "NaN".
example1
Example
  • alert( parseFloat("15.25") ); // 15.25
  • alert( parseFloat("0.000345") ); // 0.000345
  • alert( parseFloat("0.00159+E") ); // 0.00159
  • alert( parseFloat(" 1234") ); // 1234
  • alert( parseFloat("x 1234") ); // NaN
  • alert( parseFloat("1 2 3 4") ); // 1
  • alert( parseFloat("1234 x 123") ); // 1234
parseint mystring function
parseInt(myString) function
  • The parseInt() 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, parseInt() ignores the rest of the characters and returns an integer value up to that point.
examples
Examples
  • base 10 (decimal) examples

parseInt('15', 10) returns 15parseInt('15') returns 15parseInt(15.99, 10) returns 15parseInt('15*3', 10) returns 15parseInt('Hello') returns NaN

  • base 16 (hex) examples

parseInt('F', 16) returns 15parseInt('FXX123', 16) returns 15

examples1
Examples
  • base 8 (octal) example

parseInt('17', 8) returns 15parseInt('18', 8) returns 1

  • base 2 (binary) example

parseInt('1111', 2) returns 15parseInt('1211', 2) returns 1

note the following problems
Note the following problems

parseInt('015',10) with base 10 returns 15

parseInt('015',8) with base 8 returns 13

parseInt('015',16) with base 16 returns 21

parseInt('15') with no base returns 15

- treated as decimal

parseInt('015') with no base returns 15

- treated as octal

parseInt('0x15') with no base returns 21

- treated as hex

parseInt(' 15') with a blank returns 15

unescape mystring function
unescape(myString) 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 myString1 = "%20%7E%60%21%23%24%25%5E%26%28%29%3D%7C%5C%5B%5D%7B%7D%3B%27%3A%22";

unescape(myString1) returns  ~`!@#$%^&()=|\[]{};':"

number function
Number() function
  • The Number() function returns the actual number value - when possible

var1 = truevar2 = false

var3 = Mon Mar 17 2014 00:04:29 GMT-0400 (Eastern Daylight Time)

Number(var1) = 1Number(var2) = 0

Number(var3) = 1395029069226

  • var var1= new Boolean(true);var var2= new Boolean(false);
  • var var3= new Date();
examples2
Examples
  • varvar4= new String("999");var var5= new String("999 888");var var6= "999";var var7= "abc";

var4 = 999var5 = 999 888var6 = 999var7 = abc

Number(var4) = 999Number(var5) = NaNNumber(var6) = 999Number(var7) = NaN

parsing string to number without using functions
Parsing String to Number Without using functions

varstr1 = "1234";

varnum1 = str1 * 1;

alert(num1 + "\n" + typeof num1);

varstr2 = "1234.5678";

varnum2 = +str2;

alert(num2 + "\n" + typeof num2);

tofixed method
toFixed()Method
  • The toFixed() method formats a number to a specific number of digits to the right of the decimal.

amount.toFixed() is : 165amount.toFixed(6) is : 165.254560amount.toFixed(2) is : 165.25

  • var amount = 165.25456;
popup window syntax
Popup window syntax
  • Generate a popup window – on the fly :
  • Example:
    • HTML form button:
    • JS: getStarted() function in javascriptCode.js

messageWindow=window.open('','window target name',

'window properties');

messageWindow.document.write(content);

messageWindow.document.close();

<input type="button" name='example1' class='nice'

value=' Popup and focus ' onclick="getStarted( );" />

popup window syntax1
Popup window syntax
  • Generate a popup window – Static :

messageWindow=window.open('url','window target name',

'window properties');

messageWindow.document.close();

get value of input field type text or similar
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="example2" id="example2" size='35' class='inputtext' />

</form>

get value of input field type text or similar1
Get value of input field(type=text or similar)

Three basic ways:

  • Check field value by Id
    • HTML:

<a href="" onclick="return checkText2();">Check By Id</a><br />

    • JavaScript

checkText2() function in javascriptCode.js

vartextLength = document.getElementById("example2").value.length;

varactualText = document.getElementById("example2").value;

get value of input field type text or similar2
Get value of input field(type=text or similar)
  • Check field value by Document reference
    • HTML:

<a href="" onclick="return checkText1();">Check Document reference</a>

    • JavaScript

checkText1() function in javascriptCode.js

vartextLength = document.formexample.example2.value.length;

varactualText = document.formexample.example2.value;

get value of input field type text or similar3
Get value of input field(type=text or similar)
  • Check field value by object location
    • 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 checkText3();">Check By Ojbect Location</a>

    • JavaScript

checkText3() function in javascriptCode.js

vartextLength = document.forms[0].elements[2].value.length;

varactualText = document.forms[0].elements[2].value;

common sense logic
Common sense logic
  • Checkbox fields

<input type='checkbox' name='example4' value='1'

onclick='commonSense();' />Option 1<br />

<input type='checkbox' name='example4' value='2'

onclick='commonSense();' />Option 2<br />

<input type='checkbox' name='example4' value='3'

onclick='commonSense();' />Option 3<br />

<input type='checkbox' name='example4' value='4'

onclick='commonSense();' />Option 4<br />

<input type='checkbox' name='example4' value='any'

onclick='uncheckTheAbove();' />Any of the above

common sense logic1
Common sense logic
  • JavaScript Code

function commonSense() {

document.formexample.example4[document.

formexample.example4.length - 1].checked = false;

}

function uncheckTheAbove() {

varnumberOfCheckboxes2 =

document.formexample.example4.length - 1;

for (var j = 0; j < numberOfCheckboxes2 ; j++) {

document.formexample.example4[j].checked = false;

}

}

js validation example of type text
JS validation example of type="text"
  • By name
    • document.formname.elementname
  • By elementById
    • document.getElementById("elementid") method
  • By elementByName
    • document.getElementsByName("elementname") method
    • returns a collection
  • By form and element index
    • document.forms[index].elements[index]
    • Not recommended
  • With this key word
    • Using this key wordin form element
javascript validation textarea example
JavaScript validation - textarea example

function checkForm() {

vartextareaLength = document.example.comments.value.length;

var messages="<p>No. of characters in textarea = <mark>" + textareaLength + "</mark></p>";

if (textareaLength==0) {

messages+= "<p>You did not type any text in the textarea</p>";

showErrors(messages);

return false; // return false - allow for changes - form not submitted

}

else {

messages +="<p>You typed</p><p>" + document.example.comments.value + "</p>";

showErrors(messages);

return false; // return true - form will be submitted

}

} // End of function

… …

js validation type checkbox example
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

js validation type radio example
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

javascript validation select examples
JavaScript validation - select examples
  • Select options logic
    • Get the selectedIndex:

var x = document.example.whatToDo.selectedIndex;

    • If selectedIndex == -1
      • None are selected
    • If the selectedIndex is NOT -1
      • document.example.whatToDo.options[x].value;
        • for the value
      • document.example.whatToDo.options[x].text;
        • for the text
text vs value
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?
javascript validation select options with multiple selections
JavaScript validation - select / options - with multiple selections
  • Select options logic : **multiple="multiple" **
    • Get the number of the select options using length

document.example.whatToDo.options.length;

    • Loop to check which one was selected
    • To determine which one is selected
      • if any - check :

if (document.example.whatToDo[i].selected == true) // selected

    • document.example.whatToDo[i].value
    • document.example.whatToDo[i].text