Function with arguments and return value Ex:-

function square(num){ return num*num; }

document.write('The Square root of 5 is : '+square(5)+'<br>');

document.write('The Square root of 5 is : '+square(square(5))+'<br>'); </script>

Math built-in function: - in JavaScript we have mainly seven kinds of math object which are

pre-defined and can be called respective key-words. Which are included in JavaScript library

Ex: -math.html

document.write('<h2>'+txt+'</h2>') }

r("<u>Javascript Predefined Math Constant Object </u>"); r('Eulers Constant : '+Math.E);

r('Pi Value : '+Math.PI);

r('SQRT OF 2 : '+Math.SQRT2); r('Natural Log 2: '+Math.LN2); r('Natural Log 10 : '+Math.LN10);

r('Log base 2 of Eulers : '+Math.LOG2E); r('Log base 10 of Eulers : '+Math.LOG10E);

r("<u>Javascript User - defined Math Object </u>"); r('Max Value : '+Math.max(10,20,30));

r('Min Value : '+Math.min(10,20,30)); r('Sqrt Value : '+Math.sqrt(25)); r('2 pow 4 : '+Math.pow(2,4)); r('Absolute Value : '+Math.abs(-9)); r('Ceil Value : '+Math.ceil(2.11111)); r('floor Value : '+Math.floor(2.9999)); r('round Value : '+Math.round(2.5111111)); r('Random Number : '+Math.random());

r('Number Between 1 to 1000 : '+Math.round(Math.random()*1000)); </script>

String built-in function: - Ex: - stringbuilt.html

document.write(txt+'<br>'); }

var str = "lamp Institute"; r('String Value = '+str);

r("Length of the String = "+str.length); r("Color of String = "+str.fontcolor('green')); r('Upper Case = '+str.toUpperCase()); r('Lower Case = '+str.toLowerCase()); r('Big Font = '+str.big());

r('Bold Font = '+str.bold()); r('Small Font = '+str.small()); r('Italic Font = '+str.italics()); r('Superscript = '+str.sup()); r('sub script = '+str.sub());

r('<hr><h2><u>Slice Function([begin, stop]) </u></h2>'); r('Slice(4) = '+str.slice(4));

r('Slice(4,8) = '+str.slice(4,8)); r('Slice(-9) = '+str.slice(-9)); r('Slice(-9,8) = '+str.slice(-9,8)); r('Slice(-9,-3) = '+str.slice(-9,-3));

r('<hr><h2><u>Substring Function([From, to]) </u></h2>'); r('substring(4) = '+str.substring(4));

r('substring(4,8) = '+str.substring(4,8)); r('substring(4,2) = '+str.substring(4,2)); //r('substring(-9) = '+str.substring(-9));

r('substr(4) = '+str.substr(4)); r('substr(5,8) = '+str.substr(5,8)); r('substr(-9) = '+str.substr(-9)); r('substr(-9,2) = '+str.substr(-9,1)); r('CharAt(0) = '+str.charAt(1));

r('charCodeAt(1) = '+str.charCodeAt(1)); //ascill Value of Index mob = 'Z123456789'; r('charCodeAt = '+mob.charCodeAt(0)); r('Indexof = '+str.indexOf('T'));//-1 r('lastIndexof = '+str.lastIndexOf('t')); r('indexOf = '+str.indexOf('t',9)); r('Search = '+str.search('z'));//-1 r('Match = '+str.match('z'));//null </script> Mobile function: - Ex: -mob.html <script> function r(txt){ document.write(txt+'<br>'); } mob = "8855644045";

r(isValidMobile(mob)); function isValidMobile(val){

if(val.length != 10){

return "Please Enter 10-Digit Mobile Number"; }

f = val.charAt(0);

if(f == '7' || f == '8' || f == '9'){ } else {

return 'Please Check the First Digit of Number & try Again'; } return isNumeric(val); } function isNumeric(val){ for(i=0;i<val.length;i++){ ascii = val.charCodeAt(i); if(ascii < 48 || ascii >57){

return 'Only Numbers Allowed Please Check again'; }

}

return 'Valid Mobile Number'; }

Date function: - date function can be defined with variable is equal to new date. This function

is pre-defined in JavaScript which will explain the system timing (or) running the domain it will capture the running domain

Get time (): -this is unique time constant which is created find generate number of milliseconds

right from night jan 1 1970

