JavaScript_牛客博客

JavaScript笔记

一、JavaScript基础

概念：一门客户端脚本语言
- 运行在客户端浏览器中的，每一个浏览器都有JavaScript的解析引擎
- 脚本语言：不需要编译，直接就可以被浏览器解析执行
功能
- 可以增强用户与HTML页面的交互过程
- 控制HTML元素，让页面有一些动态的效果，增强用户的体验
JavaScript发展
1. JavaScript = ECMAScript（ECMA制定出的客户端脚本语言的标准） + JavaScript特有的东西（BOM + DOM）

二、ECMAScript -- 客户端脚本语言脚本

基本语法
1. 与HTML结合方式
  - 内部JS
    - 定义<script>标签，标签体写js代码
  - 外部JS
    - 定义<script src="js/a.js">标签，通过src属性引入js文件，文件中写js代码
  - 注：
    - <script>可以定义在任意合法位置，但是定义的位置会影响执行的顺序
    - <script>可以定义多个
2. 注释语法
  - 单行注释：//注释内容
  - 多行注释：/*注释内容*/
3. 数据类型
  - 原始数据类型
    - number：数字【整数/小数、NaN(not a number)--一个不是数字的数类型】
    - string：字符串。【用单引号/双引号括住】
    - boolean：true/false
    - null：一个对象为空的占位符
    - undefined：未定义。如果一个变量没有给初始化值，hi被默认赋值为undefined
  - 引用数据类型：对象
4. 变量
  - 变量：一块存储数据的内存空间
  - Java是强类型语言，JS是弱类型语言
    - 强类型：在开辟变量存储空间时，必须定义空间将来存储的数据的类型，只能存储指定类型的数据
    - 弱类型：开辟空间时，不需要定义存储的数据的类型，可以存放任意类型的数据
  - JS定义变量的语法：
    - var 变量名 = 初始化值; 或者var 变量名; 变量名 = xxx可以是任意值
5. 运算符
  - 一元运算符
    - ++、--、+、-(正负号)
      - 在JS中，如果运算数不是运算符要求的类型，那么JS引擎会自动进行运算数的类型转换
      - string转number：字符串字面值是数，则转数，不是则转NaN
      - boolean转number：true转1；false转0【其他的null转0；undefined转NaN 】
  - 算术运算符
    - +、-、*、/【这里注意相除的结果可以是浮点数，因为var是弱类型】
  - 比较运算符
    - >、<、>=、<=、==、====(全等于)
    - 比较双方类型相同
      直接比较
```
字符串之间的比较：按照ANSCII码表的前后顺序，**逐位**进行比较【前一位字符相同则继续比较下一位字符】
数值之间比较：按照数值大小，如果有NaN参与则结果为false
```
    1. 比较双方类型不同
      先进行类型的转换，再进行比较
      ===：全等于 在比较之前，先进行类型的判断，类型不一致则直接返回false，等于说是不进行类型转换
  - 逻辑运算符
    - && 、||、!
    - 当运算数与要求不符时，进行类型转换；其他类型转boolean
      - number：0或NaN为false，其他为真
      - string：除了空字符串(“”)，其他均为true
      - null、undefined：均为false
      - 对象：所有对象均为true【这里可以用在对象的方法调用上，不用显式判断对象是否为空】
  - 三元运算符
    - 表达式 ? 表达式 : 表达式
6. 流程控制语句
  1. if...else
  2. while
  3. do...while
  4. switch
    - switch语句中可以接收任意原始数据类型
  5. for
7. JS特殊语法
  1. 语法以;结尾，如果一行只有一条语句则;可省略【不建议】
  2. 变量的定义使用var关键字，也可以不使用
    1. 使用var关键字：定义的变量是局部变量
    2. 不使用：定义的变量是全局变量【不建议】

基本的预定义对象

