Web フロントエンド: JavaScript

プログラミング 2023-07-29 03:51:00 訪問数: null

目次

1. JavaScript の概要

  • Web ページ標準とも呼ばれる Web 標準は一連の標準で構成されており、そのほとんどは W3C (World Wide Web Consortium、World Wide Web Consortium) によって策定されています。

  • 3 つのコンポーネント:

     HTML：负责网页的基本结构（页面元素和内容）。
 CSS：负责网页的表现效果（页面元素的外观、位置等页面样式，如：颜色、大小等）。
 JavaScript：负责网页的行为（交互效果）。

ここに画像の説明を挿入

  • JavaScript（略称：JS）は、跨平台、面向对象スクリプト言語の一つです。Web ページの動作を制御するために使用され、Web ページをインタラクティブにすることができます。
  • JavaScript と Java は、概念も設計もまったく異なる言語です。ただし、基礎となる構文は似ています。
  • JavaScript は 1995 年にブレンダン・アイヒによって発明され、1997 年に ECMA 標準になりました。
  • ECMAScript6 (ES6) は、JavaScript の最も主流のバージョンです (2015 年にリリース)。

2.JavaScriptの導入方法

内部脚本：HTMLページにJSコードを定義します。

  • <script></script>JavaScript コードはタグの間に配置する必要があります
  • HTML ドキュメントには、任意の数の要素を配置できます。<script>
  • 通常、スクリプトは<body>要素の下部に配置されるため、表示速度が向上します。
<script>
    alert("Hello JavaScript")
</script>
建议：将<script></script>放在<body>的底部

外部脚本：外部 JS ファイルで JS コードを定義し、それを HTML ページに導入します。

  • 外部 JS ファイルには JS コードのみが含まれ、<script>タグは含まれません。
  • <script>タグは自動終了できません
<script src="js/demo.js"></script>  √
<script src="js/demo.js"/>  ×

3. JavaScriptの基本文法

3.1 文章の文法

  • 大文字と小文字の区別: Java と同様、変数名、関数名、その他すべてで大文字と小文字が区別されます。
  • 各行末のセミコロンはオプションです
  • ノート：
    • 単一行コメント: // コメントの内容
    • 複数行コメント: /* コメント内容 */
  • 中括弧はコードのブロックを示します

JavaScript には 3 つの出力ステートメントがあります。

API 説明
window.alert() 警告ボックス
document.write() コンテンツをHTMLで出力する
console.log() ブラウザコンソールに書き込む

ここに画像の説明を挿入

3.2 変数

キーワード 説明
だった 変数、グローバル スコープ/関数スコープを宣言し、繰り返し宣言を許可します。
させて 変数の宣言、ブロックレベルのスコープ、繰り返しの宣言は許可されない
定数 定数を宣言します。一度宣言すると、定数の値は変更できません。

jsで変数を宣言する場合は、次の点に注意する必要があります。

  • JavaScript は型指定が弱い言語であり、変数にはさまざまな型の値を格納できます。
  • 変数名は次の規則に従う必要があります。
    • 構成文字には、任意の文字、数字、アンダースコア (_)、またはドル記号 ($) を使用できます。
    • 番号を次で始めることはできません
    • キャメルケース推奨

3.3 データ型、演算子、およびフロー制御ステートメント

jsのデータ型はプリミティブ型と参照型に分けられ、具体的には以下のような型があります。

データの種類 説明
番号 数値 (整数、10 進数、NaN(非数値))
弦 文字列。一重引用符と二重引用符の両方を使用できます
ブール値 ブール値。真/偽
ヌル オブジェクトは空です
未定義 宣言された変数が初期化されていない場合、変数のデフォルト値は未定義です

データ型は、typeof 演算子を使用して取得できます。
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-数据类型</title>
</head>
<body>

</body>
<script>

    //原始数据类型
    alert(typeof 3); //number
    alert(typeof 3.14); //number

    alert(typeof "A"); //string
    alert(typeof 'Hello');//string

    alert(typeof true); //boolean
    alert(typeof false);//boolean

    alert(typeof null); //object 

    var a ;
    alert(typeof a); //undefined
    
</script>
</html>

js の演算規則のほとんどはjava の演算規則と一致しており、具体的な演算子は次のとおりです。

アルゴリズム オペレーター
算術演算子 + 、 - 、 * 、 / 、 % 、 ++ 、 –
代入演算子 = 、 += 、 -= 、 *= 、 /= 、 %=
比較演算子 > 、 < 、 >= 、 <= 、 != 、 == 、 === == は型変換を実行し、 === は型変換を実行しないことに注意してください。
論理演算子 && , || 、！
三項演算子 条件式? true_value: false_value