Ex: -date.html

document.write(txt+'<br>'); }

var d = new Date(); r('The value in d is : '+d);

r('Unix Time Constant that is Midnight Jan 01,1970 (no of millseconds : ) '+d.getTime()); r('Date : '+d.getDate());

r('Day : '+d.getDay());

r('Month : '+(d.getMonth()+1));// 0 -11 r('Year : '+d.getYear());//works only in ie... r('FullYear : '+d.getFullYear()); r('Hours : '+d.getHours()); r('Minutes : '+d.getMinutes()); r('Seconds : '+d.getSeconds()); r('Time is : '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds()); </script>

DOM : dom is contain this layers

IMAGES LOCATIONS

SCREEN---> Get Element ById DOCUMENTS---> GetElementByTagName NAVIGATOR--- > GetElementByName EMBED Ex: -dom.html <script> function dochange(){

document.testForm.fname.value = alert("Please Enter"); document.testForm.fname.value = 'Enter Name';

document.testForm.lname.style.border="2px solid red"; document.testForm.lname.style.width="200px";

} </script> <body>

First Name : <input type='text' name='fname' /><br> Last Name : <input type='text' name='lname'/><br>

</body>

Get Element ById:- this particular function will match the id of the element and that particular

matching function will get executed

Ex: -getElementById.html <script> function dochange(){ var x = document.getElementById('test').value; document.getElementById('test').value = x.toUpperCase(); document.getElementById('test').style.color = 'red'; } </script> <body> <form name='testForm'>

First Name : <input type='text' name='fname' id='test' onblur="dochange();"/><br> First Name : <input type='text' name='lname' id='fldtest' onkeyup="dochange();"/> </form>

</body>

GetElementByTagName:- this particular function will match tag name and excute the function

which we are passing as a tag name

Ex: -getElementsByTagName.html

function dochange(){

for(i=0;i<a.length;i++){

a[i].style.width = '400px'; a[i].style.background = '#ddd'; a[i].style.border = '4px dotted green'; }

}

</script>

<body onmouseover='dochange();'> <h1>Welcome to My Web Page</h1> <p>This is my First Page</p>

<p>This is my First Page</p> <p>This is my First Page</p> <p>This is my First Page</p> <div>What is Social Hub</div> </body>

GetElementByName:- this particular function will match element name and that part of the

function will get excutes

Ex: -getElementsByName.html <script> function dochange(){ var a = document.getElementsByName('x'); for(i=0;i<a.length;i++){ a[i].style.width = '400px';

a[i].style.background = '#ddd'; a[i].style.border = '4px dotted green'; }

}

</script>

<body onmouseover='dochange();'> <h1>Welcome to My Web Page</h1> <p>This is my First Page</p>

<p>This is my First Page</p> <p>This is my First Page</p> <p>This is my First Page</p> <div>What is Social Hub</div> </body>

NOTE1:- as ids are unique we have singular matching so we can getElementById as singular

NOTE2:-GetElementByTagName & ByName works the array format and these are plural

Events: - whenever an event is trigger and then that particular matching function will excuted innerHTML:-innerHTML is used to push the dynamic values on to the HTML page

set Interval: - setInterval is pre-defined key-word in JavaScript which takes 2 arguments the

first argument can be express (or) function the second argument can be no of milliseconds

Alert: - alert gives you a single button option until it is click It will allowed all you navigate on

the server

Ex: -alert.html

alert("Please Agree with Our Terms & condition"); </script>

<body> Welcome </body>

Confirm: -confirm is used two options until something is being click. It won’t allowed to

navigate the server and if it is click based on the values it will moved to the respect pages

Ex: -confirm.html

var x = confirm("Are You legally 18+ then enter to site"); if(x == true){

document.write("Welcome to my Terrorist Site"); } else {

document.write("Thank You for leaving Please <a href='http://www.google.com'>Click Here</a>");

}

</script> <body> </body>

Eval: -eval is pre-defined function JavaScript which will evaluate the given function in between

the JavaScript (function)

parseINT: -this is pre-defined function in JavaScript which will convert the floating value into

integer value

Ex: - innerHTML & set Interval time.html <script> function r(txt){ document.write(txt+'<br>'); } function currTime(){ var d = new Date();

var time = timeFormat(d.getHours())+':'+timeFormat(d.getMinutes()) +':'+timeFormat(d.getSeconds());

return 'Present Time : '+time; }

