JavaScriptでの入力方法

JavaScript は、Web 開発、モバイル アプリケーション、サーバーなどの多くの分野で広く使用されている一般的に使用されるプログラミング言語です。初心者として JavaScript をしっかり学習したい場合は、言語の基本構文と共通 API を理解することに加えて、いくつかの入力メソッドも習得する必要があります。この記事では、JavaScript のいくつかの入力メソッドを詳しく紹介します。

1. プロンプト ボックス

JavaScript で使用される最も基本的な入力方法の 1 つはプロンプト ボックスです。これは、ユーザーにテキストの入力を求めるダイアログ ボックスをポップアップ表示できます。プロンプト ボックスには、アラート、確認、プロンプトの 3 種類があります。

(1)alert

alert は、プロンプト情報のみをポップアップ表示するダイアログ ボックスで、ユーザーに情報を表示したり、ユーザーに特定の事項を思い出させたりするためによく使用されます。警告ダイアログ ボックスには [OK] ボタンが 1 つだけあり、ユーザー入力を取得できません。

文法形式:

alert(message);

例:

alert("Hello World!");

(2)confirm

confirm はユーザーに確認を求めるダイアログ ボックスで、ユーザーに質問するためによく使用されます。操作を実行するかどうか。確認ダイアログボックスには「OK」と「キャンセル」の 2 つのボタンがあり、状況に応じて選択できます。

文法形式:

confirm(message);

例:

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

(3) プロンプト

プロンプトは、ユーザーにテキストの入力を要求するダイアログ ボックスで、よく使用されます。取得するには、ユーザーがデータを入力します。プロンプト ダイアログ ボックスには [OK] と [キャンセル] の 2 つのボタンがあり、ユーザーは状況に応じて選択できます。ユーザーが入力したテキストは文字列として返されます。

文法形式:

prompt(message, default);

例:

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

2. 入力ボックス

プロンプト ボックスの使用に加えて、JavaScript では次のこともできます。入力ボックスを渡して入力します。入力ボックスは通常、HTML ページに配置され、JavaScript スクリプトを使用してユーザーが入力したデータを取得して処理します。

(1) テキスト ボックス

テキスト ボックスは、ユーザーがテキストを入力し、JavaScript スクリプトを通じてテキスト ボックス内の値を取得できる一般的な入力ボックスです。テキスト ボックスを使用して、HTML ページに input 要素を追加するだけです。

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) ラジオ ボタンとチェック ボックス

ラジオ ボタンとチェック ボックスそれぞれユーザーは複数のオプションから 1 つ以上のオプションを選択できます。ラジオ ボタンとチェック ボックスの使用は、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 では、input 要素を通じてファイル アップロード ボックスを作成し、JavaScript スクリプトを使用してユーザーが選択したファイルを取得できます。

HTML 例:

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

JavaScript 例:

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

概要

上記は、プロンプト ボックスや入力ボックスなど、JavaScript で入力するいくつかの方法です。ファイルのアップロード。これらの入力方法をマスターすると、ユーザーと簡単に対話し、ユーザーが入力したデータを取得できるようになります。もちろん、これは JavaScript 入力の基礎にすぎません。JavaScript 入力についてさらに詳しく知りたい場合は、JavaScript 言語自体についてさらに学ぶ必要があります。この記事が皆さんのお役に立てれば幸いです!

以上がJavaScriptでの入力方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。