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.

In order to make your JavaScript learning easier, TipsMake.com has compiled a number of JavaScript exercises with sample solutions for you to practice.

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.

Sample resolution:

 

 

 

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.

Sample resolution:

 

 

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.

Instructions: Use the card to create a button and add the onClick attribute = " ;" (Inside can be any JavaScript command, eg document.write , alert, prompt or function call etc .)

Sample resolution:

 

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 .

Instructions: To get the value of an HTML element, you write .value

For example: msg.value gives us the value of the text named msg.

Sample resolution:

 

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.

Instructions : In the button to create the button, you set the onClick attribute = " ", in this case, you set OnClick =" HienThi (). "This means that when users click (OnClick = Click), the browser calls HienThi () function. , A function must have parentheses, whether or not there are parameters, for example, when calling HienThi function, you must write HienThi ().

Sample resolution:

 

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:

Picture 1 of Summary of JavaScript exercises with sample code Picture 1 Summary of JavaScript exercises with sample code download this picture HERE

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.

Instructions: The value displayed in the title bar of the website is stored in the title attribute of the document object, so to display the information in the title bar, you need to write: document.title = . For example, to display the words "Hello Every body!", Write: document.title "Hello Every body!"

Illustrated:

 

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.

Sample illustration:

  Tính tuổi 

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.

Sample illustration:

  Tinh tuoi 

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.

Requirements: Write a script for users to enter an integer. If the user enters the number 1, open the website https://quantangang.com, if entering the number 2, then open the page https://download.com.vn, if entering the number 3, open the page https://vndoc.com, If you enter a number other than 1, 2 or 3, open the page https://meta.vn.

Instructions: To open any Web page in the current window, write the following:

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

For example: window.open (https://quantrimang.com ) to open the VNN homepage in the current window.

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.

Sample illustration:

  Mở trang web bằng hàm open của đối tượng window. 

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.

Sample illustration:

  Sắp xếp mảng 

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 = "DangKy", 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).

Examples of ways to put JavaScript commands need to be executed when the user clicks the mouse

  1. Onclick = "alert ('Hello world';"
  2. OnClick = ' write ("Welcome to JavaScript");'
  3. OnClick = "var x, y; x = 10; y = 20; alert ('Total is:' + (x + y));"
  4. OnClick = "var Tuoi; Tuoi = txtTuoi.value; KiemTra (Tuoi);"
  5. OnClick = "KiemTra ();"

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 ().

Sample illustration:

  Minh hoạ đưa câu lệnh JavaScript vào các phần tử 

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:

  Thay mau nen bang click chuot 

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.

Instructions: To get the value of a certain HTML element, we write

.value

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

For example: - Hoten.value, DangKy.value, GioiTinh.value, Password.value etc .

Illustrated:

  Đọc giá trị trong hộp text 

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.

Instructions: To change the value of a certain attribute of an HTML element, write the following:

. =

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

For example: HoTen.value = "This is new text", DangKy.value = "Sign Up now", etc.

  Thay đổi giá trị của thuộc tính 

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.

Sample illustration:

  Thay đổi thuộc tính của trang Web 

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

  • The command to change the title is as follows: title = "You have clicked the mouse"
  • 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:
  Hãy click vào nút ở dưới và quan sát tiêu đề 

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 :

Illustrated:

  Hay click vao nut va textbox o duoi va quan sat tieu de 

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.

Illustrated:

 

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.

Illustrated:

  Bạn hãy chọn màu nền: Màu đỏ Màu xanh Màu nâu Màu xanh nhạt

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!".

 Số ký tự đã gõ: 
Thanks for reading the post

Summary of JavaScript exercises with sample code

Please share this article to your friends
« Programming blockchain part 2: Javascript programming language
Learn about ES6 in Javascript »