前端 - JavaScript - 《Java笔记》

[TOC]

一门客户端脚本语言

增强用户和html的交互，控制html的元素。

JavaScript = ECMAScript + BOM + DOM

ECMAScript

基本语法

  - 于html的结合方式
     - 内部JS：
        - 定义<script>，标签体内部就是js代码
     - 外部JS
        - 定义<script>，通过src属性引入外部的js文件
  - 注释
     - 单行： //注释内容
     - 多行： /* 注释内容 */
  - 数据类型
     - 基本数据类型
        - number
        - string
        - boolean
        - null
        - undefined
     - 引用数据类型：对象
  - 变量
     - 语法
        - var 变量名 = 初始化值;
     - typeof 运算符：
        - 获取变量的类型
  - 运算符
  - 流程控制语句
     - if..else
     - switch
        - switch(变量):

case 值:

     - while
     - do...while
     - for
  - JS特殊语法
     - 语句以 ; 结尾
     - 变量的定义要用var关键字
  - 练习：99乘法表

            <script>
                document.write("<table  align='center'>");
                //1.完成基本的for循环嵌套，展示乘法表
                for (var i = 1; i <= 9 ; i++) {
                    document.write("<tr>");
                    for (var j = 1; j <=i ; j++) {
                        document.write("<td>");        
                        //输出  1 * 1 = 1
                        document.write(i + " * " + j + " = " + ( i*j) +"&nbsp;&nbsp;&nbsp;");
                        document.write("</td>");
                    }
                    /*//输出换行
                    document.write("<br>");*/        
                    document.write("</tr>");
                }        
                //2.完成表格嵌套
                document.write("</table>");        
            </script>
        </head>
        <body>        
        </body>
        </html>

基本对象

Function：函数对象

创建：

var fun = new Function(形式参数列表，方法体) //不用
2. function 方法名称(形式参数列表){
方法体
}
3. var 方法名 = function(形式参数列表){
方法体
}

方法
属性

length ：代表形参个数

特点

1.方法定义时，形参类型不用写,返回值类型也不写
2.方法是一个对象，如果定义名称相同的方法，会覆盖
3.在JS中，方法的调用只于方法的名称有关，和参数列表无关
4.在方法声明中有一个隐藏的内置对象(数组), arguments,封装了所有的实际参数

function add(){
            var sum=0;
            for (var i = 0; i <arguments.length ; i++) {
                sum +=arguments[i];
            }
            return sum;
        }
        var sum = add(1,3,5,6,2,3);
        alert(sum);

调用

方法名称（实际参数列表)

Array：数组对象

创建
- var arr = new Array(元素列表);
- var arr = new Array(默认长度);
- var arr = [元素列表];
```
   var arr1= new Array(1,2,3);
   var arr2= new Array(5);
   var arr3= [1,2,3,4,5];
```
方法
- join() :将数组中的元素按指定的分隔符拼接，返回字符串
- push() :向数组末尾添加一个或更多元素，返回新的长度
属性
- length:数组的长度
特点
- JS中，数组元素的类型是可变的

var arr5= [1,”abc”,true]; //不同类型存放在一个数组里

JS中，数组的长度是可变的
Date：日期对象

创建：
- var date = new Date();
方法：
- toLocaleString() :返回当前date对象对应的时间本地字符串格式
- getTime() :获取毫秒值，返回当前日期时间到1970-1-1零点的毫秒值差
  Math
创建：
- 特点：Math对象不用创建，直接实用 Math.方法名();
方法:
- random() :返回0～1之间的随机数（包含0不包含1）
- ceil(x) :对数进行上舍入
- floor(x) ：对数进行下舍入
- round(x) ：把数四舍五入为最近的整数
属性

        /*
        取1～100的随机整数
         */
        var number = Math.random();
        number=number*100;
        var floor = Math.floor(number);
        var result = floor+1;
        document.write(result);

RegExp:正则表达式对象

正则表达式：定义字符串的组成规则
- 单个字符：[]
  - 如： [a] [ab] [a-zA-Z0-9_]
  - 特殊符号代表特殊含义的单个字符
    - \d : 单个数字字符[0-9]
    - \w : 单个单词字符[a-zA-Z0-9]
- 量词符号：
  - - : 表现出现0次或多次
  - ? : 表示出现0次或1次
  - - : 表示出现1次或多次
  - 例:
    - \w* 单词出现0次或多次
  - {m,n} : 表示 m<=数量<=n
    - m如果缺省:{,n} : 表示最多n次
    - n如果缺省：{m,} : 表示最少m次
- 开始结束符号：
  - ^ :开始
  - $ :结尾
正则对象：
- 创建
  - var reg = new RegExp("正则表达式");
  - var reg = /正则表达式/;
- 方法
  - test(参数) 验证指定的字符串是否符合正则表达式定义的规范
    Global对象
