JavaScript自学笔记

 

一，了解背景知识

 

如图1所示，相关知识：

    交互：用户操作，程序处理用户的操作，返回处理结果

    JS：专门编写交互的程序语言

2，历史：

1995年，Nescape：导航浏览器，由于当时（如日期验证12月32号，这个小事都需要发到服务器验证，然后又等发回来，一个操作一个来回，服务器接待不过来的而且当时网络很差10k / s），于是网景公司提出说应该有一种客户端程序语言：LiceScript，同年java出现（写一次运行任何地方迷倒了网景公司上层）直到现在前端任何一种语言都不能做到一次编辑处理执行（比如nth-child ie浏览器就不行），在前端任何时候都要考虑兼容性;为了赶时髦，把LiveScript改为javascript于是委派布兰登。艾奇（Brendan Eich），10天时间间，像极了的Java的的的的的的的的但一定要比的的的的的的的的JavaScript的简单。由于作者负气加赶工写出了JS，但是问题相当多。由于当时navigaror很出名，JS乘着此浏览器的东风传遍了世界，虽然很多问题，但由于当时就这一种前端脚本，大家只好硬着头 使

1996：javaScript1.1 - > ECMA - >的ECMAScript标准（宋江被招安，成为正规军，否则始终是草寇）

            同年微软（要不是因为当年微软捣乱，JS也不至于成为现在这样）：做个人操作系统，一个窗口卖一台电脑，它把柄即嵌入的操作系统中，称也支持ECMAScript中 - >的Jscript

    ECMAScript JacaScript Jscript

    的的的的的的的的ECMAScript中：标准，规定（菜谱）

     JacaScript：netcape按照标准实现的的的的的的的的的JavaScript语言

    的的的的的的的Jscript脚本：微软遵照的的的的的的ECMAScript中的标准实现的自己的语言

    两家竞争各加各的东西，导致程序员不得不写两套代码

1998年年年年年年年年年：W3C：

    DOM：基于ES标准制定的专门操作网页内容的API（基本实现一次代码处处执行）

    API：浏览器已经实现的，开发人员直接使用的编程接口

BOM：专门操作浏览器窗口的API

        没有标准，各浏览器厂商自行定义

所以大部分浏览器兼容在BOM上

3，组成部分：

                    如图1所示，EcmaScript的的的的的的的的（的JavaScript的的的的的的的核心语法）

                    2，文档对象模型（DOM）---专门操作网页内容的API

                    3，浏览器对象模型（BOM）---专门操作浏览器窗口的API

如图4所示，基本特点：1，解释性语言：

                        2，弱类型语言：

                        3，基于对象：

5，用途：客户端

                如图1所示，客户端数据计算（比如购物车数量，总价等等）

                2，表单输入验证（比如规定输入字符个数）

                3，浏览器事件的触发和处理（JS绝大对数正式的功能几乎都是被事件触发的）

                如图4所示，网页特殊效果的制作（JS，BOM，DOM可以对网页上一切内容任何位置做任何你想要的操作）----（只有想不到没有做不到----拼的是想法和创意）

                5，服务器的异步数据提交

 

 

 

二搭建环境

 

1，运行的相关知识：浏览器包含两个小软件

                                   内容排版引擎+ JS解释引擎

        内容排版引擎：专门解析HTML和渲染CSS的软件

        JS解释引擎：专门解释，执行JS程序的软件

        解释执行（JS，HTML，CSS）：默认从上到下，读一行，执行一行，后读到的相同内容会覆盖先读到的

       脚本：不需要预编译，边解释边执行的程序

                  不像Java的的的的的的的的的那样需要先编译，查错

