実用的 Javaソースコード付きスクリプト例 Code
ジェームズ・ハートマン
⚡ スマートサマリー
実用的 Code 使用例 Javaスクリプトは、ループ、フォーム検証、イベントを使用して日常的なブラウザタスクを解決する方法を示します。この記事では、九九表生成ツール、完全な登録フォーム検証ツール、ホバーで起動するポップアップ、リアルタイムのデジタル時計、そしてこれらのスクリプトの信頼性を維持するための実践方法を紹介します。
これらで構築するもの Javaスクリプト例
以下の各例は、ビルド手順や外部ライブラリを使用せずに、どのブラウザでも実行できる完全なHTMLページです。これらを合わせると、ほぼすべてのブラウザスクリプトに共通する3つのスキル、すなわちデータからのマークアップ生成、ユーザー入力の検証、イベントへの反応を網羅しています。
| 例: | 概念の実践 | 使用された主な方法 |
|---|---|---|
| 九九 | ネストされたループと文字列の構築 | プロンプト、for、while、document.write |
| フォームの検証 | 配列、条件、およびDOMの更新 | getElementById、indexOf、lastIndexOf、innerHTML |
| ポップアップメッセージ | イベント処理 | addEventListener、アラート |
| Digi長い時計 | タイマーと日付の書式設定 | setInterval、Date、padStart、textContent |
基本的な知識 Javaスクリプト 構文は前提としています。ループがまだよくわからない場合は、以下をお読みください。 ループの使い方 Javaスクリプト 始める前に。
例#1: Javaスクリプトの掛け算表
行数と列数をユーザーに尋ねる簡単な掛け算表を作成します。
解決策：
<html>
<head>
<title>Multiplication Table</title>
<script type="text/javascript">
var rows = prompt("How many rows for your multiplication table?");
var cols = prompt("How many columns for your multiplication table?");
if(rows == "" || rows == null)
rows = 10;
if(cols== "" || cols== null)
cols = 10;
createTable(rows, cols);
function createTable(rows, cols)
{
var j=1;
var output = "<table border='1' width='500' cellspacing='0' cellpadding='5'>";
for(i=1;i<=rows;i++)
{
output = output + "<tr>";
while(j<=cols)
{
output = output + "<td>" + i*j + "</td>";
j = j+1;
}
output = output + "</tr>";
j = 1;
}
output = output + "</table>";
document.write(output);
}
</script>
</head>
<body>
</body>
</html>
出力（3行4列）：
1 2 3 4 2 4 6 8 3 6 9 12
Code 説明： 外側の for ループは、反復ごとに 1 つのテーブル行を作成し、内側の while ループはその行に列ごとに 1 つのセルを埋めます。 j 各行の後に1にリセットされるのですが、これは初心者がよく忘れる手順です。このリセットがないと、最初の行にしかセルが含まれなくなってしまいます。
💡ヒント: prompt 関数は常に文字列を返します。 i*j 機能するのは Javaスクリプトは両方のオペランドを乗算用の数値に変換しますが、比較は rows > 5 テキストを比較します。入力をラップします Number() その値が算術演算と比較演算の両方に使用される場合。
例2：JSフォームの例
ユーザーから名、姓、メールアドレス、ユーザーID、パスワード、およびパスワード確認を収集するサンプルフォームプログラムを作成します。すべての入力項目は必須であり、入力されたメールアドレスは正しい形式である必要があります。また、パスワードとパスワード確認のテキストボックスに入力された値は同じである必要があります。検証後、 Javaスクリプトエラーが発生したテキストボックスのすぐ横に、適切なエラーメッセージを赤色で表示する。
ソースコード付きのソリューション Code:
<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
var divs = new Array();
divs[0] = "errFirst";
divs[1] = "errLast";
divs[2] = "errEmail";
divs[3] = "errUid";
divs[4] = "errPassword";
divs[5] = "errConfirm";
function validate()
{
var inputs = new Array();
inputs[0] = document.getElementById('first').value;
inputs[1] = document.getElementById('last').value;
inputs[2] = document.getElementById('email').value;
inputs[3] = document.getElementById('uid').value;
inputs[4] = document.getElementById('password').value;
inputs[5] = document.getElementById('confirm').value;
var errors = new Array();
errors[0] = "<span style='color:red'>Please enter your first name!</span>";
errors[1] = "<span style='color:red'>Please enter your last name!</span>";
errors[2] = "<span style='color:red'>Please enter your email!</span>";
errors[3] = "<span style='color:red'>Please enter your user id!</span>";
errors[4] = "<span style='color:red'>Please enter your password!</span>";
errors[5] = "<span style='color:red'>Please confirm your password!</span>";
for (i in inputs)
{
var errMessage = errors[i];
var div = divs[i];
if (inputs[i] == "")
document.getElementById(div).innerHTML = errMessage;
else if (i==2)
{
var atpos=inputs[i].indexOf("@");
var dotpos=inputs[i].lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=inputs[i].length)
document.getElementById('errEmail').innerHTML = "<span style='color: red'>Enter a valid email address!</span>";
else
document.getElementById(div).innerHTML = "OK!";
}
else if (i==5)
{
var first = document.getElementById('password').value;
var second = document.getElementById('confirm').value;
if (second != first)
document.getElementById('errConfirm').innerHTML = "<span style='color: red'>Your passwords don't match!</span>";
else
document.getElementById(div).innerHTML = "OK!";
}
else
document.getElementById(div).innerHTML = "OK!";
}
}
function finalValidate()
{
var count = 0;
for(i=0;i<6;i++)
{
var div = divs[i];
if(document.getElementById(div).innerHTML == "OK!")
count = count + 1;
}
if(count == 6)
document.getElementById("errFinal").innerHTML = "All the data you entered is correct!!!";
}
</script>
</head>
<body>
<table id="table1">
<tr>
<td>First Name:</td>
<td><input type="text" id="first" onkeyup="validate();" /></td>
<td><div id="errFirst"></div></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" id="last" onkeyup="validate();"/></td>
<td><div id="errLast"></div></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" id="email" onkeyup="validate();"/></td>
<td><div id="errEmail"></div></td>
</tr>
<tr>
<td>User Id:</td>
<td><input type="text" id="uid" onkeyup="validate();"/></td>
<td><div id="errUid"></div></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" id="password" onkeyup="validate();"/></td>
<td><div id="errPassword"></div></td>
</tr>
<tr>
<td>Confirm Password:</td>
<td><input type="password" id="confirm" onkeyup="validate();"/></td>
<td><div id="errConfirm"></div></td>
</tr>
<tr>
<td><input type="button" id="create" value="Create" onclick="validate();finalValidate();"/></td>
<td><div id="errFinal"></div></td>
</tr>
</table>
</body>
</html>
期待される動作:
Empty first name -> Please enter your first name! Email "ann@site" -> Enter a valid email address! Email "ann@site.com" -> OK! Passwords differ -> Your passwords don't match! All six fields valid -> All the data you entered is correct!!!
Code 説明： 3つの配列が並列に動作する。 入力 現在の値を保持します。 エラー 一致するメッセージを保持し、 div 各メッセージを表示するコンテナのIDを保持します。したがって、インデックスはフィールド、そのエラーテキスト、および出力場所をリンクします。電子メールブランチは、最初の文字がアットマークではなく、かつアットマークと最後のドットの間に少なくとも2文字の間隔がある場合にのみアドレスを受け入れます。
⚠️ 警告: クライアント側検証はユーザーエクスペリエンスを向上させますが、セキュリティは提供しません。誰でも無効化できます。 JavaスクリプトまたはPOSTリクエストをエンドポイントに直接送信するため、ここに示されているすべてのルールをサーバー側でも繰り返す必要があります。
例3：イベントを使用したポップアップメッセージ
デモ用ウェブページに「ようこそ!!!」というシンプルなメッセージを表示し、ユーザーがそのメッセージにマウスカーソルを合わせると、「私のウェブページへようこそ!!!」というメッセージが表示されたポップアップが表示されるようにしてください。
解決策：
<html> <head> <title>Event!!!</title> <script type="text/javascript"> function trigger() { document.getElementById("hover").addEventListener("mouseover", popup); function popup() { alert("Welcome to my WebPage!!!"); } } </script> <style> p{ font-size: 50px; position: fixed; left: 550px; top: 300px; } </style> </head> <body onload="trigger();"> <p id="hover">Welcome!!!</p> </body> </html>
期待される動作:
Page loads -> the text "Welcome!!!" appears in large type Mouse hovers -> an alert box shows "Welcome to my WebPage!!!"
Code 説明： リスナーは、本文のonloadイベントで実行されるトリガー関数内にアタッチされます。headタグの解析中はIDが「hover」の段落が存在しないため、読み込みを待つことが重要です。スクリプトを閉じるbodyタグの直前に配置するか、defer属性を追加することで、より簡潔に同じ結果が得られます。
例4：ライブ DigisetIntervalを使用したtalクロック
ページに現在時刻を表示し、1秒ごとに更新します。この例ではタイマーを紹介し、document.write の現代的な代替手段を示します。
<html> <head> <title>Digital Clock</title> </head> <body> <h2 id="clock">--:--:--</h2> <script> function showTime() { const now = new Date(); const hh = String(now.getHours()).padStart(2, "0"); const mm = String(now.getMinutes()).padStart(2, "0"); const ss = String(now.getSeconds()).padStart(2, "0"); // textContent is safer than innerHTML for plain text document.getElementById("clock").textContent = hh + ":" + mm + ":" + ss; } showTime(); // draw immediately setInterval(showTime, 1000); // then refresh every second </script> </body> </html>
期待される動作:
09:05:07 09:05:08 09:05:09 (the heading updates in place once per second)
setIntervalの前にshowTimeを一度呼び出すことで、ページを開いたときに発生する1秒間の遅延を回避できます。時計を停止する必要がある場合は、setIntervalが返す値を使ってclearIntervalを使用してください。
これらを書くためのベストプラクティス Javaスクリプト例
オリジナルの３つの例は、より古い様式の Java脚本。以下のリストは、制作作業用に脚本を翻案する際に変更すべき箇所を示しています。
- document.write を置き換えます: ページ読み込み後に呼び出すと、ドキュメント全体が消去されます。代わりに、要素を作成してtextContentを設定するか、ノードを追加してください。
- すべての変数を宣言してください。 カウンターなどの暗黙的なグローバル変数に頼るのではなく、let と const を使用してください。
i上記のループ内で。 - innerHTML より textContent を優先します。 innerHTMLを使用してユーザーが入力したテキストを挿入すると、クロスサイトスクリプティングの脆弱性が生じる。
- ハンドラーをマークアップの外に移動する： onkeyup属性とonclick属性をaddEventListenerに置き換えることで、動作と構造を分離できます。
- プロンプト入力を変換します: prompt は常に文字列を返すため、比較に使用する前に値を Number() で囲んでください。
- サーバー上で再度検証してください。 ブラウザのチェックは、あくまで利便性を高めるための手段としてのみ扱うべきです。
これらの例をさらに詳しく見ていくには、 Javaスクリプト配列メソッド フォームバリデータで使用される並列配列の場合、 Javaスクリプト文字列 メールの位置チェックについては、 クッキー Javaスクリプト 訪問者が入力した値を記憶する。完成したスクリプトがどこに属するかは、以下を読んで判断してください。 内部と外部 Javaスクリプト.