js では、ほとんどの操作規則は Java の規則と一致しますが、js の == と === には違いがあります。

  • ==: 値が等しいかどうかのみを比較し、データ型を区別しません。型が一致しない場合でも、== は比較のために型を自動的に変換します
  • ===: 値の比較だけでなく型も比較し、型が一致しない場合は直接 false を返します。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-运算符</title>
</head>
<body>
    
</body>
<script>
     var age = 20;
     var _age = "20";
     var $age = 20;
    
     alert(age == _age);//true ，只比较值
     alert(age === _age);//false ，类型不一样
     alert(age === $age);//true ，类型一样，值一样

</script>
</html>

型変換: :

  • 文字列型を数値に変換します。
    • 文字列リテラルを数値に変換します。リテラルが数値でない場合は NaN に変換します。
  • 他の型はブール値に変換されます。
    • 数値: 0 と NaN は false、その他は true。
    • 文字列: 空の文字列は false で、その他はすべて true です。
    • Null と未定義: どちらも false になります。

フロー制御文：
Javaと同じ

 if…else if …else…
 switch
 for 
 while
 do … while

4. JavaScript関数

  • はじめに: 関数 (メソッド) は、特定のタスクを実行するように設計されたコードのブロックです。
  • 定義: JavaScript 関数は function キーワードを通じて定義され、構文は次のとおりです。
//第一种方式
function functionName(参数1,参数2..){
    
    
    //要执行的代码
}
//例如：
function add(a , b){
    
    
    return a + b;
}

//第二种方式
var functionName = function (参数1,参数2..){
    
    
    //要执行的代码
}
//例如：
var add = function(a , b){
    
    
    return a + b;
}
var result = add(10,20);
alert(result)；
  • 知らせ：
    • 仮パラメータには型は必要ありません。JavaScript は型付けが弱い言語であるため
    • 戻り値には型を定義する必要はなく、関数内で直接 return を使用して返すことができます。
  • 呼び出し: 関数名 (実際のパラメーター リスト)。JS では、関数呼び出しは任意の数のパラメーターを渡すことができます。
var result = add(10,20);
alert(result)

5. JavaScript オブジェクト

JavaScript には多くのオブジェクトがあり、主に次の 3 つのカテゴリに分類できます。リンクを参照してください: W3school オンライン学習ドキュメント
最初のカテゴリ: 基本オブジェクト
ここに画像の説明を挿入
2 番目のカテゴリ: BOM オブジェクト、主にブラウザに関連するいくつかのオブジェクト
ここに画像の説明を挿入

3 番目のカテゴリ: DOM オブジェクト、JavaScript は HTML の各タグをオブジェクトにカプセル化します。
ここに画像の説明を挿入

5.1 基本オブジェクト

5.1.1 配列

文法形式

Array オブジェクトは配列を定義するために使用されます。次の 2 つの一般的な構文形式があります。

//方式1：
var 变量名 = new Array(元素列表); 
//例如：
var arr = new Array(1,2,3,4); //1,2,3,4 是存储在数组中的数据（元素）

//方式2：
var 变量名 = [ 元素列表 ]; 
//例如：
var arr = [1,2,3,4]; //1,2,3,4 是存储在数组中的数据（元素）

Java と同様に、索引配列内の値を取得する必要があります。構文は次のとおりです。

arr[索引] = 值;

例：

<script>
    //定义数组
     var arr = new Array(1,2,3,4);
     var arr = [1,2,3,4];
	//获取数组中的值，索引从0开始计数
     console.log(arr[0]);//1
     console.log(arr[1]);//2
</script>

注:
JavaScript の配列は Java のコレクションに相当し、配列の長さは可変であり、JavaScript は弱い型であるため、あらゆる型のデータを格納できます。

//特点: 长度可变 类型可变
var arr = [1,2,3,4];
arr[10] = 50;

console.log(arr[10]);//50
console.log(arr[9]);//undefined
console.log(arr[8]);//undefined

//特点: 长度可变 类型可变
var arr = [1,2,3,4];
arr[10] = 50;
arr[9] = "A";
arr[8] = true;

console.log(arr);

ブラウザのコンソール出力は次のとおりです。
ここに画像の説明を挿入

プロパティとメソッド

属性:

属性 説明
長さ 配列内の要素の数を設定または返します。

  • 長さ属性:

    length 属性を使用して配列の長さを取得できるため、この属性を使用して配列内の要素を走査し、次のコードを追加できます。

    var arr = [1,2,3,4];
arr[10] = 50;
	for (let i = 0; i < arr.length; i++) {
      
      
	console.log(arr[i]);
}

