JavaScript基础知识梳理

1.概念

• 一门客户端脚本语言
  • 运行在客户端浏览器中，每一个浏览器都有JavaScript脚本的解析引擎
  • 脚本语言：不与要编译，直接就可以被浏览器解析执行
• 功能
  • 可以用来增强用户和html页面的交互，可以用来控制html元素，增加动态效果

2.ECMAScript：客户端脚本语言的标准

• 基本语法
  • 与html结合
    • 定义<script>,标签体内容就是js代码
    • 定义<script>,通过src属性引入外部js文件
    • <script>可以定义在html页面的任何地方，但定义位置会影响执行的顺序
    • <script>可以定义多个

3.数据类型

• JavaScript 原始值

原始值指的是没有属性或方法的值。

原始数据类型指的是拥有原始值的数据。

JavaScript 定义了 5 种原始数据类型：

• string
• number ：数字、NaN
• boolean
• null：占位
• undefined

原始值是一成不变的（它们是硬编码的，因此不能改变）。

假设 x = 3.14，能够改变 x 的值。但是您无法改变 3.14 的值。

• 关键词var:用是局部变量，不用是全局变量

• 字符串

• 数组

  • 可以包含任意数据类型

  • 数组大小可变

  • push压入尾部，pop弹出尾部的一个元素(类似于栈)

  • unshift压入头部，shift弹出头部

  • concat()返回一个新数组，不会改变原数组

• 对象

  • var 对象名 = {
        属性名：属性值,
        属性名：属性值，
        属性名：属性值
    }//使用逗号隔开，最后一个键值对不用加括号，键是字符串
    

  • 使用一个不存在的对象属性不会报错，undefined

  • 可以动态的删减属性

    delete 对象名.属性名 //删除属性
    对象名.属性名=值 //添加属性
    

• 流程控制

  • if，while，for，switch

  • for/in 遍历对象键,for/of遍历对象值

    var person = {fname:"Bill", lname:"Gates", age:62}; 
    
    var text = "";
    var x;
    for (x in person) {
        text += person[x];
    }
    

• Map/Set

  var map = new Map([key,value],[key,value],[key,value]);
  map.get("key") //取值 
  map.set("key",value) //存值
  var set = new Set([value,value,value]);
  set.has(value) //判断是否包含
  

• Function对象

  • 创建方式：

    //参数类型不用写
    function 方法名(形式参数列表){
        //方法体
        //不需要定义返回值类型
    }
    
    var 方法名 = function(形式参数列表){
        //方法体
    }
    

  • 方法是一个对象。如果定义一个名称相同的方法会覆盖。

  • 方法的调用只与方法的名称有关与参数列表无关。

    function fun(a,b){
        alert(a+b);
    }
    fun(1) //此时b为undefind
    fun(1,2,3,4) //方法声明中有一个隐藏的内置对象(数组)，arguments,封装所有的实际参数，3，4被其接收。
    //一个使用内置对象的示例
    function add(){
        var sum=0;
        for(var i=0;i<arguments.length;i++){
            sum += arguments[i];
        }
        return sum;
    }
    

• Date日期对象

  var date = new Date(); //创建一个当前浏览器的时区并将日期显示为全文本的字符串
  //Fri Oct 23 2020 11:12:25 GMT+0800 (中国标准时间)
  

• Global对象

  • encodeURL()

    • url编码:将对应的字符串编码成页面所指定格式的16进制码

    • "你好吗？"=%E4%BD%A0%E5%A5%BD%E5%90%97%EF%BC%9F

  • dedecodeURL()

    • url解码

  • encodeURLComponent()

    • 较上面的编\解的字符更多

  • deencodeURLComponent()

  • parseInt()

    • 解析一个字符串转换为数字

  • isNaN ()

    • 检查是否不是数字

  • eval()

    • 将字符串解析为为脚本代码执行

4.DOM

• 概念：Document Object Model 文档对象模型，将标记语言文档的各个组成部分封装为对象，可以使用这些对象对文档进行增删改查的动态操作。

  • DOM树，对应HTML文档的结构

    ​

  • 包括：Core DOM - 所有文档类型的标准模型
    XML DOM - XML 文档的标准模型
    HTML DOM - HTML 文档的标准模型

• document文档对象

  • 获取Element对象：

    • getElementById()：查找具有指定的唯一 ID 的元素

    • getElementsByTagName()：返回所有具有指定标签名称的元素节点，返回值是一个数组

    • getElementsByNam()：返回所有具有指定Name属性的元素节点，返回值是一个数组

    • getElementsByClassName()：返回所有具有指定Class属性的元素节点，返回值是一个数组

    • 代码：获取页面标签对象 Element

        document.getElementById("test") //通过元素(标签)的id值获取指定的标		签
      

  • 创建其他DOM对象：

    • createAttribute(name) 创建拥有指定名称的属性节点，并返回新的 Attr 对象

    • createComment() 创建注释节点

    • createElement() 创建元素节点

      var table = document.createElement("table")
      

    • createTextNode() 创建文本节点

  • 操作标签对象

    • 修改属性值

    • 修改标签体内容

      anchorObject.innerHTML=text
      

• Element元素对象：

  • 获取/创建方法：通过documen来获取和创建

  • 方法：

    • setAttribute()

      elementNode.setAttribute(name,value) //name	必需。规定要设置的属性名 value	必需。规定要设置的属性值。
      

    • removeAttribute()

      elementNode.removeAttribute(name) //name	必需。规定要删除的属性名
      

