新！JS学习笔记

W3C HTML DOM标准

整个文档是一个文档节点
每个HTML元素是一个元素节点
HTML元素内文本是文本节点
HTML属性是属性节点

DOM树能干什么

1.JavaScript 能够改变页面中的所有HTML元素
2.JavaScript 能够改变页面中的所有HTML属性
3.JavaScript 能够改变页面中的所有CSS样式
4.JavaScript 能对页面中所有事件作出反应

简介&特点&作用

### 简介
`JavaScript`是由美国网景通信公司开发的一种跨平台网页，面向对象`object-oriented`网页脚本语言

`JavaScript`代码可以直接嵌入HTML文件中，随着网页一起传送到客户端浏览器，然后通过浏览器来解释执行

JS是前端开发的的核心语言，基于事件和驱动的解释性，松散型语言

JS的解释性，松散型理解？

    1. 解释性：边执行边解释，在浏览器环境下运行
    2. 松散型：定义变量的时候，不需要强类型，直接弱类型，定义的变量不需要声明类型

---------------------------------------------------------

### 特点

    1. 脚本编写语言
    2. 基于对象
        可以被看作是一种面向对象的语言，这意味着JavaScript能运用其已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用
    3. 跨平台性
    4. 事件驱动
    5. 简单弱类型
        JavaScript是一种基于Java基本语句和控制流之上的简单而紧凑的设计
        变量类型是采用弱类型，并未使用严格的数据类型
    6. 解释性执行
        不像这些语言需要先编译，而是在程序运行过程中被逐行地解释

---------------------------------------------------------

### 作用

    1. 实现动态页面(将动态内容添加到页面中)
    2. 数据验证
    3. 响应事件
    4. 可以检测浏览器

---------------------------------------------------------

JS组成

ECMAScript - 描述了该语言的语法和核心

BOM - 浏览器对象模型

DOM - 文档对象模型, 描述与浏览器进行交互的方法和接口

引入方式

内部: <script> </script>
行内: <div onclick="alert('')"></div>
外部: <script type="text/javascript" src="path">

关键字

关键字: 已经具有一定功能的词语

保留字: JS保留的，可能会在将来使用成关键字的词语

var 变量名 = “属性值”;

语句

输出语句

页面输出语句:

1
2
3

document.write();   // 直接写在页面上
document.writeln(); // 写完屁股带个空格
document.write("可以写标签")

控制台输出:
1
console.log();

变量

存储作用

四种:

声明变量的同时直接赋值
先声明，后赋值
只声明，不赋值
不声明，直接赋值(尽量PASS)

示例:

var 变量名;

var 变量名 = "赋值";

var [变量名1, 变量名2] = [赋值1, 赋值2];

var 变量名 = prompt("提示词");

//不声明直接赋值
变量名 = 赋值;

特殊类型 NaN, Infinity

NaN(not a number)
- NaN(not a number) 非数字的数值类型
Infinity
- Infinity 无穷大(正无穷)
- -Infinity 无穷小(负无穷)

示例：

1
2
3

console.log(0 / 0);  //NaN
console.log(4 / 0);  //infinity
console.log(-4 / 0); //-infinity

数据类型

number 数值类型
- 包括整数和浮点数
string 字符串类型
- 用单引号或双引号括起来的零个或多个单一的字符所组成
boollean 布尔类型
- 取值为true （1）和 false （0）
undefined 未定义值
null 空类型
- null取值只有null
object 对象
- 引用型

数据类型检测&验证&转换

typeof //检测类型
- 用法：console.log(typeof 验证对象);
isNaN() //验证是否为非数字(其他类型)
- 用法：console.log( isNaN(验证对象) );

======

.toString() //转换字符串
- 用法：转换对象.toString();
- 不能转换null和undefined
String() //转换字符串
- 用法：String(转换对象);
- 啥类型都转
内容与空字符串拼接，可对其他所有类型进行转换字符串
- 用法：转换对象 + “”

======

Boolean() //强转布尔类型
- 用法：Boolean(转换对象);

======

Number() //转数值，任何类型都可
- 用法：Number(转换对象)
parseInt() //转整数, 只对字符串起作用
- 用法：parseInt(转换对象)
- 不能转布尔类型和null
parseFloat() //转浮点数, 只对字符串起作用
- 用法：parseFloat(转换对象)
- 不能转布尔类型和null
.toFixed() //保留小数点位数
- 用法：处理对象.toFixed(位数)
转换数值类型, 奇妙方法
- 转换对象 * 1
  - 例子：console.log(typeof ( 转换对象 * 1 ));
- +转换对象
  - 例子：console.log(typeof ( +str2 ));

对象object