方法：

メソッドメソッド 説明
forEach() 配列内の各値要素を反復処理し、渡された関数を 1 回呼び出します。
押す（） 新しい要素を配列の末尾に追加し、新しい長さを返します
スプライス（） 配列から要素を削除する

  • forEach() 関数

    forEach() 関数は、配列の値を走査するために使用されます。このメソッドのパラメータは関数を渡す必要があり、この関数は走査時に配列の値であるパラメータを受け取ります。

    //e是形参，接受的是数组遍历时的值
arr.forEach(function(e){
      
      
     console.log(e);
})

    ES6 ではアロー関数が導入され、構文は Java のラムダ式に似ています。上記のコードを次のように変更します。

    arr.forEach((e) => {
      
      
     console.log(e);
})

    forEach はトラバースのみを行うため、要素のないコンテンツは出力されないことに注意してください有值的元素 。

  • プッシュ()関数

    Push() 関数は、配列の末尾に要素を追加するために使用されます。関数のパラメータは追加される要素です。
    次のコードを記述します。配列の末尾に 3 つの要素を追加します。

    //push: 添加元素到数组末尾
arr.push(7,8,9);
console.log(arr);

  • splice() 関数

    splice() 関数は配列内の要素を削除するために使用され、関数には 2 つのパラメーターが入力されます。
    パラメータ 1: どのインデックス位置から削除するかを示します。
    パラメータ 2: 削除された要素の数を示します
    。 次のコードは、インデックス 2 から削除、2 つの要素を削除することを示します。

    //splice: 删除元素
arr.splice(2,2);
console.log(arr);

5.1.2 文字列オブジェクト

String オブジェクトを作成するには 2 つの方法があります。

//方式一
var 变量名 = new String("…"); 
//例如：
var str = new String("Hello String");

方式2：
var 变量名 = "…" ; //方式二
例如：
var str = 'Hello String';

プロパティとメソッド
プロパティ:

属性 説明
長さ 文字列の長さ

  • 長さ属性:

    length 属性を使用して文字列の長さを返すことができ、次のコードを追加します。

    //length
console.log(str.length);

方法：

方法 説明
charAt() 指定された位置にある文字を返します
の指標（） 検索文字列
トリム（） 文字列の両側からスペースを削除します
部分文字列() 文字列内の指定された 2 つのインデックス番号の間にある文字を抽出します。

  • charAt()函数：

    charAt()函数用于返回在指定索引位置的字符，函数的参数就是索引。添加如下代码：

    console.log(str.charAt(4));

  • indexOf()函数

    indexOf()函数用于检索指定内容在字符串中的索引位置的，返回值是索引，参数是指定的内容。添加如下代码：

    console.log(str.indexOf("lo"));

  • trim()函数

    trim()函数用于去除字符串两边的空格的。添加如下代码：

    var s = str.trim();
console.log(s.length);

  • substring()函数

    substring()函数用于截取字符串的，函数有2个参数。

    参数1：表示从那个索引位置开始截取。包含

    参数2：表示到那个索引位置结束。不包含

    console.log(s.substring(0,5));

举例：

<script>
    //创建字符串对象
    //var str = new String("Hello String");
    var str = "  Hello String    ";

    console.log(str);

    //length
    console.log(str.length);

    //charAt
    console.log(str.charAt(4));

    //indexOf
    console.log(str.indexOf("lo"));

    //trim
    var s = str.trim();
    console.log(s.length);

    //substring(start,end) --- 开始索引, 结束索引 (含头不含尾)
    console.log(s.substring(0,5));

</script>

浏览器执行效果如图所示：
ここに画像の説明を挿入

5.1.3 JSON对象

自定义对象
其语法格式如下：

var 对象名 = {
    
    
    属性名1: 属性值1, 
    属性名2: 属性值2,
    属性名3: 属性值3,
    函数名称: function(形参列表){
    
    }
};

我们可以通过如下语法调用属性：

对象名.属性名

通过如下语法调用函数：

对象名.函数名()

举例：

<script>
    //自定义对象
    var user = {
        name: "田天赐",
        age: 10,
        gender: "male",
        eat: function(){
             console.log("吃饭");
         }
    }

    console.log(user.name);//田天赐
    user.eat();//吃饭
<script>

json对象

JSON对象：JavaScript Object Notation，JavaScript对象标记法。是通过JavaScript标记法书写的文本。其格式如下：

{
    
    
    "key":value,
    "key":value,
    "key":value
}
//示例：
var userStr = '{"name":"Jerry","age":18, "addr":["北京","上海","西安"]}';

