零基础js第一周知识点

Day1

1、概述：JavaScript：

简称JS，是一个运行在客户端浏览器的【解释型】【弱类型】【面向对象】脚本语言

1、编译型：在运行程序之前，需要先检查语法是否正则，如果不正确，直接不允许运行 - 严格，比如：Java/C++/C#...

解释型：在运行程序之前，不需要先检查语法是否正确，直接执行，但是碰到错误就会停止后续代码 - 更加自由，比如：JavaScript、PHP、Node.js...

2、弱类型：变量保存的数据是可以随意的，数据类型是由数据来决定的 - 更加的自由

1 - Number数字

“1” - String 字符串

强类型：变量保存的数据，是由数据类型来决定的 - Java - 更加的严格

3、面向对象 - 很难

以后可能会经常看到一种写法

对象名.属性名;

对象名.方法名();

在编程界有一句话：万物皆对象 - 未来有非常多的对象（很多很多的属性和方法）等待我们学习

4、特点：

1、可以使用一切编辑器工具编写js代码，编辑器并不代表你的实力

2、解释型

3、弱类型

4、面向对象编程方式

5、可以做一切css完成不了的效果（轮播/选项卡/购物车/验证/数据渲染...）

2、如何使用JS

1、使用方式：2种

1、直接在HTML页面上写一个script标签，里面就可以书写你的js代码 - 上课使用

js代码

2、外部js，进行引入 - 正式开发时使用

1、创建一个xx.js的文件，里面书写js代码

2、在HTML页面引入

只要有了src属性，此处就不可以在写代码了

2、输出方式/打桩输出：帮助我们检查错误：3种

*1、在控制台输出日志：console.log(想要输出/查看的东西); - 会在F12的console显示日志

2、在页面上输出日志：document.wrtie(想要输出/查看的东西); - document当前文档 write写入：在页面上输出，而且支持识别标签 - 垃圾：如果绑定了点击事件后输出，会把页面上原来的HTML和CSS都全部替换掉

3、在警告弹出框输出日志：alert(想要输出/查看的东西); -在一个浏览器自带的弹出框中输出日志，但是弹出框会卡住页面，用户只能看到一个白板 - 垃圾

3、*变量和常量：

*变量：创建后，值可以再次修改

何时使用：以后反复使用到的数据，都要提前把他保存在一个变量中，以后使用变量名，相当于就是在使用变量的值

如何使用：var 变量名=值;

特殊：

1、变量名其实不是随意的

1、不能以关键字命名

2、不能以数字开头

3、建议下划线命名法或小驼峰命名法

name,age,gender,weight,height,hobby-推荐

xingming,nianling,xingbie,tizhong,shengao,aihao-不推荐：虽然也能简明之意，逼格低！

更不推荐：a,b,c,d,d1,d2,d3... - 此变量名无意义

2、如果你的变量名是name，不管你保存的数据是什么数据类型，都会悄悄的给你转变成一个字符串

3、多个变量创建可以简写：

var变量名1=值1,变量名2=值2,....;

常量：创建后，值不可以再次修改，只能设置一次值

生活中的常量：

PI- 3.1415926....

一个小时60分钟....

一天24个小时

一年365/366天

语法：const 常量名=值; - 垃圾

4、*算术运算符：+ - * / %

跟小时候学的一摸一样，但是：

1、%：读作取余，俗称模，两个数相除，不去商，而取除不尽的余数

固定套路：

1、*判断奇偶性：num%2，结果为0说明是偶数，结果为1说明奇数 - 以后可以用于判断

2、获取一个数字的倒数n位

1234%10 -> 4

1234%100 -> 34

1234%1000 -> 234

2、*****特殊：其实算数运算符具有隐式类型转换，默认转为数字在运算

+运算：如果左右两边但凡出现了一个字符串，那么悄悄的都转为字符串，+运算不再是+运算，而是字符串的拼接

-*/%：字符串也可以变为数字，但是前提：必须是纯数字组成的字符串才可以

如果字符串包含了非数字字符，直接转为NaN:Not

A Number - 不是一个数字，但是确实是数字类型，全是缺点：

1、参与任何算术运算，结果仍为NaN

2、参与任何比较运算，结果都是false

5、*数据类型：分两大类

1、原始/基本/值类型：5个

1、Number - 数字，取值：无数个

2、String - 字符串，取值：无数个，必须写上'' 或""

