一、JavaScript介绍

Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（ World Wide Web Consortium，万维网联盟）负责制定。

三个组成部分：

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

在这里插入图片描述

JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。
JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。
JavaScript 在 1995 年由 Brendan Eich 发明，并于 1997 年成为 ECMA 标准。
ECMAScript6 (ES6) 是最主流的 JavaScript 版本（发布于 2015 年)。

二、JavaScript引入方式

内部脚本：将JS代码定义在HTML页面中

JavaScript代码必须位于<script></script>标签之间
在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"/>  ×

三、JavaScript基础语法

3.1 书写语法

区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无
注释：
- 单行注释：// 注释内容
- 多行注释：/* 注释内容 */
大括号表示代码块

JavaScript中三种输出语句：

api	描述
window.alert()	警告框
document.write()	在HTML 输出内容
console.log()	写入浏览器控制台

在这里插入图片描述

3.2 变量

关键字	解释
var	声明变量，全局作用域/函数作用域，允许重复声明
let	声明变量，块级作用域，不允许重复声明
const	声明常量，一旦声明，常量的值不能改变

在js中声明变量还需要注意如下几点：

JavaScript 是一门弱类型语言，变量可以存放不同类型的值。
变量名需要遵循如下规则：
- 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
- 数字不能开头
- 建议使用驼峰命名

3.3 数据类型、运算符和流程控制语句

js中的数据类型分为：原始类型和引用类型，具体有如下类型

数据类型	描述
number	数字（整数、小数、NaN(Not a Number)）
string	字符串，单双引皆可
boolean	布尔。true，false
null	对象为空
undefined	当声明的变量未初始化时，该变量的默认值是 undefined

使用 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。
其他类型转为boolean：
- Number：0 和 NaN为false，其他均转为true。
- String：空字符串为false，其他均转为true。
- Null 和 undefined ：均转为false。

流程控制语句：
同Java

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

四、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)

五、JavaScript对象

JavaScript中的对象有很多，主要可以分为如下3大类，参考链接：W3school在线学习文档
第一类：基本对象
在这里插入图片描述
第二类：BOM对象,主要是和浏览器相关的几个对象

第三类：DOM对象，JavaScript中将html的每一个标签都封装成一个对象
在这里插入图片描述

5.1 基本对象

5.1.1 Array

语法格式

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	设置或返回数组中元素的数量。

length属性：

length属性可以用来获取数组的长度，所以我们可以借助这个属性，来遍历数组中的元素，添加如下代码：
```
var arr = [1,2,3,4];
arr[10] = 50;
	for (let i = 0; i < arr.length; i++) {
      
      
	console.log(arr[i]);
}
```

方法：

方法方法	描述
forEach()	遍历数组中的每个有值得元素，并调用一次传入的函数
push()	将新元素添加到数组的末尾，并返回新的长度
splice()	从数组中删除元素

forEach()函数

forEach()函数用来遍历数组的值，这个方法的参数，需要传递一个函数，而且这个函数接受一个参数，就是遍历时数组的值。
```
//e是形参，接受的是数组遍历时的值
arr.forEach(function(e){
      
      
     console.log(e);
})
```
在ES6中，引入箭头函数的写法，语法类似java中lambda表达式，修改上述代码如下：
```
arr.forEach((e) => {
      
      
     console.log(e);
}) 
```
注意的是，没有元素的内容是不会输出的，因为forEach只会遍历有值的元素 。
push()函数

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对象

String对象的创建方式有2种：

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

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

属性和方法
属性：

属性	描述
length	字符串的长度

length属性：

length属性可以用于返回字符串的长度，添加如下代码：
```
//length
console.log(str.length);
```

方法：

方法	描述
charAt()	返回在指定位置的字符
indexOf()	检索字符串
trim()	去除字符串两边的空格
substring()	提取字符串中两个指定的索引号之间的字符

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中的标签被加载成element对象，所以我们也可以通过element对象的属性来操作标签的属性。此时我们再次添加一个按钮，代码如下：
```
<input type="button" id="btn2" value="事件绑定2">
```
我们可以先通过id属性获取按钮对象，然后操作对象的onclick属性来绑定事件，代码如下：
```
document.getElementById('btn2').onclick = function(){
      
      
    alert("按钮2被点击了...");
}
```
浏览器刷新页面，点击第二个按钮，弹框如下：

需要注意的是：事件绑定的函数，只有在事件被触发时，函数才会被调用。

5.4.2 常见事件

事件属性名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开

web前端：JavaScript

目录

一、JavaScript介绍

二、JavaScript引入方式

三、JavaScript基础语法

3.1 书写语法

3.2 变量

3.3 数据类型、运算符和流程控制语句

四、JavaScript函数

五、JavaScript对象

5.1 基本对象

5.1.1 Array

5.1.2 String对象

5.1.3 JSON对象

5.2 BOM对象

5.2.1 Window对象

5.2.2 Location对象

5.3 DOM对象

5.3.1 获取DOM对象

5.4 JavaScript事件

5.4.1 事件绑定

5.4.2 常见事件

猜你喜欢