Function：描述一个方法/函数
- 创建
  - 【了解】 var fun = new Function(形参列表, 方法体);
  - ```
  function 方法名 (参数){
      //...方法体
      }
```
- ```
var 方法名 = function (参数列表) {
    //...方法体
    }
```
- 属性：length属性；方法对象的参数的个数
- 特点
  - 方法定义时，形参的类型不用写【因为弱类型都是var的】.返回值类型同上
  - 方法是一个对象，所以同名的方法不会报错，但是会覆盖
  - JS中，方法的调用只2与方法的名称有关，与参数列表无关【未传递足够参数则未传递的为undefined，它被arguments数组封装着
  - 在方法声明中，有一个隐藏的内置对象（数组）arguments，它封装了所有实参
    - ```
    // 循环取arguments的元素   累加求和
    var method3 = function () {
        var sum = 0;
        for (var i = 0; i < arguments.length; i++) {
            // 把所有传递的参数进行累加
            sum += arguments[i];
        }
        return sum; 
    }
    //调用方法，这里可以传递任意参数，都会进行累加
    var result = method3(10, 20, 30, 40, 50);
    document.write(result);
```
- 如何调用
  - 方法名(参数);
Array：数组对象
- 创建
  - 1.1 var arr = new Array(元素列表);
  - 1.2 var arr = new Array(默认长度);
  - 1.3 var arr = [元素列表];
- Array对象的方法
  - join(参数)：将数组中的元素按照指定参数字符串作为分隔符拼接为字符串
  - push(参数)方法：向数组末尾添加一个/多个元素，并返回新的长度
- 属性：length属性；数组的长度
- 特点：
  - JS中，数组元素的类型可变，即数组的元素的类型不固定
  - JS中，数组元素的长度可变，所以访问数组的索引之外的位置，会自动扩容数组，只不过扩容出来的元素未赋值，类型为undefined
Boolean -- Java里包装类类似
Date -- 日期对象
- 创建
  var Date = new Date();
1. 方法
  toLocaleString()方法，格式化为本地习惯的字符串
  toLocaleString()方法，格式化为本地习惯的字符串，只返回年月日
  getTime()方法，获取自时间原点以来的毫秒值
Math
- 创建 -- 不必创建，直接使用即可 Math.方法名();
- 属性 -- Math.PI：圆周率的近似值
- 方法
  - random()方法:返回一个 [0, 1) 之间的随机数
  - ceil()方法，向上取整
  - floor()方法，向下取整
  - round()方法，四舍五入
Number -- Java里包装类类似
String
RegExp --正则表达式对象【定义字符串的组成规则】
1. 正则定语法
  - 单个字符：[abc] -- 匹配abc之间的任意一个字符，或a或b或c
    - 特殊字符\d：单个数字字符 [0-9]
    - 特殊字符\w：单个单词字符 [A-Za-z0-9_]
  - 量词符号
    - ?：表示此符号前一个字符匹配 [出现] 0次或1次
    - *：表示此符号前一个字符匹配 [出现] 0次或任意多次
    - +：表示此符号前一个字符匹配 [出现] 至少1次
    - {m, n}：表示m <= 数量 <= n：匹配一个在 [m, n] 之间的数量
      - 如\w{6,18}：匹配一条字符串，由数个单字符组成，长度不低于6位，不超过18位
      - {, n}：m缺省则表示最多n个
      - {m, }：n缺省则表示最少m个
  - 开始与结束符号
    - ^：行首符号
    - $：行尾符号
2. RegExp对象创建
  1. var reg = new ReqExp("正则式");
    - 使用这种方式要注意\的转义意义，必要时消除其转义含义
  2. var reg = /正则式/;：不能包含引号【字符串】
3. 方法 -- test(参数)方法：验证参数字符串是否符合正则式

Global -- 全局对象

特点：全局对象，这个Global对象中封装的方法不需要对象就可以直接调用 方法名();

方法：