• Node节点对象：

  • 特点：其他所有DOM对象都可以认为是一个节点

  • 方法：增删改查DOM树：

    • appendChild() 向节点的子节点列表的结尾添加新的子节点

    • removeChild() 删除（并返回）当前节点的指定子节点

      var div1 = getElementById("div1");
      var div2 = getElementById("div2");
      div1.removeChild("div2");
      

    • replaceChild() 用新节点替换一个子节点

  • 属性：

    • parentNode 返回节点的父节点

    • childNodes 返回节点到子节点的节点列表

      var x=nodeObject.childNodes;
      
      for (i=0;i<x.length;i++)
        {
      	//操作
        }
      

• HTML DOM

  • 标签体的设置和获取：innerHTML

    /*修改 HTML 文档内容最简单的方法是，使用 innerHTML 属性。
    如需修改 HTML 元素的内容，使用此语法：*/
    document.getElementById(id).innerHTML = new text
    

  • 使用HTML元素的对象和属性：

    document.getElementById(id).attribute = new value //attribute属性，value值
    <!--本例修改了 <img> 元素的 src 属性的值-->
    <img id="myImage" src="smiley.gif">
    <script>
    document.getElementById("myImage").src = "landscape.jpg";
    </script>
    

  • 设置样式:

  • 方法一：

    document.getElementById(id).style.property = new style
    
    <p id="p2">Hello World!</p>
    
    <script>
    document.getElementById("p2").style.color = "blue";
    </script>
    

  • 方法二：

    document.getElementById(id).className="name"
    
    .name{
        //css样式控制
    }
    

5.事件

• 功能：HTML 事件可以是浏览器或用户做的某些事情：

  • 下面是 HTML 事件的一些例子：

    • HTML 网页完成加载
    • HTML 输入字段被修改
    • HTML 按钮被点击

    通常，当事件发生时，用户会希望做某件事，JavaScript 允许在事件被侦测到时执行代码。

  • 通过 JavaScript 代码，HTML 允许向 HTML 元素添加事件处理程序。

• 事件源：组件，如：按钮，文本输入框... ...

• 事件绑定/注册事件:

  • 直接在html页面上，指定事件的属性(操作),属性值就是js代码

    <button onclick="displayDate()">时间是？</button>
    
    <script>
    function displayDate() {
        document.getElementById("demo").innerHTML = Date();
    }
    </script>
    //代码耦合度太高
    

  • 通过js获取元素对象，指定事件属性，设置一个函数

    <img src="#" id=image>
    
    
    var object = getElementById("image");
    object.onclik=fun;
    function fun(){
        alert("点了一下！")
    }
    

• 常见的事件：

  • 点击事件：

    • onclick 当用户点击某个对象时调用的事件句柄
    • ondblclick 当用户双击某个对象时调用的事件句柄

  • 焦点事件：

    • onblur 元素失去焦点

      • 一般用于表单校验

    • onfocus 元素获得焦点

  • 加载事件：

    • onload 一张页面或一幅图像完成加载

      • 可以与window绑定

  • 鼠标事件：

    • onmousedown 鼠标按钮被按下
      • 将会传递一个参数 ,定义方法时定义一个形参，指示哪一个鼠标按键被点击
    • ,onmouseup 鼠标按键被松开
    • onmousemove 鼠标被移动
    • onmouseout 鼠标从某元素移开
    • onmouseover 鼠标移到某元素之上

  • 键盘事件：

    • onkeydown 某个键盘按键被按下
    • onkeypress 某个键盘按键被按下并松开
    • onkeyup 某个键盘按键被松开

  • 选中和改变：

    • onchange 域的内容被改变
    • onselect 文本被选中

  • 表单事件

    • onsubmit 确认按钮被点击

      • 只支持表单form，返回true则被提交，要注意此处是否需要添加return，事件注册的方法一需要return，方法二不需要。

    • onreset 重置按钮被点击

6.BOMze

• 概念：Browser object model 浏览器对象模型

  • 将浏览器各个组成部分封装成对象

    • 1.window ：浏览器窗口对象

      • 特点：window不需要创建，可以直接使用

      • window.方法名()，可以直接省略window

      • 与弹出框有关的方法：

        alert()		//显示带有一段消息和一个确认按钮的警告框
        confirm()		//显示带有一段消息及确认和取消按钮的警告框，有boolean类型的返回值
        prompt()		//显示提示用户输入的对话框，有返回值
        

      • 与开发关闭有关的窗口：

        open()		//打开一个新窗口
        close()		//关闭已经打开的窗口，谁调用关闭谁
        

      • 与定时器有关的方法：

        setTimeout(code,millisec)		//code：要调用的函数后要执行的JavaScript代码串；millise：在执行代码前需等待的毫秒数，返回值为唯一标识，用于取消计时。
        clearTimeout(id_of_settimeout)		//id_of_settimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。
        setInterval(code,millisec)		//code：要调用的函数后要执行的JavaScript代码串；millise：在执行代码前需等待的毫秒数。setInterval() 方法会不停地调用函数，直到clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
        clearInterval()		//取消由 setInterval()设置的 timeout。
        

      • 获取其他BOM对象

        window.history
        history		//可以直接省略window
        

      • 获取DOM对象

        document
        

    • 2.location ：地址栏对象

      • 属性：

        • href 属性是一个可读可写的字符串，可设置或返回当前显示的文档的完整 URL。

            location.href //得到当前地址栏的值，或者设置当前地址栏的值
          

        • reload() 方法用于重新加载当前文档

        location.reload(force) //参数是 false，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。

    • history：历史记录对象

    • screen：显示器屏幕对象

    • Navigator：浏览器对象

​

​