特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用，方法名();
方法：
- encodeURI() :url编码
- decodeURI() :url解码
- encodeURIComponent() :url编码, Component 编码的字符更多
- decodeURIComponent() :url解码
URL编码
- 例如: %E9%9B%A8%E8%90%BD -> 代表”雨落”
- 以上方法就是对url编码以及汉字的互相转译
方法：
- parseInt() :将字符串转为数字
  - 逐一判断每一个字符是否是数字，直到不是数字位置，将前边数字部分转为number
- isNaN(x):判断一个值是否为NaN
- eval() :将JavaScript 字符串转为脚本执行 🌟🌟

DOM

Document Object Model
将标记语言文档的各个组成部分，封装为对象。
截屏2020-10-21 15.47.23.png
W3C DOM标准被分为 3 个不同部分：

核心 DOM - 针对任何结构化文档的标准模型

Document:文档对象

  - 创建（获取）：在html dom模型中可以使用window对象来获取
     - `window.document` 
     - `document` 
  - 方法：
     - 获取Element对象：
        - `getElementById()` : 根据id属性值获取元素对象，id属性值一般唯一
        - `getElementsByTagName()`：根据元素名称获取元素对象们，返回值是一个数组 
        - `getElementsByClassName()`：根据Class属性值获取元素对象们，返回值是一个数组 
        - `getElementsByName()` ：根据name属性值获取元素对象们。返回值是一个数组
     - 创建其他DOM对象
        - `createAttribute(name)` 
        - `createCommnet()` 
        - `createElement()` 
        - `createTextNode()` 
  - 属性

Element：元素对象

  - 创建（获取）：通过document来获取和创建
  - 方法：
     - `removeAttribute()` :删除属性
     - `setAttribute()` :设置属性
  - 案例：

<a>点我试一试</a>
<input type="button" id="btn_set" value="设置属性">
<input type="button" id="btn_remove" value="删除属性">
<script>
    /*
    Element元素对象
     */
    var btn_set = document.getElementById("btn_set");
    btn_set.onclick=function () {
        //获取a标签
        var element_a = document.getElementsByTagName("a")[0];
        element_a.setAttribute("href","https://www.baidu.com");
    }

    var btn_remove = document.getElementById("btn_remove");
    btn_remove.onclick=function () {
        //获取a标签
        var element_a = document.getElementsByTagName("a")[0];
        element_a.removeAttribute("href");
    }
</script>

Attribute：属性对象
Test：文本对象
Comment：注释对象**

Node：节点对象，其他5个的父对象

  - 特点：所有的dom对象都可以被认为是一个节点
  - 方法：
     - CRUDdom树：
        - `appendChild()` ：向节点的子节点列表的结尾添加新的子节点
        - `removeChild()` ：删除（并返回）当前节点的指定字节点
        - `replaceChild()` ：用新节点替换一个子节点
  - 属性:
     - parentNode: 返回当前节点的父节点
  - 案例：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 1px red solid;
        }
        #div1{
            width: 200px;
            height: 200px;
        }
        #div2{
            width: 100px;
            height: 100px;
        }
        #div3{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">div2</div>
        div1
    </div>
    <a href="javascript:void(0)" id="del">删除子节点</a>
    <a href="javascript:void(0)" id="add">添加子节点</a>
    <!--href指向一个js脚本以实现不跳转页面也可点击的效果-->
<script>
    //获取超链接
    var element_a = document.getElementById("del");
    //绑定单击事件
    element_a.onclick = function () {
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        div1.removeChild(div2);
    }
    //获取超链接
    var element_add = document.getElementById("add");
    //绑定单击事件
    element_add.onclick = function () {
        var div1 = document.getElementById("div1");
        //给div1添加子节点
        //创建div节点
        var div3 = document.createElement("div");
        div3.setAttribute("id","div3");
        div1.append(div3);
    }
</script>

HTML DOM - 针对HTML 文档的标准模型

标签体的设置和获取：innerHTML

<script>
var div = document.getElementById("div1");
//获取
var innerHTML = div.innerHTML;
//alert(innerHTML);

//div标签中替换一个文本输入框
//div.innerHTML="<input type='text'>";
//div标签追加文本输入框
div.innerHTML +="<input type='text'>";
</script>

使用html元素对象的属性

控制样式

使用元素的style属性来设置

//修改样式方式1
div1.style.border="1px solid red";
div1.style.width="200px";
//font-size -> fontSize
div1.style.fontSize="20px";

提前定义类选择器的样式，通过元素的className属性来设置其class的属性值

var div2 = document.getElementById("div2");
div2.onclick=function () {
div2.className="d1";
}

XML DOM - 针对 XML 文档的标准模型

DOM的简单学习：

功能：控制html文档内容
代码：获取页面标签（元素）对象 Element
document.getElementById("id值") :通过元素的id获取元素对象
操作Element对象：

设置（修改）属性值

<img id="profile" src="img/profile.jpeg" alt="">
<script>
   //通过ID获取元素对象
   var profile = document.getElementById("profile");
   alert("我要换图片了。。。");
   profile.src="img/screenshot.png";
