目次
基本文法
1.導入方法
-
最初
<script> js コード </script>
-
二番目
<script src="js ファイル"></script>
2. 注意事項
-
一行コメント
<script> //これは 1 行のコメントです </script>
-
複数行コメント
<script> /* これは複数行のコメントです */ </script>
3. 入力ステートメントと出力ステートメント
-
プロンプト()、例
prompt("Please enter:"); //このステートメントは、ページに入力ボックスをポップアップし、プロンプトを表示します -
アラート()、例
alert("プロンプト"); -
console.log()、例
console.log("コンソール出力"); -
document.write()、例
document.write("コンテンツをページに出力");
4. 変数と定数
-
JavaScript は弱い型付けの言語であり、変数を定義するときに特定のデータ型を区別する必要はありません
-
ローカル変数を定義する
文法：
let 变量名 = 值;例：
let name = "Zhang San"; let age = 23;
-
グローバル変数を定義する
文法：
变量名 = 值;例：
school = "清華大学";
-
定数を定義する
文法：
const 常量名 = 值;例：
constPI = 3.1415926;
5. プリミティブ データ型
| タイプ | 例証する |
|---|---|
| ブール値 | ブール型、true または false |
| 未定義 | 未定義。つまり、変数の定義時に値が割り当てられません |
| ヌル | null を変数値として宣言する |
| 番号 | 整数または浮動小数点数 |
| 弦 | 弦 |
| bigint | bigint num = 10n などの大きな整数。数値の後に n を追加する必要があります |
元データ型の判定方法：
使用typeof()機能
例：
let l1 = true; document.write(typeof(l1)+"<br/>"); //出力 boolean let l2; document.write(typeof(l2)+"<br/>"); //出力undefined let l3 = null; document.write(typeof(l3)+"<br/>"); //出力オブジェクト、null はオブジェクト プレースホルダーと見なされる let l4 = 123; document.write(typeof(l4 ) +"<br/>"); //出力番号 let l5 = "abc"; document.write(typeof(l5)+"<br/>"); //出力文字列 let l6 = 10n; document . write(typeof(l6)+"<br/>"); //bigint を出力
6. オペレーター
-
JavaScript の演算子は、Java の演算子とほぼ同じです。
-
違い：
-
==文字列の「10」と数値の10など、変数の値が同じかどうかを数値で比較してtrueを返す -
===number は型と値を比較し、文字列 "10" は数値 10 と比較して false を返します -
文字列型の数値計算時に型変換が発生する
-
7. フロー制御文
-
Java と同じですが、フロー制御ステートメントの変数定義構文が異なることに注意してください
8.配列
-
JavaScript 配列の長さと型は無制限
配列を定義するための構文は次のとおりです。
let 数组名 = [元素];例：
let arr = [1,2,3];
-
配列の長さを取得する
使用機能:
数组名.length例：
arr.length;
-
配列のコピー
文法：
数组1 = [...数组2];例：
let a = [1,2,3]; let b = [...a];// 配列 b の内容も 1,2,3
-
配列のマージ
構文:
数组1 = [...数组2,数组3];配列 2 と 3 を 1 にマージします。例：
let a = [1,2,3]; let b = [4,5,6]; let c = [...a,...b];// 配列 c の内容は 1,2,3 ,4 ,5,6
-
文字列から配列へ
文法：
数组 = [...字符串];例：
let s = "lxq"; let a = [...s]; 配列の内容は l, x, q
9.機能
-
JavaScript の関数は Java のメソッドに似ています
-
通常の機能
文法：
関数メソッド名（パラメータ） { メソッド本体; 戻り値; }注: 値を返す必要がない場合は、return ステートメントを記述する必要はなく、パラメーターの型を記述する必要はありません。
-
可変パラメータ
文法：
関数メソッド名 (...パラメータ) { メソッド本体; 戻り値を返す; } -
無名関数
文法：
関数（パラメータ） { メソッド本体; 戻り値を返す; }
ドム
1。概要
-
DOM はドキュメント オブジェクト モデル、つまりドキュメント オブジェクト モデルを指します。
-
HTML ドキュメントのさまざまなコンポーネントをオブジェクトにカプセル化し、これらのオブジェクトを使用して、HTML ドキュメントの追加、削除、変更、およびチェックの動的操作を実行できます。
-
関連オブジェクト:
-
ドキュメント オブジェクトを表すドキュメント
-
要素、要素オブジェクト
-
属性、属性オブジェクト
-
テキスト、テキストオブジェクト
-
2. 要素オブジェクトの操作
-
ドキュメント ドキュメント オブジェクトに従って要素オブジェクトを取得します。
方法 例証する getElementById(id 属性値) id 属性に従って要素オブジェクトを取得します getElementsByTagName(タグ名) タグ名に従って要素オブジェクトを取得する getElementsByName(名前属性値) name 属性に従って要素オブジェクトを取得します getElementsByClassName(クラス属性値) クラス属性に従って要素オブジェクトを取得します -
現在の要素オブジェクトに従って親要素オブジェクトを取得します
子元素对象.parentElement -
ドキュメント オブジェクトから新しい要素オブジェクトを作成する
document.createElement(标签名); -
指定された子要素オブジェクトを親要素に追加します
父元素对象.appendChild(子元素对象); -
親要素は、指定された子要素を削除します
父元素对象.removeChild(子元素对象); -
親要素が古い子要素を新しい子要素に置き換える
父元素对象.replace(新元素,旧元素);
3. 要素内の属性操作
-
要素の属性を設定する
setAttribute(属性名,属性值); -
属性名に基づいて属性値を取得する
getAttribute(属性名); -
属性名で属性を削除
removeAttribute(属性名); -
要素にスタイルを追加する
方法 1:
元素对象.style.样式=值;好き：
let ele = document.getElementById("a"); ele.style.color = "赤";方法 2:
元素对象.className = "类选择器名";
4. 要素内のテキスト操作
-
テキスト コンテンツを設定し、タグを解析しない
元素对象.innerText="文本内容";注: タグを解析しないとは、テキスト コンテンツに HTML タグが含まれている場合、解析されず、テキストとしてのみ扱われることを意味します。
-
テキスト コンテンツの設定、ラベルの解析
元素对象.innerHTML="文本内容";注: ここのテキスト コンテンツは解析されたタグになります
イベント
-
イベントは、特定のコンポーネントが特定のアクションを完了したときに発生するコードです
-
よくある出来事
イベント 例証する オンロード ページまたは画像が読み込まれる オンサブミット フォームが送信されたとき オンクリック マウスクリックイベント ondblclick マウスのダブルクリック オンブラー 要素がフォーカスを失う オンフォーカス 要素がフォーカスされる オンチェンジ フィールドの内容を変更するために使用されます -
イベントをバインドする方法
-
タグの event 属性によるバインディング
例：
<button οclick="トリガーされたアクション"></button>
-
DOM 要素によるバインディング
let b = document.getElementById("btn"); b.onclick=function(){// 匿名メソッドによってトリガーされる操作; }
-
オブジェクト指向
1. クラスの定義方法
-
方法1
文法：
class クラス名 { //コンストラクタ (変数リスト) { 変数代入; } //共通メソッド メソッド名(パラメータリスト) { メソッド本体; 戻り値; } }使用法：
let オブジェクト名 = 新しいクラス名 (実際の変数値); オブジェクト名.変数名; オブジェクト名.メソッド名();
-
方法 2
文法：
//クラス定義時にオブジェクトが作成されている let object name = { 変数名: 変数値, 変数名: 変数値, メソッド名: 関数(パラメータリスト) { メソッド本体; 戻り値; }, メソッド名: 関数(パラメータリスト) { メソッド本体; 戻り値; } };使用法：
オブジェクト名.変数名; オブジェクト名.メソッド名();
2.継承
-
JS の最上位の親クラスは Object です
-
継承には extends キーワードの使用が必要です
文法：
クラスサブクラスは親クラスを拡張{} -
継承パラダイム
class Person{ コンストラクター(名前,年齢){ this.name = 名前; this.age = 年齢; } show (){ document.write(this.name+","+this.age+"<br/>"); } } class Worker extends Person{ constructor(name,age,salary){ //super()调用父类構築方法 super(name,age); this.salary = 給与; } show (){ document.write(this.name+","+this.age+","+this.salary); } } let worker = new Worker("张三",23,15000); worker.show();
組み込みオブジェクト
1.数値オブジェクト
-
parseFloat(s)文字列浮動小数点数を浮動小数点数に変換するメソッド -
parseInt(s)文字列整数を整数に変換するメソッド
2.数学オブジェクト
-
ceil(x)メソッド、切り上げ -
floor(x)方法、切り捨て -
round(x)メソッド、丸め -
random()メソッドは、1 を除く 0 から 1 の間の乱数を返します。 -
pow(x,y)メソッド、x の y 乗
3.データオブジェクト
-
施工方法
方法 例証する 日にち（） 現在のイベントに基づいてオブジェクトを作成する 日付(値) ミリ秒を指定するオブジェクトを作成する Date(年,月[,日,時,分,秒,ミリ]) オブジェクトを作成するフィールドを指定、月は0～11 -
一般的な方法
方法 例証する getFullYear() 年を取得 getMonth() 月を取得する getDate() 日を取得 getHours() 時間を取得する getMinutes() 分を取得する getSeconds() 秒を取得する 時間をもらう（） 時刻の起点からのミリ秒数を返します toLocalString() ローカル日付形式の文字列を返します
4.文字列オブジェクト
-
施工方法
方法 例証する 文字列(値) 指定された文字列に基づいてオブジェクトを作成します let s = "文字列" 直接割り当て -
一般的な方法
方法 例証する 長さのプロパティ 文字列の長さを取得する charAt(インデックス) 指定されたインデックスの文字を取得します indexOf(値) 指定された文字列が出現するインデックス位置を取得し、存在しない場合は -1 を返します 部分文字列 (開始、終了) 頭を含むが尾を含まない、指定された範囲に従って文字列を傍受します 分割(値) 指定された規則に従って文字列を切り取り、配列を返します 交換（古い、新しい） 古い文字を新しい文字に置き換える
5.正規表現オブジェクト
-
施工方法
方法 例証する 正規表現 (ルール) 指定されたルールに従ってオブジェクトを作成する let reg = /^rules$/ 直接割り当て -
マッチングメソッド:
test(字符串)文字列がマッチングルールを満たしているかどうかを確認するために使用されるメソッド
6.配列オブジェクト
-
一般的な方法
方法 例証する プッシュ（要素） 配列の末尾に要素を追加する ポップ（） 配列の末尾を削除する シフト（） 配列の先頭要素を削除 (要素) を含む 配列に指定された要素が含まれているかどうかを判別します 逆行する（） 配列内の要素を逆にする 選別（） 配列要素の並べ替え
7.オブジェクトの設定
-
要素がユニークで、アクセス順序が同じ
-
施工方法：
Set() -
一般的な方法
方法 例証する 追加（要素） 要素を追加 サイズ属性 コレクションの長さを取得する キー() イテレータ オブジェクトを取得する 削除(要素) 指定された要素を削除する -
セット コレクションのトラバーサルの例
let set = new Set(); set.add("a"); set.add("b"); let st = set.keys(); for(let i = 0;i < set.size;i++){ document.write(st.next().value); }
8.Map对象
-
key唯一，存取顺序一致
-
构造方法：
Map() -
常用方法
方法 说明 set(key,value) 向集合添加元素 size属性 获取集合长度 get(key) 根据key获取value entries() 获取迭代器对象 delete(key) 根据key删除键值对 -
Map集合遍历范例
let map = new Map(); map.set(1,"a"); map.set(2,"b"); let et = map.entries(); for(let i = 0;i < map.size;i++){ document.write(et.next().value); }
9.JSON对象
-
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式
-
它是基于ECMAScript规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据
-
简洁和清晰的层次结构使得JSON成为理想的数据交换语言，易于人阅读和编写，同时也易于计算机解析和生成，并有效提升网络传输效率
-
常用方法
方法 说明 stringfy(对象) 将指定对象转换为json格式字符串 parse(字符串) 将指定json格式字符串解析成对象 -
范例
let weather = { city : "北京"; date : "2022-08-08"; temperature : "10~20"; }; let str = JSON.stringfy(weather); let weather2 = JSON.parse(str);
BOM
-
BOM(Browser Object Model)，是指浏览器对象模型
-
将浏览器各个组成部分封装成不同的对象，方便进行操作
-
具体有如下的对象
-
Navigator，表示浏览器对象
-
Window，窗口对象
-
Location，地址栏对象
-
History，窗口历史对象
-
Screen，显示屏幕对象
-
-
Window窗口对象常用功能
-
定时器
-
唯一标识 setTimeout(功能,毫秒值);方法，用于设置一次性定时器，返回一个唯一标识 -
clearTimeout(标识);方法，根据标识取消一次性定时器 -
唯一标识 setInterval(功能,毫秒值);方法，设置循环定时器，返回一个唯一标识 -
clearInterval(标识);方法，根据标识取消循环定时器
-
-
加载事件：
window.onload=触发的事件，用于页面加载完毕时触发的事件
-
-
Location地址栏对象常用功能
-
设置href属性，通过设置这个属性实现浏览器读取并显示新的URL的内容
-