web programming paper solution (chapter wise) javascript · web programming paper solution (chapter...

Web Programming Paper Solution (Chapter wise)

of 18

JavaScript

Built in JS objects.


of 18


of 18

Window and Document object in JS.


of 18


of 18

JS code to validate a form which accepts name, date of birth, email and phone number of student. <!doctype html> <html> <head> <title>JS for form validation</title> <script> function valid_name(x) { //allowed character set A-Z a-z space dot //maximum 50 characters are allowed var letters = /^[a-zA-Z .]+$/; if(x.length>50 || !letters.test(x)) { alert("Name can have maximum 50 characters, only A-Z a-z space and dot are allowed"); document.getElementById("std_name").value=""; } } function valid_dob(x) { var d = new Date('1998-01-01'); var c = new Date(x); //student should be 18+ only if(c>d) { alert("You should be above 18 years in age."); document.getElementById("dob").value=""; } } function valid_email(x) { /*@ can be starting, between @ and . there should be atleast 2 characters, after last dot there should be atleast 2 chara characters */ var at = x.indexOf("@"); var dot = x.lastIndexOf("."); if (at<1 || dot<at+2 || dot+2>=x.length) { alert("Not a valid e-mail address"); document.getElementById("email").value=""; } } function valid_mobile(x) { var letters = /^[0-9]+$/; if(x.length!=10 || !letters.test(x)) { alert("Invalid mobile number"); document.getElementById("mobile").value=""; } } </script> </head>


of 18

<body> <form action="" name="sample_form" method="post"> <fieldset> <legend>Student Details</legend> <label>Name</label> <input id="std_name" type="text" name="std_name" value="" placeholder="Enter your name" required onkeyup="valid_name(this.value)" /> <br/> <label>Date of Birth</label> <input type="date" name="dob" id="dob" required onchange="valid_dob(this.value)" /> <br/> <label>Email</label> <input type="text" name="email" id="email" required value="" placeholder="Enter your email id" onchange="valid_email(this.value)" /> <br/> <label>Mobile number</label> <input type="text" id="mobile" value="" name="mobile" required palceholder="Enter mobile number" onchange="valid_mobile(this.value)" /> </fieldset> </form> </body> </html>


of 18

JS code to display today’s day, date and time. <!doctype html> <html> <head> <title>Date & time in JS</title> <script> function showDateTime() { var d = new Date(); document.getElementById("output").innerHTML = d; } </script> </head> <body onload="showDateTime()"> <span id="output"></span> </body> </html> Sun May 08 2016 00:23:13 GMT+0530 (India Standard Time)


of 18

JS code to display table of 5 from 1 to 20 using while loop. <!doctype html> <html> <head> <title>Table of 5 from 1 to 20 using while loop</title> <script> function showTableOf5() { var i = 1; var s = ""; while(i<=20) { s += 5*i + "<br />"; i++; } document.getElementById("output").innerHTML = s; } </script> </head> <body onload="showTableOf5()"> <span id="output"></span> </body> </html> 5 10 15 20 25 30 35 40 45 50 55 60 65 70 75 80 85 90 95 100


of 18

JS code to change background color continuously. <!doctype html> <html> <head> <title>change bg color cont</title> <script> function changeColor(i) { (document.getElementsByTagName("body"))[0].bgColor = i; i += 10000; if(i >= 0xffffff) i = 0; setTimeout(function(){ changeColor(i); }, 100); } </script> </head> <body onload="changeColor(100)"> <span id="x"></span> </body> </html>


of 18

Event handling in JS. / Any three mouse events

Event.html <!DOCTYPE html>


of 18

<html> <head> <title>events in JS</title> <style type="text/css"> div { background-color: red; width: 170px; height: 80px; margin: 20px; padding-top: 20px; color: white; text-align: center; } p, div{ font-weight: bold; font-size: 20px; font-family: "Georgia"; } </style> <script> function funcOnSelect(x) { x.setAttribute("value",""); } function keyDown(e) { document.getElementById('res2').innerHTML='you pressed ' + String.fromCharCode(e.which) + ' key'; } function keyUp(e) { document.getElementById('res2').innerHTML='you released ' + String.fromCharCode(e.which) + ' key'; } </script> </head> <body> <div onmousemove="this.innerHTML='you moved mouse on me'" onmousewheel="this.innerHTML='you tried to scroll me'">Text 1</div> <div onmouseover="this.innerHTML='Thank You'" onmouseout="this.innerHTML='mouse was on me'" onmousedown="this.innerHTML='mouse button pressed'" onmouseup="this.innerHTML='mouse button released'">Text 2</div> <div onclick="this.innerHTML='you clicked me'" ondblclick="this.innerHTML='you double clicked me'" draggable="true" ondrag="this.innerHTML='you r dragging me'" on ondragend="this.innerHTML='yoy dragged me'">Text 3</div> TextBox<input type="text" value="initial value" name="txt"


of 18

onfocus="funcOnSelect(this)" onchange="document.getElementById('res1').innerHTML=this.value" onkeydown="keyDown(event)" onkeyup="keyUp(event)" onblur="this.value=this.value.toUpperCase()" onselect="alert('your selected text is ' + this.value )"> <p id="res1"></p> <p id="res2"></p> </body> </html>


of 18

JS code to set cookie. <!doctype html> <html> <head> <title>Cookie in JS</title> <script> function createCookie(cookieName, cookieValue, cookieDays) { var d = new Date(); d.setTime( d.getTime() + (cookieDays*24*60*60*1000) ); var expires = "expires=" + d.toGMTString(); var str = cookieName + "=" + cookieValue + "; " + expires; document.cookie = str; alert('cookie created'); } function readCookie() { var allCookies = document.cookie; document.getElementById("output").innerHTML = allCookies; } function deleteCookie(cookieName) { document.cookie = cookieName + "=" + "; expires=-1"; alert('cookie deleted'); document.getElementById("output").innerHTML = ""; } </script> </head> <body> <input type="button" name="create" value="Create Cookie" onclick="createCookie('x',123,2)"><br/> <input type="button" name="read" value="Read Cookie" onclick="readCookie()"><br/> <input type="button" name="delete" value="Delete Cookie" onclick="deleteCookie('x')"><br/> <span id="output"></span> </body> </html>


of 18

JS code to change background color of web page to be selected from drop down list of colors. <!doctype html> <html> <head> <title>change bg color drop down list</title> <script> function changeColor(i) { (document.getElementsByTagName("body"))[0].bgColor = i; } </script> </head> <body> <select name="colors" onchange="changeColor(this.value)"> <option value="white" selected>WHITE</option> <option value="red">RED</option> <option value="green">GREEN</option> <option value="yellow">YELLOW</option> </select> </body> </html>

web programming paper solution (chapter wise) javascript · web programming paper solution (chapter...

Documents