CODING EXERCISES - JAVASCRIPT, HTML AND JQUERY Coding For Beginners (TAM, JJ [TAM, JJ]) (Z-Library)
Author: TAM, JJ [TAM, JJ]
HTML/CSS/JS
No Description
📄 File Format:
PDF
💾 File Size:
596.8 KB
52
Views
0
Downloads
0.00
Total Donations
📄 Text Preview (First 20 pages)
ℹ️
Registered users can read the full content for free
Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.
📄 Page
1
(This page has no text content)
📄 Page
2
CODING EXERCISES JAVASCRIPT, HTML AND JQUERY CODING FOR BEGINNERS JJ TAM
📄 Page
3
JAVASCRIPT CODING EXERCISES DISPLAY THE CURRENT DAY AND TIME PRINT THE CONTENTS DISPLAY THE CURRENT DATE FIND THE AREA OF A TRIANGLE CHECK WHETHER A GIVEN YEAR IS A LEAP YEAR CALCULATE MULTIPLICATION AND DIVISION CONVERT TEMPERATURES FIND THE LARGEST REVERSE A GIVEN STRING REPLACE EVERY CHARACTER CAPITALIZE THE FIRST LETTER HTML CODING EXERCISES COMMENT HTML TAGS CREATE A HYPERLINK IN HTML DOWNLOAD A FILE CREATE A LINK CREATE A NOFOLLOW LINK OPEN A LINKED DOCUMENT
📄 Page
4
CORRECT WAY TO WRITE ADDRESS SPECIFY AN ALTERNATE TEXT CREATE AN HTML DOCUMENT CREATE AN HTML DOCUMENT TO ADD CONTROLS TO AN AUDIO WRITE BOLD TEXT USING HTML TAGS TO SPECIFY THE BASE URL ISOLATE A PART OF TEXT DEFINE A SECTION DEFINE THE DOCUMENT'S BODY DEFINES A SINGLE LINE BREAK DEFINE A CLICKABLE BUTTON SPECIFY THAT A BUTTON SPECIFY A BUTTON SHOULD BE DISABLED SPECIFY ONE OR MORE FORMS SPECIFY WHERE TO SEND THE FORM-DATA SEND THE FORM-DATA SPECIFY WHERE TO DISPLAY SPECIFY A NAME FOR THE BUTTON JQUERY CODING EXERCISES
📄 Page
5
CHECK JQUERY IS LOADED SCROLL TO THE TOP DISABLE RIGHT CLICK MENU BLINK TEXT CREATE TABLE EFFECT MAKE FIRST WORD BOLD UNDERLINE ALL THE WORDS CHANGE BUTTON TEXT USING JQUERY ADD OPTIONS TO A DROP-DOWN LIST SET BACKGROUND-IMAGE DELETE ALL TABLE ROWS EXCEPT FIRST ONE DISABLE A LINK CHANGE A CSS CLASS SET THE BACKGROUND COLOR ADD THE PREVIOUS SET OF ELEMENTS ADD A SPECIFIED CLASS
📄 Page
6
JAVASCRIPT CODING EXERCISES CODING FOR BEGINNERS JJ TAM
📄 Page
7
JAVASCRIPT CODING EXERCISES Display the current day and time HTML CODE <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript current day and time</title> </head> <body></body> </html> JAVASCRIPT CODE var today = new Date(); var day = today.getDay(); var daylist = ["Sunday","Monday","Tuesday","Wednesday ","Thursday","Friday","Saturday"]; console.log("Today is : " + daylist[day] + "."); var hour = today.getHours(); var minute = today.getMinutes(); var second = today.getSeconds(); var prepand = (hour >= 12)? " PM ":" AM " ; hour = (hour >= 12)? hour - 12: hour; if (hour===0 && prepand===' PM ') { if (minute===0 && second===0) { hour=12; prepand=' Noon'; } else
📄 Page
8
{ hour=12; prepand=' PM'; } } if (hour===0 && prepand===' AM ') { if (minute===0 && second===0) { hour=12; prepand=' Midnight'; } else { hour=12; prepand=' AM'; } } console.log("Current Time : "+hour + prepand + " : " + minute + " : " + second);
📄 Page
9
Print the contents of the current window HTML CODE <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Print the current page.</title> </head> <body> <p></p> <p>Click the button to print the current page.</p> <button onclick="print_current_page()">Print this page</button> </body> </html> JAVASCRIPT CODE function print_current_page() { window.print(); }
📄 Page
10
Display the current date HTML CODE <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Write a JavaScript program to get the current date.</title> </head> <body> </body> </html> JAVASCRIPT CODE var today = new Date(); var dd = today.getDate(); var mm = today.getMonth()+1; var yyyy = today.getFullYear(); if(dd<10) { dd='0'+dd; } if(mm<10) { mm='0'+mm; } today = mm+'-'+dd+'-'+yyyy; console.log(today); today = mm+'/'+dd+'/'+yyyy; console.log(today); today = dd+'-'+mm+'-'+yyyy; console.log(today); today = dd+'/'+mm+'/'+yyyy; console.log(today);
📄 Page
11
Find the area of a triangle HTML CODE <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>The area of a triangle</title> </head> <body> </body> </html> JAVASCRIPT CODE var side1 = 5; var side2 = 6; var side3 = 7; var s = (side1 + side2 + side3)/2; var area = Math.sqrt(s*((s-side1)*(s-side2)*(s-side3))); console.log(area);
📄 Page
12
Check whether a given year is a leap year HTML CODE <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Find Leap Year</title> </head> <body> </body> </html> JAVASCRIT CODE function leapyear(year) { return (year % 100 === 0) ? (year % 400 === 0) : (year % 4 === 0); } console.log(leapyear(2016)); console.log(leapyear(2000)); console.log(leapyear(1700)); console.log(leapyear(1800)); console.log(leapyear(100)); OUTPUT true true false false false
📄 Page
13
Calculate multiplication and division of two numbers HTML CODE <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JavaScript program to calculate multiplication and division of two numbers </title> <style type="text/css"> body {margin: 30px;} </style> </head> <body> <form> 1st Number : <input type="text" id="firstNumber" /><br> 2nd Number: <input type="text" id="secondNumber" /><br> <input type="button" onClick="multiplyBy()" Value="Multiply" /> <input type="button" onClick="divideBy()" Value="Divide" /> </form> <p>The Result is : <br> <span id = "result"></span> </p> </body> </html> JAVASCRIPT CODE function multiplyBy() { num1 = document.getElementById("firstNumber").value; num2 = document.getElementById("secondNumber").value;
📄 Page
14
document.getElementById("result").innerHTML = num1 * num2; } function divideBy() { num1 = document.getElementById("firstNumber").value; num2 = document.getElementById("secondNumber").value; document.getElementById("result").innerHTML = num1 / num2; } OUTPUT
📄 Page
15
Convert temperatures To and from celsius, Fahrenheit in JAVASCRIPT HTML CODE <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Write a JavaScript program to convert temperatures to and from celsius, fahrenheit</title> </head> <body> </body> </html> JAVASCRIPT CODE function cToF(celsius) { var cTemp = celsius; var cToFahr = cTemp * 9 / 5 + 32; var message = cTemp+'\xB0C is ' + cToFahr + ' \xB0F.'; console.log(message); } function fToC(fahrenheit) { var fTemp = fahrenheit; var fToCel = (fTemp - 32) * 5 / 9; var message = fTemp+'\xB0F is ' + fToCel + '\xB0C.'; console.log(message); } cToF(60); fToC(45);
📄 Page
16
OUTPUT 60°C is 140 °F. 45°F is 7.222222222222222°C.
📄 Page
17
Find the largest Of three given integers HTML CODE <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JavaScript program to find the largest of three given integers.</title> </head> <body> </body> </html> JAVASCRIPT CODE function max_of_three(x, y, z) { max_val = 0; if (x > y) { max_val = x; } else { max_val = y; } if (z > max_val) { max_val = z; } return max_val; } console.log(max_of_three(1,0,1));
📄 Page
18
console.log(max_of_three(0,-10,-20)); console.log(max_of_three(1000,510,440)); Output: 1 0 1000
📄 Page
19
Reverse a given string HTML CODE <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JavaScript program to reverse a given string.</title> </head> <body> </body> </html> JAVASCRIPT CODE function string_reverse(str) { return str.split("").reverse().join(""); } console.log(string_reverse("jsresource")); console.log(string_reverse("www")); console.log(string_reverse("JavaScript")); OUTPUT ecruosersj www tpircSavaJ
📄 Page
20
Replace every character with the character following it in the alphabet HTML CODE <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JavaScript program to replace every character in a given string with the character following it in the alphabet.</title> </head> <body> </body> </html> JAVASCRIPT CODE function string_reverse(str) function LetterChanges(text) { //https://goo.gl/R8gn7u var s = text.split(''); for (var i = 0; i < s.length; i++) { // Caesar cipher switch(s[i]) { case ' ': break; case 'z': s[i] = 'a'; break; case 'Z': s[i] = 'A'; break;
The above is a preview of the first 20 pages. Register to read the complete e-book.