2如何编写和调试：

    JS脚本程序：就是普通文本，EditPlus的中的中的中的中的就可以编写

    运行JS脚本：2种：

        1，独立安装的JS解释器中：Node.js的的的的的的的的的 

        2，浏览器的JS解释器中：3处

            1，浏览器的控制台中：控制台

                （使用）什么东西的什么功能

                                的的的的的的的的console.log（“”）

              常用操作：

                再调出前边执行过的语句，向上箭头

                调出当前语句后边执行过的语句：向下箭头

                清屏：

                编写多行：移+回车

            2，在网页中编写JS：2处

                如图1所示，在<SCRIPT>元素中：页面中专门编写的JS程序的区域

                随页面加载过程而解释执行

                可以在任意位置出现任意个

                想页面中输出一句话，

                    使用页面的输出功能：

                     document.write（）的的的的的的的的的直接在体元素中写入HTML

                在当前窗口，弹出警告框，显示信息：

                使用窗口的警告功能：

                    [窗口]警报（“XXX”）

                    警告一次，弹一次框，每个框都会阻断浏览器的加载和程序的执行过程

                2，在元素的事件处理函数中：仅能编写少量代码

                    事件：浏览器自动或手动触发的元素状态改变

                    事件处理函数：在事件名

                                            本质是元素的一个属性

                                             属性值是JS语句

                    执行时机：只有事件触发，才执行;

            3，使用外部的的的的的的的的的.js文件，单独存储JS程序

                1，创建并编写JS文件

                2，在页面中引入js文件：<script src =“url”> </ script>

    调试JS程序：都是在控制台中

        错误：程序中的错误

        调试：找出错误，并解决错误的过程

        如果一个脚本中发生错误不会影响其他脚本的执行，只会影响本脚本中，出错之后的代码

        控制台中会包含重要错误信息：

            错误类型：错误原因错误的位置链接

三，变量和常量

 

1，***变量：内存中存储*一个*数据的存储空间，再起一个名字

 何时使用：程序中反复使用的数据，都要先保存在变量中，在参与运算

如何使用：声明赋值取值

    1，声明：在内存中创建一个新变量

        如何声明：var variable量名;

                仅声明但暂未赋值，默认值为未定义

                变量名：1，不能以数字开头，仅能包含母，数字和下划线

                              2，不能用保留字，JS中已经预先

                                    使用的关键字;比如名字X

                              3，见名知意

                              4，驼峰命名：第一个单词首字母

                                小写，之后每个单词首字母大写

    2，赋值：

            *对已经包含值的变量赋新值，则新值会替换旧值

        建议：1，声明的同时，初始化变量的值

                    VAR变量名=值;

    3，取值：只要使用变量名，在运行时，会被自动替换为变量中的值

    特殊情况：

        如图1所示，变量仅声明未赋值时，可以使用，值为未定义

        2，变量未声明时不能使用（取值），否则报错，XX未定义;

        3，未声明的变量可以直接赋值，其实和VAR不同

        ***在程序正式执行前，无用功的声明变量都会被提升到当前脚本块顶部集中声明，再开始执行程序，赋值留在原地;

                                                          图1-1 js变量声明过程

2，常量

    注意点：

        1，常量常量名=值;常量名一般大写

        2，一旦创建，其值修改不了，即使修改也修改不成功但也不报错

 

四，数据类型：数据在内存中的存储形式

为什么要有不同的数据类型：现实中，不同类型的数据，都有专门的用途，如数字天生做比较做计算的，字符用来显示信息的

2大类：原始类型的值和引用类型的对象

            原始类型：值直接保存在变量本地的类型，只有一个值还不能是多个，还不能太复杂

                            5类：数字字符串布尔值undefined null

            引用类型：值没有直接保存在变量本地的类型，变量保存的是指向实际数据所在位置的地址

1，号码：表示所有数字

    定义：不加引号的数字---数

    何时使用：只要做计算或比较的数字，都不加引号;反例：银行卡号，手机号这些都应该是字符类型

                    如：年龄，价格

    所有空间：所有数字都是用64位比特（8字节字节）二进制存储，整数采用32位二进制存储1字节= 8位

        1.toString（2）---------------- 00000000 00000000 00000000 00000001

        100000000.toString（2）----- 00000101 11110101 11100001 00000000

         不能直接使用数字的的的的的的的的的ToString（2）会报错，应该先赋给变量;

        

        结论：数值大小和所占空间，无关;如同现实生活中水杯装水一样，装一点也是这个杯子装，装满也是这个杯子

    特殊情况 - 舍入误差：计算机中也有无法精确计算的数字而导致计算结果精度偏差; - 不可避免

                    特别是十进制小数在进行计算时，由于程序执行的时候数据被转成了二进制，转二进制时小数很容易变为无限二进制小数

            解决：按指定小数位数四舍五入= n.toFixed（2）将计算结果按2位小数四舍五入<= Math.round（n * 100）/ 100