方法	作用
encodeURI()	URL编码
decodeURI()	URL解码
encodeURLComponent()	URL编码；编码的字符更多，如 : / = 等等
decodeURLComponent()	URLj解码；编码的字符更多
parseInt()	逐一判断每一个字符是否为数字，直到不是数字为止，将前边数字部分转换为数值
isNaN()	判断一个值是否是NaN
eval()	将JS的字符串转换为脚本执行

URL编码：

HTTP协议传输数据不支持中文，把每个中文字符转换为对应二进制,GBK为两个字节(8bit)转一个中文字符， UTF-8为三个字节(12bit)转一个中文字符, 然后每4bit作为一组转换为十六进制，并在两组十六进制数值前面添加 % 称为URL编码

比如UTF-8下单个中文字符中 --> 字节1字节2字节3

--> 24bit --> %两个十六进制(8bit)%两个十六进制(8bit)%两个十六进制(8bit)%

三、BOM 对象

概念：
- Browser Object modle -- 浏览器对象模型将浏览器的各个组成部分封装为对象
组成：
- 当前窗口：窗口对象Window
  - 包含了HTML文档显示的内容：即BOM对象(Document)
- 地址栏：地址栏对象Location
- 控制前进后退：历史记录对象History
- 浏览器本身：浏览器对象Navigator
- 屏幕：显示器对象Screen
Window窗口对象
1. 创建 -- 无需创建
2. 方法
  
  2.1 与弹窗有关的方法
  - alert()：显示带一个确认按钮的警告框。
  - confirm()：显示带有确认按钮和取消按钮的对话框
    - 如果点击确定按钮，方法返回true
    - 取消按钮，返回false
  - prompt()：显示可提示用户输入的对话框。
  2.2 与打开关闭有关的方法
  - open():打开一个新的浏览器窗口
    - 参数可以传递打开新窗口的网址【字符串】返回值是新窗口对象
  - close(浏览器窗口对象):关闭浏览器窗口
    - 谁调用close方法，就关闭谁
  2.3 与定时器有关的方法
  - setTimeOut(参1, 参2): 指定一些时间后执行某些代码；仅执行依次
    - 参1： JS代码或者方法对象
    - 参2：毫秒值
    - 返回值：此定时器的唯一标识可用于取消定时器
  - clearTimeOut(参数):取消setTimeOut()方法设置的定时器
    - 参数是设置定时器时的返回的编号
  - setInterval(参1, 参2):按照指定的周期(毫秒)调用函数；循环执行
  - clearInterval(参数):取消setInterval()设置的循环定时器
3. 属性
  - 获取其他BOM对象
    - history
      - 直接window.history 或者history获取即可，返回值就是获取的对象
    - location
    - Navigator
    - Screen
  - 获取DOM对象 -- document对象
    - 直接 window.document 或者 document 获取即可
4. 特点
  - Window对象不需要创建，直接使用window对象 window.方法名();
  - Window引用可以省略即上一步可以省略为 方法名();
Location对象：地址栏对象
1. 创建（获取）
  - window.location 或者 location
2. 方法
  - reload()方法：重新加载当前文档；刷新此页
3. 属性
  1. href：设置或者返回完整的URL
    - 设置URL：location.href = "https://www.baidu.com";
    - 获取URL：var h1 = location.href;
History对象：历史记录对象
1. 创建（获取） -- window.history 或者 history即可
2. 方法
  - back()方法：加载前一个URL历史记录后退
  - forward()方法：加载下一个URL记录前进
  - go(参数)方法：加载某一个具体页面
    - 参数为正数n：前进n个历史记录
    - 参数为负数n：后退n个历史记录
3. 属性 -- length：返回当前窗口历史列表中的URL记录

四、DOM对象

概念与功能
- 概念：键标记语言文档的各个组成部分，封装为对象，可以使用这些对象，对标记语言文档进行CRUD操作
- - W3C DOM 标准被分为 3 个不同的部分：
    - Core DOM - 所有文档类型的标准模型
      - Document：文档对象
      - Element：元素对象
      - Attribute：属性对象
      - Text：文本对象
      - Comment：注释对象
      - Node：节点对象，其他五个的父对象
    - XML DOM - 针对XML 文档的标准模型
    - HTML DOM - 针对HTML 文档的标准模型
