CODING EXERCISES - JAVASCRIPT, HTML AND JQUERY Coding For Beginners (TAM, JJ [TAM, JJ]) (Z-Library)
, ,
HTML/CSS/JS
No Description
291
Views
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.
AI Reading Assistant
Whole-book reading guide from stratified index samples; jump to passages in the text
AI guide
【One-Line Pitch】
A hands-on exercise collection that teaches web fundamentals by making you build small, complete solutions in JavaScript, HTML, and jQuery. Best for absolute beginners who learn by typing code and seeing immediate results rather than reading long theory.
【Book Arc】
- **Opening (~0%–9%)**: Sets the exercise-driven format with JavaScript warm-ups—printing the current window, formatting the current date, and computing a triangle's area—establishing the HTML-plus-script pairing used throughout.
- **Early (~9%–27%)**: Builds core JavaScript logic through temperature conversion, finding the largest of three integers, reversing strings, letter-shifting, and capitalizing words, each as a self-contained problem.
- **Middle (~27%–64%)**: Shifts to HTML exercises covering hyperlinks, downloads, media attributes, address and aside elements, audio controls, bold text, bidirectional isolation, blockquotes, and the full range of button and form attributes.
- **Late (~64%–82%)**: Introduces jQuery with DOM manipulation tasks—smooth scroll-to-top, disabling the right-click menu, toggling submit buttons, zebra-striping tables, and underlining words.
- **Ending (~82%–91%)**: Closes with practical jQuery effects: changing button text, setting background images, deleting table rows, swapping CSS classes, and setting background colors across selected elements.
【Key Takeaways】
- **Every concept arrives as a runnable exercise** (Opening): the book pairs an HTML shell with a script block so you see input and output side by side, which suits learners who retain syntax through repetition.
- **JavaScript fundamentals are drilled through small utilities** (Early): date formatting, arithmetic, string reversal, and character shifting teach variables, conditionals, loops, and built-in methods without abstract theory.
- **HTML is taught as a catalogue of element behaviors** (Middle): links, media, semantic tags, and form controls are each demonstrated with minimal markup, making the tag-to-browser-result relationship concrete.
- **Form attributes get unusually thorough treatment** (Middle): action, formaction, formtarget, name, autofocus, and disabled are all exercised, which is more detail than many beginner books provide.
- **jQuery is framed as a DOM convenience layer** (Late): selectors, event binding, class manipulation, and CSS property changes are shown as short recipes rather than a full API tour.
- **The exercise format encourages modification** (Late): several snippets include commented-out lines inviting you to uncomment and observe changes, reinforcing experimentation over passive reading.
- **Progressive tool layering** (Ending): the book moves from raw JavaScript to HTML structure to jQuery abstraction, mirroring how a beginner would naturally stack web skills.
【Reading Tips】
- Treat each exercise as a typing drill: reproduce the HTML and script, run it in a browser, then change one value to see what breaks.
- Skim the HTML boilerplate (DOCTYPE, head, meta) after the first few chapters; the real learning is in the script blocks and specific attributes.
- Deep-read the form and button attribute exercises in the middle section—they cover details beginners often miss.
- For the jQuery section, first try solving each task in plain JavaScript, then compare with the jQuery version to understand what the library abstracts away.
- Keep a personal snippet file of the patterns you find most reusable, such as date formatting and class toggling.
【Coverage Limits】
This guide is based on stratified excerpts covering the book's exercise listings and code samples; it does not cover any introductory prose, chapter numbering, or explanatory text that may exist outside the shown exercises.
Passage locations
Excerpt 1
书名: CODING EXERCISES - JAVASCRIPT, HTML AND JQUERY Coding For Beginners (TAM, JJ [TAM, JJ]) (Z-Library) 作者: TAM, JJ [TAM, JJ] CODING EXERCISES JAVASCRIPT, HT...
View in text
Page 15
celsius, fahrenheit</title> </head> <body> </body> </html> JAVASCRIPT CODE function cToF(celsius) { var cTemp = celsius; var cToFahr = cTemp * 9 / 5 + 32; va...
View in text
Excerpt 3
<address> Address: 21,MG Road<br> Burdwan<br> West Bengal. </address> </body> </html> Specify an alternate text for the area if the href attribute is present...
View in text
Excerpt 4
t passes my comprehension how human beings, be they ever so experienced and able, can delight in depriving other human beings of that precious right. Define...
View in text
Recommended for You
{{#thumbnailUrl}}
{{/thumbnailUrl}}
{{^thumbnailUrl}}
{{/thumbnailUrl}}
Loading recommended books...
Failed to load, please try again later
Tip the Site
Scan the WeChat Pay or Alipay code to tip. No login required.
WeChat Pay
Alipay