引用数据类型(复杂数据类型)
用于存储各种键值集合和更复杂的实体
JS对象有属性和方法，属性是存储在对象中的名称: 值对，方法是存储在属性中的函数，用于执行某些动作
分为内置对象 / 原生对象和自定义对象
- 内置对象/原生对象是JS语言本身预定义的对象，如String、Number、Boolean、Array、Date、Math等
- 自定义对象由用户创建，也可以说是封装好的功能，可以用Object()函数创建

运算符

算数运算符

+ 加
- 数值计算，字符串拼接
- 减
- 数值计算，字符串是纯数字做计算，是字符输出NaN
* 乘
- 小数与小数相乘时，需要分别扩大倍数，结果缩小总倍数
- 小数例：console.log((0.2 * 100) * (0.2 * 100) / 10000); 输出：0.04
- 交互时用这种很不错 (a * 100) * (b * 100) / 10000
/ 除
- 第二个数字不能为0
- 正数除0情况：console.log输出 Infinity 正无穷
- 负数除0情况：console.log输出 Infinity 负无穷
% 取模取余
- 取余的第二个数字也不能为0
- 是的情况，console.log输出 NaN
++ 自增
-- 自减

自增 & 自减

++在后

i先将自身的值赋值给变量a , 然后再自增1

变量设为i

var i = 1;
var a = i++;  

console.log(a); //输出1
console.log(i); //输出2
                // ++在后，先计算表达式，再给i自加1

++在前

++在前，先给自身加1，再计算表达式

变量设为i

var i = 1;
var a = ++i; // i先将自身的值加1，再将自增后的值赋值给变量a

console.log(a); //输出2
console.log(i); //输出2

–在后

–在后，先计算表达式，再给i自身减1

变量设为i

var i = 4;
var a = i--;  // i先将自身的值赋值给变量a，然后再自减1

console.log(a); // 输出4
console.log(i); // 输出3

–在前

–在前，先给自身减1，再计算表达式

变量设为i

var i = 4;
var a = --i;  // i现将自身的值自减1，再将自减后的值赋值给变量a

console.log(a);  //输出3
console.log(i);  //输出3

关系运算符

> 大于
< 小于
>= 大于等于
<= 小于等于
= 赋值
== 等于
!= 不等于
=== 全等比较值和类型是否都相等
!== 不全等同上

逻辑运算符

&& 逻辑与运算也叫短路与运算
- 多条件都满足输出
|| 逻辑与运算也叫短路与运算
- 满足所有条件之一输出
! 逻辑非运算

位运算符

& 按位与运算
- 数值二进制化运算(对应位都为1 输出1 否则为0)
- 例：3 & 5 = 1
- 二进制化：0011 & 0101 = 0001
| 按位或运算
- 数值二进制化运算(对应位其一为1 输出1 否则为0)
- 例：3 & 5 = 7
- 二进制化：0011 & 0101 = 0111
^ 按位异或运算
- 数值二进制化运算(对应位相同为0 输出0 否则为1)
- 例：3 ^ 5 = 6
- 二进制化：0011 & 0101 = 0110
~ 按位非运算
- 数值二进制化运算(对应位 0变1 1变0)
- 就是数字加一并取反
- 例：~3 = -4
- 二进制化：32位补全，反过来，在反过去
<< 左移
- 数值二进制化运算二进制值右边填0数量为被操作数
- 就是操作数乘上2的指数（值为被操作数）
- 例：3 << 2 = 3 * (2 * 2) = 12
- 二进制：0011 填0后 = 001100
- 例：5 << 7 = 5 * (2 * 2 * 2 * 2 * 2 * 2 * 2) = 256
>> 右移
- 数值二进制化运算二进制值左边移动数量为被操作数
- 就是操作数除(取模)2的指数（值为被操作数）保持正负号
- 小数变0, 负小数进一取整如 -0.12 = -1 ，-1.22 = -2
- 例：-12 >> 2 = -3
- 例：3 >> 2 = 0
- 例：-3 >> 2 = -1
>>> 无符号右移
- 数值二进制化运算无符右移动忽略正负号
- 就是操作数左边补0 忽略正负号
- 例：-12 >>> 2 = 1073741820
- 二进制：-12 = 1111111111111111111111111111111110001100
- 额现阶段不太理解，后续更改吧

三元运算符(三目运算符)

跟if else效果差不多

语法：
- 判断条件 ? 执行语句1 : 执行语句2
- 结果为真执行? 后语句1
- 结果为假执行: 后语句2
- 多条件可以换行写，但是行尾不要加分号
案例：

/* 
    如果是绿灯，执行过马路；
    如果是红灯，执行等信号等；
    如果是黄灯，执行提高警惕；
    
*/

var light == parmpt("啥灯");
light == "绿灯" ? console.log("过马路") 
: light == "红灯"? console.log("等信号灯") //冒号链接符放前面看着舒服点，咋放都行
: light == "黄灯" ? console.log("提高警惕") 
: console.log("信号灯有误");

案例2：

/* 
    使用三元运算符判断
    手动输入成绩
    考试成绩大于60，显示及格
    否则显示继续努力
*/