- 控制HTML文档的内容【增删改查】
- 代码：获取页面标签（元素）对象Element[被封装]
  
  document.getElementById("id值")
- 操作获取的对象
  - 修改属性值
    - 明确获取的对象是哪一个？
    - 查看API文档找其中哪些属性可以设置
  - 修改标签体内容
    - 属性：innerHTML
    - 1.获取元素对象
    - 2.使用innerHTML属性修改标签体内容
事件监听机制
1. 功能：某些组件被执行了某些操作后，触发某些代码执行
2. 如何绑定事件 -- 快速入门
- 直接在HTML标签上，指定事件的属性，属性值就是JS代码
  - 事件：onclick -- 单击事件
- 通过JS获取元素对象，指定事件属性【绑定事件】。设置一个函数
  - document.getElementById("id值")获取元素对象【标签】
  - 绑定单击的事件，执行function函数
  - 设置函数的代码
  - ```
  <img src="image/off.png" id="img_off">
  <script>
      /* 
      小练习  点击图片可以进行更换
       */
      // 第二种 通过JS获取元素对象，指定事件属性  设置函数
      // 获取元素对象
      var imgOff = document.getElementById("img_off");
      // 灯开关的标记
      var flag = true;
      // 绑定单击事件  匿名对象方式
      imgOff.onclick = function () {
          if (flag) {
              // 如果灯是灭的，就打开
              imgOff.src = "image/on.png";
              // 同时标记变化
              flag = !flag;
          } else {
              // 否则就关上
              imgOff.src = "image/off.png";
              flag = !flag;}}
```
1. 机制
  - 事件源：组件。如【按钮、文本输入框....】 HTML的标签
  - ***：某些代码 JS代码
  - 注册监听：将时间事件源***结合在一起。当事件源上发生了某个事件，则触发执行某个***代码【比如按钮被点击了就执行某些代码】
