[CyberSecurityLearning 50] JSの基本+関数+オブジェクト+イベント

その他 2021-03-28 16:47:43 訪問数: null

目次

JavaScriptの概要：

JS

単文

HTMLでJSコードを導入する方法

変数

変数を宣言する

可変型

null和未定義

アレイ

オブジェクト

プロセス制御

ifステートメントの判断

forループ

のために...で

whileループ

一方を行います

関数

オブジェクト

ブラウザの組み込みオブジェクト：

ウィンドウはブラウザをグローバルに表します

画面

ロケーション

ドキュメントは非常に重要です

document.cookie（重要）

DOMを操作する

DOMノード

DOMノードを取得する最も一般的な方法

イベント

1.2回入力したパスワードがJSの実装と一致しているかどうかを判断します

成し遂げる：

テスト：

2.拡張：JS AJAXテクノロジーを使用して、登録時にユーザー名が一意であるかどうかを判断します

AJAX

成し遂げる：

テスト

 

JavaScriptの概要：

JavaScript（略して「JS」）は、軽量で、インタプリタされた、またはジャストインタイムでコンパイルされたプログラミング言語であり、最初に関数を使用します。Webページを開発するためのスクリプト言語として有名ですが、ブラウザ以外の多くの環境でも使用されています。JavaScriptは、プロトタイププログラミング、マルチパラダイム動的スクリプト言語に基づいており、オブジェクト指向、必須、宣言型（Such関数型プログラミングとして）スタイル。

JavaScriptは、1995年にNetscapeのBrendanEichによってNetscapeNavigatorブラウザで最初に設計および実装されました。NetscapeはSunと協力していたため、Netscapeの管理者はJavaのように見せたかったので、JavaScriptと名付けられました。しかし実際には、その文法スタイルは自己とスキームに近いです。

JavaScriptの標準はECMAScriptです。2012年の時点で、すべてのブラウザーはECMAScript 5.1を完全にサポートしており、古いブラウザーは少なくともECMAScript3標準をサポートしています。2015年6月17日、ECMAInternationalはECMAScriptの第6版をリリースしました。正式名称はECMAScript2015ですが、通常はECMAScript6またはES6と呼ばれます。

JS

JSの動作環境はブラウザです

JSはあなただけが考えられないことをすることができます、それができないことは何もありません

（Chromeブラウザ業界標準）

フロントエンドのセキュリティ

解釈される言語
ページが更新されるたびに、JSコードは
上から下に順番に実行され
ます。JSスクリプトに直接アクセスすると、プレーンテキストのコンテンツが返されます
。JSは大文字と小文字を区別します。

クイックスタート

JSはHTMLと混在させることが
でき、HTMLのどこにでも表示できます

単文

出力ステートメント

alert（）; //ポップアップ

console.log（）; //コンソールに出力

HTMLでJSコードを導入する方法

内部JS：<script> </ script>

<script src =“ ./ js / test1.js”> </ script>
<script src =“ http：//localhost/JS/js/test1.js”> </ script>
<script src =“ http：/ /172.168.23.63/JS/js/test1.js”> </ script> 

jsのスクリプトは、外部から導入することができる
。<スクリプト
タイプ= "テキスト/ JavaScriptを" SRC = "はvendors.47ee6caee3579c652820.js"
誠実= "SHA512-D2n5DNLLXR1Pg0RECW6VRkt2hStlq9lyb52AiW1vAXQbklC0SFw0wBvQ9K2lldtGDWyit3AakyxPWHdXieKQIQ ==" 
</ SCRIPT> crossOrigin = "匿名">を

101JS：type = "text / javascript"

変数

変数を宣言する

varを宣言することを強くお勧めし
ます。varを使用して宣言できるのは1回だけです（同じ変数を繰り返し割り当てることができます）。

var name = "ワッフル";
var a = 1;

可変型

数
は4つの算術を行うことができます

文字列とブール値

null和未定義

Nullは、0とは異なる「空の」値を表し、空の文字列「0は数値です」は、長さが0の文字列を表し、nullは「空の」を表します。

他の言語では、Javascriptと同様のnullの表現もあります。たとえば、Javaもnullを使用し、Swiftはnilを使用し、PythonはNoneを使用します。

ただし、Javascriptには、「未定義」を意味するnullに似た別の未定義があります。