3、Boolean - 布尔，取值：两个：true/false - 往往用于判断比较的条件处使用

4、Undefined - 取值：1个：undefined，创建了一个变量，但是没有赋值，默认值为undefined，祖师爷犯的错，用来做大部分操作都会报错！

5、Null - 空，取值：1个：null，释放变量/内存，节约内存空间

2、引用/对象类型：11个引用类型的对象（很多很多的属性和方法）

扩展：

1、分支结构：判断条件的不同选择对应的代码去执行，执行了一条路就不会再走别的路***

如何使用：

一个条件，一件事，满足就做，不满足就不做

if(判断条件){

操作;

}

一个条件，两件事，满足就做第一件，不满足就做第二件

if(判断条件){

操作;

}else{

默认操作;

}

多个条件，多件事，满足谁就做谁

if(条件1){

操作1;

}elseif(条件2){

操作2;

}elseif(条件3){

操作3;

}else{

默认操作;

}

特殊：

1、else if...你想写多少个随便，根据你的需求自己判断

2、最后else可以省略不写，如果条件都不满足，那么什么事都不会执行，你的分支就白写了

3、书写判断顺序，需要根据你的需求来写，不能乱写顺序

2、用户输入弹出框：

varuser=prompt("提示文字","默认值")

作业：

要求：能用户输入的就让用户输入

1、计算圆的周长和面积，并且用控制台输出最后答案

周长：2*pi*r;

面积：pi*r*r;

2、根据分数送礼物

3、计算标准体重bmi

计算公式为：BMI=体重÷身高2。（体重单位：千克；身高单位：米。）

BMI正常值在20至25之间，超过25为超重，30以上则属肥胖，低于20偏瘦

4、PPT44页，两道题，计算弧度

1、新建4.html页面，使用常量保持圆周率t。再使用程序分别计算30度角和60度角对应的弧度是多少?

2、尝试在计算30度角弧度和60度角弧度的代码之间修改Π的值，观察程序运行结果?

Day2

1、***数据类型转化：

不同的数据类型做操作可能出来的结果是不一样的

Number+ Number = Number

Number+ String = String

JS获取页面上的一切东西，数据类型默认都是一个字符串

如果你想要查看数据类型：typeof(想要查看的东西);

1、*****算术运算符的隐式转换：

目的：就算不用输出看，我心里也知道最后的结果是什么

默认：悄悄的将左右两边的东西，转为一个数字，在运算

特殊：1、+运算，碰上一个字符串，左右两边都会悄悄的转为字符串，+运算不再是+运算，而是字符串拼接操作

2、原来别的数据类型其实也可以转为数字

true->1

false->0

undefined->NaN

null->0

3、其实-*/%，字符串也可以转为一个数字，前提要是一个纯数字组成的字符串才行，但凡包含一个非数字字符就转为NaN

"1000"->1000

"1000px"->NaN

4、NaN：Not A Number：不是一个数字，但是确实是数字类型，不在三界之中，不是一个有效数字

2个缺点：

1、NaN参与任何算术运算结果都是NaN

2、NaN参与任何比较运算结果都是false，甚至不认识自己

问题：我们没有变法使用普通的比较运算来判断x是不是NaN

解决：个人更爱反用：!isNaN(x)

true->是一个有效数字

false->是一个NaN

学完了算术运算的隐式转换，但我们依然没有解决一个事

"100px"+100-> "100px100"

"100px"-*/%100-> NaN

2、显示/强制转换：

隐式转换出来的结果不是我们想要的，我们程序员就要手动调用一些方法，强制转为我们需要的类型，再做操作

1、转字符串：var str=x.toString();//x不能是undefined或null，因为undefined和null不能使用任何的.操作

页面上的一切东西，数据类型默认都是一个字符串

2、***转数字：

1、*parseInt(str/num); parse->解析 Int->整型

执行原理：专门为字符串和小数转为整数数字准备的，从左向右依次读取每个字符，碰到非数字字符，就停止转换，

如果一来就碰到了不认识的，则为NaN

console.log(parseInt(100.5));//100

console.log(parseInt("100.5"));//100

console.log(parseInt("100px"));//100

console.log(parseInt("1px00"));//1

console.log(parseInt("px100"));//NaN

console.log(parseInt(true));//NaN

console.log(parseInt(false));//NaN

console.log(parseInt(undefined));//NaN

console.log(parseInt(null));//NaN