其中，key必须使用引号并且是双引号标记，value可以是任意数据类型。

json这种数据格式的文本经常用来作为前后台交互的数据载体。

如下图所示：前后台交互时，我们需要传输数据，可以使用如图所示的xml格式，可以清晰的描述java中需要传递给前端的java对象。
ここに画像の説明を挿入
但是xml格式存在如下问题：

  • 标签需要编写双份，占用带宽，浪费资源
  • 解析繁琐

所以我们可以使用json来替代，如下图所示：
ここに画像の説明を挿入
类型转换：

  • JSON字符串转为JS对象
var jsObject = JSON.parse(userStr);
  • JS对象转为JSON字符串
 var jsonStr = JSON.stringify(jsObject);

注：json字符串无法直接输出，需要先转换为json对象，才能在界面中进行显示。

value 的数据类型为：

  • 数字（整数或浮点数）
  • 字符串（在双引号中）
  • 逻辑值（true 或 false）
  • 数组（在方括号中）
  • 对象（在花括号中）
  • null

5.2 BOM对象

BOM的全称是Browser Object Model,翻译过来是浏览器对象模型。也就是JavaScript将浏览器的各个组成部分封装成了对象。我们要操作浏览器的部分功能，可以通过操作BOM对象的相关属性或者函数来完成。例如：我们想要将浏览器的地址改为http://www.baidu.com,我们就可以通过BOM中提供的location对象的href属性来完成，代码如下：location.href='http://www.baidu.com'

BOM中提供了如下5个对象：

对象名称 描述
Window 浏览器窗口对象
Navigator 浏览器对象
Screen 屏幕对象
History 历史记录对象
Location d地址栏对象

上述5个对象与浏览器各组成对应的关系如下图所示：
ここに画像の説明を挿入

5.2.1 Window对象

window对象指的是浏览器窗口对象，是JavaScript的全部对象，所以对于window对象，我们可以直接使用，并且对于window对象的方法和属性，我们可以省略window.例如：我们之前学习的alert()函数其实是属于window对象的,其完整的代码如下：

window.alert('hello');

其可以省略window. 所以可以简写成

alert('hello')

所以对于window对象的属性和方法，我们都是采用简写的方式。window提供了很多属性和方法，下表列出了常用属性和方法

window对象提供了获取其他BOM对象的属性：

属性 描述
history 用于获取history对象
location 用于获取location对象
Navigator 用于获取Navigator对象
Screen 用于获取Screen对象

也就是说我们要使用location对象，只需要通过代码window.location或者简写location即可使用

window也提供了一些常用的函数，如下表格所示：

函数 描述
alert() 显示带有一段消息和一个确认按钮的警告框。
comfirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。

  • alert()函数：弹出警告框，函数的内容就是警告框的内容

    <script>
    //window对象是全局对象，window对象的属性和方法在调用时可以省略window.
    window.alert("Hello BOM");
    alert("Hello BOM Window");
</script>

    ここに画像の説明を挿入

  • confirm()函数：弹出确认框，并且提供用户2个按钮，分别是确认和取消。
    添加如下代码：

    var flag = confirm("您确认删除该记录吗?");
alert(flag);

    ここに画像の説明を挿入

  • setInterval(fn,毫秒值)：定时器，用于周期性的执行某个功能，并且是循环执行。该函数需要传递2个参数：
    fn:函数，需要周期性执行的功能代码
    毫秒值：间隔时间
    代码如下：

    //定时器 - setInterval -- 周期性的执行某一个函数
var i = 0;
setInterval(function(){
      
      
     i++;
     console.log("定时器执行了"+i+"次");
},2000);

    ここに画像の説明を挿入

  • setTimeout(fn,毫秒值) ：定时器，只会在一段时间后执行一次功能。参数和上述setInterval一致
    代码如下：

    //定时器 - setTimeout -- 延迟指定时间执行一次 
setTimeout(function(){
      
      
	alert("JS");
},3000);
浏览器打开，3s后弹框，关闭弹框，发现再也不会弹框了。

5.2.2 Location对象

location是指代浏览器的地址栏对象，对于这个对象，我们常用的是href属性，用于获取或者设置浏览器的地址信息，添加如下代码：

//获取浏览器地址栏信息
alert(location.href);
//设置浏览器地址栏信息
location.href = "https://www.baidu.com";

浏览器效果如下：首先弹框展示浏览器地址栏信息，

[外部リンク画像の転送に失敗しました。ソース サイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-toGlp0hB-1681308694440)(assets/1668796236628.png)]

然后点击确定后，因为我们设置了地址栏信息，所以浏览器跳转到百度。

