js1.0

javaScript介绍

JavaScript是一种运行在客户端的编程语言，实现人机交互
作用：网页特效
表单验证
数据交互
服务端变成（node.js）

JavaScript权威网址：mdn

JS书写方式

三种书写方式：行内、内部（一般写在 /body前面）、外部 （script标签中间无需写代码，否则会被忽略）

js注释

单行注释// ctrl+/
多行注释/**/ shift+alt+a
代码分号可写可不写

js语句
输入：prompt（）
输出：弹出警告alert()
输入 document.write()
日志 console.log()

字面量

在计算机中，字面量（literal）是计算机描述事/物

变量

用来存储数据的容器
声明变量 变量名 赋值号 值
let num = 10
本质：是程序在内存中申请的一块用来存放数据的小空间

常量

永远不会改变的值
const num =10

数组

[ ]
一组数据存储在单个变量名下

新增.push()结尾追加
开头追加.unshift

删除数组 .pop()删除最后一个元素
.shift()删除第一个元素
.splice(起始位置，删除几个元素)

数据类型

基本数据类型

number 数字类型
string 字符串
boolean 布尔型
undefined未定义型
null 空类型

查看数据类型 typeof
数据类型转换 隐式转换 和 显示转化
隐式转换：+号两边有一个字符串，都会把另一个转换成字符串
除了+意外的运算符，-*/都会把数据类型转成数字类型
显示转换 ： parseInt只保留整数
parseFloat可以保留小数

boolean

0、undefined、努力了、法拉瑟、NaN 转换为布尔值后都是false，其余则为true

运算

赋值运算

num = num+1 | num+=1
+= -= *= /=

一元运算

自增 前曾++i 后增i++

比较运算符

< > >= <= == 左右两边是否相等
=== 左右两边是否类型和值都相等
!== 左右两边是否不全等
ASCII 字符代码表

逻辑运算符

&& 一假则假
|| 一真则真

引用数据类型

object 对象

流程控制

顺序结构 分支结构 循环结构

单分支 if(){}
双分支if (){}else{}
多分支if(){}else if(){}
三元运算符 条件 ？ 满足条件执行的代码：不满足条件执行的代码

switch 语句
switch (数据){
case 值1：
代码
break
case 值2：
代码
}

断点调试 网页中source

while (循环条件){执行代码}循环 不知道循环次数用while
for ( 起始;终止 ;变量变化 ){} 循环 知道循环次数用for循环

break退出循环
continue 结束本次循环，继续下次循环

js 运算

   + - *  /  
           //2
    /*         let uname = prompt("请输入姓名")
            document.write(uname) */
    //3 交换临时变量
    /*         let num1 = 10
            let num2 = 20
            let temp
            temp = num1
            num1 = num2
            num2 = temp
            console.log(num1, num2) */

    /*let uname = prompt('请输入您的姓名')
    let age = prompt("请输入您的年龄")
    let sex = prompt('请输入您的性别')
    document.write(uname, age, sex)*/


    //4 常量  常量不可改变
    /*const num = 10
    console.log(num)*/

    //5.算圆面积
    /*let r = prompt("请输入圆半径：")
    let S = 3.14 * r * r
    document.write(S)*/

    
    //6
    //模板字符串   反引号 `` ${}
    //检测数据类型  typeof x
    /*let num1 = +prompt('请输入第一个数')
    let num2 = +prompt('请输入第二个数')
    alert(`两数之和为：${num1 + num2}`)*/
    //比较运算符
    == 判断两边值是否相等
    ===左右两边是否类型和值都相等
    ！==左右两边是否不全等

// 逻辑运算符

函数

执行特殊任务的代码块
有利于精简代码复用
function 函数名(){}

传参 函数名（参数） ：极大提高了函数的灵活性

函数返回值 return 数据
在函数体中使用return关键字将内部的执行结果交给函数外部使用
return 后面代码不会再被执行，会立即结束当前函数，所以return 红棉的数据不要换行写
return 函数可以没有 return ，这种情况函数返回值为undefined

作用域
可用性的代码范围
作用域的使用提高了程序的可靠性，减少了名字冲突。
全局作用域
局部作用域
特殊情况：如果函数内部，变量没有声明，也当全局变量看。

匿名函数

将匿名函数赋值给一个变量，并通过变量名进行调用
let fn = function(){}

立即执行函数
应用场景：避免全局变量之间的污染
(function(){})()；
(function(){}());

逻辑中断

对象

object ：JavaScript一种数据类型， 无序的数据集合
let 对象名 = {
属性：属性值，
方法名：函数
}

查： 对象.属性 obj.age
对象[‘属性名’] obj[‘age’]
改： 对象.属性=新值
曾：对象.属性=新值
删除： delete 对象.属性

遍历数组对象
for(let k in obj){}
k是获得对象的属性名，对象名[k]是获得属性值

内置对象 -Math

random:生成0~1之间的随机数[0，1）
ceil:向上取整
floor:向下取整
max：找最大数
min:找最小数
pow:幂运算
abs:绝对值

数据类型存储方式

基本数据类型 值类型 放在 栈中
复杂数据类型 引用数据类型 放在堆

Web API

DOM(document object model文档对象模型)

操作网页内容
开发网页内容特效和实现用户交互
DOM树 将HTML文档以树状结构表现出来
作用：文档树直观的体现了标签之间的关系

document.querySelector(‘css选择器’)

document.querySelectorAll(‘css选择器’)得到是一个伪数组 ：有长度有索引号 但没有 pop（） push()等数组方法 要想得到里面的每一个对象，则需要遍历（for）的方法获得

操作元素内容

元素 .innerText属性
将文本内容添加/更新到任意标签位置
显示纯文本，不解析标签

元素 .innerHtml 属性 能识别文本 ，能购解析标签（推荐使用）

操作元素样式

通过 style 属性操作css

• 多单纯采用小驼峰命名

操作元素样式属性

元素.className = ‘类名’ 会覆盖原先类名 如需保留原先类名 加上原先类名即可。
元素.classList.add(‘类名’) 追加类 类名不加点
元素.classList.remove(‘类名’)删除类
元素.classList.toggle(‘类名’)切换类 有就删掉 ，没有就加上

操作表单属性

表单.value = ‘用户名’
表单.type = ‘password’
innerHTML得不到表单的内容

自定义属性

在html5中data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方法获取

BOM（浏览器对象模型）

定时器-间隙函数

1. 开启定时器
   setInterval(函数，间隔时间)
   作用：每隔一段时间调用这个函数
   间隔时间单位是毫秒

clearInterval(变量名)

事件监听

事件是在编辑时系统内发生的动作或者发生的事情
用户在网页上单机一个按钮

元素对像.addEvenListener(‘事件类型’，要执行的函数)
事件源：dom元素被事件触发了，要获取dom元素
事件类型：用什么方式触发，比如鼠标单击click，鼠标经过mouseover等。
事件调用的函数：要做什么事

• DOM L0
  事件原.on事件=function（）{}
• DOM L2
  事件元.addEventListener（事件，事件处理函数）
• 区别：on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性。

事件类型