</script>

修改标签体内容

属性：innerHTML

//获取h1标签对象
var title = document.getElementById("title");
alert("更换内容。。。");
//修改内容
title.innerHTML = "GoodJob!";

事件

事件监听机制

事件：某些操作，如：单击，双击，键盘按下了，鼠标移动了
事件源：组件。如：按钮，文本输入框
监听器：代码
注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发某个监听器代码。

常见事件：

点击事件
- onclick 单击事件
- ondblclick 双击事件
焦点事件
- onblur 失去焦点
  - 一般用于表单验证，如验证用户名是否存在并提示
- onfocus 元素获得焦点
加载事件
- onload 一张页面或一张图被加载完毕
鼠标事件
- onmousedown 鼠标被按下
  - 定义方法时，定义一个形参，接收event对象
  - event对象的button属性可返回鼠标哪个按钮被点击
- onmouseup 鼠标按钮被松开
- onmousemove 鼠标被移动
- onmouseover 鼠标移到某个元素上
- onnmouseout 鼠标从某元素被移开
键盘事件
- onkeydown 键盘被按下
- onkeyup 键盘被松开
- onkeypress 键盘被按下并松开
选中和改变
- onchange 域的内容被改变
- onselect 文本被选中
表单事件
- onsubmit 确认按钮被点击
  - 可以阻止表单的提交
    - 方法返回false则表单被阻止提交
- onreset 重置按钮被点击

事件的简单学习：

功能：某些组件被执行了某些操作后，触发某些代码的执行。
如何绑定事件：
- 直接在html标签上，指定事件的属性(操作)，属性值就是js代码
  - 事件：onclick -> 单击事件
```
<img id="profile" src="img/profile.jpeg" onclick="fun();">
```
- 通过js获取元素对象，指定事件属性，设置函数
```
//获取profile2对象
   var profile2 = document.getElementById("profile2");
   //绑定事件
   profile2.onclick=fun2;
```

案例：图片切换案例

      <img id="profile" src="img/profile.jpeg" alt="">
  <script>
      /*
      更换图片案例
       */
      var profile = document.getElementById("profile");
      var flag=false;//代表图片为profile
      function fun() {
          if(flag){
              profile.src="img/profile.jpeg";
              flag=false;
          }else{
              profile.src="img/screenshot.png";
              flag=true;
          }
      }
      profile.onclick=fun;
  </script>

BOM

概念：Browser Object Model 浏览器对象模型
- 将浏览器的各个组成部分封装成对象
  
  组成
  
  Window：窗口对象
- 创建
- 方法
  - 与弹出框有关的方法
    - alert() :带有消息和确认按钮的警告框
    - confirm() ：带有一段消息以及确认和取消按钮的对话框
      - 如点击确定按钮，则方法返回true
      - 如点击取消按钮，则方法返回false
    - prompt() ：可提示用户输入的对话框
      - 方法返回用户输入的内容
  - 与打开关闭有关的方法
    - open() :打开新的浏览器窗口
    - close() :关闭浏览器窗口
      - 谁调用我，我就关闭谁
  - 与定时器有关的方法
    - setTimeout() : 在指定的毫秒数后调用函数或计算表达式
      - 参数：
        
        js代码或者方法对象
        毫秒值
    - clearTimeout() : 取消由 setTimeout() 方法设置的 timeout
    - setInterval() : 按照指定的周期来调用函数或计算表达式
    - clearInterval() : 取消setInterval设置的timeout
    - 设置定时器和循环定时器方法会返回一个编号，可用于取消定时器
- 案例：轮播图
```
/*
分析：
   1-在页面上使用img标签展示图片
   2-定义一个方法，修改图片对象的src的属性
   3-定义一个定时器，每隔3秒调用方法一次
*/

//修改图片src属性
var number =1;
function fun() {
   number ++;
   number=number%3;
   number++;

   console.log(number);
   var img = document.getElementById("img");
   img.src = "img/"+number+".png";
}
//定义定时器
setInterval(fun,3000);
```
- 属性
  - 获取其他BOM对象
    - history
    - location
    - navigator
    - screen
  - 获取DOM对象
    - document
- 特点
  - Window对象不需要创建可以直接使用 window 使用。例: window.方法名()
  - Window引用可以参略。例: 方法名()

Navigator：浏览器对象

Screen：显示器屏幕对象

History：历史记录对象

创建（获取）：
- window.history
- history
方法
- back() :加载history列表中的前一个url
- forward() ：加载history列表中的下一个url
- go() ：加载history列表中的某一个具体页面
属性
- length : 返回当前窗口历史列表中的 URL 数量
  Location：地址栏对象
创建（获取）
- window.location
- location
方法
- reload() :重新加载当前文档(刷新)
属性：
- href ：设置或返回完整的url
案例： ```javascript
5秒之后，自动跳转到首页
```

JavaScript