Java学习笔记（二十一）JavaScript

什么是JavaScript

• javascript是一门世界上最流行的脚本语言
• 一个合格的后端人员，必须要精通JavaScript
• ECMAScript可以理解为是JavaScript的一个标准，最新版本到es6了
• 但是大部分浏览器还只停留在支持es5代码上

快速入门

• 引入javascript

  • 内部标签

    <script>
       ... 
    </script>
    

  • 外部引入：创建js文件

    <script scr="abc.js"></script>
    

• 定义变量： -->变量类型 变量名 = 变量值；（js中的变量类型没有严格的区分）

  var score =71;
  console.log(score)//在浏览器的控制台打印变量，类似于javase的sout
  

• 数据类型

  • js不区分小数和整数，统一为Number，除此之外还有NaN Indinity也是Number类型

    • 浮点数问题：1/3===1-2/3 结果为flase，存在精度问题，Math.abs(1/3-(1-2/3))<0.000001

  • 字符串：‘abc’,“abc”

  • 布尔值：true，flase

  • 逻辑运算：与或非 && || ！

  • 比较运算符

    • = 赋值
    • ==等于（类型不一样，值一样，也会判断为true）
    • === 绝对等于（类型一样，值一样，结果为true）
    • 这是js的缺陷，坚持不要使用 ==比较
    • 须知NaN===NaN 结果是flase，只能通过isNaN（NaN）来判断

  • null表示空；undefine代表未定义

  • 数组，js定义的数组元素可以是不同类型

    var arr=[1,3,5,"ssss",NaN]
    //通过下标可以取出元素，如若下标越界，就会 undefined
    

  • 对象：对象是大括号，数组是中括号，每个属性时间使用逗号隔开，最后一个不需要添加
    取值---->>对象.属性

    var person{
             
        name:"tom",
        age:3,
        class:['js','java','python']
    }
    

    console.log(person.age)

• use strict:严格检查模式，预防javascript的随意性导致产生的一些问题（局部变量建议都是用let去定义）

字符串

• 正常字符串我们使用 单引号或者双引号包裹

• 注意转义字符 \ （\u#### unicode字符）

• 多行字符串编写，使用``进行包裹（esc下面键）

  var tab=`hellow
  xixix
  zzzzz`
  console.log(tab)
  

• 模板字符串

  let name='tom'
  let msg=`你好，${
           name}`
  //你好，tom
  

• 字符串长度：str.length

• 字符串事不可变的，不能通过他的下标来修改字符串

• 字符串大小写转变

  student.toupperCase()//这里是调用方法，不是属性
  student.tolowerCase()
  

• 字符串元素下标索引：student.indexOf(‘t’)

• 字符串切片 substring

  var student='student';
  student.substring(1)//从字符串第一个元素截取到最后一个元素 tudent
  student.substring(1,3)//[1,3) tu
  

数组

• Array可以包含任意的数据类型（上提到）

• 通过下标可以取值和赋值

• 长度 ，通过arr.length求出当前长度，也可以给数组长度重新赋值，如果赋值过小，元素会丢失

  arr.length//5
  arr.length=10//10
  //(10) [1, 3, 5, "ssss", NaN, empty × 5]
  arr.length=3
  //[1, 3, 5]
  arr[2]='haha'
  //[1, 3, "haha"]
  

• arr.push(x)：将x压入到数组arr尾部，arr.pop():弹出尾部最后一个元素

  arr.push(8)//[1, 3, "haha", 8]
  arr.pop()//[1, 3, "haha"]
  

• arr.unshift(x):将x压入arr数组头部，arr.shift():弹出头部的一个元素

  arr.unshift(666)//[666,1,3]
  arr.shift()//[1,3]
  

• 排序sort()

  arr.sort()// [1, 3, 666, 8]
  

• 元素反转

  arr.reverse()//[8, 666, 3, 1]
  

• 数组拼接（concat()并没有修改数组，只是返回一个新数组）

  arr.concat([7,'ahha',999])//[8, 666, 3, 1, 7, "ahha", 999]
  arr//[8, 666, 3, 1]
  

• 连接符join：打印拼接数组，使用特定的字符串连接

  arr.join('-')//"8-666-3-1"
  

• 多维数组

  var arr1=[[1,2],[3,4],[5,6]]
  arr1[1]//[3, 4]
  arr1[1][1]//4
  

• 数字多用于数据的存储

对象