2，字符串：字符串，表示所有文字信息

    如何定义：凡是用作显示的信息都要加引号，单双引号不分

    何时使用：凡是用作显示的信息都要加引号，如手机号，身份证号，QQ号

    JS中没有字符类型，一个字也要加引号;

    所占空间：每个英文字母或数字，1字节

                     每个汉字，2字节

        JS的内存中都是用字符的统一的号存储字符

        '字符' .charCodeAt（指数）获得字符中第第引用字符的Unicode的的的号

3，布尔值：只有两个值：真和假

    如何定义：不带引号的真和假的就是布尔类型

    何时使用：保存对错，真假，成立不成立都用布尔类型

4，未定义：1，声明变量未赋值; 2，对象属性不存在

二：***数据类型转换

    *** JS是弱类型编程语言：3点

    1，声明变量时，不用考虑变量中将要存储的数据类型

    2，赋值时，动态判断数据的类型，同一个变量先后可保存不同类型的数据

    3，运算时，JS会根据自己的需要，动态转换数据类型

2大类：

如图1所示，隐式转换：无需程序员干预，自动完成的转换

    先讨论算数运算中的隐式转换：

        规律：1，默认情况下，一切转为数字类型，做算数计算

                        布尔类型：真转为1，假转为0;

                        未定义转为NaN的的的的的的的的

                        ''，[]，空转为0

                  2，+法计算中，只要一个是字符串，都转为字符串，+变为字符串拼接符

                        其他类型转为字符串：在字面量前后直接加引号

        表达式：由数据，变量和运算符组成的公式

                    *默认从左向右两两计算

        楠：不是一个数字的数字（不是数字）  

                    意义类型

        何时遇到：当无法转为数字或无法正常计算时结果为为NaN的的的的的的的的;

            特点：和任何数据做计算，结果永远为NaN的的的的的的的

                        加法计算中，碰上字​​符串，也会转为 '男'

            typeof运算运算运算（X）：返回X的数据类型名称（是字符串）：编号，字符串，布尔值，未定义的（没有空因为空返回的是对象）

2，强制转换：程序员主动调用专门的函数完成的转换

    1，任意到字符串：2种：

            var str = x.toString（）;

            var str = String（x）; - >相当于隐式转换

            区域：String（x）万能的（number类型数据，布尔型数据（true - >'true'，false - >'false'undefined - >'undefined'null - >'null'））

                            x.toString（），不确定和空转不了会报错

        但是为NaN的都都以转为'男'的字符串

    何时使用：通常都是JS在需要时，自动调用

2，***任意toNumber：3种

    1，任意数字：var n = Number（x）; - 隐式

            何时使用：将非字符串类型（针对布尔值）转为数字使用，和字符串数字转为数字类型数字

            特例：Number（''） - > 0，Number（[]） - > 0，Number（null） - > 0，Number（undefined） - > NaN

    2，字符串到数字：

    1，整数：var n = parseInt（str，[radix]）;

        何时使用：将*字符串*转为整数时使用

        如果传入的不是字符串，则会自动隐式转为字符串

        原理：从头开始读取字符串中的每个字符

                跳过开头的空字符

                只读取数字字符

                只要碰到第一个不是数字的字符，就退出

                不认识小数点

        也可用于其他进制的数据转为十进制数，radix2-36，

       基数：如果省略该参数或其值为0，则数字将以10为基础来解析如果它以“0X”或“0X”开头，则以16为基数。

               如果该参数小于2或者大于36，则parseInt函数函数函数函数函数函数（）将返回的的NaN的的的的。

        转不了就返回NaN，parseInt（''） - > NaN，parseInt（'$ 12'） - > NaN，parseInt（true） - > NaN

        数字（X）vs parseInt（str）

            数只认识纯数字组成的字符串，可转布尔类型

            parseInt函数函数函数函数函数函数函数函数认识包含非数字字符的字符串开头位置的数字，不可转布尔

    2，小数：var n = parseFloat（str）;只认第一个小数点

    3，任意类型为布尔值：var bool = Boolean（x）

        “”，0，NaN，undefined，null - > false

      [窗口。]提示（ '输入提示'）;凡是从页面进来的都是字符串

        例如：var salary = parseFloat（prompt（'输入提示'））;在得到数据时就转;

五，运算符和表达式：

    程序：人的想法在计算机中的执行步骤

    1，运算符：程序中模拟人的思维运算或判断的符号

         表达式：由变量，数据，运算符组成的公式

