js第一周

day1

1：JavaScript：简介:

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

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

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

3:面向对象型：万物皆对象，

对象名.属性名：

对象名：方法名（）

2 输出方式：帮我们检查错误：3种

a 在控制台输出日志：console.log（想要输出/查看的东西）推荐使用

b 在页面上输出日志：document.write（想要输出/查看的东西）document当前文档，write写入，在页面上输出，而且支持识别标签，缺点：如果绑定点击事件，页面中的html和css会消失

c 在弹出框输出日志：alert（想要输出/查看的东西） 缺点：弹窗会卡住浏览器窗口，无法进行下一步操作

3 .变量和常量

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

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

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

b常量：创建后，值不可以再次修改，只能设置一次值 生活中的常量：pi/π3.1415926 一天24小时，一个小时60分钟 语法：const常量名=值

4.算术运算符:+ - * / %

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

2特殊其实算术运算符具有隐私类型转换，默认转为数字在运算

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

（- * / %）：a字符串也可以变成数字，但是前提必须是纯数字组成的字符串才可以 如果字符串包含了非数字字符，直接转为NaN,不是一个数字，但是确实是数字类型。

NaN参与任何算术运算，结果任为NaN 参与任何比较运算都为falase

=：一个=表示赋值，两个=表示值相等，三个=表示值和类型都相等，全等

5 数据类型：两大类

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

a：Number：数字，取值无数个

b：String：字符串，取值无数个

c:Boolean：布尔，取值两个，往往用于判断比较 true/false

d:undefined:取值一个 默认本身，创建一个变量，但是没有赋值，

e：null 空，取值一个，本身，释放空间

2引用/对象类型：11个

引用类型的对象（很多很多的属性和方法）

day2

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

不同的数据类型做操作可能出来的结果是不一样的，js获取页面上的一切东西，数据类型默认都是一个字符串，如果想查看数据类型：typeof

1：算运算符的隐式转换：悄悄的将左右两边的东西，转为一个数字，再运算，

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

别的数据类型其实也可以转为数字： true=1 false=0 un=nan null=0

其实- * / % 字符串 也可以转为一个数字，前提要是一个存数字组成的，不然则为NaN,NaN不是一个数字，但是确实是数字类型，

判断是否为有效数字： ！isNaN( )

2:显示/强制转换 隐式转换出来的结果不是我们想要的 ，需要手动调用一些放法，强制转为我们的类型，再做操作

a：parselnt（str/num） 专门为字符串和小数转整数数字准备的，从左到右依次读取每个字符，碰到非数字字符，就停止转换，如果一来就碰到不认识的，则为NaN

bparseFloat(str)执行和parselnt一致，认识第一个小数点

cNumber（）方法万能，任何人都可以转为数字，完全等于隐式转换没用

2 Function的基础

Function：函数，称之为方法，需要提前预定义好的，以后可以反复使用的代码段 1：定义/声明/创建函数： function函数名（）{若干代码}

2：调用/使用函数： a:要=么在中程序员写死，要执行几次，调用几次，函数名（）

b：交给用户触发，绑定在某个元素上，协商点击事件，内容

何时使用： 不希望打开页面立刻执行，需要时在使用或者由用户来触发。

希望反复执行，不用刷新页面

以后任何一个独立的功能体，都能单独封装为一个函数

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

函数内的内存，函数调用完毕后就会自动释放

**带参数的函数 **

function函数名（形参1，形参2）{函数体}

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

使用 ：函数名（实参1，实参2），实际参数，真正饿值，需要时在调用在传入。

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

分支结构***

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

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

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

3：循环结构--通过条件的哦按段，选择要不要重复执行某些代码

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

用于做判断比较的，结构一定是一个布尔值

3：逻辑运算符

1：&& ：与，并且的意思，要求全部条件都要满足，最后的结果才为true只要有一个条件不满足，责任false

2：||或 要求只有全部条件都不满足，结果才为false，只要其中一个条件满足，则为true

3：！ 非 颠倒布尔值

4，分支的语法，根据条件，选择部分代码执行

if（条件）{操作} 一个条件，一件事，满足就做，不满足就做操作2