Javascriptの設計者は、nullを使用して空の値を示し、値が未定義であることを示すためにアンダーファインドを使用したいと考えていました。事実はこれが役に立たないことを証明しており、2つを区別することはほとんど意味がありません。ほとんどの場合、nullを使用する必要があります。undefinedは、関数パラメーターが渡されたかどうかを判断する場合にのみ役立ちます。

アレイ

配列には、任意のデータ型を含めることができます
var arr = [1,2,3.14、 "GGG"]
配列
arr [0]を呼び出します

オブジェクト

JavaScriptオブジェクトは、キー値で構成される順序付けられていないコレクションのセットです。
配列を定義するときは角かっこを使用し、オブジェクトを定義するときは中かっこを使用します。

var person = {     name： 'Bob'、     age：20、     tags：['js'、 'web']、     city： 'beijing'、     hasCar：true }





オブジェクトを呼び出す

person.name

プロセス制御

ifステートメントの判断

var age = 15;
if (age >= 18){
    alert('adult');
}else{
    alert('teenager');
}

forループ

var x = 0;
var i;
for(i=1; i<=10000; i++){
    x = x + i;
}
x;//50005000

のために...で

var o = {
    name: 'Jack',
    age: 20,
    city: 'Beijing'
};
for (var key in o) {
    console.log(key); 
}
//'name', 'age', 'city'

 

whileループ

var x = 0;
var n = 99;
while (n > 0) {
    x = x + n;
    n = n - 2;
}
x;//2500

一方を行います

var n = 0;
do {
    n = n + 1;
}while (n < 100);
n;//100

関数

関数を定義することの利点は簡単に呼び出すことができます

定義関数関数abs（）{} absは、数値の絶対値を計算するためのものです。

関数abs（-1）;を呼び出します。

 

オブジェクト

オブジェクトを介してブラウザをナビゲートする

ブラウザの組み込みオブジェクト

ブラウザの組み込みオブジェクト：

ウィンドウはブラウザをグローバルに表します

通常、ウィンドウは省略されて直接書き込まれます。ウィンドウはドメイン名のルートに相当し、デフォルトで省略できます。

オブジェクトのプロパティにアクセスするには、いくつかのポイントを使用する必要があります。

ブラウザ関連情報

FirefoxはNetscapeが所有しています

画面

画面情報

ロケーション

現在のページのURL情報を取得します

ドキュメントは非常に重要です

現在のインターフェースを表します

document.cookie（重要）

クッキー情報の読み取りと書き込みを完了できます

alert（document.cookie）;

document.cookie = "name = hello";

テスト：

リフレッシュ後

ユーザー名は直接変更されます

ドキュメントオブジェクトモデル（DOM）

DOMを操作する

DOMノード

HTMLドキュメントはブラウザで解析された後のDOMツリーであるため、HTMLの構造を変更するには、Javascriptを使用してDOMを操作する必要があります。

オペレーティング：

    更新：DOMノードのコンテンツを更新します。これは、DOMノードによって表されるHTMLコンテンツを更新することと同じです。

    トラバース：DOMノードの下に新しく追加された子ノードをトラバースしてさらに操作します

    追加：DOMノードの下に子ノードを追加します。これは、HTMLノードを動的に追加するのと同じです。

    削除：HTMLからノードを削除します。これは、DOMノードとそれに含まれるすべてのサブセクションのコンテンツを削除することと同じです。

 DOMノードを操作する前に、さまざまな方法でDOMノードを取得する必要があります
 

DOMノードを取得する最も一般的な方法

document.getElementById（）

document.getElementsByTagName（）

document.getElementsByClassName（）// CSSセレクター

IDはHTMLドキュメント内で一意であるため、document.getElementById（）は唯一のDOMノードを直接見つけることができますdocument.getElementsByTagName（）およびdocument.getElementsByClassName（）はDOMノードのグループを返します。DOMを正確に選択するために、それを見つけることができます。最初に親ノード、次に親ノードから選択してスコープを絞り込みます。

// IDが「test」のノードを返します。

var teest = document.getElementById（ 'test'）；

//最初にIDが「test-table」であるノードを見つけてから、その中のすべてのtrノードを返します：

var trs = document.getElementById（ 'test-table'）。document.getElementsByTagName（ 'tr'）;

