JavaScript基础

1.基本知识

1、注释结束符

单行注释 //

多行注释 /* 注释内容 */

以分号为一个语句结束，但可以不加（推荐不加）

2、输入输出语法

输出：
document.write('要输出的内容')：向body页面中添加内容，可以是标签
alert('内容'): 弹出框
console.log('内容') 控制台输出

输入：
prompt('提示信息')：弹出框输入

3、变量和常量

1、变量

不用声明也行，也不要指明数据类型（同 python）

声明变量的方式有两种：let 和 var （推荐 let ）

例如：let name = 'lhx'

`${ 变量名 }`：模板表达式：

for(i = 1; i < 10; i++){
   console.log(`第${i}次循环`)
} //控制台依次打印：第 1~9 次循环

let与var区别：

let和var的区别体现在作用域上。var的作用域被规定为一个函数作用域，而let则被规定为块作用域，块作用域要比函数作用域小一些，但是如果两者既没在函数中，也没在块作用域中定义，那么两者都属于全局作用域。

2、常量

使用 const 声明的变量称为“常量”。

例如：const PI = 3.14

4、数据类型

1、数值类型：整数、小数、正数、负数

2、字符串类型：单引号、双引号或反引号包裹的都是字符串，推荐单引号。

3、布尔类型：true，false

4、undefined：所有类型的空值都是 undefined

注：隐式转换同java。

        数值转字符串：toString( 值 )

        字符串转数值：Number( 值 )

typeof(值)：返回值的数据类型
toString(12): 把数字12转换为字符串类型

5、运算符

1、算数运算符

注意：在计算失败时，显示的结果是 NaN （not a number）

2、赋值运算符

3、自增和自减运算符

4、比较运算符

5、逻辑运算符

逻辑运算符优先级： ！> && > ||

总结：同Java

6、分支语句

1、if 分支

语法：

if (条件表达式) {
  // 满足条件要执行的语句
}else if (条件表达式){
    // 满足条件要执行的语句
} else{
    // 满足条件要执行的语句
}

2、三元运算符

语法：

条件 ? 表达式1 ： 表达式2
例如：
1=1 ? 'yes' : 'no' //返回yes
1=2 ? 'yes' : 'no' //返回no

3、switch语句

注意：

        1. switch case语句一般用于等值判断, if适合于区间判断

        2. switchcase一般需要配合break关键字使用 没有break会造成case穿透

        3. if 多分支语句开发要比switch更重要，使用也更多

语法：

switch (数值/表达式) {
  case 值1:
    代码1
    break
  case 值2:
    代码2
    break
      ...
  default:
    代码n
}

7、断点调试

8、循环语句

1.while循环

while (条件表达式) {
   // 循环体    
}

2.for 循环（重点）

for(i = 1; i < 10; i++){ //条件
   console.log(i)        //循环语句体
}

3、循环控制关键字

        break 中止整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用（提高效率）

        continue 中止本次循环，一般用于排除或者跳过某一个选项的时候

9、数组

语法：使用 [] 来定义一个数组
let name = ['alice', 'Bob', 'Tom', 'lisa']
可通过 length 属性获取数组长度（同java）

数组常用方法：

        push( v1, v2 ... ): 动态向数组的尾部添加元素

        unshit( v1, v2 ... ): 动态向数组头部添加一个单元

        pop(): 删除最后一个单元

        shift(): 删除第一个单元

        splice( index, length ): 删除指定索引后的length个元素

        isArray( 数组 )：判断一个对象是不是数组

        map( i => lambda表达式 )：返回一个新数组（同scala中的 map）。i 表示当前索引

        filter( i => 过滤条件 ): 过滤器。同java

        every( i => 条件 ): 全部满足条件返回true

        some( i => 条件 ): 任意个 i 满足条件返回true

        slice( start_index, end_index ): 截取，左闭右开；-1表示最后一个元素

        indexOf( index ): 获取指定索引值

        includes( 值 )：判断是否包含指定值

        concat( 数组 )：连接两个数组，调用者在前，参数在后

        join( str ): 添加分隔符，并把数组转换为String类型

        split( str ): 分割

        forEach( i => lambda表达式 )

        sort()：升序

        sort( lambda表达式 )：同 java 排序

        reverse(): 反转

        find( i => 表达式 )：返回通过测试（函数内判断）的数组的第一个元素的值

10、函数

常规函数

定义语法：

function 函数名(参数列表) {
    //函数体
}

调用：

函数名(参数列表)

参数:

通过向函数传递参数，可以让函数更加灵活多变，参数可以理解成是一个变量。

        1. 声明（定义）函数时的形参没有数量限制，当有多个形参时使用 `,` 分隔

        2. 调用函数传递的实参要与形参的顺序一致