5.3 DOM对象

DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

DOM之前在学习 XML 就接触过，只不过 XML 文档中的标签需要我们写代码解析，而 HTML 文档是浏览器解析。封装的对象分为

  • Document：整个文档对象
  • Element：元素对象
  • Attribute：属性对象
  • Text：文本对象
  • Comment：注释对象

如下图，上面是 HTML 文档内容，下面是 DOM 树：
ここに画像の説明を挿入
主要作用如下：

  • 改变 HTML 元素的内容
  • 改变 HTML 元素的样式（CSS）
  • 对 HTML DOM 事件作出反应
  • 添加和删除 HTML 元素

总而达到动态改变页面效果目的，具体我们可以查看代码中提供的06. JS-对象-DOM-演示.html来体会DOM的效果。

5.3.1 获取DOM对象

DOM的作用是通过修改HTML元素的内容和样式等来实现页面的各种动态效果，但是要操作DOM对象的前提是先获取元素对象，然后才能操作。所以学习DOM,主要的核心就是学习如下2点：

  • 如何获取DOM中的元素对象（Element对象 ，也就是标签）
  • 如何操作Element对象的属性,也就是标签的属性。

接下来我们先来学习如何获取DOM中的元素对象。

HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。document对象提供的用于获取Element元素对象的api如下表所示：

函数 描述
document.getElementById() 根据id属性值获取，返回单个Element对象
document.getElementsByTagName() 根据标签名称获取，返回Element对象数组
document.getElementsByName() 根据name属性值获取，返回Element对象数组
document.getElementsByClassName() 根据class属性值获取，返回Element对象数组

5.4 JavaScript事件

HTML事件是发生在HTML元素上的 “事情”，例如：

  • 按钮被点击
  • 鼠标移到元素上
  • 输入框失去焦点
  • …

而我们可以给这些事件绑定函数，当事件触发时，可以自动的完成对应的功能。这就是事件监听。

5.4.1 事件绑定

JavaScript对于事件的绑定提供了2种方式：

  • 方式1：通过html标签中的事件属性进行绑定

    例如一个按钮，我们对于按钮可以绑定单机事件，可以借助标签的onclick属性，属性值指向一个函数。

    <input type="button" id="btn1" value="事件绑定1" onclick="on()">

    很明显没有on函数，所以我们需要创建该函数，代码如下：

    <script>
    function on(){
        
        
        alert("按钮1被点击了...");
    }
</script>

    浏览器打开，然后点击按钮，弹框如下：
    ここに画像の説明を挿入

  • 方式2：通过DOM中Element元素的事件属性进行绑定

    DOM について学んだ知識ポイントによると、HTML のタグは要素オブジェクトに読み込まれるため、要素オブジェクトの属性を通じてタグの属性を操作することもできることがわかっています。この時点で、ボタンを再度追加します。コードは次のとおりです。

    <input type="button" id="btn2" value="事件绑定2">

    まず id 属性を通じてボタン オブジェクトを取得し、次にオブジェクトの onclick 属性を操作してイベントをバインドします。コードは次のとおりです。

    document.getElementById('btn2').onclick = function(){
      
      
    alert("按钮2被点击了...");
}

    ブラウザがページを更新し、2 番目のボタンをクリックすると、次のようなポップアップ ボックスが表示されます。

    [外部リンク画像の転送に失敗しました。ソース サイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-IzRCOmVr-1681309696800)(assets/1668804696373.png)]

    イベントにバインドされた関数は、イベントがトリガーされたときにのみ呼び出されることに注意してください。

5.4.2 一般的なイベント

イベント属性名 説明する
クリック時 マウスクリックイベント
オンブラー 要素がフォーカスを失います
オンフォーカス 要素がフォーカスを取得します
オンロード ページまたは画像の読み込みが完了しました
送信時 このイベントはフォームが送信されると発生します。
マウスオーバーで マウスを要素の上に移動します
オンマウスアウト マウスを要素から外す

おすすめ

転載: blog.csdn.net/weixin_52357829/article/details/130095695
おすすめ
ランキング
Oracleのクエリ重複フィールド
An error occurred when ssm used count to query data
【Leyes de la Naturaleza】La sabiduría de las multitudes
JavaWebの研究では、（13）を締結 - セッションの使用は、重複送信フォームを防ぎます
Firebase増加サインアップクォータ
[MyBatisフレームワーク]mybatis入門
ハートレスの世界
Djangoのインストールと使用について
[转] UiPath展開アーキテクチャ
mybatis-plusは楽観的なロック変更を使用します
アーカイブ
もっと
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)

コードワールド

© 2018 codetd.com