• 若干个键值对,{…}表示一个对象，键值对描述属性，多个属性逗号隔开，最后一个没有逗号

  var 对象名={

  ​ 属性名：属性值，

  ​ 属性名：属性值，

  ​ 属性名：属性值

  }

  var person={
         
      name:'tom',
      age:18,
      score:0
  }
  

• 对象赋值

  person.age//18
  person.age=22//22
  person.age//22
  

• 使用一个不存在的对象属性，不会报错（undefined），但是可以给对象增加新的属性

  person.haha//undefined
  person.haha='haha'
  person//{name: "tom", age: 22, score: 0, haha: "haha"}
  

• 动态的删除属性，通过delete删除对象的属性

  delete person.haha//true
  person//{name: "tom", age: 22, score: 0}
  

• js中所有的健都是字符串，值是任意对象

• xxx in xxx：判断属性是否在这个对象中（所继承的属性也包括在内）

  'age'in person//true
  'toString'in person//true
  

• hasOwnPrpperty():判断一个属性是否是这个对象自身拥有的

  person.hasOwnProperty('name')//true
  person.hasOwnProperty('toString')//false
  

流程控制

• if判断 和java一致 if(){…}else if(){…}

• while循环，和java一致（避免程序死循环）while(){…}

• do…while，和java一致 --> do{…}while()

• for循环 和java一致 for(){…}

• forEach循环

  arr.forEach(function(value){
         console.log(value)})
  // 8
  // 666
  // 3
  // 1     完成对数组的遍历，相当于匿名内部类
  

• for…in （for(var index in object){}）遍历出成分的下标

Map和Set

• Map ：new Map进行创建键值对的集合，set()来进行新增或者修改，delete(‘key’)进行删除

  var map=new Map([['tom',100],['jack',90],['lucy',80]])//undefined
  map.get('tom')//100;可以通过key获得value
  map.set('fff',50)//Map(4) {"tom" => 100, "jack" => 90, "lucy" => 80, "fff" => 50}
  map.delete('tom')//true
  map//Map(3) {"jack" => 90, "lucy" => 80, "fff" => 50}
  map.set('fff',66)//Map(3) {"jack" => 90, "lucy" => 80, "fff" => 66}
  

• Set：无需不重复的集合,Set.has():是否包含某个元素

  var set=new Set([1,1,2,2,3,3,4,4])//undefined
  set//Set(4) {1, 2, 3, 4}
  set.has(3)//true
  

iterator

• for(var i of …){}

• 遍历数组

  for(var x of arr){
         console.log(x)}
  // 8
  // 666
  // 3
  // 1
  

• 遍历map

  for(var x of map){
         console.log(x)}
   //["jack", 90]
   //["lucy", 80]
   //["fff", 66]
  

• 遍历set

  for(let x of set){
         console.log(x)}
  //1
  //2
  //3
  //4
  

函数

定义函数

• 方式一：关键字function 函数名（）{方法体},一旦执行到return代表函数结束，返回结果，若果没有执行return，函数执行完也会返回结果，结果是undefined

  function abs(x) {
         
          if (x>0){
         
              return x;
          }else{
         
              return -x;
          }
      }
  

• 方式二：function(x){…}是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用函数，两种方式等价

  var abs=function (x) {
         
          if (x>0){
         
              return x;
          }else{
         
              return -x;
          }
  
      }
  

• JS可以传任意参数，也可以不传参数。

  • 手动规避

     var abs=function (x) {
             
            if (typeof x!='number'){
             
                throw 'Not a Number'
            }
            if (x>0){
             
                return x;
            }else{
             
                return -x;
            }
        }
    

  • arguments是一个JS免费赠送的关键字，表示传递进来的所有参数，是一个数组

    var fun=function (x) {
             
            console.log("x=>"+x);
            for (var i=0;i<arguments.length;i++){
             
                console.log(arguments[i])
            }
            if (x>0){
             
                return x;
            }else {
             
                return -x;
            }
        }
    
    fun(8,45,6,7)
    //x=>8
    //8
    //45
    //6
    //7
    //8
    

  • ES6引入的新特性，rest来获取除了已经定义的参数之外的所有参数

    function aaa(a,b,...rest) {
             
            console.log("a=>"+a)
            console.log("b=>"+b)
            console.log(rest)
        }
    aaa(4,5,666,999,888,777)
    // a=>4
    // b=>5
    // (4) [666, 999, 888, 777]
    

变量的作用域

• js中，var定义变量实际是有作用域的

• 假设在函数体中声明了变量，则在函数体外是不可以使用的

• 如果两个函数使用了相同的变量名，只要两者都在函数内部，就不冲突

• 假设内部函数变量和外部函数变量重名，那么JS中函数查找变量从自身函数开始，由内向外查找，假设外部存在这个同名的函数变量，内部函数会屏蔽外部函数的变量

• 养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护

• 全局函数与全局变量

  var x=1;//全局变量
      function f() {
         
          console.log(x)
      }
      f()//1
      console.log(x)//1
  

• 全局对象window，默认所有的全局变量，都会自动绑定在window对象下；alert()这个函数本身也是一个window变量；

  var x='xxx'
  alert(x)
  alert(window.x)
  

• js实际上只有一个全局作用域，任何变量（函数也可以是为变量），假设没有在函数作用范围内找到，就会向外查找，如果全局作用域都没有找到，报错 RefrenceError

  window.alert(x)
  var old_alert=window.alert
  old_alert(x)
  window.alert=function(){
         }
  alert(123)//失效
  window.alert=old_alert
  ƒ alert() {
          [native code] }
  alert(123)//有效
  

• 规范：由于我们所有的全局变量都会绑定我们的window上，如果不同的js文件，使用了相同的全局变量，则会导致冲突，建议把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题

  var myself={
         };//唯一全局变量
  myself.name='Tom';
  myself.add=function(a,b){
         return a+b;}
  

• 局部作用域中使用var定义的变量在作用域之外还可以使用，let关键字解决局部作用域冲突问题

  function bbb() {
         
          for (var i=0;i<100;i++){
         
              console.log(i)
          }
          console.log(i+1)
      }
      bbb()//0~99,101 i出了for的作用域后还可以使用
  
  function bbb() {
         
          for (let i=0;i<100;i++){
         
              console.log(i)
          }
          console.log(i+1)
      }
      bbb()//0~99；Uncaught ReferenceError
  

• 在ES6之前，怎么定义常量：只有用全部大写字母命名的变量就是常量；建议不要去修改

• 在ES6之后引入了常量关键字const

  const PI='3.14'
  console.log(PI)//3.14
  PI='123'
  console.log(PI)//TypeError: Assignment to constant variable.
  

方法

• 方法就是把函数放在对象的里面，对象只有两个东西：属性和方法

  var way={
         
      name:'tom',
      birth:1997,
      agr:function(){
         
          var now=new Date().getFullYear();
          return now-this.birth
      }
  }
  way.name//属性
  way.age()//方法，一定要带（）
  

• this默认指向了调用此函数的对象，在js中可以控制this的指向

内部对象

标准对象

typeof 123//"number"
typeof '123'//"string"
typeof true//"boolean"
typeof NaN//"number"
typeof []//"object"
typeof {
     }//"object"
typeof Math.abs.//"function"
typeof undefined//"undefined"

Date

var now=new Date();
now.getFullYear()//2020;年份
now.getMonth()//5；月份0~11
now.getDate()//16；日期
now.getDay()//2；星期几
now.getHours()//13；时
now.getMinutes()//10；分
now.getSeconds()//38；秒
now.getTime()//1592284238032；时间戳
new Date(1592284238032)//Tue Jun 16 2020 13:10:38 GMT+0800 (中国标准时间)

json

• JSON(javascript Object Notation,JS对象简谱)是一种轻量级的数据交换格式

• 见解和清洗的层次结构是的JSON成为理想的数据交换语言

• 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输

• 在js，一切皆为对象，任何js支持的类型都可以用JSON来表示

• 格式

  • 对象都用{}
  • 数组都用[]
  • 所有键值对都用key：value

• JSON和JS对象的转化

• 关键字JS—>Json JSON.stringify()

• JSON—JS JSON.parse()

  var Student={
         
          name:'tom',
          birth:1997,
          gender:'男'
      }
      var s_json=JSON.stringify(Student);//"{"name":"tom","birth":1997,"gender":"男"}"
      var obj=JSON.parse('{"name":"tom","age":3,"gender":"男"}')
      //{name: "tom", age: 3, gender: "男"}
  		//name: "tom"
  		//age: 3
  		//gender: "男"
  		//__proto__: Objeect
  

Ajax

• 原生的js写法，xhr异步请求
• jQuey封装好的方法 $("#name").ajax("")
• axios请求

面向对象

• 在ES6引入关键字calss

• 定义一个类，属性，方法

  class Student{
         
          constructor(name) {
         
              this.name=name;
          }
          hello(){
         
              alert('hello')
          }
      }
      class xiaostudent extends Student{
         //继承Student类
          constructor(name,grade) {
         
              super(name);
              this.grade=grade;
          }
          myGrade(){
         
              alert('我是一名小学生')
          }
      }
      var xiaoming=new Student('xiaoming');
      var xiaozhang=new xiaostudent('xiaozhang',1)
      xiaoming.hello()
      xiaozhang.hello()//子类可以调用父类的方法
      xiaozhang.myGrade()
  

• 原型链

操作BOM对象

• javascript诞生就是为了能够让他在浏览器中运行

• BOM：浏览器对象模型

  • IE6~11
  • Chrome
  • Safari
  • FireFox
  • Opera

• window代表浏览器窗口
  window.alert(1)

  window.innerHeight
  window.innerwidth
  window.outerHeight
  window.outerwidth

• Navigator,封装了浏览器的信息，大多时候我们不会使用它，因为会被人认为修改,也不建议使用这些属性来判断和编写代码。

  navigator.appName//"Netscape"
  navigator.appVersion//"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.122 Safari/537.36"
  navigator.userAgent//"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.122 Safari/537.36"
  navigator.platform//"Win32"
  

• screen代表屏幕尺寸

  screen.width//1920
  screen.height//1080
  

• location（重要），代表当前页面的UPL信息

  location
  // {href: "https://www.baidu.com/", ancestorOrigins: DOMStringList, origin: "https://www.baidu.com", protocol: "https:", host: "www.baidu.com", …}
  location.assign('...')//设置新的地址
  

• document带面当前的页面，HTML DOM文档树

  document.title//"百度一下，你就知道";我们可以赋值修改
  document.getElementById('u1')
  //
  ​…​
  ​​抗击肺炎​​
  ​…​
  ​​设置​​​…​​
  ​…​
  ​
  ​…​
  ​

​；获取具体的文档树节点 document.cookie //"BIDUPSID=F34CA8BD8F22CD1912C6466C603C9EC6; PSTM=1562730627; BAIDUID=7CBEEF757DA6E994B9E72C490A4DD915:FG=1; BD_UPN=12314753; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; BD_HOME=1; H_PS_PSSID=31906_1446_31671_21101_31069_32045_30823; sugstore=1";获取cookie

劫持cookie原理，而已人员，获取你得cookie上传到他的服务器，服务器端可以设置coolie:httpOnly

history代表浏览器的历史记录（不建议使用history来实现前进后退的功能）

history.back();//后退
history.forward();//前进

操作DOM对象（重点）

• 核心：浏览器网页就是一个DOM树形结构

  • 获取：获取DOM节点

  • 更新：更新DOM节点

  • 遍历dom节点

  • 删除：删除一个DOM节点

  • 添加：添加一个新的写点

• 要操作一个DOM节点，就必须先获得这个Dom节点

  <body>
  <div id="father">
      <h1>标题一</h1>
      <p id="p1">p1</p>
      <p class="p2">p2</p>
  </div>
  </body>
  <script>
      var h1=document.getElementsByTagName('h1');
      var p1=document.getElementById('p1')
      var p2=document.getElementsByClassName('p2')
      var fa=document.getElementById('father')
      var child=fa.children;//获取父节点下的所有子节点
  	//fa.firstChild；fa.lastChild
  </script>//这是原生代码，之后我们尽量都使用jQuery()
  

• 更新节点：(只有通过ID取出的节点可以显示在网页上操作)

  p1.innerText='hahhahahah'//修改文本的值
  p1.innerHTML='123'//解析HTML文本标签
  //操作JS
  p1.style.color='yellow'
  p1.style.fontSize='20px'
  p1.style.padding='2em'
  

• 删除节点：先获取父节点，再通过父节点删除自己（只能通过id选择器）

  <body>
  <div id="father">
      <h1>标题一</h1>
      <p id="p1">p1</p>
      <p class="p2">p2</p>
  </div>
  </body>
  <script>
      var self=document.getElementById('p1');
      var father=p1.parentElement;//获取该节点的父节点
      father.removeChild(p1)//通过父节点删除
  </script>
  

  • 删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意

    father.removeChild(father.children[0])
    

• 插入节点，我们获得了某个DOM节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素来了，我们就不能这么干了，会产生覆盖

  • 追加 关键字：appendChild()---->(也是正能通过id选择器进行追加)

    <body>
    <p id="js">javascript</p>
    <div id="father">
        <h1>标题一</h1>
        <p id="p1">p1</p>
        <p class="p2">p2</p>
    </div>
    </body>
    <script>
        var js=document.getElementById('js')
        var father=document.getElementById('father')
        father.appendChild(js)
    

  • 创建一个新标签，实现插入

    //通过JS创建一个新的节点并插入
    var newp=document.createElement('p')
        newp.id='newp'
        newp.innerText='把卡把卡'
        father.appendChild(newp)
    //船舰一个标签节点
    var myscr=document.createElement('script')
    myscr.setAttribute('type','text/javascript')
    //可以创建一个style标签
    var mysty=document.createElement('style')//一个空的style标签
    mysty.setAttribute('type','text/css')//设置传入的类型
    mysty.innerHTML='body{background-color:red;}'//设置标签内容
    document.getElementsByTagName('head')[0].appendChild(mysty)
    

  • insertBeforre（new，target）在target之前加入new节点

验证表单

• 表单

  • 文本框 text
  • 下拉框< select >
  • 单选框 radio
  • 多选框 checkbox
  • 隐藏框 hidden
  • 密码框 password
  • …

• <body>
  <form action="post">
      <p>
          <span>用户名：</span><input type="text" id="username">
      </p>
      <p>
          <span>性别</span>
          <input type="radio" name="gender" value="man" id="boy">男
          <input type="radio" name="gender" value="woman" id="girl">女
      </p>
  </form>
  </body>
  <script>
      var input_text=document.getElementById('username')
      var boy_radio=document.getElementById('boy')
      var girl_radio=document.getElementById('girl')
      input_text.value//"ziroom705";得到输入框的值
  	input_text.value='123'//"123"；修改输入框的值
  	//对于单选框，多选框等等固定的值，.value只能渠道当前的值
  	boy_radio.checked//true；查看返回的结果，是否为true
  	girl_radio.checked//false
  </script>
  
  
  
  //常见的安全模式，实现了隐藏md5的加密过程
  </head>
  <script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.16.0/js/md5.js"></script>
  <body>
  <form action="http://www.baidu.com/" method="post" onsubmit="return aaa()">
      <p>
          <span>用户名：</span><input type="text" id="username">
      </p>
      <p>
          <span>密码:</span><input type="password" id="input_password">
      </p>
      <input type="hidden",id="md5-password" name="password">
      <button type="submit">提交</button>
  </form>
  </body>
  <script>
      function aaa() {
         
          alert(1);
          var uname=document.getElementById('username')
          var pwd=document.getElementById('input_password')
          var ma5pwd=document.getElementById('md5-password')
          ma5pwd.value=md5(pwd.value)
      }
  
  
  </script>
  

jQuery

• jQuery里面存在着大量的javascript函数

• 获取jQuery

  <script src="http://cdn.bootcss.com/jquery/3.4.1/core.js"></script>script>
  

• 公式：$(selector).action()

• css的选择器他全部可以使用

  $('p').click();
  $('#p1').click();
  $('.p2').click();
  

• 文档工具站
  http://jquery.cuishifeng.cn/

• 事件：鼠标事件，键盘事件，其他时间

• 鼠标事件例(获取当前鼠标的坐标)

  <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
          #divmouse{
         
              width: 500px;
              height: 500px;
              border: 1px solid red;
          }
      </style>
  </head>
  <script src="jquery-3.5.1.js"></script>
  <body>
  mouse : <span id="mouseMove"></span>
  <div id="divmouse">在这里移动鼠标试试</div>
  </body>
  <script>
      //当网页元素加载完毕之后，响应事件
      $(function () {
         
          $('#divmouse').mousemove(function (e){
         
              $('#mouseMove').text('x'+e.pageX+'y'+e.pageY)
          })
      });
  </script>
  </html>
  

• 操作DOM

  $('#test-ul' li[name=python]).text()//获得值
  $('#test-ul' li[name=python]).text(‘***’)//设置值
  $('#test-ul'）.html();//获得值
  $('#test-ul'）.html('123');//设置值
  

• css操作

  $('#test-ul' li[name=python]).css({
         'color':"red"})
  

• 元素隐藏和显示：本质 display:none

  $('#test-ul' li[name=python]).show();
  $('#test-ul' li[name=python]).hide();