var score = prompt("your score") * 1; //隐式数值转换
score > 60 ? console.log("Clear") : console.log("NO");

条件语句

if…else if…else

//单分支结构语句
if(判断条件){

}

-----
//双分支结构语句
if(判断条件){

} else{

}

-----
//多分支结构语句
if(){

}else if(){

} else{
    
}

switch语句

case 常量 : //表示不同情况
表达式的结果等于哪个case的常量，则执行其后的语句，执行完break就跳出switch结构，都不满足则执行default的语句。
switch 用的是全等比较

语法：

    switch(表达式){
        case 常量1 :
            语句;
            break;
        case 常量2 :
            语句;
            break;
        ···
        case 常量n :
            语句;
            break;
        default:
            语句;
            break;
    }

//也可以--
    switch(){
        case 常量1:
        case 常量2:
        case 常量3:
            语句;
            break;
        case 常量4:
            语句;
            break;
    }

循环

while语句

循环结果为true，就继续，直到false
人话：满足条件就停止
持久循环使用这个
下面迭代条件语法位置顺序要写对，🐎蛋写错了会把内存撑爆

语法：

while(循环条件){
    //循环体
    //统计次数, 从零开始（可有可无）
    //迭代条件 ++ --
}

-------------
//例：
//打印10次OK 循环从0开始
var i = 0
while(i < 10){
    console.log("OK");
    count++ ; //统计次数，从零开始（可有可无）
    i++ ;     //迭代条件
}

死循环写法:

没差啥条件为true而已

/*案例：
    银行存款有5万元
    利息是0.73%
    几年后能到11万
*/

var money = 5000;
var year = 0;

while(true){
    money = money + money * 0.0073 ;
    year++ ; //循环一次 年份加一
    if(money >= 110000){
        break; //true 终止操作
    }
}
console.log(year + "年可达11万元")

do-while 语句

与while循环区别，这个是先循环后判断，至少会跑一次
- 也就是说不满足跑一次
语法:

do {
    //循环体
    //迭代条件 ++ --
}while(循环条件)

for循环

语法:

//执行顺序 1(初始变量) 2(循环条件) 3(循环体) 4(迭代条件)
for (初始变量; 循环条件; 迭代条件){  
    //循环体
}

区别

while 和 do-while 区别

while 先判断，后执行
do-while 先执行，后判断
while循环和 do while循环当while后面的表达式的第一次的值为“真”时
- 两种循环得到的结果相同；否则不相同。

for 和 while 区别

while是多用于不知道循环次数的时候使用
for是多用于已知循环次数的时候使用

break和continue的区别

break 结束整个循环执行循环后的语句
continue 结束本次循环继续下一次循环

DOM文档接口 & 事件 & 弹窗

DOM文档接口

- document.write(" ") //直接页面输出 也可以写标签
- document.writeln(); // 写完屁股带个空格

事件

- onclick      单击事件

- ondblclick   双击事件

- onmouseout   鼠标移出

- onmouseover  鼠标移入

- onscroll     鼠标移入

- onmousewheel 鼠标轮滚动事件

弹窗

- alert("")     直接输出

- condfirm("")  弹出确认框，有取消按钮

- prompt("")    弹出输入框

函数

普通函数：
- 没用特殊要求时，可以用普通参数
带参函数：
- 具体值不定时，使用带参函数
  - 形参: 函数体内的参数，如果实参传入少于形参，多出来的形参值为undefined
    - 例:
      1
      2
      3
      4
      5
      6
      7
      function name(形参1, 形参2, 形参3){
      console.log(形参1 +","+ 形参2 +","+ 形参3);
      }
      name(实参1, 实参2)
      
      //输出
      实参1,实参2,undefined
  - 实参: 调用时传入的参数, 当实参多于形参，多的部分会自动去掉，跟没识别差不多
  - 传参: 将实参对位传递给形参的过程

语法:


function name(参数){
    函数体;
}

 - 参数也可以是  其他类型  只要有值

//expmale：

function name(a,b){
    函数体
}

//use

name( 1 + 1, prompt("???"))
//传入时注意参数类型是否满足函数体执行

W3C HTML DOM标准

DOM树能干什么

简介&特点&作用

JS组成

引入方式

关键字

语句

输出语句

变量

特殊类型 NaN, Infinity

数据类型

数据类型 检测&验证&转换

对象object

运算符

算数运算符

自增 & 自减

++在后

++在前

–在后

–在前

关系运算符

逻辑运算符

位运算符

三元运算符(三目运算符)

条件语句

if…else if…else

switch语句

循环

while语句

do-while 语句

for循环

区别

while 和 do-while 区别

for 和 while 区别

break和continue的区别

DOM文档接口 & 事件 & 弹窗

DOM文档接口

事件

弹窗

函数

数据类型检测&验证&转换