API tools faq
paste
cgm

webTech Cyclesheets

cgm
May 5th, 2017
58
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.94 KB | None | 0 0
raw download clone embed print report
  1. cyclesheets
  2.  
  3. 1. Write a Php program to display fibonacci series using for and while loop.
  4. <?php
  5. $count = 0 ;
  6. $f1 = 0;
  7. $f2 = 1;
  8. echo $f1." , ";
  9. echo $f2." , ";
  10. while ($count < 20 )
  11. {
  12. $f3 = $f2 + $f1 ;
  13. echo $f3." , ";
  14. $f1 = $f2 ;
  15. $f2 = $f3 ;
  16. $count = $count + 1;
  17. }
  18. ?>
  19.  
  20. 2. Write a php code to open a file and perform read, write and update that.
  21. <?php
  22. $myfile= fopen(“filename.txt”,a+) or die (“unable to open the file”);
  23. Echo fread(myfile,filesize(“filename.txt”);
  24. $txt= “Hi”;
  25. fwrite($myfile, $txt);
  26. fclose($myfile);
  27. ?>
  28. 3. Write a php code to create a table employee(empno, name, department, salary, designation, date-of-joining), insert 5 records and execute query using php to display name and salary of all employees.
  29. <?php
  30. $servername="localhost";
  31. $username="root";
  32. $password="";
  33. $database="myDB";
  34. $conn=new mysqli("$servername","$username","$password","$database");
  35. if($conn->connect_error)
  36. die ("Connection not established");
  37. $sql = "INSERT INTO employee VALUES(2,'','','','','')";
  38. $sql = "INSERT INTO employee VALUES(2,'','','','','')";
  39. $sql = "INSERT INTO employee VALUES(2,'','','','','')";
  40. $sql = "INSERT INTO employee VALUES(2,'','','','','')";
  41. $sql = "INSERT INTO employee VALUES(2,'','','','','')";
  42. if($conn->multi_query($sql)===TRUE)
  43. echo " created";
  44. ?>
  45.  
  46. 4. Design the following form using php.
  47. <!DOCTYPE HTML>
  48. <html>
  49. <head>
  50. <style>
  51. .error {color: #FF0000;}
  52. </style>
  53. </head>
  54. <body>
  55.  
  56. <?php
  57. // define variables and set to empty values
  58. $nameErr = $emailErr = $genderErr = $websiteErr = "";
  59. $name = $email = $gender = $comment = $website = "";
  60.  
  61. if ($_SERVER["REQUEST_METHOD"] == "POST") {
  62. if (empty($_POST["name"])) {
  63. $nameErr = "Name is required";
  64. } else {
  65. $name = test_input($_POST["name"]);
  66. // check if name only contains letters and whitespace
  67. if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
  68. $nameErr = "Only letters and white space allowed";
  69. }
  70. }
  71.  
  72. if (empty($_POST["email"])) {
  73. $emailErr = "Email is required";
  74. } else {
  75. $email = test_input($_POST["email"]);
  76. // check if e-mail address is well-formed
  77. if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
  78. $emailErr = "Invalid email format";
  79. }
  80. }
  81.  
  82. if (empty($_POST["website"])) {
  83. $website = "";
  84. } else {
  85. $website = test_input($_POST["website"]);
  86. // check if URL address syntax is valid (this regular expression also allows dashes in the URL)
  87. if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) {
  88. $websiteErr = "Invalid URL";
  89. }
  90. }
  91.  
  92. if (empty($_POST["comment"])) {
  93. $comment = "";
  94. } else {
  95. $comment = test_input($_POST["comment"]);
  96. }
  97.  
  98. if (empty($_POST["gender"])) {
  99. $genderErr = "Gender is required";
  100. } else {
  101. $gender = test_input($_POST["gender"]);
  102. }
  103. }
  104.  
  105. function test_input($data) {
  106. $data = trim($data);
  107. $data = stripslashes($data);
  108. $data = htmlspecialchars($data);
  109. return $data;
  110. }
  111. ?>
  112.  
  113. <h2>PHP Form Validation Example</h2>
  114. <p><span class="error">* required field.</span></p>
  115. <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
  116. Name: <input type="text" name="name" value="<?php echo $name;?>">
  117. <span class="error">* <?php echo $nameErr;?></span>
  118. <br><br>
  119. E-mail: <input type="text" name="email" value="<?php echo $email;?>">
  120. <span class="error">* <?php echo $emailErr;?></span>
  121. <br><br>
  122. Website: <input type="text" name="website" value="<?php echo $website;?>">
  123. <span class="error"><?php echo $websiteErr;?></span>
  124. <br><br>
  125. Comment: <textarea name="comment" rows="5" cols="40"><?php echo $comment;?></textarea>
  126. <br><br>
  127. Gender:
  128. <input type="radio" name="gender" <?php if (isset($gender) && $gender=="female") echo "checked";?> value="female">Female
  129. <input type="radio" name="gender" <?php if (isset($gender) && $gender=="male") echo "checked";?> value="male">Male
  130. <span class="error">* <?php echo $genderErr;?></span>
  131. <br><br>
  132. <input type="submit" name="submit" value="Submit">
  133. </form>
  134.  
  135. <?php
  136. echo "<h2>Your Input:</h2>";
  137. echo $name;
  138. echo "<br>";
  139. echo $email;
  140. echo "<br>";
  141. echo $website;
  142. echo "<br>";
  143. echo $comment;
  144. echo "<br>";
  145. echo $gender;
  146. ?>
  147.  
  148. </body>
  149. </html>
  150.  
  151. ///////////////////////////////////////////////////
  152.  
  153.  
  154. cylcesheet1
  155.  
  156.  
  157. 1. HTML EXAMPLE CODE:
  158. <!DOCTYPE HTML>
  159. <html>
  160. <head>
  161. <title>Name of cities</title>
  162. </head>
  163. <body bgcolor="white">
  164. <h1 style="text-align:center">Delhi</h1>
  165. <h2>Delhi</h2>
  166. <h3>Delhi</h3>
  167. <h4>Delhi</h4>
  168. <h5>Delhi</h5>
  169. <h6>Delhi</h6>
  170. <b>Bangalore</b>
  171. <u>Bangalore</u>
  172. <i>Bangalore</i>
  173. <ul style="list.style.type:disk">
  174. <li>Apple</li>
  175. <li>Orange</li>
  176. <li>Grapefruit</li>
  177. </ul>
  178. <ol type="i">
  179. <li>Apple</li>
  180. <li>Orange</li>
  181. <li>Grapefruit</li>
  182. </ol>
  183. <dl>
  184. <dt>HTML</dt>
  185. <dd>A markup language....</dd>
  186. <dt>CSS</dt>
  187. <dd>Language used to...</dd>
  188. </dl>
  189. <p>This is my first paragraph</p>
  190. <p>This is my second paragraph</p>
  191. <div style="background: skyblue;">
  192. This is div</div>
  193. <hr size="5" wodth="70%" />
  194. <center>Hello World</center>
  195. <font size="3"
  196. color="yellow">Font3</font>
  197. <font size="+4"
  198. color="yellow">Font+4</font>
  199. <p><font color="blue">e=mc<sup>2</sup><br>Hello VIT!</font></p>
  200. <em></em>
  201. <mark></mark>
  202. <p>My favourite color is <del>red</del>blue</p>
  203. </body>
  204. </html>
  205. OUTPUT:
  206.  
  207.  
  208. 2. HTML CODE:
  209. <html>
  210. <head>
  211. <title>My First HTML Page</title>
  212. <meta name="description" content="HTML description"></meta>
  213. <style type="text/css">
  214. p { font-size: 12pt; line-height: 12pt; }
  215. p:first-letter { font-size: 200%; }
  216. span { text-transform: uppercase; }
  217. </style>
  218. </head>
  219. <body>
  220. <p>This is my first page....</p>
  221. <a href="file:///C:/Users/Mokshita/Documents/B.Tech/SEM%206/Web%20Tech/Lab/2.html" title="TimeTable">Link to the timetable</a>
  222. <br/>
  223. <img src="C:\Users\Mokshita\Pictures\2L9A5220.JPG" width="50" height="100">Image</img>
  224. <br/>
  225. <em>Mokshita</em>
  226. <br/>
  227. <strong>Mokshita</strong>
  228. <br/>
  229. <b>Mokshita</b>
  230. <br/>
  231. <i>Mokshita</i>
  232. <br/>
  233. <hr size="5" width="70%" />
  234. <br/>
  235. <center>Hello World!</center>
  236. <br/>
  237. <font size="3" color="green">Mokshita</font>
  238. <br/>
  239. <p><font color="blue">e=mc<sup>2</sup></p>
  240. <div style="background: skyblue; font-size:24px; color:red">This is a div</div>
  241. <br/>
  242. <p>This one is <span style="color:red; font-weight:bold">only a test</span></p>
  243. <br/>
  244. <p>Styles demo.<br/>
  245. <span>Mokshita</span>
  246. </p>
  247. <ol type="A">
  248. <li>Apple</li>
  249. <li>Orange</li>
  250. <li>Grape</li>
  251. </ol>
  252. <ul type="disk">
  253. <li>Apple</li>
  254. <li>Orange</li>
  255. <li>Grape</li>
  256. </ul>
  257. <dl>
  258. <dt>HTML</dt>
  259. <dd>It is a markup language...</dd>
  260. </dl>
  261. </body>
  262. </html>
  263. OUTPUT:
  264.  
  265.  
  266. 3. TABLE Example:
  267. <html>
  268. <head>
  269. <title>Table Example</title>
  270. </head>
  271. <body>
  272. <table border="1">
  273. <tr>
  274. <th colspan="4">Table-Assignment</th></tr>
  275. <tr>
  276. <th>S.No.</th>
  277. <th>Type</th>
  278. <th colspan="2">Details</th>
  279. </tr>
  280. <tr>
  281. <th rowspan="2">1</th>
  282. <th rowspan="2">Student</th>
  283. <th>5 rows</th>
  284. <th>3 columns</th></tr>
  285. <tr>
  286. <th>2 ros</th>
  287. <th>2 columns</th>
  288. </tr>
  289. <tr>
  290. <td>2</td>
  291. <td>Class</td>
  292. <th>3 rows</th>
  293. <th>5 columns</th></tr>
  294. <tr>
  295. <td rowspan="2">3</td>
  296. <td rowspan="2">Subjects</td>
  297. <th>3 core</th>
  298. <th>2 electives</th></tr>
  299. <tr>
  300. <th>4 core</th>
  301. <th>1 elective</th>
  302. </tr>
  303. </table>
  304. </body>
  305. </html>
  306. OUTPUT:
  307.  
  308. 4. Table Example:
  309. <html>
  310. <body>
  311. <tr>
  312. <th colspna="7">Time Table</th>
  313. </tr>
  314. <tr>
  315. <td rowspan="6">Hours</td>
  316. <td>MON</td>
  317. <td>TUES</td>
  318. <td>WED</td>
  319. <td>THURS</td>
  320. <td>FRI</td>
  321. </tr>
  322. <tr>
  323. <td>CAO</td>
  324. <td>DBMS</td>
  325. <td>DM</td>
  326. <td>TOC</td>
  327. <td>OS</td>
  328. </tr>
  329. <tr>
  330. <td>NW</td>
  331. <td>CAO</td>
  332. <td>OS</td>
  333. <td>DBMS</td>
  334. <td>DM</td>
  335. </tr>
  336. <tr>
  337. <th colspan="5">Lunch</th>
  338. </tr>
  339. <tr>
  340. <td>NW</td>
  341. <td>TOC</td>
  342. <td>CAO</td>
  343. <td>DM</td>
  344. <td rowspan="2">Project</td>
  345. </tr>
  346. <tr>
  347. <td>TOC</td>
  348. <td>NW</td>
  349. <td>OS</td>
  350. <td>CAO</td>
  351. </tr>
  352. </table>
  353. </body>
  354. </html>
  355. OUTPUT:
  356.  
  357. 5. Hyperlink example
  358. <html>
  359. <head>
  360. <title>Simple Tags Demo</title>
  361. </head>
  362. <body>
  363. <a href="C:\Users\Mokshita\Documents\B.Tech\SEM 6\Web\3.html" title="Time Table">This is a link to the time-table.</a>
  364. <br />
  365. <img src="C:\Users\Mokshita\Pictures\2L9A5220.JPG" width="100" height="200">Screenshot</img>
  366. <a href="C:\Users\Mokshita\Pictures\2L9A5220.JPG">Click me</a>
  367. <br />
  368. </body>
  369. </html>
  370. OUTPUT:
  371.  
  372. 6. Hyperlink Example:
  373. <html>
  374. <body>
  375. <ul type="disk">
  376. <a href="C:\Users\Mokshita\Pictures\2L9A5220.JPG"><li>Sea</li></a>
  377. <a href="C:\Users\Mokshita\Pictures\2L9A5220.JPG"><li>Mountain</li></a>
  378. <a href="C:\Users\Mokshita\Pictures\2L9A5220.JPG"><li>Valley</li></a>
  379. </ul>
  380. </body>
  381. </html>
  382. OUTPUT:
  383.  
  384. 7. Form Example:
  385. <html>
  386. <body>
  387. <form name="MyForm" method="get" action="abc.php">
  388. <fieldset>
  389. <legend>Student Details</legend>
  390. <table><tr>Name</tr>
  391. <tr><input type="text" name="fname" value="Name" size="25"></tr>
  392. </br>
  393. <tr>Programmer&nbsp&nbspUG</tr>
  394. <tr><input type="radio" name='pgm" value="UG" checked="checked"></tr>
  395. &nbsp&nbspPG
  396. <tr><input type="radio" name='pgm" value="PG"></tr>
  397. </br>
  398. <tr>Gender&nbsp&nbspMale</tr>
  399. <tr><input type="radio" name="pgm" value="UG"></tr>
  400. &nbsp&nbspFemale
  401. <tr><input type="radio" name="pgm" value="PG"></tr>
  402. </br>
  403. <tr>Mobile</tr>
  404. <tr><input type="text" name="number" value="mobile" size="25"></tr>
  405. </br>
  406. Gender
  407. <select name="gender">
  408. <option value="value1" selected="selected">Male</option>
  409. <option value="value2">Female</option>
  410. <option value="value3">Other</option>
  411. </select>
  412. </br>
  413. <input type="submit" name="submitbtn" value="Apply Now"></input>
  414. </table>
  415. </fieldset>
  416. </form>
  417. OUTPUT:
  418.  
  419. 8. Form Example:
  420. <html>
  421. <body>
  422. <form name="MyForm" method="get" action="abc.php">
  423. <fieldset>
  424. <legend>Registration Form</legend>
  425. <table>
  426. <tr>First Name</tr>
  427. <tr><input type="text" name="fname" value="Mokshita" size="25"></tr>
  428. <tr>Last Name</tr>
  429. <tr><input type="text" name="fname" value="Tyagi" size="25"></tr>
  430. </br>
  431. <tr>Gender&nbsp&nbspMale</tr>
  432. <tr><input type="radio"></tr>
  433. &nbsp&nbspFemale
  434. <tr><input type="radio"></tr>
  435. </br>
  436. Country
  437. <select name="Country">
  438. <option value="value1" selected="selected">USA</option>
  439. <option value="value2">India</option>
  440. <option value="value3">Other</option>
  441. </select>
  442. </br>
  443. <tr>Email</tr>
  444. <tr><input type="text" name="Email" value="mokshitatyagi429@gmail.com" size="25"></tr>
  445. </br>
  446. <tr>Additional Comments</tr>
  447. <textarea name="message" rows="10" column="20">
  448. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  449. </textarea>
  450. <button type="button" onclick=alert('Are you sure?')">Confirm</button>
  451. </table>
  452. </fieldset>
  453. </form>
  454. OUTPUT:
  455.  
  456. 9. Make up three image links and put them in a borderless table. Construct the table so that there is just a little space between the images.
  457.  
  458.  
  459.  
  460. CODE:
  461. <html>
  462. <head>
  463. <title>Ques6</title>
  464. </head>
  465. <body>
  466. <table cellspacing="0" cellpadding="15">
  467. <tr>
  468. <td><img src="C:\Users\Mokshita\Pictures\2L9A5220.JPG width="10" height="10"/>
  469. </tr>
  470. <tr>
  471. <td><img src="C:\Users\Mokshita\Pictures\2L9A5220.JPG width="10" height="10"/>
  472. </tr>
  473. <tr>
  474. <td><img src="C:\Users\Mokshita\Pictures\2L9A5220.JPG width="10" height="10"/>
  475. </tr>
  476. </table>
  477. OUTPUT:
  478.  
  479. 10. Frames Example:
  480. <html>
  481. <head>
  482. <title>Frames Example</title></head>
  483. <frameset cols="180px,*,150px">
  484. <frame src="left.html"/>
  485. <frame src="middle.html"/>
  486. <frame src="right.html"/>
  487. </frameset>
  488. </html>
  489. OUTPUT:
  490.  
  491.  
  492. 11. Create a following page
  493.  
  494. Create a link on the second frame and the content of the link should be displayed on the third frame.
  495.  
  496. CODE:
  497. <html>
  498. <head>
  499. <title>Frames Example</title></head>
  500. <frameset rows="50%,*">
  501. <frame src="a.html" name="upper">
  502. <frame src="b.html" name="lower">
  503. </frameset>
  504. </html>
  505.  
  506. b.html
  507. <html>
  508. <head>
  509. <frameset cols="50%,*">
  510. <frame src="d.html" name="left">
  511. <frame src="e.html" name="right">
  512. </frameset>
  513. </head>
  514. </html>
  515.  
  516. d.html
  517. <html>
  518. <head>
  519. </head>
  520. <body>
  521. <a href="1.html" target="right">Home
  522. </a>
  523. </body>
  524.  
  525. e.html
  526. <html>
  527. <head>
  528. </head>
  529. <body>
  530. hello i am e
  531. </body>
  532. OUTPUT:
  533.  
  534. 12. CSS Example
  535. <html>
  536. <head>
  537. <link rel="stylesheet" style="text/css" href="index.css">
  538.  
  539. </head>
  540. <body>
  541. <div class="first">
  542. hello mokshita
  543. <div class="second">hiiii
  544. </div>
  545. </div>
  546. </body>
  547. </html>
  548.  
  549. Index.css
  550. div.first{
  551. color:red;
  552. background: skyblue;
  553. }
  554.  
  555. div.second{
  556. color:white;
  557. background: green;
  558. }
  559. Output:
  560.  
  561.  
  562. 13. Embedded styling:
  563. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  564. <html xmlns="http://www.w3.org/1999/xhtml">
  565. <head>
  566. <title>Style Sheets</title>
  567. <style type="text/css">
  568. em {background-color:#8000FF; color:white}
  569. h1 {font-family:Arial, sans-serif}
  570. p {font-size:18pt}
  571. .blue {color:blue}
  572. </style>
  573. <head>
  574. <body>
  575. <h1 class="blue">A Heading</h1>
  576. <p>Here is some text. Here is some text. Here
  577. is some text. Here is some text. Here is some
  578. text.</p>
  579. <h1>Another Heading</h1>
  580. <p class="blue">Here is some more text.
  581. Here is some more text.</p>
  582. <p class="blue">Here is some <em>more</em>
  583. text. Here is some more text.</p>
  584. </body>
  585. </html>
  586. Output:
  587.  
  588. 14. External
  589. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  590. Transitional//EN"
  591. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  592. <html xmlns="http://www.w3.org/1999/xhtml">
  593. <head>
  594. <title>Importing style sheets</title>
  595. <link type="text/css" rel="stylesheet"
  596. href="styles.css" />
  597. </head>
  598. <body>
  599. <h1>Shopping list for <em>Monday</em>:</h1>
  600. <li>Milk</li>
  601. <li>Bread
  602. <ul>
  603. <li>White bread</li>
  604. <li>Rye bread</li>
  605. <li>Whole wheat bread</li>
  606. </ul>
  607. </li>
  608. <li>Rice</li>
  609. <li>Potatoes</li>
  610. <li>Pizza <em>with mushrooms</em></li>
  611. </ul>
  612. <a href="http://food.com" title="grocery
  613. store">Go to the Grocery store</a>
  614. </body>
  615. </html>
  616.  
  617. Styles.css:
  618. a { text-decoration: none }
  619.  
  620. a:hover { text-decoration: underline;
  621. color: red;
  622. background-color: #CCFFCC }
  623.  
  624. li em { color: red;
  625. font-weight: bold }
  626.  
  627. ul { margin-left: 2cm }
  628.  
  629. ul ul { text-decoration: underline;
  630. margin-left: .5cm }
  631. Output:
  632.  
  633.  
  634. 15. Inline styling
  635. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd">
  636. <html xmlns="http://www.w3.org/1999/xhtml">
  637. <head>
  638. <title>Inline Styles</title>
  639. </head>
  640. <body>
  641. <p>Here is some text</p>
  642. <!--Separate multiple styles with a semicolon-->
  643. <p style="font-size: 20pt">Here is some
  644. more text</p>
  645. <p style="font-size: 20pt;color:
  646. #0000FF" >Even more text</p>
  647. </body>
  648. </html>
  649. Output:
  650.  
  651. 16. Write a script to take three numbers from the user and display the greatest number out of three.
  652. <html>
  653. <head>
  654. <script>
  655. var theNumber=Number(prompt("Pick a number",""));
  656. var theNumber2=Number(prompt("Pick another number",""));
  657. var theNumber3=Number(prompt("Pick another number",""));
  658. alert("The maximum number is"+" "+Math.max(theNumber,theNumber2,theNumber3));
  659. </script>
  660. </head>
  661. <body>
  662. </body>
  663. </html>
  664. OUTPUT:
  665.  
  666.  
  667.  
  668. 17. Create a web page containing a clock
  669. <!DOCTYPE html>
  670. <html>
  671. <head>
  672. <script>
  673. function startTime() {
  674. var today=new Date();
  675. var h=today.getHours();
  676. var m=today.getMinutes();
  677. var s=today.getSeconds();
  678. m=checkTime(m);
  679. s=checkTime(s);
  680. document.getElementById('txt').innerHTML=h+":"+m+":"+s;
  681. var t=setTimeout(startTime,500);
  682. }
  683. function checkTime(i) {
  684. if(i<10) {i="0"+i};
  685. return i;
  686. }
  687. </script>
  688. </head>
  689. <body onload="startTime()">
  690. <div id="txt"></div>
  691. </body>
  692. </html>
  693. OUTPUT:
  694.  
  695. 18. Create a web page that allows the user to select one or more books by using checkboxes. Display the name of each book and its price. Display the current total in a text box at the bottom of the page. When a book is selected (or unselected), update the total. Use JavaScript to perform any arithmetic operations.
  696. <html>
  697. <head>
  698. </head>
  699. <body>
  700. <form action=" " id="theform">
  701. <fieldset>
  702. <legend>
  703. books
  704. </legend>
  705. </br>
  706. <label>
  707. <input type="checkbox" name="book" value="300" id="b1" onclick="total()"/>
  708. story 300/-
  709. </label>
  710. </br>
  711. <label>
  712. <input type="checkbox" name="book" value="500" id="b2" onclick="total()"/>
  713. romance 500/-
  714. </label>
  715. </br>
  716. <label>
  717. <input type="checkbox" name="book" value="150" id="b3" onclick="total()"/>
  718. thriller 150/-
  719. </label>
  720. </br>
  721. <label>
  722. <input type="checkbox" name="book" value="200" id="b4" onclick="total()"/>
  723. sgeneral 200/-
  724. </label>
  725. </br>
  726. <label>
  727. total
  728. <input value="0.00" readonly="readonly" type="text" id="total"/>
  729. </label>
  730. </br>
  731. </fieldset>
  732. <input value="submit" type="submit"/>
  733. <input value="reset" type="reset"/>
  734. </form>
  735. <script type-"text/javascript">
  736. <function total()
  737. {
  738. var input=document.getElementById("form");
  739. var total=0;
  740. for(var i=0;i<input.length;i++)
  741. {
  742. total+=parseFloat(input[i].value);
  743. }
  744. }
  745. document.getElementById("total").value=" "+total;
  746. }
  747. </script>
  748. </html>
  749. OUTPUT:
  750.  
  751. 19. Write a function “multiple” in JavaScript that determines, for a pair of integers, whether the second integer is a multiple of the first. The function takes two integer arguments and return true if the second is the multiple of the first, and false otherwise.
  752. <html>
  753. <head>
  754. <script>
  755. function multi(){
  756. var x=document.forms["myForm"]["a"].value;
  757. var y=document.forms["myForm"]["b"].value;
  758. var z=y%x;
  759. if(z==0)
  760. {
  761. document.getElementById("demo").innerHTML="is a multiple";
  762. }
  763. else
  764. {
  765. document.getElementById("demo").innerHTML="is not a multiple";
  766. }
  767. }
  768. </script>
  769. </head>
  770. <body>
  771. <form name="myForm">
  772. <input type="text" id="a">
  773. <input type="text" id="b">
  774. <button type="button" onclick="multi()">click here</button>
  775. <p id="demo"></p>
  776. </form>
  777. </body>
  778. </html>
  779. OUTPUT:
  780.  
  781. 20. Create a web page with a text box and a button. On click of a button a message box is displayed with the text entered by the user in the textbox.
  782. <html>
  783. <head>
  784. <script>
  785. function m(){
  786. var x=document.forms["myForm"]["a"].value;
  787. window.alert(x);
  788. }
  789. </script>
  790. </head>
  791. <body>
  792. <form name="myForm">
  793. <input type="text" id="a">
  794. <button type="button" onclick="m()">click here</button>
  795. </form>
  796. </body>
  797. </html>
  798. OUTPUT:
  799.  
  800. 21. Create a web page with an image and a button. On click of a button the image should move horizontally and also on mouse over the size of the image should be changed.
  801. <html>
  802. <body>
  803. <style>
  804. #animate {
  805. width: 100;
  806. height: 100;
  807. position: absolute;
  808. background-image: url("Screenshot from 2017-03-24 16:16:37.png");
  809. }
  810. </style>
  811. <script>
  812. function myMove() {
  813. var elem=document.getElementById("animate");
  814. var pos=0;
  815. var id=setInterval(frame,5);
  816. function frame() {
  817. if(pos==350) {
  818. clearInterval(id);
  819. } else {
  820. pos++;
  821. elem.style.left=pos+'px';
  822. }
  823. }
  824. }
  825. function mOver(obj) {
  826. obj.style.height=200;
  827. obj.style.width=200;
  828. }
  829. function mOut(obj) {
  830. obj.style.height=100;
  831. obj.style.width=100;
  832. }
  833. </script>
  834. <p>
  835. <button onclick="myMove()">Click Me</button>
  836. </p>
  837. <div id="animate" onmouseover="mOver(this)" onmouseout="mOut(this)"></div>
  838. </body>
  839. </html>
  840. OUTPUT:
  841.  
  842. 22. Write the Java Script for the following
  843. • Generate alert box
  844. <html>
  845. <head>
  846. <script type="text/javascript">
  847. function Warn(){
  848. alert("This is a warning message!");
  849. document.write("This is a warning message!");
  850. }
  851. </script>
  852. </head>
  853. <body>
  854. <p>Click the following button to see the result</p>
  855. <form>
  856. <input type="button" value="Click me" onclick="Warn();"/>
  857. </form>
  858. </body>
  859. </html>
  860. OUTPUT:
  861.  
  862. • Generate Confirm box
  863. <html>
  864. <head>
  865. <script type="text/javascript">
  866. function getConfirmation(){
  867. var retVal=confirm("Do you want to continue");
  868. if(retVal==true){
  869. document.write("User wants to continue !");
  870. return true;
  871. }
  872. else{
  873. document.write("User does not want to continue !");
  874. return false;
  875. }}
  876. </script>
  877. </head>
  878. <body>
  879. <p>Click the following button to see the result:</p>
  880. <form>
  881. <input type="button" value="Click me" onclick="getConfirmation():"/>
  882. </form>
  883. </body>
  884. </html>
  885. OUTPUT:
  886.  
  887. • Generate Prompt box
  888. <html>
  889. <head>
  890. <script type="text/javascript">
  891. function getValue(){
  892. var retValue=prompt("Enter your name:","your name here");
  893. document.write("You have entered:"+retVal);
  894. }
  895. </script>
  896. </head>
  897. <body>
  898. <p>Click the following button to see the result:</p>
  899. <form>
  900. <input type="button" value="Click Me" onclick="getValue();"/>
  901. </form>
  902. </body>
  903. </html>
  904. OUTPUT:
  905.  
  906. • function with an argument that returns a value
  907. <html>
  908. <head>
  909. <script type="text/javascript">
  910. function total(numberA, numberB)
  911. {
  912. return numberA+numberB
  913. }
  914. </script>
  915. </head>
  916. <body>
  917. <script type="text/javascript">
  918. document.write(total(2,3))
  919. </script>
  920. <p>The script in the body section calls a function with two arguments: 2 and 3.</p>
  921. <p>The function returns the sum of these two arguments.</p>
  922. </body>
  923. </html>
  924. OUTPUT:
  925.  
  926. • Looping construct and Error handling
  927. <html>
  928. <head>
  929. <script type="text/javascript">
  930. try
  931. {
  932. docutypoment.write("This is an error as document is misspelled as docutypoment");
  933. }
  934. catch(errorvariable)
  935. {
  936. document.write("An error occured :Error details:"+errorvariable.description);
  937. }
  938. </script>
  939. </body>
  940. </html>
  941. Looping:
  942. <html>
  943. <head>
  944. <script type="text/javascript">
  945. var a=10;
  946. for(a=11;a<=20;a++)
  947. {
  948. document.write(a);
  949. document.write(" ");
  950. }
  951. </script>
  952. </body>
  953. </html>
  954. OUTPUT:
  955.  
  956. 23. Write a web application to implement online quiz system. The application includes only client side script.
  957. <!DOCTYPE html>
  958. <html>
  959. <head>
  960. <meta charset="UTF-8">
  961. <style>
  962. div#test{ border:#000 1px solid; padding:10px 40px 40px 40px; }
  963. </style>
  964. <script>
  965. var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
  966. var questions = [
  967. [ "Who is the captain of the indian cricket team?", "dhoni", "kohli", "rahane", "B" ],
  968. [ "who is the president of india?", "A.P.J Abdul Kalam", "Hamid Ansari", "Pranab Mukherjee", "C" ],
  969. [ "What is the square root of 576?", "24", "22", "26", "A" ],
  970. [ "What is the capital of Arunachal Pradesh?", "Imphal", "Aizowl", "Itanagar", "C" ]
  971. ];
  972. function _(x){
  973. return document.getElementById(x);
  974. }
  975. function renderQuestion(){
  976. test = _("test");
  977. if(pos >= questions.length){
  978. test.innerHTML = "<h2>You got "+correct+" of "+questions.length+" questions correct</h2>";
  979. _("test_status").innerHTML = "Test Completed";
  980. pos = 0;
  981. correct = 0;
  982. return false;
  983. }
  984. _("test_status").innerHTML = "Question "+(pos+1)+" of "+questions.length;
  985. question = questions[pos][0];
  986. chA = questions[pos][1];
  987. chB = questions[pos][2];
  988. chC = questions[pos][3];
  989. test.innerHTML = "<h3>"+question+"</h3>";
  990. test.innerHTML += "<input type='radio' name='choices' value='A'> "+chA+"<br>";
  991. test.innerHTML += "<input type='radio' name='choices' value='B'> "+chB+"<br>";
  992. test.innerHTML += "<input type='radio' name='choices' value='C'> "+chC+"<br><br>";
  993. test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>";
  994. }
  995. function checkAnswer(){
  996. choices = document.getElementsByName("choices");
  997. for(var i=0; i<choices.length; i++){
  998. if(choices[i].checked){
  999. choice = choices[i].value;
  1000. }
  1001. }
  1002. if(choice == questions[pos][4]){
  1003. correct++;
  1004. }
  1005. pos++;
  1006. renderQuestion();
  1007. }
  1008. window.addEventListener("load", renderQuestion, false);
  1009. </script>
  1010. </head>
  1011. <body>
  1012. <h2 id="test_status"></h2>
  1013. <div id="test"></div>
  1014. </body>
  1015. </html>
  1016. OUTPUT:
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!