function timeFormat(val){

return ((val<10)?'0':'')+val; }

function writeTime(id){

return document.getElementById(id).innerHTML = currTime(); }

</script> <body>

r(currTime());

</script> </div> </body> Prompt: - Ex: - prompt.html <script>

var x = prompt("Please Enter User Name"); document.write("Welcome ! "+x+'<br>'); </script> <body> <h1>Welcome to my webpage</h1> </body> Calculating: - parseINT Ex: - calculating.html <script> function sumcal(){

if(confirm("Are You Shore")){

document.testForm.result.value = parseInt(eval(document.testForm.count.value));

} else {

alert("Please Try Again"); }

</script> <body>

<Strong>Please Enter the Expression</strong><br><br>

Calculate the Given Value : <input type='text' name='count' value='2+2'/><br><br> <input type='button' value='Calculate !' onclick="javascript:sumcal();"/><br><br> <big><b>Result</b></big> : <input type='text' name='result' value=''/><br> </form> </body> Limit text: - Ex: -limittext.html <script> function limitText(){ var s = document.testForm.Msg.value; len = s.length; c = 10 - len; if(len>10){ m = s.substr(0,10); document.testForm.Msg.value = m; c = 0; } document.testForm.count.value = c;

} </script>

Gallery create: - Ex: - gallery.html

<body>

<div class='header'>Gallery Thumb View</div> <div class='thumb'> <img src='1.jpg' onclick="alterImage('b',this.src);"/> <img src='2.jpg' onmouseover="alterImage('b',this.src);"/> <img src='3.jpg' ondblclick="alterImage('b',this.src);"/> <img src='4.jpg' onclick="alterImage('b',this.src);"/> </div>

<input type='button' class='buto' value='Zoom In' onclick="zoom('b','+');"/> <input type='button' class='buto' value='Normal' onclick="zoom('b','0');"/> <input type='button' class='buto' value='Zoom Out' onclick="zoom('b','-');"/> </div> <img src='1.jpg' id='b'/> </div> </body> </html> Gallery.css: - body{ background:lightblue; margin:0px; } .header{ background:darkblue; height:80px; color:#fff; text-align:center; font-size:18pt; font-family:courier new;

letter-spacing:5px; font-weight:bold; line-height:70px; } .thumb{ text-align:center;margin:20px 0px 10px 0px; } .thumb img{ width:120px; height:100px; cursor:pointer; } .big{ text-align:center; } .big img{ width:400px; height:300px; } .butob{ margin-bottom:10px; }

.buto{ font-size:18pt; padding:8px 20px; background:#000; color:#fff; } .buto:hover{ background:#ddd; color:#000; cursor:pointer; } gallery.js: - function alterImage(id,source){ document.getElementById(id).src = source; } function zoom(id,type){ var min_W = 120; var min_H = 100; var max_W = 1000; var max_H = 900; var n_W = 400; var n_H = 300;

img = document.getElementById(id); var curr_W = parseInt(img.width); var curr_H = parseInt(img.height); switch (type){ case '+': new_W = curr_W+(curr_W*.1); new_H = curr_H+(curr_H*.1); break; case '-': new_W = curr_W-(curr_W*.1); new_H = curr_H-(curr_H*.1); break; case '0': new_W = n_W; new_H = n_H; break; }

if((new_W<min_W || new_H<min_H) || (new_W>max_W || new_H>max_H)){ } else {

img.style.width = new_W; img.style.height = new_H; }

}

DHTML: -

innerHTML.html <script> function showText(v){ document.getElementById('Msg').innerHTML = v; } </script> <body> <form name='testForm'/>

First Name : <input type='text' name='fname' value=''

onkeyup="javascript:showText(this.value);"/> <span id='Msg'></span> </form> </body> innerHTML2.html <script> function showText(v){ len = v.length; //alert(len); if(len<6){

document.getElementById('Msg').style.color = "red"; } else{ document.getElementById('Msg').innerHTML = "" } } </script> <body> <form name='testForm'/>

First Name : <input type='text' name='fname' value=''

onkeyup="javascript:showText(this.value);"/> <span id='Msg'></span> </form> </body> search.html <script> function clearText(){ if(document.testForm.Query.value == 'Search'){ document.testForm.Query.value = ''; } } function showText(){ if(document.testForm.Query.value == ''){

document.testForm.Query.value = 'Search'; } } </script> <body> <form name='testForm'/>