返回值：return

        1. 在函数体中使用return 关键字能将内部的执行结果交给函数外部使用

        2. 函数内部只能出现1 次 return，并且 return 下一行代码不会再被执行，所以return 后面的数据不要换行写

        3. return会立即结束当前函数

        4. 函数可以没有return，这种情况默认返回值为 undefined

匿名函数

函数可以分为具名函数和匿名函数

匿名函数：没有名字的函数,无法直接使用。

函数表达式

// 声明
let fn = function() { 
   console.log('函数表达式')
}
// 调用
fn()

立即执行函数

(function(){ xxx  })();
(function(){xxxx}());

无需调用，立即执行，其实本质已经调用了（链式调用法则）

多个立即执行函数之间用分号隔开（必要）

11、对象

注：属性和方法之间用逗号，隔开。

// 方法是依附在对象上的函数
let person = {
  name: '小红', //用逗号隔开
  age: 18,
  // 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
  singing: function () {
    console.log('两只老虎，两只老虎，跑的快，跑的快...')
  },
  run: function () {
    console.log('我跑的非常快...')
  }
}

可动态追加属性和方法

// 声明一个空的对象（没有任何属性，也没有任何方法）
let user = {}

// 动态追加属性
user.name = '小明'
user.['age'] = 18

// 动态添加方法
user.move = function () {
  console.log('移动一点距离...')
}

无论是属性或是方法，同一个对象中出现名称一样的，后面的会覆盖前面的

除以上几点外，其余同 java。

2、Web API

1、DOM

1、获取DOM元素

document.querySelector('标签')
document.querySelector('.css')//通过css类名需要加.
document.querySelector('#id')//通过id获取加#
document.querySelector('ul li:first-child')//获取ul的第一个li
document.querySelector('ul li:nth-child(n)')//获取ul的第n个li

//获取多个
document.querySelectAll(...)

获取整个body标签，可以直接用 document.body

以下方法也行，但逐渐不在使用

document.getElementById('id')
document.getElementsByClassName('css')
document.getElementsByTagName('tag')

2、操作元素内容

对象.innerText 属性: 获取元素文本内容，不解析标签

对象.innerHTML 属性：获取元素文本内容，会解析标签（推荐）

3、操作元素样式属性

1、操作元素属性

语法：对象.属性 = 值

2、操作元素样式

1、通过style属性操作css

对象.style.样式属性 = '值'

注：这里值必须加引号，数值类型也要加引号。

        多组单词的样式属性采用小驼峰命名。例如: a.style.backgroundColor = 'pink'

2、操作类名( className ) 操作CSS

对象.className = 'css类名1 css类名2 ...' 
#直接修改css类名，可多个（css要已存在才行）

3、通过 classList 操作CSS（推荐）

追加和删除类名（css要已存在）

对象.classList.add('类名') #追加;类名不加点，并且是字符串
对象.classList.remove('类名') #删除
对象.classList.toggle('类名') #切换（有就删掉，没有就加上）

4、操作表单元素属性

1、输入框

属性：

value：获取表单中的值（一般双标签用innerHTML，单标签用value）

type：获取表单类型

2、复选框 ( type=' checkbox ' name=' group1 ')。根据name分组

属性：

checked: 获取复选框是否勾选，值为 true 和 false

disabled: 是否可勾选，值为 true 和 false

5、自定义属性

强制推荐 data- 开头

属性：

        dataset: 获取所有自定义属性，存到集合中。

6、定时器 -- 间歇函数（异步）

setInterval( 函数，间隔时间毫秒 )：开启定时器；返回值是变量名
clearInterval(变量名)：关闭定时器

注：此处调用函数可使用匿名函数。使用正常函数不要加小括号。

7、事件监听（鼠键事件）

1、绑定事件

元素对象.addEventLitener('事件类型', 要执行的函数)

事件监听三要素：

1. 事件源：那个dom元素被事件触发了，要获取dom元素
2. 事件类型：用什么方式触发，比如：鼠键事件
3. 事件调用的函数：要做什么事

2、事件类型

3、事件对象

事件触发的具体信息，事件要执行的函数的第一个参数就是事件对象，一般用 e / event 接收

元素.addEventListener('click', function(e){//此处e就是事件对象
    //事件对象包含触发事件的全部信息
})

常用属性：

        type: 获取当前事件类型

        clientX / clientY: 获取光标相对于浏览器可见窗口左上角的位置

        offsetX / offsetY: 获取光标相对于DOM元素左上角的位置

        key：用户按下的键盘的值（keycode已经被淘汰）

        target: 保存事件元素的全部内容

4、事件流

事件捕获：父到子

事件冒泡：子到父

阻止冒泡：事件对象.stopPropagation()

a.addEventListener('click', function(e){
    e.stopPropagation()
    //其他语句
})

5、解绑事件