2、*parseFloat(str); parse->解析 Float->浮点型

执行原理：几乎和parseInt一致，认识第一个小数点

3、Number(x);//此方法是万能的，任何人都可以转为数字

//垃圾：完全等效于隐式转换，我们还得多记忆一个方法，没必要，还不如x -0 *1 /1 %1

2、*****Function的基础：

1、Function：函数，

称之为方法：需要提前【预定义好】的，以后就可以【反复使用】的【代码段】

现实生活中：所有的方法都是需要提前学习的，是不会忘记的所以可以反复使用

其实一阶段你就见过很多函数了，比如：

rotate(360deg)-完成了一个根据角度值顺时针旋转360度的功能

url(图片路径) - 完成了一个根据图片路径显示图片的功能

js中要学习自定义函数：完成了一个。。。。。。。的功能

2、如何使用：2步

1、定义/声明/创建函数：

function函数名(){

若干的代码

}

2、调用/使用函数：

1、要么在js中程序员直接写死，要执行几次：函数名();

2、交给用户绑定在某个元素上，写上点击事件，让用户来触发：

3、何时使用：

1、*不希望打开页面立刻执行，而需要时再使用或由用户来触发

2、*希望能够反复执行，不用刷新页面

3、以后任何一个独立的功能体，都要单独封装为一个函数（你的每一个作业）

4、函数的地位非常高，函数是第一等公民地位，随时随地考虑能不能封装为一个函数，尤其是重复的代码

5、函数内的一切内存，函数调用完毕后都会自动释放

4、带参数的函数：

榨汁机 ->函数：榨汁

原材料 ->参数

创建：形参：形式参数，其实就是一个变量，但是不需要写var，而且默认也没有保存任何值，默认值为undefined

function函数名(形参,形参,...){

函数体;

}

使用：实参：实际参数，真正的值，需要再你调用时再传入

函数名(实参,实参,...)

特殊：1、传实参的顺序一定要和形参的顺序一一对应，并且数量也要对应

2、不是一定要带参数的函数才是好函数，具体情况，需要具体分析：

如果你的函数体就是固定的 - 则普通函数

如果你的函数体希望根据传入的实参不同，做的略微不同 - 则带有参数的函数

3、***分支结构：

1、程序的流程控制语句：3种

1、顺序执行 - 默认，从上向下的依次执行

2、分支结构 - 通过条件的判断，选择部分代码执行

3、循环结构 - 通过条件的判断，选择要不要重复执行某些代码

2、比较运算符：> < >= <= == !=

用于做判断/比较的

结果：一定是一个布尔值

强调：如果你想要判断多个条件，绝对不能像小时候数学的写法：18<=age<=65，错误的！

解决：逻辑运算符

3、逻辑运算符：

&&：与，并且：要求全部条件都要满足，最后的结果才为true

只要有一个条件不满足，结果则为false

||：或：要求全部条件都要不满足，最后的结果才为false

只要有一个条件满足，结果则为true

!：颠倒布尔值

4、分支的语法：

一个条件，一件事，满足就做，不满足就不做

if(条件){

操作

}

一个条件，两件事，满足就做第一件，不满足就做第二件

if(条件){

操作

}else{

默认操作

}

多个条件，多件事，满足谁就做谁

if(条件1){

操作1

}elseif(条件2){

操作2

}else{

默认操作

}

作业：

要求：每一道题如果有用户输入都要防止恶意输入，都要封装为一个函数，最后绑定在页面元素之上

1、玩一玩带参数的函数（谁在什么事件做什么事）

2、PPT16页 1道题

-1、定义一个可以接收两个数字的方法，计算并输出这两个数的和，并调用此方法。

3、PPT32页 1道题

收银柜台收款程序(V3)

编写一个收银柜台收款程序，根据商品单价、购买数量以及收款金额计算并输出应收金额和找零;当总价大于或等于500时，享受8折优惠。

考虑程序异常情况，如:收款金额小于应收金额

若收款金额大于等于应收金额，则计算找零后输出；-若收款金额小于应收金额，输出错误提示信息。

4、让用户输入他的工资，计算应缴纳的税为多少？

20000

10000+ 10% 10000*0.1=1000

5000+ 5% 5000*0.05=250

3500+ 2.5% 1500*0.025=37.5

1287.5

每天优先完成JS作业

练手项目：一套金夫人，交货时间：8月30号