2. 常见的事件
  - 点击事件
    - onclick()：单击事件。
    - ondblclick()：双击事件
  - 焦点事件
    - onblur()：当对象失去焦点。一般用于表单的校验【用户输完信息失去焦点，此时可做基本的判断】
    - onfocus()：当对象获得焦点
  - 加载事件
    - onload()：一张页面/一张图片完成加载
  - 鼠标事件
    - onmousedown：鼠标按下
      - 如果定义参数接收event对象获取其button属性，可以知道是哪个鼠标键点击【0是鼠标左键，1中键， 2右键】
        
        document.getElementById("username").onmousedown = function (event) { // alert("鼠标按下"); alert('点击的键是：' + event.button);//0是鼠标左键，1中键， 2右键 }
    - onmouseup：鼠标松开
    - onmousemove：鼠标被移动
    - onmouseover：鼠标移动到某元素上
    - onmouseout：鼠标从某元素移开
  - 键盘事件
    - onkeydown：某个键盘按键按下
      - 同鼠标事件，如果接受event对象并获取其keyCode属性，可以知道事哪个键被按下了【可用于输入完成回车时的提示】
    - onkeyup：某个键盘按键松开
    - onkeypress：某个键盘按键按下并松开
  - 选中与改变事件
    - onchange：域的内容被改变
    - onselect：文本被选中
  - 表单事件
    - onsubmit：确认按钮被点击
    - onreset：重置按钮被点击【了解】
核心DOM模型
1. Document：文档对象
  1. 创建（获取） -- 在HTML页面中 DOM对象可以使用window对象直接获取
    - window.document 或者直接document
  2. 方法
    
    获取Element对象：
    - getElementById：根据标签的id属性值获取元素对象。一般id值唯一。返回一个元素对象
    - getElementsByTagName：根据元素名称获取元素对象们。返回一个元素数组
    - getElementsByClassName：根据Class属性值获取元素对象们。返回一个元素数组
    - getElementsByName：根据name属性值获取元素对象们。返回一个元素数组
    创建其他DOM对象：
    - createAttribute(name)：
    - createComment()
    - createElement()
    - createTextNode()
  3. 属性
2. Element：元素对象
  1. 创建（获取） -- 通过document对象的方法进行创建与获取
  2. 方法
    - setAttribute(参1,参2)：设置属性
      - 参1是要设置的本标签的属性名
      - 参2是属性名的值
    - removeAttribute(参数)：删除属性
      - 参数是要删除的属性的名称
3. Node：节点对象，其他五个对象继承自此对象
  1. 特点：所有的DOM对象都可以被认为是一个节点
  2. 方法
    - appendChild(参数)方法：向节点的子节点列表尾添加新的子节点
      - 参数：要加入的元素对象
    - removeChild(参数)方法：删除（并返回）当前节点的指定子节点
    - replaceChild(新节点, 旧节点)方法：用新节点替换旧的
  3. 属性parentNode -- 返回当前节点的父节点
4. 练习 -- 一个动态表格的实现
  - 详见day-7-bomanddom/Demo14DOM_Practice.html

HTML DOM模型

标签体的设置与获取：inerHTML
1. 可以设置文本内容
2. 也可以直接设置一个或多个标签【tr、td、input等等】
使用HTML元素对象(标签)的属性【查文档】

控制样式

使用元素的style属性来设置

//HTML标签：
//   <div id="div1">Example</div>

// 获取要操作的元素对象
var div1Ele = document.getElementById("div1");
// 第一种方式   在标签上内直接设置，使用标签元素的style属性进行设置

// 让标签被点击样式变化
div1Ele.onclick = function () {
    // 控制样式方式1
    // 直接对象名.style.属性名 = 属性值  即可
    div1Ele.style.border = "1px solid green";
    div1Ele.style.color = '#EAB543';
    div1Ele.style.width = '500px';
    // 控制样式方式2
    // 对于属性名形如font-size的属性  改写为fontSize
    div1Ele.style.fontSize = '30px';
}

提前定义好CSS样式，通过事件引入样式

提前定义好类选择器样式
事件设置元素的className属性来设置class属性值

//HTML标签：
//   <div id="div2">Example</div>

// 第二种方式 提前定义好CSS样式  在标签引入
var div2Ele = document.getElementById("div2");
div2Ele.onclick = function() {
    // 设置div2的class属性为div2
    // div2Ele.setAttribute("class", "d2");
    // 也可以通过其属性className 直接设置其class值，进而点击改变样式
    div2Ele.className = 'd2';
}

/* 类选择器d2 */
.d2 {
    color: #1B9CFC;
    width: 100%;
    border: 2px solid #2C3A47;
    font-size: 70px;
}

五、案例

详见D:\project\project_IDEA\pro_java\Strengthen -foundation\day07-domandbom\Demo19PracticeRegister表单校验.html

JavaScript

JavaScript笔记

一、JavaScript基础

概念：一门客户端脚本语言

功能

JavaScript发展

二、ECMAScript -- 客户端脚本语言脚本

基本语法

注：

基本的预定义对象

三、BOM 对象

概念：

组成：

`Window`窗口对象

`Location`对象：地址栏对象

`History`对象：历史记录对象

四、DOM对象

概念与功能

事件监听机制

核心DOM模型

HTML DOM模型

五、案例

JavaScript

JavaScript笔记

一、JavaScript基础

概念：一门客户端脚本语言

功能

JavaScript发展

二、ECMAScript -- 客户端脚本语言脚本

基本语法

注：

基本的预定义对象

三、BOM 对象

概念：

组成：

Window窗口对象

Location对象：地址栏对象

History对象：历史记录对象

四、DOM对象

概念与功能

事件监听机制

核心DOM模型

HTML DOM模型

五、案例

`Window`窗口对象

`Location`对象：地址栏对象

`History`对象：历史记录对象