else if（条件2）{操作2} 多个条件多件事，满足就做，不满足就做默认操作

else{默认操作}

day3

循环结构***

循环根据条件，判断要不要在执行一次操作。循环结构：反复执行相同或相似的操作

1：循环三要素

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

2：循环体：做的操作

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

两种循环：while循环和for循环 while循环语法：var循环变量=几 while（循环条件）{循环体；循环变量变化}

死循环语法while（true）{循环体}结束循环：break

for循环语法：for（var 循环变量；循环条件；循环变化）{循环体}

死循环语法：for（；；）{循环体} 结束循环：break

面试题：while和for的区别？

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

不确定循环次数会优先使用while循环--死循环

确定循环次数的时候，使用for循环更加简洁漂亮，

数组的基础

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

数组都是线性排列，除了第一个元素，每个元素都有前驱元素，除了最后一个元素，每个元素都有唯一的后继元素。每个元素都有自己的位置，称之为下标下标是从0开始的，到最大长度-1.

创建数组的方式：2种 直接量方式 var arr=[ 数据1，数据2数据。。。。]

构造函数方式： var arr= new Array（数据1，数据2，数据...）

**获取数组中的的数据 **

数组名[下标]

**添加/替换 **

数组名[下标]=新值

数组具有三大不限制 1：不限制元素个数

2：不限制元素类型

3:不限制下标越界

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

公式：for（var i=0；i<数组名.length；i++）{ 操作 }

day4

DOM Document Object Model：文档对象模型 1：DOM：文档对象模型、；专门用于操作HTML文档的提供一些属性和方法需要我们学习。

2：DOM树概念：DOM将我们的HTML看做一个倒挂结构，但是树根不是html标签，而是document对象。

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

b作用：可以通过树根找到我们想要的任何一个DOM元素、节点、对象（属性和方法）。会将页面上每个元素、属性、文本、注释多会当做一个DOM元素、节点、对象

3：查找元素 a通过ID查找元素（不建议使用）

语法: var elem=document.getElementByld("id值"); 找到的是一个当前DOM元素，没找到返回的是一个null。找到多个相同的id，只会返回第一个

b通过标签名查找元素

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

特殊： 返回值：找到了返回的是一个类数组DOM集合（很想数组，都能用下标，需要遍历）没有找到返回的是一个空集合。js不能直接操作DOM集合，只能直接操作DOM元素；解决：要么使用下标拿到某一个的元素，要么使用遍历拿到每一个元素，在操作

c通过class名查找元素

语法: var elems=document/已经找到了的父元素.getElementsByClassName("标签名"); 和查找标签名一样特殊

d：通过关系查找元素

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

父元素:elem.parentNode;


子元素: elem.children;    -集合


第一个儿子: elem.firstElementChild;


最后一个儿子: elem.lastElementChild;


前一个兄弟: elem.previousElementSibling;


后一个兄弟:elem.nextElementSibling;

操作元素

a内容 操作元素

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

操作内容： 1：innerHTML :获取和设置开始标签之间的内容--支持识别标签

获取：elem.innerHTML;

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

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

获取：elem.innerText；

设置：elem.innerText=“新文本”

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

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

获取：input.value；

设置：input.value=“新值”

b：属性

获取属性值：elem.getAttribute（“属性名”）

设置属性值：elem.setAttribute（“属性名”，“属性值”）

简化版：获取属性值：elem.属性名；

获取属性值：elem.属性名=“新属性值”

缺陷：class必须谢伟className，不能操作自定义属性，要用标准方式才能操作

c 样式

获取：elem.style.css属性名

设置：elem.style.css属性名=“css属性值”；

特殊：css属性ing，有横线的地方，去掉横线，变为小驼峰命名法

d绑定事件

elem.on事件名=function（）{ 操作事件；

this关键字

目前只能用于事件内；如果单个元素绑定事件，this就指当前这个元素，如果多个元素绑定事件，this--指当前触发的事件的元素}

eval()

可以将字符串转化为js代码,接受一个[字符串],str作为参数，并把这个参数作为脚本代码来 执行。