为什么：

1、不要学了二阶段，忘了一阶段

2、我们学习的js迟早有一天会和一阶段融合

3、练手项目以后面试也用得上，DEMO允许给别人看

Day3

1、***循环结构：

问题：在控制台打印输出1000句hello world

console.log("1helloworld");

...

console.log("1000helloworld");

循环结构：反复执行【相同或相似】的操作

循环三要素：

1、循环条件：开始 - 结束，循环的次数

2、循环体：做的操作是什么

3、循环变量：记录着我们当前在哪一次，而且他会不断的变化，往往都会向着不满足循环条件进行

1、while循环：

语法：

var循环变量=几;

while(循环条件){

循环体;

循环变量变化;

}

执行原理：首先创建了循环变量，然后判断条件，如果条件满足，则做【一次】循环体操作，并不会退出循环，回过头继续判断条件满足吗，如果满足，则再做【一次】循环体操作.......直到循环条件不满足，才会退出循环

宏观上感受循环一瞬间就结束了，但是微观上来说其实是【一次一次】执行的

特殊：

1、有的时候真可能不知道从何开始，到何处结束，死循环：永远不会停下来的循环

何时使用：不确定循环次数的时候

while(true){

循环体;

}

2、退出循环语句：break

- 只能在循环中使用，多半都是搭配死循环使用的

上午练习：

1、计算1-1000之间所有数字的和

2、计算1-1000之间所有偶数的和

3、猜数字小游戏

随机数公式：parseInt(Math.random()*(max-min+1)+min)

2、*for循环

语法：for(var 循环变量=几;循环条件;变量的变化){

循环体;

}

死循环： for(;;){

循环体;

}

面试题：while 和for 的区别？

语法上有区别，但两者都能做到相同的操作

一般来说我们不确定循环次数的时候，会使用while循环 - 死循环

一般来说我们确定循环次数的时候，就用for循环 - 更漂亮更简洁，大部分情况都会使用它

2、*****数组的基础

问题：保存1000个同学的名字？

varname1="张三丰1";

...

varname1000="张三丰1000";

不推荐，变量其实就是我们所谓的内存，变量创建的越多，那么我们内存空间消耗就越大，那么网站的性能就会越差

解决：数组：创建一个变量可以保存【多个数据】的集合

数组都是线性排列，除了第一个元素，每个元素都有唯一的前驱元素

除了最后一个元素，每个元素都有唯一的后继元素

***每个元素都有一个自己的位置，称之为叫做下标，下标是从0开始的，到最大长度-1

1、创建数组：2种

1、*直接量方式：

vararr=[ ];//空数组

vararr=[数据1,....];

2、构造函数方式：

vararr=new Array();//空数组

vararr=new Array(数据1,....);//而且这个方法还有一个坑

2、获取数组中的数据

数组名[下标];

3、添加/替换

数组名[下标]=新值;

下标处有没有元素，如果没有则为添加，如果有了就为替换

4、数组具有三大不限制

1、不限制元素的个数

2、不限制元素的类型

3、不限制元素的下标越界 - 不是一个好东西了

如果获取元素，下标越界，返回的一个undefined

如果添加元素，下标越界，会得到一个稀疏数组，导致下标不再连续，如果搭配上循环去遍历每一个元素的话，我们会得到很多很多的undefined

问题：自己数下标，是不科学的，很有可能就会数错

5、解决：数组中唯一的属性：长度：数组名.length - 获取当前数组的长度：最大下标+1

三个固定套路：

1、获取倒数第n个元素：arr[arr.length-n]

2、始终向末尾添加元素：arr[arr.length]=新值;

3、缩容：删除倒数n个元素：arr.length-=n

前面的下标好数，后面的下标也好数，但是中间的下标还是不好数

6、***往往很多情况，我们不会拿出某个元素来使用，而是拿出所有的每个元素来进行相同或相似的操作

遍历数组：把数组中的每个元素拿出来执行相同相似的操作

公式：

for(var i=0;i<数组名.length;i++){

console.log(数组名[i]);//当前次元素，要干什么，看你的

}

作业：

1、*猜数字小游戏

2、*PPT17页 3道题，第二题，在打印输出完整的九九乘法表

1、创建一个函数，返回1+1/3+1/5+...+1/999的和

2、定义一个函数，打印乘法口诀表中任意一行

3、输出某个年份之后的5个闰年

闰年的公式：