//最初にIDが「test-div」であるノードを見つけ、次にその中のすべてのクラスに含まれる赤いノードを返します。

var reds = document.getElementById（ 'test-div'）。document.getElementsByClassName（ 'red'）;

//ノード「test」の下にあるすべての直接の子ノードを取得します。

var cs = test.children;

//ノードテストで最初と2番目の子ノードを取得します。

var first = test.firstElementChild;

var last = test.lastElementChile;

2番目の方法

querySelector（）とquerySelectAll（）を使用するには、select構文を理解してから、条件を使用してノードを取得する必要があります。これはより便利です。

    // querySelectorを介してIDq1のノードを取得します。

    var q1 = document.querySelector（ '＃q1'）;

    // querySelectorAllを使用して、q1ノード内のすべての適格なノードを取得します。

    var ps = q1.querySelectorAll（ 'div.highlighted> p'）;

    注：IE <8の下位バージョンは、querySelectorおよびquerySelectorAllをサポートしていません。IE8は制限付きのみをサポートしています。

厳密に言えば、ここでのDOMノードはElementを指しますが、DOMノードは実際にはNodeです。HTMLでは、NodeにはElement、Comment、CDATA_SECTIONなど、およびルートノードのDocumentタイプが含まれますが、ほとんどの場合、気にするのは要素。これは実際にページ構造を制御するノードであり、他のタイプのノードを無視します。ルートノードDocumentは、グローバル変数documentに自動的にバインドされています。

 

イベント

ユーザートリガーイベント

マウスイベント

     onclick（マウスクリック）、dbclick（マウスダブルクリック）など。

キーボードイベント

フォームイベント

インシデント対応

1.2回入力したパスワードがJSの実装と一致しているかどうかを判断します

成し遂げる：

<script>
function fm（）{     var ps1 = document.getElementById（ 'pas1'）;     var ps2 = document.getElementById（ 'pas2'）;     if（ps1.value！= ps2.value）{         alert（ "Twice password The入力に一貫性がありません。再入力してください "）;         ps1.value =" ";         ps2.value =" ";     } } </ script>









 

別の応答イベントを作成する

<input type = "submit"οnmοuseοver= "fm（）" name = "userSubmit" value = "注册">

<html>
<head>
	<meta charset="utf-8">
	<title>注册--刹那芳华</title>
</head>
<body>
	<h1>刹那芳华BBS 论坛</h1>
<form
	action="./addUser.php"
	method="POST"
>
用户名：<input id="user" type="text" name="userName"><br />
密码：<input id="pas1" type="password" name="userPass1"><br />
确认密码：<input id="pas2" type="password" name="userPass2"><br />
<script>
function fm(){
	var ps1=document.getElementById('pas1');
	var ps2=document.getElementById('pas2');
	if(ps1.value != ps2.value){
		alert("两次密码输入不一致，请重新输入");
		ps1.value="";
		ps2.value="";
	}
}
</script>
<input type="submit" onmouseover="fm()" name="userSubmit" value="注册">
 
</form>
	<hr />
</body>
</html>

パスワードを入力した後、マウスカーソルが登録ボタンに移動すると、

マウス応答イベントが発生し、JSが実行されて、入力された2つのパスワードが一貫しているかどうかが判別されます。

一貫性がない場合は、パスワードが2回間違って入力され、クリアされたことをユーザーに通知するボックスがポップアップ表示されます

テスト：

2.拡張：JS AJAXテクノロジーを使用して、登録時にユーザー名が一意であるかどうかを判断します

AJAX

xmlhttp = new XMLHttpRequest（）; XMLHttpRequestオブジェクトを作成します 

サーバーにリクエストを送信します。

xmlhttp.open（ "GET"、 "./ getUserName.php？q =" + str、true）; 
xmlhttp.send（）;

文字列の形式で応答データを取得するためのresponseText

成し遂げる：

サーバー側の応答ファイル：

getUserName.php

<?php
include "../inc/dblink.inc.php";
?>
<?php
$sql = "SELECT * FROM `users`";
if($results = mysqli_query($link,$sql)){
	while($result=mysqli_fetch_assoc($results)){
		$a[]=$result['name'];
	}
}else{
	mysqli_error($link);
}
 
