---

前言

本篇文章是2023年最新黑马JavaWeb开发笔记05：JavaScript介绍、基本语法、函数、对象、事件的总结，帮助需要学习Web开发的朋友温故而知新。

1. JS介绍
2. JS基本语法
3. JS函数
4. JS对象（Array, String, json, BOM, DOM）
5. JS事件监听

---

一、JavaScript介绍和引入方式

1. 介绍

• 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，使网页可以交互
  • 脚本语言：这样的代码编写出来不需要经过编译，直接经过浏览器解释就可以运行
• JavaScript和java是完全不同的语言，无论是概念还是设计，但是基础语法类似

2. 引入方式

• 第一种方式：内部脚本（将JS代码定义在HTML页面中）
  • JavaScript代码必须位于< script >< /script >标签之间
  • 在HTML文档中，可以在任意地方，放置任意数量的< script >
  • 一般会把脚本置于< body >元素的底部，可改善显示速度

• 第二种方式：外部脚本（将JS代码定义在外部 JS文件中，然后引入到 HTML页面中）
  • 外部JS文件中，只包含JS代码，不包含< script >标签
  • 引入外部js的< script >标签，必须是双标签

3. VScode引入演示

第一种：内部脚本
用最简单的alert进行演示，会出现弹窗：

第二种：外部脚本

• 新建文件夹专门存放js文件，写入语句
  
• 输入scr就可以自动引入js外部文件（选择script: src）
  • 注意：demo.js中只有js代码，没有< script >标签
  • 注意：不能自闭合，否则无效
    
    

二、JavaScript基础语法

1. 书写语法

• 区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
• 每行结尾的分号可有可无（建议写上，更加严谨）
• 大括号表示代码块
• 注释：
  • 单行注释：// 注释内容
  • 多行注释：/* 注释内容 */
• 输出语句（三种方式）
  
• 警告框输出
  
• 在HTML输出内容
  
• 写入浏览器控制台
  （本人用的是Google，F12点击Console就可以看到了）
  

2. 变量

• js声明变量主要通过以下三种关键字
  
  • 不需要指定特定的数据类型，直接用var就可以

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

  • JavaScript 是一门弱类型语言，变量（var）可以存放不同类型的值。
    

  • 变量名需要遵循如下规则：

    • 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
    • 数字不能开头
    • 建议使用驼峰命名

2.1 var

• 作用域比较大，是全局变量
  （在代码块里定义的x仍能被代码块外面的alert接收到）
  
• 可以重复定义（新的定义会取代旧的定义）

2.2 let

• 在ECMAScript 6 新增了 let关键字来定义变量
• 它的用法类似于 var，但是所声明的变量，只在 let关键字所在的代码块内有效
• 不允许重复声明

2.3 const

• 新增了const关键字用来声明常量
• 常量的值无法更改

3. 数据类型、运算符、流程控制语句

3.1 数据类型

• 原始类型 和 引用类型
  
• 使用typeof函数可以返回变量的数据类型
  

3.2 运算符

• ==
  • 只比较值是否相等，不区分数据类型
  • 会自动转换类型进行值得比较
• ===
  • 不光比较值，还要比较类型
  • 如果类型不一致，直接返回false

• js中可以通过parseInt()函数来进行将其他类型转换成数值类型
  

• 在js中，还有非常重要的一点是：0, null, undefined, “”, NaN 理解成false,反之理解成true
  • " "里面虽然是空格，但是还是视为非空字符串，仍然是true
  • ""里面什么都没有，视为空字符串，所以是false
  • 浏览器刷新页面，发现没有任何弹框，因为0理解成false，所以条件不成立
    
  • 浏览器刷新，因为1理解成true，条件成立
    
    

3.3 流程控制语句

if，switch，for等和java保持一致，不再赘述

三、JavaScript函数

1. 第一种定义方式

• 因为JavaScript是弱数据类型的语言，所以有如下几点需要注意：
  • 形式参数不需要声明类型，并且JavaScript中不管什么类型都是let或者var去声明，加上也没有意义。
  • 返回值不需要声明类型，直接return即可
    

2. 第二种定义方式

代码实现：

3. 注意事项

JS中，函数调用可以传递任意个数的参数。

四、JavaScript对象

JavaScript中的对象有很多，主要可以分为如下3大类，我们可以打开W3school在线学习文档，来到首页，在左侧栏找到浏览器脚本下的JavaScript，点击右侧的参考书。

• 可以大体分为3大类：
  • 第一类：基本对象,我们主要学习Array和JSON和String
  • 第二类：BOM对象,主要是和浏览器相关的几个对象
  • 第三类：DOM对象，JavaScript中将html的每一个标签都封装成一个对象

1. 基本对象-Array

Array对象时用来定义数组的。

• 定义：

  • 语法格式1：
    var 变量名 = new Array(元素列表);
  • 语法格式2：
    var 变量名 = [ 元素列表 ];
  • 数组访问:
    arr[索引] = 值;

