자바스크립트로 입력하는 방법

JavaScript는 웹 개발, 모바일 애플리케이션, 서버 등 다양한 분야에서 널리 사용되는 일반적으로 사용되는 프로그래밍 언어입니다. 초보자로서 JavaScript를 잘 배우고 싶다면 언어의 기본 구문과 공통 API를 이해하는 것 외에도 몇 가지 입력 방법도 마스터해야 합니다. 이 기사에서는 JavaScript의 여러 입력 방법을 자세히 소개합니다.

1. 프롬프트 상자

JavaScript에서 사용되는 가장 기본적인 입력 방법 중 하나는 사용자에게 텍스트를 입력하라는 대화 상자를 팝업할 수 있는 프롬프트 상자입니다. 프롬프트 상자에는 경고, 확인, 프롬프트의 세 가지 유형이 있습니다.

(1) Alert

alert는 프롬프트 정보만 팝업으로 표시하는 대화 상자로, 사용자에게 정보를 표시하거나 특정 사항을 사용자에게 상기시키는 데 자주 사용됩니다. 경고 대화 상자에는 확인 버튼이 하나만 있으며 사용자 입력을 얻을 수 없습니다.

문법 형식:

alert(message);

예:

alert("Hello World!");

(2) verify

confirm은 사용자 확인이 필요한 대화 상자로, 사용자에게 작업 수행 여부를 묻는 데 자주 사용됩니다. 확인 대화 상자에는 확인과 취소의 두 가지 버튼이 있으며 사용자는 상황에 따라 선택할 수 있습니다.

문법 형식:

confirm(message);

예:

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

(3) 프롬프트

프롬프트는 사용자가 텍스트를 입력해야 하는 대화 상자로, 사용자 입력 데이터를 얻는 데 자주 사용됩니다. 프롬프트 대화 상자에는 확인과 취소라는 두 개의 버튼이 있으며 사용자는 상황에 따라 선택할 수 있습니다. 사용자가 입력한 텍스트는 문자열로 반환됩니다.

문법 형식:

prompt(message, default);

예:

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

2. 입력 상자

JavaScript는 프롬프트 상자를 사용하는 것 외에도 입력 상자를 통해 입력할 수도 있습니다. 입력 상자는 일반적으로 HTML 페이지에 배치되며 JavaScript 스크립트를 사용하여 사용자가 입력한 데이터를 얻고 처리합니다.

(1) 텍스트 상자

텍스트 상자는 사용자가 JavaScript 스크립트를 통해 텍스트를 입력하고 텍스트 상자에 값을 얻을 수 있는 일반적인 입력 상자입니다. HTML 페이지에 입력 요소를 추가하려면 텍스트 상자를 사용하세요.

HTML 예:

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

JavaScript 예:

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

(2) 드롭다운 상자

드롭다운 상자는 사용자가 지정된 옵션 중에서 선택할 수 있는 입력 상자입니다. 다운박스는 JavaScript 스크립트 옵션을 통해 얻을 수 있습니다.

HTML 예:

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

JavaScript 예:

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

(3) 라디오 버튼 및 체크 상자

라디오 버튼과 체크 상자는 사용자가 각각 여러 옵션 중에서 하나 이상을 선택할 수 있도록 하는 데 사용됩니다. 라디오 버튼과 확인란을 사용하는 것은 드롭다운 상자를 사용하는 것과 유사하며, JavaScript 스크립트를 사용하여 사용자가 선택한 옵션을 가져옵니다.

HTML 예:

<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 예:

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. 파일 업로드

일부 시나리오에서는 사용자가 아바타 업로드, 파일 업로드 등과 같은 파일을 업로드해야 합니다. JavaScript에서는 입력 요소를 통해 파일 업로드 상자를 만든 다음 JavaScript 스크립트를 사용하여 사용자가 선택한 파일을 가져올 수 있습니다.

HTML 예:

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

JavaScript 예:

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

Summary

위는 프롬프트 상자, 입력 상자 및 파일 업로드를 포함하여 JavaScript로 입력하는 여러 가지 방법입니다. 이러한 입력 방법을 익히면 사용자와 쉽게 상호 작용하고 사용자가 입력한 데이터를 얻을 수 있습니다. 물론 이는 JavaScript 입력의 기초일 뿐입니다. JavaScript 입력에 대해 더 자세히 알고 싶다면 JavaScript 언어 자체에 대해 더 자세히 알아야 합니다. 이 글이 모든 분들께 도움이 되었으면 좋겠습니다!

위 내용은 자바스크립트로 입력하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!