$q=$_GET["q"];
if (strlen($q) > 0)
{
  $hint="";
  for($i=0; $i<count($a); $i++)
  {
	if($q === $a[$i]){
		$hint=$a[$i];
		break;
	}
  }
}
 echo $hint;
?>
<?php
mysqli_close($link);
?>

ユーザーのマウスが入力ボックスを離れたときに応答イベントonmouseoutを作成し、応答イベントをトリガーし、次のJSを呼び出し、サーバーの./getUserName.phpにget要求を送信し、ユーザーが入力した文字列を渡します。

サーバー（getUserName.php）は、データベースからすべてのユーザー名を抽出し、それらを受信文字列と比較して、比較結果を返します。次のJSは、サーバーから返された情報を処理し、ユーザーインターフェイスで応答を取得します。
 

<script>
function showHint（str）
{   var xmlhttp;   if（str.length == 0）   {     document.getElementById（ "user"）。innerHTML = "";     戻る;   }     xmlhttp = new XMLHttpRequest（）;   xmlhttp.onreadystatechange = function（）   {     if（xmlhttp.readyState == 4 && xmlhttp.status == 200）     {          if（xmlhttp.responseText）{             alert（ "用户名已最初、请重新一入！"）;         }       //document.getElementById("user").innerHTML=xmlhttp.responseText;     }   }   xmlhttp.open（ "GET"、 "./ getUserName.php？q =" + str、true）;   xmlhttp.send（）;













            








 

register.php

<html>
<head>
	<meta charset="utf-8">
	<title>注册--刹那芳华</title>
</head>
<body>
	<h1>刹那芳华BBS 论坛</h1>
<form
	action="./addUser.php"
	method="POST"
>
<script>
function showHint(str)
{
  var xmlhttp;
  if (str.length==0)
  { 
    document.getElementById("user").innerHTML="";
    return;
  }
    xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
		 if(xmlhttp.responseText){
			alert("用户名已存在，请重新输入！");
			
		}
      //document.getElementById("user").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","./getUserName.php?q="+str,true);
  xmlhttp.send();
}
</script>
用户名：<input id="user" type="text" name="userName" onkeyup="showHint(this.value)"><br />
密码：<input id="pas1" type="password" name="userPass1"><br />
确认密码：<input id="pas2" type="password" name="userPass2"><br />
<script>
function fm(){
	ps1=document.getElementById('pas1');
	ps2=document.getElementById('pas2');
	if(ps1.value != ps2.value){
		alert("两次密码输入不一致，请重新输入");
		ps1.value="";
		ps2.value="";
	}
}
</script>
<input type="submit" onmouseover="fm()" name="userSubmit" value="注册">
 
</form>
	<hr />
</body>
</html>

テスト

まず、データベースに入ってユーザーテーブルを表示します。2人のユーザーがいることがわかります[GGG、テスト]

 

GGGデータベースにすでに存在するユーザー名を入力すると、エラーが報告されます

 

データベースに存在しないユーザー名を入力してください、通常

両方の応答イベントは正常に機能します

登録完了

テストは成功しました

詳細については、https：//blog.csdn.net/weixin_43252204/article/details/105717411を参照してください。

おすすめ

転載: blog.csdn.net/Waffle666/article/details/115049174
50
おすすめ
ランキング
図ドロップキャンバス、液体の進展、加速模倣ボール、ボール図波
いいえ。2019年1月7日面接の準備
Microsoft: The Metaverse is coming, here's the cornerstone to protect it
春---- MyBatisの統合
Midjourney の隠されたスキルのロックを解除します。プロンプトを変更すると、4 つの正方形のグリッドが「分裂」します。
ほぼ3とサブトレンドのヒントサイズ値94621721
Kafka監視ツールkafka-eagleのインストールと使用
MobaXterm下载提示输入Master密码，如何使用ResetMasterPassword工具恢复MobaXterm和设置MobaXterm主密码
PCBアンチジャミング対策
IE8フォーカス失敗ソリューション
アーカイブ
もっと
2024-06-05(0)
2024-06-04(0)
2024-06-03(1)
2024-06-02(0)
2024-06-01(1)
2024-05-31(1)
2024-05-30(0)
2024-05-29(1)
2024-05-28(0)
2024-05-27(1)

コードワールド

© 2018 codetd.com