• 特点：

  • JavaScript中数组相当于java中的集合，数组的长度是可以变化的
    
  • JavaScript是弱数据类型的语言，所以数组中可以存储任意数据类型的值
    
    

• 属性

  • length属性可以用来获取数组的长度，可以用来遍历数组中的元素
    
    

• 方法
  

  • forEach()
    没有元素的内容是不会输出的，forEach只会遍历有值的元素
    
  • push()函数
  • 用于向数组的末尾添加元素，其中函数的参数就是需要添加的元素
    
  • splice()函数
    • 删除数组中的元素，函数中填入2个参数
    • 参数1：表示从哪个索引位置删除
    • 参数2：表示删除元素的个数
      

2. 基本对象-String

• 定义：

  • 方式1
    var 变量名 = new String("…") ;
  • 方式2
    var 变量名 = "…" ;

• 属性
  

• 方法
  
  
  
  
  

3. 基本对象-JSON

3.1 JS自定义对象

• 语法格式
  
  • 调用属性
    对象名.属性名
  • 调用函数
    对象名.函数名()
  • 函数方法的写法可以简化
    

3.2 JavaScript Object Notation 对象标记法

• 通过JavaScript标记法书写的文本
• json这种数据格式的文本经常用来作为前后台交互的数据载体
• 可以搜索json在线解析，可以检查自己写的json语句是否正确
  

3.3 JSON基本语法

• 定义
  var 变量名 = '{"key1": value1, "key2": value2}';
• 示例
  
• 如果这里用alert(jsonstr.name);的话，浏览器会输出undefined，因为此时的jsonstr是字符串，而json.属性名是json对象的获取方式，所以不能这么获取。
• 有两种方法进行json字符串和JS对象的转换方式：
  • 1. JSON字符串转换为JS对象
       var jsObject = JSON.parse(userStr);
  • 2. JS对象转换为JSON字符串
       var jsonStr = JSON.stringify(jsObject);

4. BOM对象

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

4.1 window对象

• window对象指的是浏览器窗口对象，是JavaScript的全部对象

• 对于window对象，我们可以直接使用，并且对于window对象的方法和属性，我们可以省略window

• 例如：我们之前学习的alert()函数其实是属于window对象的
  

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

  • location
    • 地址栏对象
    • 获取：使用window.location获取
    • 属性：href：设置或返回完整的URL
      
      

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

  • confirm()
    
    
    
  • setInterval()
    
    
  • setTimeout()
    
    浏览器会在延时3秒后弹出弹框，点击确定后不会再出现。

5. DOM对象

5.1 DOM介绍

• DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象
• 将标记语言的各个组成部分封装为对应的对象
  • Document：整个文档对象
  • Element：元素对象
  • Attribute：属性对象
  • Text：文本对象
  • Comment：注释对象
• 左边是 HTML 文档内容，右边是 DOM 树
  
• DOM作用
  • 改变 HTML 元素的内容
  • 改变 HTML 元素的样式（CSS）
  • 对 HTML DOM 事件作出反应
  • 添加和删除 HTML 元素

5.2 获取DOM对象

要操作DOM对象的前提是先获取元素对象，然后才能操作。所以学习DOM,主要的核心是：

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

获取DOM中的元素对象

• HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。

• document对象提供的用于获取Element元素对象的api如下表所示：
  
  body里面写入如下内容，用于方法的测试：
  

• document.getElementById()
  根据标签的id属性获取标签对象，id是唯一的，所以获取到是单个标签对象
  

• document.getElementsByTagName()
  根据标签的名字获取标签对象，同名的标签有很多，所以返回值是数组
  

• document.getElementsByName()
  根据标签的name的属性值获取标签对象，name属性值可以重复，所以返回值是一个数组
  

• document.getElementsByClassName()
  根据标签的class属性值获取标签对象，class属性值也可以重复，返回值是数组
  

操作Element对象的属性

• 查询文档资料
  
• 可以看到我们可以通过div标签对象的innerHTML属性来修改标签的内容。此时我们想把页面中的传智教育替换成传智教育666
  

五、JavaScript事件监听

1. 介绍

• 事件
  HTML事件是发生在HTML元素上的 “事情”，例如：按钮被点击；鼠标移到元素上；输入框失去焦点等等…
• 事件监听
  给这些事件绑定函数，当事件触发时，可以自动的完成对应的功能。

2. 事件绑定

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

• 方式1：通过html标签中的事件属性进行绑定
  例如一个按钮，我们对于按钮可以绑定单机事件，可以借助标签的onclick属性，属性值指向一个函数
  

• 方式2：通过DOM中Element元素的事件属性进行绑定
  依据我们学习过得DOM的知识点，我们知道html中的标签被加载成element对象，所以我们也可以通过element对象的属性来操作标签的属性
  

3. 常用事件

---

总结

本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）05：JavaScript介绍、基本语法、函数、对象、事件内容的总结，帮助需要学习Web开发的朋友温故而知新。