Enter Search : <input type='text' name='Query' value='Search' onfocus="clearText();" onblur="showText();"/> </form> </body> search2.html <body> <form name='testForm'/>

Enter Search : <input type='text' name='Query' value='Search' onfocus="javascript:if(this.value == 'Search') this.value = '';" onblur="javascript:if(this.value == '') this.value = 'Search';"/> </form> </body> checkbox.html <script> function validate(){ count = 0; for(i=0;i<4;i++){ if(document.testForm.course[i].checked){

count++; }

}

if(count<2){

alert("Please Check Atleast 2 Courses"); }

}

</script> <body>

<u><big><b>Select Atleast 2 - Languages for this Job</b></big></u><br><br> <input type='checkbox' name='course' value='c' /> C - Language <br>

<input type='checkbox' name='course' value='m'/> MySQL <br><br>

<input type='button' name='Check' value="Validate !" onclick="validate();"/> </form> </body> checkbox1.html <script> function validate(){ count = 0; gend = 0;

len = document.testForm.elements.length; //alert(len);

for(i=0;i<len;i++){

elt = document.testForm.elements[i];

if(elt.type == 'checkbox' && elt.name == 'course' && elt.checked){ count++;

}

if(elt.type == 'radio' && elt.name == 'gender' && elt.checked){ gend++;

} }

if(count<3){

alert("Please Select At least 3 Courses"); } if(gend == 0){ alert("Select Gender"); } } </script> <body> <form name='testForm'/>

<input type='checkbox' name='course' value='c' /> C - Language <br> <input type='checkbox' name='course' value='p'/> PHP <br>

<input type='checkbox' name='course' value='j'/> JAVA <br> <input type='checkbox' name='course' value='my'/> MySQL <br>

<input type='radio' name='gender' value='m'/> Male <input type='radio' name='gender' value='f'/> Female<br><br>

<input type='button' name='Check' value="Validate !" onclick="validate();"/> </form> </body> passwordstrength.html <script> function findStrength(v){ len = v.length; if(len>12) len = 12; document.getElementById('pic').src = "pic/"+len+".png"; if(len<6){

document.getElementById('Msg').innerHTML = "Weak Password"; document.getElementById('Msg').style.color = "red";

}

else if(len>=6 && len<9){

document.getElementById('Msg').innerHTML = "Normal Password"; document.getElementById('Msg').style.color = "green";

else if(len>=9 && len<=12){

document.getElementById('Msg').innerHTML = "Strong Password"; document.getElementById('Msg').style.color = "blue"; } } </script> <body> <form name='testForm'/>

Password : <input type='password' name='pwd' value=''

onkeyup="javascript:findStrength(this.value);"/> <img src="pic/0.png" id='pic' border='1'/> <span id='Msg'></span> </form> </body> isd.html <script> function validIsd(){ i = document.testForm.country.selectedIndex; v = document.testForm.country.options[i].value; document.testForm.ISD.value = v; } </script> <body> <form name='testForm'/>

<select name='country' onchange="validIsd();"> <option value=''>Please Select</option>

<option value='91'>INDIA</option> <option value='001'>USA</option>

<option value='004'> United Kingdom</option> <option value='0458'> Japan</option>

</select> -

<select name='country' onchange="document.testForm.ISD.value = this.value"> <option value=''>Please Select</option>

<option value='91'>INDIA</option> <option value='001'>USA</option>

<option value='004'> United Kingdom</option> <option value='0458'> Japan</option>

</select> -

</form> </body> selectall.html <script> function selectAll(){ len = document.testForm.elements.length; for(i=0;i<len;i++){ elt = document.testForm.elements[i];

if(elt.type == 'checkbox' && elt.name == 'course'){ elt.checked = true; } } } function selectNone(){ len = document.testForm.elements.length; for(i=0;i<len;i++){ elt = document.testForm.elements[i];

if(elt.type == 'checkbox' && elt.name == 'course'){ elt.checked = false;

} }

}

</script>

<a href="javascript:selectAll();">Select All</a> || <a href="javascript:selectNone();"/>Select None</a><br><br>

<input type='checkbox' name='course' value='c'>C - Language<br> <input type='checkbox' name='course' value='p'>PHP<br>

<input type='checkbox' name='course' value='j'>JAVA<br> <input type='checkbox' name='course' value='m'>MySQL<br> </form>

reset.html

function clearForm(){

c = confirm("Are You Shore"); return c;

}

</script>

Password : <input type='password' name='pwd' value=''/><br><br>

toggle button.html <script> function toggle(){ c = document.testForm.TnC.checked; document.testForm.submit.disabled = !c; } </script> <form name='testForm'>

<input type='checkbox' name='TnC' value='' onclick="javascript:toggle();"/>Terms & Conditions <br><br>

<input type='checkbox' name='TnC' value=''

onclick="javascript:document.testForm1.submit.disabled = !this.checked;"/>Terms & Conditions <br><br>

pics.html

controlling.html <script> function r(txt){ document.write('<hr>'); } name = 'Rajesh'; n_pat = /^[a-z]{5,8}$/; if(!n_pat.test(name)){

document.write("Invalid Name Please Try Again"); }

r();

cname = "R ajesh"; cn_pat = /^[a-z]{5,8}$/i; if(!cn_pat.test(cname)){

document.write("Invalid Name Please Try Again"); }

r();

fname = 'B Pr*aveen Kumar'; f_pat = /^[a-z ]{6,}$/i; if(!f_pat.test(fname)){

document.write("Invalid Name Please Try Again"); }

r();

username = 'maddy11*'; u_pat = /^[a-z0-9 ,.]{6,}$/i; if(!u_pat.test(username)){

document.write("Invalid Name Please Try Again"); }

r();

mob = '785664309';

m_pat = /^[7-9][0-9]{9}$/; if(!m_pat.test(mob)){

document.write('Invalid Mobile please Try Again'); }

r();

img = 'flower.jpg';

i_pat = /\.(jpe?g|png|gif|psd)$/; if(!i_pat.test(img)){

document.write("Invalid Image Format Please Upload Only jpg,gif,png images"); }

</script>

navigators.html

document.write(txt+'<br>'); }