1、普通闰年：能被4整除，且不能被100整除

2、世纪闰年：能被400整除

3、*PPT32页 1道题

1、“信息录入系统”可以不停的接收录入的员工姓名，直到输入exit为止，将这些姓名保存在一个数组中，控制台中输出所有的元素。

4、PPT34页 3道题

1、定义函数，找出一个整数数组中的最大值

2、定义函数，去掉数组中重复元素

3、定义函数，在数组中查找指定元素的位置

扩展

JavaScript其实由三部分组成的

ECMAScript-核心语法，以后JS不管做什么操作可能都离不开它（算法题/逻辑题)

DOM - Document Object Model -文档对象模型，可以用JS来操作HTML和CSS了（明天）

BOM - Browser Object Model -浏览器对象模型，可以用来操作浏览器

Day4

复习

1、循环：反复执行相同或相似的代码

1、 var循环变量=几;

while(循环条件){

循环体;

循环变量的变化;

}

2、 for(var循环变量=几;循环条件;循环变量的变化){

循环体

}

3、死循环：永远不会停止下来，搭配上一个退出循环语句：break

while(true){

循环体;

}

for(;;){

循环体

}

面试题：函数（程序员调用几次执行几次，用户触发几次执行几次）和循环（几乎一瞬间就做完了）都可以反复执行，他们的区别在哪里？

2、数组基础：一个变量可以保存多个数据的一个集合

1、创建：

直接量：var arr=[数据,....];

构造函数：var arr=new Array(数据,....);

2、获取数组中的元素

arr[i]

3、后续添加/替换元素

arr[i]=新值

如果说下标处，没有元素，则为添加

已有元素，则为替换

4、数组三大不限制

1、不限制数据类型

2、不限制元素个数

3、不限制下标越界 -不是好事- 获取/访问时，返回undefined

- 添加时，下标越界，变成稀疏数组，下标不连续，如果使用循环去遍历数组，则会得到很多的undefined

5、数组有一个属性：长度：语法：arr.length - 获取到当前数组的长度 == 最大下标+1

固定套路：

1、获取倒数第n个元素：arr[arr.length-n];

2、向末尾添加新元素：arr[arr.length]=新值;

3、缩容：arr.length-n;

6、遍历数组：搭配上循环把数组中的每一个元素都取出来执行相同或相似的操作

for(vari=0;i

arr[i];-当前次元素

}

1、DOM：

Document Object

Model：文档对象模型：专门用于操作HTML文档的，提供了一些属性和方法等待我们学习

2、DOM树概念：

DOM将我们的HTML看做了是一个倒挂的树状结构，但是树根不是html标签，而是document对象

document对象：不需要我程序员创建的，由浏览器的js解释器自动创建，一个页面只有一个document

作用：可以通过树根找到我们想要的任何一个DOM元素/节点/对象（属性和方法）

DOM会将页面上每个元素、属性、文本、注释都会当作一个DOM元素/节点/对象

3、查找元素：

1、通过ID查找元素

语法：var elem=document.getElementById("id值");

特殊：

1、返回值，找到了返回的是一个当前找到的DOM元素，没找到，返回一个null，做了别的操作可能就会报错了

2、找到了多个相同的id，那么只会返回第一个

3、*垃圾方法，【你们不准使用】，一次只能获取一个元素，也只能操作一个元素，麻烦

4、其实根本不需要使用此方法，直接写ID也可以找到元素 - 偷懒的写法

2、通过标签名查找元素

语法：var elems=document/已经找到了的父元素.getElementsByTagName("标签名");

特殊：

1、返回值：找到了返回的一个是类数组DOM集合（很像数组，都能用下标，都能用length，都能遍历），没找到返回一个空集合

2、*JS不能直接操作DOM集合，只能直接操作DOM元素，解决：要么使用下标拿到某一个元素，要么使用遍历拿到每一个元素

3、不一定非要从document开始查找，如果document去找，会找到所有的元素，可以换成我们已经找到的某个父元素，就只会找到这个父元素下面的元素了

3、通过class名查找元素

语法：var elems=document/已经找到了的父元素.getElementsByClassName("标签名");

特殊：

1、返回值：找到了返回的一个是类数组DOM集合（很像数组，都能用下标，都能用length，都能遍历），没找到返回一个空集合

2、*JS不能直接操作DOM集合，只能直接操作DOM元素，解决：要么使用下标拿到某一个元素，要么使用遍历拿到每一个元素