1，算术运算符：+ - * /％++ -

    返回值只能是号码类型，计算无效返回的为NaN的的的的的的     

    隐式转换：默认转数，

                        +法计算中，碰到字符串，都转字符串

    1，％模运算（取余数）：m％n：m / n，取除不尽的余数部分

    何时使用：1，判断能否整除 - 判断奇偶数，

                     2，限制计算结果N，永远小于除数 - > N％米

                            判断闰年:(整除4和不能整除100）或能乘除400：var n = prompt（'输入年份'）

       2，***递增递减运算：++， -

                的n ++：N = N + 1;

                ++ N：先将中的值+1，返回*新*值

                的的的的的的的n ++：先将ň中的值1，  返回*旧*值

                单独使用，无影响

                参与其他表达式是，会影响表达式的结果

                var n = 2;

                n +++++ n + n +++ n ++

                n = 2 n = 3

                2+ ++ n

                           n = 3 n = 4

                            6+ n ++

                                      n = 4 n = 5

                                        10 + n ++

                                                n = 5 n = 6

                                                    15

2，关系运算   >，<，<=，<=，==，！=都带隐式转换

    返回值：真和假

    隐式转换：默认都转为数字再比较()

      特殊情况：     

                  1.null!=0,null!='',hull!=[],[]==0,[]=='',''==0

                    如图1所示，如果无法转为数字，转为为NaN的的的的的的的

                           为NaN的的的的的的不等于，不大于，不小于任何值，包含自己

                            NaN！= x - > true;

                         ！isNaN（NUM）判断一个NUM数值（如果不是NUM则会隐式转为NUM）是否为NaN的的的的的的的，则是为NaN的的的的的的的返回真实的，不是为的为NaN的的的的的返回假的，

                            何时使用：判断是不是数字，或者是否能隐式转为数字

                   2，未定义的Vs null

                       未定义：很少主动使用，所有变量的默认初始值，自动赋值

                        空：释放主动变量一个引用的对象说明好像的英文用来指向一个对象但是什么都没指向

                        typeof （undefined） - >'undefined'，typeof（null） - >'object'

                        未定义==空值>真

                        ===：全等，首先必须类型相同，其次值相同，全等不带隐式转换

                   3，如果两个都是字符串，则按位PK每个字符的Unicode的的的的的的的号

                    m = 0，n =''，console.log（m == n） - > true，因为Number（''） - “0，Number（''） - > 0  

                总结：凡是条件：一般都是关系运算或逻辑运算

3，***逻辑运算：多个条件（关系运算），综合得出最后的结论

                            但是其返回值并非是返回布尔类型的真和假，而是返回其运算符左右两旁的一个值。

    隐式转换：默认转换为布尔类型，：布尔（X）的

    &&：逻辑与

        条件1 &&条件2

    || ：逻辑或

        条件1 ||条件2

！：取反

注意短路逻辑

4，位运算：将数值的二进制左移或右移Ñ位

   x << n：x左移n位：2 << 1-> 4; x = x * 2 ^ n

    X >> N：X右移位置：X = X / 2 ^ N.

5，*扩展赋值运算  ：

        基本赋值运算：=

        所有表达式都会返回一个结果N = 100;

        赋值运算的结果就是等号右侧表达式的值

        镀铬的控制台中：输入表达式，直接回车，控制台中默认显示表达式的值

          var n = 100;输出未定义;

            N = 100输出100;

            4 && 5输出5;

        扩展赋值运算：对变量内部的值进行修改的简写方法

                比如：总* = 0.8; + =， - =， * =，/ =，％=

6，***三目运算：根据不同条件，判断执行不同操作，或返回不同的值

                三元，条件运算

        何时使用：多个条件多件事，必须多选一执行的时候;

        如何使用：条件1 ？操作1 |值1：

                            条件2 ？操作2 |值2：

                              .....

                               默认操作;

        特点：1，如果前一个条件已经满足，则不再向下判断，保证每次只可能有一个操作被执行

                  2，默认操作不能省略

六，逻辑结构

1，***函数：封装一项任务的步骤清单的代码段，再起个任务名

     何时使用：任务需要被反复调用，则先将任务步骤封装为一个函数，载反复调用

    声明：函数函数名称（[参数变量列表]）{

                代码段;

                [返回值]

}