元素.remveEventListener( '事件类型'，执行的函数名 )

注：匿名函数无法解绑；执行的函数名不用加小括号。

6、阻止默认行为

e.preventDefault()

7、其他事件

1、页面加载事件

事件名：load

              DOMContentLoad

window.addEventListener('load', function(){
    //整个页面加载完才会执行回调函数
})
document.addEventListener('DOMContentLoad', function(){
    //DOM元素加载完才会执行回调函数
})

2、元素滚动事件

事件名：scroll

经常给 window 加该事件

属性：(可读写，赋值数字不带单位)

        scrollLeft：页面向左滑动的像素

        scrollTop: 页面向上滑动的像素

注：获取最大html标签语句

document.documentElement

3、页面尺寸事件

事件名：resize（窗口尺寸变化就触发回调函数）

属性：

        clientWidth: 元素宽度（不包含外边框）

        clientHight: 元素高度

8、手机端事件

8、元素的尺寸和位置（都是属性值）

获取宽高：（包含外边框）

        offsetWidth：获取宽

        offsetHeight：获取高

获取位置：( 只读。获取最近带有定位的父元素距离，父级元素没有定位，默认以整个界面为边界 )

        offsetLeft：获取据左边界距离

        offsetTop：获取距离顶部边界的距离

总结：

9、时间对象(需要实例化)

1、实例化（new）

//获取当前时间
const date = new Date()//date接收当前日期及时间
console.log(date)//输出Wed Aug 16 2023 20:06:20 GMT+0800 (中国标准时间)

//指定时间,传入的字符串是什么时间，就转换为时间类型
//还可以传入时间戳
const date1 = new Date('2000-1-1 08:00:00')
console.log(date1)//输出Sat Jan 01 2000 08:00:00 GMT+0800 (中国标准时间)

2、日期对象方法（都是方法，直接点调用）

getFullYear() 获取年份
getMonth() 获取月份(0-11,结果月份少一,加一才是正确月份)
getDate() 获取月份中的每一天
getDay() 获取星期几（0-6，周日是0）
getHours() 获取小时（0-23）
getMinutes() 获取分钟（0-59）
getSeconds() 获取秒（0-59）
getTime() 获取时间戳

3、时间戳

什么是时间戳：

        是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式

使用场景：倒计时

具体做法：

将来的时间戳 - 现在的时间戳 = 剩余的时间毫秒数

获取时间戳的方法（三种）：

getTime()//时间对象的方法

+new Date()
+new Date('2099-1-1 0:0:0')//返回2099-1-1 0:0:0的时间戳

Date.now()(无需实例化，但只能返回当前时间的时间戳)

10、节点操作

1、获取节点

属性：

        parentNode：获取父节点

        children: 获取子节点（仅获取元素节点，推荐）

        childNodes: 获取子节点（不推荐）

        nextElementSibling: 获取上一个兄弟

        previousElementSibling: 获取下一个兄弟

2、增加节点

创建一个新节点，然后把新阶段放到指定元素中

//创建节点
document.createElement('标签名')
例：document.createElement('div')

//追加节点
父元素.appendChild(要插入的元素)//默认插入到最后
父元素.insertBefore(要插入的元素，在哪个元素前面)

3、克隆节点

节点.clone(bool) //克隆一份调用节点

4、删除节点

父节点.removeChild(要删除的元素)

2、BOM

浏览器对象模型

1、定时器 -- 延时函数（只执行一次）

        setTimeout(回调函数，等待的毫秒)

JS执行机制

先执行同步任务，再执行异步任务

2、location对象

属性：

        href: 利用js的方式去跳转页面

        search：返回 ul 地址？后的内容

        hash：获取 ul 地址 # 后的内容

//自动跳转到哔哩哔哩
location.href='http://www.bilibili.com'

方法：

        reload(): 刷新页面

location.reload() //刷新页面

3、navigation对象

主要获取浏览器信息

略

4、history对象

方法：

        back(): 返回上一个网页

        forward(): 前进下一个网页

        go(参数)：参数1表示前进一步，-1表示后退一步

5、本地存储

1、localStorage

永久存储，页面关闭也会存在

语法：（增删改查）

//增和改
localStorage.setItem(k, v)//键值对存储

//查
localStorage.getItem(k)

//删
localStorage.removeItem(k)

//其他
localStorage.key(value)//获取指定value的key
localStorage.length：//获取本地共有几个数据（属性）

注：只能存字符串类型，存储的数字等会自动转为字符串

存储复杂(对象)类型需要转为JSON后再存储

JSON.stringify(obj) //把obj对象转换为JSON类型
//之后就能存储
localStorage.setItem(k, JSON.stringify(obj))

2、sessionStorage

只在本次会话保存，退出页面或退出浏览器清除所有数据

用法同 localStorage