Single Choice Question

  1. Which technique is not used to send a request to server?
    1. fetch
    2. ajax
    3. axios
    4. JSON
  2. For ready state of XMLHttpRequest, which one means the request is completed successfully?
    1. UNSENT
    2. OPENED
    3. LOADING
    4. DONE
  3. Which one is not a valid method of XMLHttpRequest?
    1. getResponseHeader
    2. setRequestHeader
    3. send
    4. open
  4. For websocket, which event specify the data type of the message received?
    1. open
    2. message
    3. close
    4. error

True or False Question

  1. Ajax is a technology that allows us to send and receive data from server without refreshing the page.
  2. Fetch API is a modern way to send and receive data from server.
  3. WebSocket is a communication protocol that allows two-way communication between a client and a server.
  4. Methods encodeURI will encode all special characters.
  5. XMLHttpRequest has 5 ready states.

Definition of Term

  1. Ajax
  2. Fetch API
  3. WebSocket

Short Answer

  1. What is the complete structure of fetch API?
  2. What is the difference between fetch and ajax?
  3. What is WebSocket?
  4. What is the difference between encodeURI and encodeURIComponent?
  5. How many ready states does XMLHttpRequest have?

Comprehensive Question

  1. Use HTML and CSS to create a simple web page with a form to input the year and month, which make the web page display like the following image:

    Use JavaScript to calculate the maximum days of the month based on the year and month input by user. Finish the below functions：

    1. function isLeap(year): Judge whether the year is a leap year or not.
    2. function getMaxDaysOfMonth(year,month): Get the maximum number of days in a month.
    3. function validateYear(year): Judge whether the year is valid(1900-2100).
    4. function validateMonth(month): Judge whether the year is valid(1-12).
    5. function calculateDays():Call this function when the button is clicked.

  2. Use HTML, CSS and JavaScript to do the calculation of the two numbers input by user.

    The operations include addition, subtraction, multiplication, division, and modulus.

    Here are the images where the questions and answers are displayed:

  3. Use HTML, CSS and JavaScript to guess price of a product based on the given information. When the document is loaded, a random price is generated between 1 and 100. The user can guess the price by entering the number of guesses and the price they think it is. If the guess price is higher than the actual price, the program will display "Higher", otherwise, display "Lower". If the guess price is same as the actual price, the program will display the message such as "Congratulations! Your guessing time is 7".

    Here are the images where the questions and answers are displayed:

  4. Use HTML, CSS and JavaScript to search a value from the array. If the value does not exist, display "The integer does not exist", otherwise, display "Found the integer 23! Indexes are 2, 4, 7".

    Here are the images where the questions and answers are displayed:

  5. Use HTML, CSS and JavaScript to sum all the prices and amount the products in the table.

    Here are the images where the questions and answers are displayed:

  6. Use HTML, CSS and JavaScript to find min value and max value of an array.

    Here are the images where the questions and answers are displayed:

  7. Use HTML, CSS and JavaScript to sort an array. Use the add button to add a number to the array. Use the reset button to clear the array. The sort button can sort the array in ascending order.

    Here are the images where the questions and answers are displayed:

  8. Write four functions to calculate the circumference and area of a circle or rectangle respectively. When the user clicks the calculation button, a prompt box pops up based on the user's selection, asking the user to enter the radius or length and width. Then call the above function to calculate the perimeter or area, reserving two decimal places. And display with a warning box, format example: "Rectangular area: 45.34"

    Here are the images where the questions and answers are displayed:

  9. Create a simple online survey system using HTML, CSS, and JavaScript. Users can fill out the questionnaire and submit their answers. The questionnaire contains many types of questions, such as Single choice question, multiple choice and text input questions. After submitting the questionnaire, display a thank-you message and store the answers in local storage. The application should have a responsive design to ensure good display on different devices.

    Here are the images where the questions and answers are displayed:

  10. Create a simple to-do list application using HTML, CSS, and JavaScript. Users can add new tasks, delete existing tasks, and mark tasks as completed. The application should have a responsive design to ensure good display on different devices. The to-do list should be stored persistently, allowing data to be retained even when the page is refreshed (using the browser's local storage).

    Here are the images where the questions and answers are displayed:

  11. Create a simple image upload and display application using HTML, CSS, and JavaScript. Users can upload images, and the uploaded images will be displayed on the page. Users can delete uploaded images. The application should have a responsive design to ensure good display on different devices. Image data can be stored in the browser's local storage so that it can still be retained after refreshing the page.

    Here are the images where the questions and answers are displayed:

  12. Create a simple note app using HTML, CSS, and JavaScript. Users can add new notes, view all notes and delete notes. Note data can be stored in the local storage of the browser so that it can still be retained after refreshing the page. The application should have a responsive design to ensure good display on different devices.

    Here are the images where the questions and answers are displayed:

  13. Create a simple online shopping cart application using HTML, CSS, and JavaScript. Users can browse the product list. Users can add products to their shopping cart. Users can view the items in their shopping cart. Users can delete items from their shopping cart. Display the total price of the shopping cart. The application should have a responsive design to ensure good display on different devices.

    Here are the images where the questions and answers are displayed:

  14. Create a simple weather query application using HTML, CSS, and JavaScript. Users can input the city name to query the current weather for that city. Display weather information, including temperature, humidity, wind speed, etc. Retrieve weather data based on the city from weather.json in the same directory.

    The weather.json file contains the following information:

    
                {
                  "code": "200",
                  "data": [
                    {
                      "name": "NanJing",
                      "main": {
                        "temp": 30.6,
                        "humidity": 60.3
                      },
                      "wind": {
                        "speed": 9.2
                      }
                    },
                    {
                      "name": "BeiJing",
                      "main": {
                        "temp": 23.5,
                        "humidity": 45.4
                      },
                      "wind": {
                        "speed": 3.2
                      }
                    }
                  ]
                }

    Here are the images where the questions and answers are displayed:

  15. Create a simple personal blog application using HTML, CSS, and JavaScript. Users can add new blog posts. Users can view a list of all blog posts. Users can click on the article title to view detailed content. Users can delete blog posts. Blog article data can be stored in the local storage of the browser, so that it can still be retained after refreshing the page.

    Here are the images where the questions and answers are displayed:

  16. Create a simple online course management system using HTML, CSS, and JavaScript. Users can browse the course list. Users can add new courses. Users can view course details. Users can edit course information. Users can delete courses. Course data can be stored in the local storage of the browser so that it can still be retained after refreshing the page.

    Here are the images where the questions and answers are displayed: