JavaScript笔记

一、 初识JavaScript

1.1、 JavaScript书写位置

内联JavaScript
内部JavaScript -- 写到</body>标签上方
外部JavaScript -- 通过src引入html页面中

<script src = "#"></script>

1.2、 输入输出语句

输入：prompt()
输出：alert0() 、 document.write() 、 console.log()

• alert指令,控制浏览器弹出警告框
• document.write 函数 向文档(document)写入(write)一段话 注意是向body里写入内容
• console.log 函数 , 向控制台里面输出内容

1.3、 变量

声明变量 ： 声明标识符 + 变量名

let 变量名    //局部变量
var 变量名    //全局变量
const 变量名    //常量

• 如今推荐使用let取缔var，避免变量污染
• let不允许多次声明同一个变量
• let具有块作用域

1.4、 数值

• js中的数值并不是无限大/无限小的，当数值超过一定范围后会显示近似值

  let a = 99999999999999999991;
  console.log(a)；
  /* 此时显示的a的值是100000000000000000000 */

• Infinity是一个特殊的数值表示无穷
• NaN也是一个特殊的数值，表示非法的数值

1. 大整数： 在整数后面加上n，以确保不会被近似处理，大小是无限大的 以内存为上限
2. typrof： 用来检查值的类型，typeof a 不需要括号

1.5、 模板字符串

• 使用反单引号、来表示模板字符串
• 模板字符串中可以嵌入变量

let name = "小明"
let a = `你好，${name}`
/* ${}嵌入变量 */

1.6、 数据类型转换

1. 转换成字符串

   toString() or String()

   • 方法调用 a = a.toString() , a = String(a)

2. 转换成数值

   Number()

   • 如果字符串不是合法数字，则转换为NaN
   • 如果字符串是空串或纯空格的字符串，则转换为0

   parseInt()

   • 将一个字符串转换为一个整数
   • 解析时，会自左向右读取一个字符串，读取到字符串中所有的有效的整数，遇到非数字则停止
   • 也可以使用parseInt()来对一个数字进行取整

   parseFloat()

   • 将一个字符串转换为浮点数
   • 解析时，会自左向右读取一个字符串，读取到字符串中所有的有效的小数，遇到非数字则停止

3. 转换为布尔值

   Boolean()

   • 对于数字，0 和 NaN 为false ， 其余全为true
   • 对于字符串，空字符串为false ， 其余全为true
   • null 和 undefined 为false

1.7、 运算与赋值

• 空赋值： 只有当变量的值为null或undefined时才会对变量进行赋值
• 一元的运算： 当我们对非数值类型进行正负运算时，会先将其转换为数值然后再运算

let a = "123"
a = +a
/* a = 123 */

• 自增和自减： 同C语言，有 ++a 和 a++ 之分
• 可以通过两次非运算 !!将数值转换成布尔值

• 逻辑运算&&：（返回false的原始值）

  • 如果第一个值为false,则直接返回第一个值
  • 如果第一个值为true,则返回第二个值

• 逻辑运算|| : （返回true的原始值）

  • 如果第一个值为false,则直接返回第二个值
  • 如果第一个值为true,则返回第一个值
• 全等运算符===：用来比较两个值是否全等，类别不同直接false
• 条件运算符关系式1 ? 表达式1 : 表达式2: true执行1 , false执行2

1.8、var 和 let

• var用来声明变量，作用和Let相同，但是var不具有块作用域
• 在全局中使用var声明的变量，都会作为window对象的属性保存
• 使用function声明的函数，都会作为window的方法保存
• 使用let声明的变量不会存储在window中
• 在局部作用域中，如果没有使用var或Let声明变量，则变量会自动成为window对象的属性也就是全局变量
• 使用var声明的变量，它会在所有代码执行前被声明。所以我们可以在变量声明前就访问变量
• 可以被访问但不会被赋值

console.log(a)
var a = 10
/* 输出是undefined */
/* 即有定义没有被赋值 */

• 使用函数声明创建的函数，会在其他代码执行前被创建。所以我们可以在函数声明前调用函数

二、 流程控制语句

格式：

判断词 ( 条件 ){

}

2.1、 if else

if (条件判断){
    
}else{
    
}

2.2、 switch case

switch (表达式0){
    case(表达式1):
        pass
    case(表达式2):
        pass
    case(表达式3):
        pass
}

• 当 表达式0 与 case后任一表达式全等时，执行该case以及之后所有case控制的语句（同C语言）

2.3、while

while(条件判断){
    
}
/* ---------------------------------------------------------------- */
do{
    
}while(条件判断)

2.4、for

for(初始条件；条件表达式；更新条件){
    
}

2.5、for in / for of

for in 语句循环遍历对象的属性

for of 语句循环遍历可迭代对象的值

for (key in object) {
  
}

for (variable of iterable) {

}

三、 函数

• 函数声明

  function 函数名(){
      
  }
  
  /* 调用*/
  函数名()

• 函数表达式

  const 函数名 = function(){
      
  }

• 箭头函数

  const 函数名() => {
      
  }

  • 当箭头函数中只有一个参数时，可以省略()
  • 箭头函数的返回值可以直接写在箭头后 const fn(a,b) => a + b
  • 如果直接在箭头后设置对象字面量为返回值时，对象字面量必须使用()括起

• 立即执行函数

  (function() {} )()
  //或者
  (function() {} ());

3.1、arguements

• 使用arguements可以获取函数传递过来的实参，只有函数才有
• 是伪数组，并不是真正意义上的数组
• 具有数组的length属性
• 按照索引的方式进行存储的
• 它没有真正数组的一些方法pop()、push()等等

四、 自定义对象

相当于C语言、Python中的类

4.1、new Object 创建对象

var obj = new Object()
obj.name = "张三"

• 对象中可以存储多个各种类型的数据
• 对象中存储的数据，我们称为属性
• 向对象中添加属性：对象.属性名=属性值
• 读取对象中的属性：对象.属性名

4.2、构造函数创建对象

• 将抽象重复的元素封装成构造函数，这样需要创建多对象时可直接调用，类似java

  function fun1(name , age , sex){
      this.name = name;
      this.age = age;
      this.sex = sex;
  }
  
  var a = new fun1("name" , "12" , "man")

4.3、字面量创建对象

var obj = {
    name : "张三",
    age : 11,
    fun: function(){
        alert("0")
    }
}

• 直接使用{}来创建对象,可以直接向对象中添加属性
• 对象中的属性也可以是一个函数

*4.4、Symbol

let symbol = Symbol()

• 也可以使用符号(symbol)作为属性名，来添加属性
• 获取这种属性时，也必须使用symbol
• 使用symbol添加的属性，通常是那些不希望被外界访问的属性（此时称为该对象的方法）

注意

• 修改对象：修改对象时，如果有其他变量指向该对象，则所有指向该对象的变量都会收到影响
• 修改变量：修改变量时，只会影响当前的变量
• 在使用变量存储对象时，很容易因为改变变量指向的对象，提高代码的复杂度。所以通常情况下，声明存储对象的变量时会使用const
• 注意：const只是禁止变量被重新赋值，对对象的修改没有任何影响

五、DOM

5.1、获取元素

• 通过Id获取元素：document.getElementById()
• 通过标签获取元素：document.getElementByTagName()
• 通过类名获取元素：document.getElementByClassName()
• 通过选择器获取第一个符合的元素：document.querySelector()
• 通过选择器获取所有符合的元素：document.querySelectorAll()
• 获取body：document.body
• 获取Html：document.html 或 document.documentElement

5.2、修改元素内容

1. 修改文本内容

• element.innerText 去除html标签，空格和换行，仅以文本形式修改
• element.innerHTML 保留html标签，空格和换行，以Html标准修改

2. 修改元素样式

• 行内样式操作 element.style.具体 样式名
• 类名样式操作 element.className ，通过修改元素的类名来匹配已有的css ， 从而进行css的修改变化
• js里面的样式采取驼峰命名法比如fontSize、backgroundColor。js修改style样式操作，产生的是行内样式，css权重比较高

5.3、排他思想

var btns = document.getElementsByTagName('button');
    // 用for循环遍历所有按钮
    for (i = 0; i < btns.length; i++) {
        btns[i].onclick = function() {
            for (let i = 0; i < btns.length; i++) {
            // 清除所有样式
                btns[i].style.backgroundColor = '';
            }
            // 设置当前样式
            this.style.backgroundColor = 'pink';
        }
    }

• 先将所有按钮样式清除，再为选中的按钮赋予样式

5.4、元素属性值

1. 获取元素属性值

   • element.属性 获取内置属性值
   • element.getAttribute("属性") 可以获取自定义的属性值

2. 设置元素属性值

   • element.属性 = "value" 设置内置属性值
   • element.setAttribute("属性" , "value") 可以设置自定义属性值

3. 移除元素属性

   • element.removeAttribute("属性") 移除属性

