web programming paper solution (chapter wise) javascript · web programming paper solution (chapter...
Post on 03-Jun-2020
4 Views
Preview:
TRANSCRIPT
Web Programming Paper Solution (Chapter wise)
Page 1 of 18
JavaScript
Built in JS objects.
Web Programming Paper Solution (Chapter wise)
Page 2 of 18
Web Programming Paper Solution (Chapter wise)
Page 3 of 18
Web Programming Paper Solution (Chapter wise)
Page 4 of 18
Web Programming Paper Solution (Chapter wise)
Page 5 of 18
Web Programming Paper Solution (Chapter wise)
Page 6 of 18
Web Programming Paper Solution (Chapter wise)
Page 7 of 18
Window and Document object in JS.
Web Programming Paper Solution (Chapter wise)
Page 8 of 18
Web Programming Paper Solution (Chapter wise)
Page 9 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>
Web Programming Paper Solution (Chapter wise)
Page 10 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>
Web Programming Paper Solution (Chapter wise)
Page 11 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)
Web Programming Paper Solution (Chapter wise)
Page 12 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
Web Programming Paper Solution (Chapter wise)
Page 13 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>
Web Programming Paper Solution (Chapter wise)
Page 14 of 18
Event handling in JS. / Any three mouse events
Event.html <!DOCTYPE html>
Web Programming Paper Solution (Chapter wise)
Page 15 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"
Web Programming Paper Solution (Chapter wise)
Page 16 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>
Web Programming Paper Solution (Chapter wise)
Page 17 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>
Web Programming Paper Solution (Chapter wise)
Page 18 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>
top related