Web Programming Paper Solution (Chapter wise) JavaScript

Size: px

Start display at page:

Download "Web Programming Paper Solution (Chapter wise) JavaScript"

Sharleen Tucker
6 years ago
Views:

1 Built in JS objects. JavaScript Page 1 of 18

2 Page 2 of 18

3 Page 3 of 18

4 Page 4 of 18

5 Page 5 of 18

6 Page 6 of 18

7 Window and Document object in JS. Page 7 of 18

8 Page 8 of 18

9 JS code to validate a form which accepts name, date of birth, 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(' '); 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_ (x) /*@ can be starting, 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 address"); document.getelementbyid(" ").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> Page 9 of 18

10 <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> </label> <input type="text" name=" " id=" " required value="" placeholder="enter your id" onchange="valid_ (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> Page 10 of 18

11 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 :23:13 GMT+0530 (India Standard Time) Page 11 of 18

12 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> Page 12 of 18

13 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> Page 13 of 18

14 Event handling in JS. / Any three mouse events Event.html <!DOCTYPE html> Page 14 of 18

15 <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" Page 15 of 18

16 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> Page 16 of 18

17 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> Page 17 of 18

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> Page 18 of 18

Chapter 1 Getting Started with HTML 5 1. Chapter 2 Introduction to New Elements in HTML 5 21

Table of Contents Chapter 1 Getting Started with HTML 5 1 Introduction to HTML 5... 2 New API... 2 New Structure... 3 New Markup Elements and Attributes... 3 New Form Elements and Attributes... 4 Geolocation...