r('<h1>Navigator in javascript</h1>');

r("User Agent = "+window.navigator.userAgent); r("App Name = "+navigator.appName);

r("App Version = "+navigator.appVersion);

</script>

locations.html

<h1>Location subject</h1>

screens.html

document.write(txt+'<br>'); }

r('<hr><h1>Screen in javascript</h1>'); r("Screen Width = "+window.screen.width); r("screen Height = "+screen.height);

r("Available Width = "+screen.availWidth); r("Available Width = "+screen.availHeight); </script>

images.html

function r(txt){

document.write('<h2>'+txt+'</h2>'); }

r("Image length = "+document.images.length); r(' 1 st image Width = '+document.images[0].width); r(' 2 nd image height = '+document.images[1].height); r("Image Width = "+document.pic1.width);

r("Image Height = "+document.pic_2.height); </script> registerform.html <html> <head> <script> function validateForm(f){ n = f.name.value; m = f.mob.value; error = ''; n_pat = /^[a-z]{6,}$/i; if(!n_pat.test(n)){

error += 'Invalid Name<br>'; }

m_pat = /^[7-9][0-9]{9}$/; if(!m_pat.test(m)){

//error += 'Invalid Mobile<br>';

document.getElementById('mobid').innerHTML = "Invalid Mobile"; document.getElementById('mobid').style.color = "red";

}

if(error == ''){ return true;

} else { document.getElementById('error-box').style.display = 'block'; document.getElementById('error-msg').innerHTML = error; return false; } } function hideBox(){ document.getElementById('error-box').style.display = 'none'; } </script> <style> #error-box{ background:#ddd; border:5px solid orange; margin-bottom:10px; } #error-msg{ padding:10px; } </style> </head> <body>

<form name='textForm' onsubmit="javascript: return validateForm(this);"/> <table align='center' cellpadding="5px" cellspacing="0" width='70%' border='1'> <tr><th colspan='3'>Please Register</th></tr>

<tr><td>Name</td><td>:</td><td><input type='text' name='name' value='' /></td></tr> <tr><td>Username</td><td>:</td><td><input type='text' name='uname' value='' /></td></tr> <tr><td>E-Mail</td><td>:</td><td><input type='text' name='email' value='' /></td></tr> <tr><td>Password</td><td>:</td><td><input type='password' name='pwd' value=''

In document php - notes (Page 65-112)