3、不一定非要从document开始查找，如果document去找，会找到所有的元素，可以换成我们已经找到的某个父元素，就只会找到这个父元素下面的元素了

4、通过关系查找元素：

前提条件：必须先找到一个元素才可以调用关系网

父元素：elem.parentNode;

子元素：elem.children; - 集合

第一个儿子：elem.firstElementChild;

最后一个儿子：elem.lastElementChild;

前一个兄弟：elem.previousElementSibling;

后一个兄弟：elem.nextElementSibling;

强调：DOM集合不能直接做操作！

操作元素：前提：找到元素才能操作元素：<标签属性名="属性值" style="样式">内容</标签>

1、*内容：

1、*innerHTML：获取和设置开始标签到结束标签之间的内容 - 支持识别标签

获取：elem.innerHTML;

设置：elem.innerHTML="新内容";

2、innerText：获取和设置开始标签到结束标签之间的文本 - 不支持识别标签

获取：elem.innerText;

设置：elem.innerText="新文本";

以上两个属性都是为双标签准备的，但是操作不了单标签input的内容

3、*value：专门为input的value值准备的

获取：input.value;

设置：input.value="新值";

2、*属性：

获取属性值：elem.getAttribute("属性名");

设置属性值：elem.setAttribute("属性名","属性值");

简化版：

获取属性值：elem.属性名;

设置属性值：elem.属性名="新属性值";

缺陷：

1、class必须写为className -

2015年过后，ES6诞生过后，class变成了一个关键字

2、不能操作自定义属性，只能操作标准属性

3、*样式

使用样式的方式：

1、*内联/行内样式

2、内部样式表

3、外部样式表

二阶段我们就是要用js来操作【内联样式】

1、不会牵一发动全身

2、优先级最高

获取：elem.style.css属性名;

设置：elem.style.css属性名="css属性值";

特殊：

1、css属性名，有横线的地方，去掉横线，变为小驼峰命名法

border-radius -> borderRadius

2、目前学习的，获取时，只能获取内联样式 - 小缺点，我们可以忽略掉，就算以后我交了你操作样式表，你也不会去使用

4、绑定事件：

elem.on事件名=function(){

操作;

*****this关键字：目前只能用于事件内：

如果单个元素绑定事件：this->这个元素

如果多个元素绑定事件：this->当前触发事件的元素

}

总结：

获取 - 往往都是用与判断比较

设置 - 就是添加/修改

作业：

1、*开关门效果

2、*表格隔行变色：奇数次点击奇数行变色，偶数次点击偶数行变色

3、导航条的激活效果 - this非常重要

4、购物车

Day5

1、JS概念：JavaScript：运行在浏览器端的一个解释型（不检查错误，直接运行，碰到错误就停止）弱类型（数据类型由数据来决定）面型对象脚本语言。

2、变量和常量 - 以后反复使用的数据都要先提前保存到变量中，以后使用变量名，相当于就是再使用变量的值

*变量：值可以改变的

var变量名=值;

常量：一旦创建后，值不允许再次修改

const常量名=值;

3、算术运算符：+ - * / %

%：取余 - 5%3 == 2

4、数据类型：

原始类型：Number/String/Boolean/Undefined/Null

引用类型：11个对象

5、数据类型的转换

1、算术运算符的隐式转换

1、默认转为数字，在运算

2、+运算，碰上一个字符串，则为拼接

3、-*/%，字符串也可以转为数字，前提是纯数字组成的字符串，包含非数字字符，则为NaN

true-> 1

false-> 0

undefined-> NaN

null-> 0

"1000"-> 1000

"1000x"-> NaN

4、NaN：不是一个数字，但是确实是数字类型，不是一个有效数字

1、参与任何算术运算结果都是NaN

2、参与任何比较运算结果都是false，问题，不能用普通的比较运算来判断是不是NaN

解决：!isNaN(x);

true->有效数字

false->NaN

2、强制转换

1、转字符串：var str=x.toString();//页面上的一切数据默认都是字符串类型

//x不能是undefined和null，undefined和null不能使用.

2、转数字：

varnum=parseInt/Float(str);

varnum=Number(x);//万能的，完全等效于隐式转换，还不如-0 *1 /1 %1

6、函数的基础：提前预定好，以后可以反复使用的代码段

1、创建函数

function函数名(形参列表,...){

函数体;

}

