Summary of JavaScript exercises with sample code

The first part will be about 40 sample JavaScript exercises, the end of the article is the self-explanatory JavaScript exercises, the difficult ones with instructions, specific explanations so that you will not be overwhelmed. Hopefully this topic will be useful for you who are learning about JavaScript programming language.

Let's start!

JavaScript Exercises 1: Let users enter names and ages. Write down the person's name and age on the screen with the document.write function, in which the name is bold, the age is underlined.

JavaScript Exercises 2: Create a button called name welcome , value is "Welcome". A textbox named msg, value = "Welcome to".

Instructions: Use the write method (function) of the document object to create.

JavaScript Exercise 3: Create a button like in Listing 2 and add the following function: When the user clicks on the welcome button, the "Welcome to JavaScript" message displays.

Important note: In JavaScript, a constant surrounded by double quotes or double quotes, for example strings: 'single quote', "double quotes" are valid strings, but you write: 'abc' or "xyz" are invalid strings. In case you want to print the single quotation mark or double-click on the screen, you can prefix it with a character, for example, you can print the words screen: Women's day to the screen with two alert and document functions. in the following ways: alert ("Women's day"), document.write ('Women's day'); alert ("Women" s day "); alert ('Women" s day'); etc .

JavaScript exercise 4: Get (read) the value of an HTML element

Create 2 elements as in example 2 with HTML tags, when the user clicks on the Welcome button, displays the content contained in the text named msg .

5: K JavaScript exercises two function statements in JavaScript and how to link buttons with a function

Create 2 elements as example 2, when the user presses the button, call a function named HienThi, the function displays the function of displaying the content in the text named msg above.

Note: In C, to declare a regular function you write, for example: int HienThi () v . v . However, with JavaScript is a bit different, instead write the function HienThi ().

JavaScript Exercise 6 : Illustrate how to declare and use the Date object in JavaScript to display the system's date and time.

Requirements: Display the date and time of the computer system when the Web page is loaded. The information displayed looks like this:

Summary of JavaScript exercises with sample code Picture 1

Instructions: Use the Date object and use the functions to get things, days, months and years to print information to the screen. Pay attention to the functions of the month and day of the week missing a unit.

Exercise JavaScript 7 : Illustrate the declaration and use the Date object to get the hours, minutes, and seconds of the system.

Requirements: Displays the Time and Minute in the title bar of the window when the Web page is loaded.

JavaScript Exercises 8 : Apply the Date object variable to calculate a person's age.

Requirements: For users to enter their birth year, then display the corresponding age.

Instructions: Use the Date object to get the current year. Age will be equal to the current year minus the year of birth.

JavaScript exercise 9 : Similar to lesson 3 but the year of birth is not greater than the current year.

Instructions: Use the do . while loop to request re-entry if the year of birth> current year.

JavaScript Exercises 10 : Illustrate how to put JavaScript statements into HTML elements to execute when users click and use the open function of the window object to open the web page.

window.open ("Address of the page to open").

So, to solve the problem of the above problem, you need to let the user enter a number and use the switch structure to check and open the corresponding website.

Exercise JavaScript 11 : Illustrate the declaration and use the Array object variable to store the list and how to use the Array object functions such as sort and for . in functions

Requirement: Let the user enter the list of a class's name, then arrange alphabetically and then display the sorted list on the screen, one on each line.

Instructions: Use the for loop to allow the name list to be entered and Save the list into an array, then use the sort method of the array object to sort, then use the for . loop to print the element in the list.

Comment: If you want to descend in the descending direction, after the sort you call the reverse function.

JavaScript Exercises 12 : Illustrating the inclusion of JS statements in a tag when the user clicks the mouse.

Requirements: Create a button (Button) with name = "Register", value = "Register". When the user clicks on this button, the message is "Register for E-Mail service".

Instructions: For HTML elements, such as textbox, button, checkbox, Select etc. Browsers allow us to execute one or more JavaScript statements when the user clicks on those elements. The problem is, how to write those statements?

To write JavaScript commands when a user clicks on an element, in this element's tag, we write the following: OnClick = "JavaScript statements".

"JavaScript statements" here are any JavaScript statements and they must be separated by semicolons. In addition, statements must be enclosed in double quotes (Or single quotes).

According to the above example, when the user clicks:

1: Execute the alert command ('Hello world')