4. H5自定义属性

   • H5规定自定义属性data-开头做为属性名并且赋值。如<div data-index="1"></div>
   • H5新增获取data-属性方法：element.dataset.属性 或 element.dataset['属性']。如div.dataset.index , 同时dataset是一个集合里面存放了所有以data开头的自定义属性

5.5、节点操作

1. 节点选择

   • 父节点：元素.parentNode 得到离元素最近的父节点
   • 子节点：元素.childNodes 得到所有子节点，如果要得到特定节点需要进行处理，一般不使用。实际开发中使用 元素.childern 来获取子元素
   • 兄弟节点：元素.nextSibling 下一个节点 ， 元素.previousSibling上一个节点，元素.nextElementSibling 下一个元素节点 ， 元素.previousElementSibling上一个元素节点
   • 补充：第一个子节点： 元素.firstElementChild返回第一个子元素节点 ，元素.firstChild返回第一个子节点（可以是文本节点） ， 或者使用 元素.children[0]

2. 节点创建

   • document.creatElement("名字") 创建一个节点
   • 父节点.appendChild(节点A) 将节点A设置为某个节点的子节点 （添加节点）
   • 父节点.insertBefore(节点A , 指定元素)方法将一个节点A添加到父节点的指定子节点前面。

3. 节点删除

   • 父节点.removechild() 删除一个子节点，并返回删除的节点。

4. 节点克隆

   • 节点.cloneNode(参数) 克隆一个节点。若括号内不为true , 此时为浅拷贝 ，只复制标签不复制内容

5.6、事件的注册删除

HTML DOM 事件扩展

1. 事件的注册

   • 旧方法： 元素.onclick = function(){} 一个元素只能注册一个

   • W3新方法： 元素.addEventListener(type , Listener[ , useCapture])md什么另类java 一个元素可以有多个监听器

     button.addEventListener('click' , function(){
         alert("1")
     })

     • 该方法接收三个参数：

       type：事件类型字符串，比如click、mouseover，注意这里不要带on

       listener：事件处理函数

       useCapture：可选参数，是一个布尔值，默认是false

2. 事件的删除

   • 元素.removeEventListener(type , Listener[ , useCapture])

5.7、事件对象

• 事件流：分为 捕获阶段、当前目标阶段、冒泡阶段
• 事件对象：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象，它有很多属性和方法。

• 事件委托：通过给父节点添加监听器，利用事件冒泡来影响各子节点

  <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
  </ul>

  var ul = document.querySelector('ul');
  ul.addEventListener('click' , fuction(e){
      e.target.style.backgroundColor = 'red'
  })

• 事件捕获与冒泡

  事件捕获是从外到内依次捕获，但冒泡时却时从内到外的

六、BOM

6.1、Window对象

1. 窗口加载事件

   window.load = function() 或 window.addEventLIstener("load" , function)

   • 有了window.onload就可以把js写到页面元素的上方
   • window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个为准。如果使用addEvertListener则没有限制

2. 窗口大小事件

   window.onresize = function() 或 window.addEventListener("resize" , function)

   • 当窗口大小发生变化时触发函数，常用于响应式布局

3. 定时事件

   只触发一次：window.setTimeout(function() , 毫秒数)

   每隔一段时间触发：window.setInterval(function() , 间隔毫秒数)

   这些window通常省略

   清除定时函数：clearTimeout() 和 clearInterval()

6.2、同步 异步

• 同步：自上而下运行，前一个结束再开始下一个，单线程
• 异步：类似多线程 js中只有单线程 ，一切js的"多线程"都是用单线程模拟出来的

6.3、Location对象

• url的组成

  • protocol 协议，常用的协议是http
  • hostname 主机地址，可以是域名，也可以是IP地址
  • port 端口 http协议默认端口是：80端口，如果不写默认就是:80端口
  • path 路径 网络资源在服务器中的指定路径
  • parameter 参数 如果要向服务器传入参数，在这部分输入
  • query 查询字符串 如果需要从服务器那里查询内容，在这里编辑
  • fragment 片段 网页中可能会分为不同的片段，如果想访问网页后直接到达指定位置，可以在这部分设置
• location方法

• location对象方法

6.4、其他对象

• navigator对象：该对象包含有关浏览器的信息 ， 常用于伪装请求头，平时常用userAgent
• history对象：记录历次访问过的页面

6.5、offset和client

用offset相关属性可以动态的得到元素的位置（偏移）、大小等

用client可以得到元素的边框大小、元素大小等，与offset区别是不包括边框