2、调用函数

函数名(实参列表,...);

elem.onclick=function(){

函数名(实参列表,...);

}

7、分支结构：根据条件，选择部分代码执行

1、比较运算符：> < >= <= == !=

作用：判断条件

结果：布尔值

2、逻辑运算符：&& || !

作用：综合比较

结果：布尔值

3、if(){} if(){}else{} if(){}else if(){}else{}

8、循环：根据条件，判断要不要再执行一次操作

var循环变量=几

while(循环条件){

循环体;

循环变量的变化

}

for(var循环变量=几;循环条件;循环变量的变化){

循环体;

}

死循环：while(1){循环体} for(;;){循环体}

死循环要搭配上break才能停止循环

9、数组：一个变量（内存空间）保存多个数据

创建：

var arr=[数据,...];

var arr=new Array(数据,...);

访问：

arr[i]

添加/替换：

arr[i]=新值;

数组三大不限制：

不限制类型/个数/下标越界（坏事）

数组的长度：arr.length

1、访问倒数第n个元素：arr[arr.length-n];

2、向末尾添加元素：arr[arr.length]=新值;

3、缩容：arr.length-=n;//删除arr倒数n个;

遍历数组：把数组中的每个元素拿出来执行相同或相似的操作

for(vari=0;i

arr[i];//当前次元素

}

1、DOM：Document Object Model：文档对象模型，专门用于操作HTML（css）文档的

2、树根：document对象，浏览器的js解释器（运行环境）会自动创建，通过树根找到页面上我们想要找到的DOM元素/对象/节点

3、查找元素：

标签名/class名：var elems=document/已经找到的父元素.getElementsByTagName/ClassName("标签名");

特殊：

1、找到了：返回一个类数组集合，没找到：返回一个空集合;

2、DOM集合是不允许直接做操作的，要么下标找到某一个，要么遍历找到每一个

3、也不一定非要从document开始查找，也可以写一个自己已经找到的父元素，只会找到这个父元素下面的元素

通过关系获取元素：前提：至少要找到一个元素才能调用关系

父：elem.parentNode;

子：elem.children; - 集合

第一个儿子：elem.firstElementChild;

最后一个儿子：elem.lastElementChild;

前一个兄弟：elem.previousElementSibling;

后一个兄弟：elem.nextElementSibling;

4、操作元素：<标签名 id="" class="" title="" style="样式">内容</标签名>

- 操作元素的前提就是要找到元素

1、内容：

innerHTML（识别标签）/innerText（纯文本）/value（input准备的）;

获取：elem.innerHTML/innerText/value;

设置：elem.innerHTML/innerText/value="新内容";

2、属性：

获取属性值：elem.getAttribute("属性名");

设置属性值：elem.setAttribute("属性名","属性值");

无敌的

简化版：

获取属性值：elem.属性名;

设置属性值：elem.属性名="属性值";

缺陷：1、只能操作标准属性，不能操作自定义属性

2、class必须写为className

3、样式：

获取：elem.style.css属性名;

设置：elem.style.css属性名="css属性值";

特殊：1、内联样式：不会牵一发动全身，优先级最高

2、css属性名：如果出现了横线，去掉横线换成小驼峰命名法

3、获取时，只能获取到内联样式，样式表中的获取不到，暂时的一个小缺陷

4、绑定事件：

在js中绑定事件：符合我们的原则：内容（html）、样式(css)、行为(js)分离

elem.on事件名=function(){

要做的操作

this关键字：目前只能在事件之中使用，是一个指针，不同的场景，指向不同

单个元素绑定事件：this->这个元素

多个元素绑定事件：this->当前元素

}

扩展：计算字符串 - 脱字符串的衣服：

eval(str);

作业：

1、不看笔记，自己在心里一边回忆，一边写

2、再打开笔记，看看漏了什么，在补充上去

3、往往你漏掉的，就是你需要多记忆的

1、把昨天的四道题全部做一次

2、选项卡效果

3、计算器效果

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 202,607评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,047评论 2赞 379
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 149,496评论 0赞 335
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,405评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,400评论 5赞 364
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,479评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,883评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,535评论 0赞 256
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,743评论 1赞 295
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,544评论 2赞 319
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,612评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,309评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,881评论 3赞 306
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,891评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,136评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,783评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,316评论 2赞 342

零基础js第一周知识点

推荐阅读更多精彩内容