2: Execute the document.write statement ('Welcome to JavaScript');

3: MULTIPLE JavaScript execution

4: Implement many JavaScript commands and have a call to function KiemTra (Tuoi)

5: Make a call to the function KiemTra ().

JavaScript Exercises 13 : Illustrate how to change the properties of an object through writing JavaScript commands.

Create a button with name = ReplaceMauNen, value = "Change background color". When users click on this button, change the background color of the Web page to "green".

Instructions: To change the background color of a Web page to color, you need to change the document attribute.bgColor = "blue". (Red is red, find: magenta, black: black, white: white, yellow: Yellow, light purple: lavender). Thus, this statement will be placed in the onClick section as follows:

Change the background color using the document object

JavaScript Exercises 14 : Illustrating reading values ​​in the text element and displaying them on the screen

Requirements: Create a text box named HoTen. A button named HienThi, value = "Display". When the user clicks on HienThi button, displays the text in that text box with the alert function.

Type the text in the text box and click the Show button

Note : When you want to get the value of a certain element by JavaScript, you have to give it a name, like the example above, to get the value in the text box we have set this text name (name) to HoTen .

Exercise JavaScript 15 : Illustrating changing the value of the textbox

Requirements: Create three text boxes in turn named SoHang1, SoHang2, KetQua and a button named TinhTong, to perform the total calculation. When the user enters two terms in the SoHang1 and SoHang2 boxes, then click the TinhTong button, the total result will be saved in the KetQua text box.

Where: Element name is the value of the name attribute when you create the tag.

Please enter the two numbers and click the Total calculation button

Note: - The value stored in the text box is always a string, so to perform the addition is correct, you need to convert the value to a number using parseFloat (Or parseInt) function as above.

- This change can be applied to other elements such as buttons, checkboxes, etc.

JavaScript Exercises 16 : Illustrating the function call when a user clicks a button

Requirements: Create 4 texts named respectively: MauNen, MauChu, TieuDe, TrangThai and a button named ThayDoi, value is "Change". When the user clicks the Change button, the background color, the title of the document and the status bar of the browser window will be changed with the values ​​in the corresponding text.

Instructions: You can write as many statements in the OnClick attribute as in the previous examples, but if there are multiple commands, the program doesn't look very bright. You can then group the statements into a function and in the OnClick attribute you just call this function.

Enter the values ​​and click the Change button

Comment: In the above example, when the user clicks on the Change button, CapNhat () function will be called.

JavaScript Exercise 17 : Create a button with a value = "Collect". When the user clicks this button, the title of the window will be "You have clicked the mouse".

Instructions: First of all, we need to determine which commands allow us to change the title of the window to "You have clicked", followed by placing the commands so that when the user clicks the mouse, it is done. take the exam as required

1. The command to change the title is as follows: title = "You have clicked the mouse"
2. As we know when the user clicks, the onClick event appears, so the above statement will be placed corresponding to the onClick event, as follows:

JavaScript Exercise 18 : Create a Web page, there are 2 elements: Button element has value = "Send", and a textbox element. Request: when the user clicks the Submit button, the message on the screen is: " You have clicked on the submit button "and when the user clicks on the textbox, the message is" You have clicked on the textbox ".

Instructions: At the request of the lesson, the message "You have clicked on the submit button" appears only when the user clicks the submit button, so the commands that display the message will be placed in the onclick event. of push button. The message "You have clicked on the text box" when the user clicks on the textbox, so the commands to display the message line will be placed in the onclick event of the textbox :

Exercise JavaScript 19 : Create 2 nodes, the first node has value = "Blue", the second button has value = "Red".

Requirements: When the user clicks on the green button, the background color of the document is blue (blue), and when the user clicks on the red button, the background color of the document is: Red (red).

Instructions: The background color attribute of the document is stored in the bgColor property of the document object. This attribute is changeable.

JavaScript exercises 20 :

Create a selection list of 4 colors: red, blue, brown and lavender. When a user selects a color, the background color of the document changes accordingly.

JavaScript Exercise 21 : Create a textarea named NoiDung, a Textbox named: SoKyTu. With the following requirements: When the user types keys into the textarea, the number of characters (Length of strings) contained in that textarea is displayed in the textbox. If the number of characters in textarea typed exceeds 200 characters then the message: "You have typed too many allowed characters!".

Micah Soto

Update 25 May 2019