How to enter in javascript

JavaScript is a commonly used programming language that is widely used in many fields such as web development, mobile applications, and servers. As a beginner, if you want to learn JavaScript well, in addition to understanding the basic syntax and common APIs of the language, you also need to master some input methods. This article will introduce in detail several input methods in JavaScript.

1. Prompt box

One of the most basic input methods used in JavaScript is the prompt box, which can pop up a dialog box to prompt the user to enter text. There are three types of prompt boxes: alert, confirm and prompt.

(1) alert

alert is a dialog box that only pops up prompt information. It is often used to display information to the user or remind the user of certain matters. The alert dialog box has only one OK button and cannot obtain user input.

Grammar format:

alert(message);

Example:

alert("Hello World!");

(2) confirm

confirm is a dialog box that requires user confirmation, often used to ask users Whether to perform an operation. The confirm dialog box has two buttons: OK and Cancel, the user can choose according to the situation.

Grammar format:

confirm(message);

Example:

var result = confirm("确定要删除该记录吗？");
if (result == true) {
    deleteRecord();
} else {
    // do nothing
}

(3) prompt

prompt is a dialog box that requires the user to enter text, often used to obtain User enters data. The prompt dialog box has two buttons: OK and Cancel, the user can choose according to the situation. The text entered by the user will be returned as a string.

Grammar format:

prompt(message, default);

Example:

var name = prompt("请输入你的名字：", "张三");
alert("你好，" + name + "！");

2. Input box

In addition to using the prompt box, JavaScript can also pass the input box to enter. Input boxes are generally placed in HTML pages and use JavaScript scripts to obtain and process user-entered data.

(1) Text box

The text box is a common input box that allows users to enter text and obtain the value in the text box through JavaScript scripts. Just add an input element to the HTML page using a text box.

HTML Example:

<input type="text" id="myInput">

JavaScript Example:

var input = document.getElementById("myInput");
var value = input.value;
alert("你输入的是：" + value);

(2) Drop-down box

The drop-down box is a type that only allows the user to select from specified options Input box, JavaScript script can be used to obtain the options selected by the user in the drop-down box.

HTML example:

<select id="mySelect">
  <option>苹果</option>
  <option>香蕉</option>
  <option>橙子</option>
</select>

JavaScript example:

var select = document.getElementById("mySelect");
var optionIndex = select.selectedIndex;
var option = select.options[optionIndex];
var value = option.value;
alert("你选择的是：" + value);

(3) Radio button and check box

Radio button and check box respectively Used to allow the user to select one or more options from multiple options. Using radio buttons and check boxes is similar to using drop-down boxes, using JavaScript scripts to get the options selected by the user.

HTML example:

<input type='radio' name='gender' value='male'>男
<input type='radio' name='gender' value='female'>女

<input type='checkbox' name='fruits' value='apple'>苹果
<input type='checkbox' name='fruits' value='banana'>香蕉
<input type='checkbox' name='fruits' value='orange'>橙子

JavaScript example:

var gender = document.getElementsByName("gender");
for (var i = 0; i < gender.length; i++) {
    if (gender[i].checked) {
        var value = gender[i].value;
        alert("你选择的性别是：" + value);
    }
}

var fruits = document.getElementsByName("fruits");
for (var i = 0; i < fruits.length; i++) {
    if (fruits[i].checked) {
        var value = fruits[i].value;
        alert("你选择的水果是：" + value);
    }
}

3. File upload

In some scenarios, we need users to upload Files, such as uploading avatars, uploading files, etc. In JavaScript, we can create a file upload box through the input element, and then use JavaScript scripts to get the file selected by the user.

HTML Example:

<input type='file' id='myFile'>

JavaScript Example:

var fileInput = document.getElementById('myFile');
var file = fileInput.files[0];
var fileName = file.name;
alert("你选择的文件是：" + fileName);

Summary

The above are several methods of inputting in JavaScript, including prompt boxes and input boxes and file upload. After mastering these input methods, we can easily interact with users and obtain user-entered data. Of course, this is just the basis of JavaScript input. If you want to learn more about JavaScript input, you need to learn more about the JavaScript language itself. I hope this article can be helpful to everyone!

The above is the detailed content of How to enter in javascript. For more information, please follow other related articles on the PHP Chinese website!