JS

JavaScript：JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。

特点：（1）交互性（它可以做的就是信息的动态交互）

          （2）安全性（不允许直接访问本地硬盘）

          （3）跨平台性（只要是可以解析Js的浏览器都可以执行，和平台无关）

作用：js的作用很多，在目前学习阶段，只需要记住两个最常用的就可以了：

（1）动态修改 html 及 css 的代码（修改的是浏览器内存中的那一份代码）

（2）对表单进行校验

组成：

（1）核心（ECMAScript）：这一部分主要是js的基本语法。

（2）BOM：Brower Object Model （浏览器对象模型），主要是获取浏览器信息或操作浏览器的，例如：浏览器的前进与后退，浏览器的弹出提示框，浏览器的地址栏输入网址跳转等操作等。

（3）DOM：Document Object Model（文档对象模型），此处的文档暂且理解为html，html加载到浏览器的内存中，可以使用js的DOM技术对内存中的html节点进行修改，用户从浏览器看到的是js动态修改后的页面。（增删改查）

1.书写位置

1.1内嵌式：跟css的内嵌式写法类似，需要在html页面中通过一个标签来包裹一个范围，同样的，理论上js可以书写在页面的任意位置。

记住关键一点：在不影响页面功能的前提下，js越晚加载越好。

<script>
    alert('hello world');
<script>
alert(); 弹出一个警告框，调用的时候浏览器的组件，所以不同浏览器的样子是不一样的。

1.2 外链式（首先新建一个类型为 .js 的文件，然后在该文件中写js语句，通过script标签对引入到html页面中）

<script src="js 文件路径地址">这里不能写js语句</script>

注意：这里是用src而不是href，其次作为引入标签的内部不能写js语句，如果要额外写js语句，重新书写一对script标签

1.3 行内式（直接书写在标签身上，是一个简单的事件，所以又称之为时间属性）

<div onclick="alert('Hello World!')">事件属性</div>
注意：
1.不会主动执行，需要条件触发！
2.单双引号必须交替使用！
onclick	单击事件

2.基本语法

2.1 数据类型

数值型：number（凡是数字都是数值型，不区分整数和小数）

字符串：string（凡是引号包裹起来的内容全部都是字符串）

布尔：boolean（true，false）

对象类型：object（特殊值取null）

未定义型：undefined

2.2 变量 ：就是定义一个容器，内部可以储存任意数据

声明变量：var 变量名 = 存储的数据

变量命名规范：

（1）只能有字母，数字，_（下划线），$（美元符号）组成

（2）不能以数字开头

（3）命名中不能出现-（js会理解成剑豪进行减法的操作），不能和关键字冲突

js是弱类型语言，不重视类型的定义，但js会根据为变量赋值的情况自定判断该变量是何种类型：

数值型：var i = 1;	var d = 2.35;
字符串：var str = "用心做教育";
布尔型：var b = true;

总结：在js中变量的定义，记住一个var就行！

3.检测数据类型

typeof(value);或者typeof value;     返回这个变量的类型

4.运算符

4.1 算术运算符

+    -    *    /    %    ++    --
1. 由于js中的小数和整数都是number类型，不存在类似整数除以整数还是整数的结论
2. 字符串和其他数据使用 + 号运算，会连接成一个新的字符串
3. 字符串使用除了用 + 以外的运算符：如果字符串本身是一个数字，那么会自动转成number进行运算，否则就会返回一个NaN的救国，表示这不是一个数字
NaN：not a number

4.2 关系（比较）运算符

>    >=    <    <=    !=
==等于（只比较内容）
===恒等于（比较内容的同时还要比较数据类型）
注意：关系运算符返回的结果只有两个：true/false

4.3 逻辑运算符

&&	 与	true&&false		====>false
|| 	或	true||false		====>true
！ 	非	!true			====>false
false（理解）：0  null  undefined
true（理解）：非0  非null  非undefined

针对&&顺口溜:
左边为真,返回右边
左边为假,返回左边

针对||顺口溜:
左边为真,返回左边
左边为假,返回右边

4.4三元运算符

条件？表达式1：表达式2

如果条件为true，返回表达式1的结果

如果条件为false，返回表达式2的结果

5.语句

5.1 if

第一种：if（条件）{判断成立后执行的语句；}

第二种：if（条件）{判断成立后执行的语句；} else {判断不成立后执行的代码；}

第三种：

if(条件1){
判断成立后执行的语句;
}else if(条件2){
判断成立后执行的语句;
}else if(条件3){
判断成立后执行的语句;
}else{
判断不成立后执行的代码;
}

5.2 switch

switch(表达式){  //  表达式必须可以计算出一个确定的结果  
case 常量1:
    语句;
    break;
case 常量2:
    语句;
    break;
default:
    语句;
    break;
}

5.3 小知识

全局函数： parselnt(num);	// 取整，不会四舍五入
          Math round(num);      // 取整，会四舍五入

5.4 while

while（循环条件）{循环体；}

5.5 do while

do{循环体；}while（循环条件）；

5.6 for

for（循环变量赋初值；循环条件；循环变量增值）{循环语句；}

console.log(...) ; 以日志的形式在控制台输入结果

5.7 循环嵌套：循环中嵌套着其他循环

执行顺序：

1. 外循环执行一次，内循环要从头到尾执一遍

2. 内循环没有执行完时，表示外循环的循环体没有结束，是不能进入下次外循环

3. 只有内循环彻底执行完，才表示外循环一次结束

js中有一个已经创建好的document对象，里面有个write 方法，可以直接把数据写带html页面上

document.write();

6.函数 ： 可以独立封装一段代码，当需要使用被封装的功能时，可以去调用这个函数

6.1自定义函数（普通函数）

function 函数名（形式参数）{函数体}
调用函数：函数名（实际参数）；

（1）函数只有被调用后才会执行

function demo1（）{
    alert（"执行demo1..."）
}
    demo1();

（2）如果函数需要返回值，直接使用return返回即可，不需要考虑返回值类型

function demo2(){
    return "2222";
}
    alert(demo2());

（3）如果函数需要传递参数，不需要指定参数的类型，直接使用变量名即可

function demo3(a,b){
    return a+b;
}
    alert(demo3(2,6));

（4）函数中没有重载的概念，如果出现两个重名的函数名，后面的会把前面的覆盖掉

 

function demo4(){
    alert("调用1");
}
function demo4(a, b){
    alert("调用2");
}
    demo4(); // 调用2
    demo4(2,5); // 调用2

（5）如果函数需要传递参数，但是调用的时候不传参，也可以运行，但是参数值为undefined

 

function demo5(a, b) {
    alert("调用有参数的demo5..." + a + "," + b );
}
    demo5();//调用有参数的demo5...undefined,undefined

（6）如果函数不需要传递参数，调用的时候非要传参，不会报错

function demo6(){
    alert("调用无无无无参数的demo6...");
}
    demo6(1,3,5,7);

（7）既然可以给无参数的函数传动参数，可以使用arguments对象取得参数的值，arguments是js专门用来存放参数的数组

function demo6(){
    alert(arguments.length);//3
    alert(arguments[0]);//1
    alert(arguments[1]);//3
    alert(arguments[2]);//5
}
    demo6(1,3,5);

（8）给特别长的函数名起个别名

function skdfjslkfdjslkfdjsdfkjslkdfjsdfkksjfl(){
    alert("怎么这么长....");
}
    var newName = skdfjslkfdjslkfdjsdfkjslkdfjsdfkksjfl; 
    newName();

6.2 匿名函数：匿名函数就是没有名字的函数

function（形式参数）{函数体}

但是匿名函数没有办法直接调用，一般情况选匿名函数有两种使用场景：

（1）将匿名函数赋值给一个变量，通过变量名调用函数

定义函数并赋值给变量：var fn = function（形式参数）{函数体}

调用函数： fn（实际参数）

（2）匿名函数的自我调用

用括号把匿名函数包裹起来，然后自我调用

(function(){函数体})()；

7.事件

 

事件三要素：

 

（1）事件源：被监听的html元素（就是这个事件加给谁），就是某个（某些）html标签

（2）事件类型：某类动作，例如点击事件，移入移除事件，敲击键盘事件等

（3）执行指令：事件触发后需要执行的代码，一般使用函数进行封装

语法格式：事件源.事件类型=执行指令

7.1常用事件

 

事件名	描述
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件---注意事件源是表单form
onclick	鼠标点击某个对象
ondblclick	鼠标双击某个对象
onblur	元素失去焦点，通常针对表单元素
onfocus	元素获得焦点，通常针对表单元素
onchange	用户改变域的内容，通常针对表单元素
onkeydown	某个键盘的键被按下
onkeypress	某个键盘的键被按下或按住
onkeyup	某个键盘的键被松开
onmousedown	某个鼠标按键被按下
onmouseup	某个鼠标按键被松开
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开
onmousemove	鼠标被移动

特殊：页面加载函数（入口函数）

当我们把js书写在html结构之前的时候，由于程序是从上往下加载，导致加载到js的时候，html标签还没有加载出来，会获取不到html的标签，这时候就需要书写一个入口函数，作用就是：当页面的内容全部加载完成之后，才会加载里面的代码

<script>
    window.onload=function(){
        //只有当页面其他内容全部加载完成之后才会执行这里的语句
    }
</script>

8.BOM ：浏览器对象模型，将我们使用的浏览器抽象成对象模型

8.1 BOM对象

Window对象：表示一个浏览器窗口或一个框架

Location对象：Window对象的一个部分，可通过window.location属性来访问

History对象：保存浏览器历史记录信息

Screen对象：里面存放着有关显示浏览器屏幕的信息

Navigator对象：包含的属性描述了正在使用的浏览器

8.2 window对象

（1）window对象是JavaScript层级中的顶级对象

（2）window对象代表一个浏览器窗口或一个框架

（3）window对象会在<body>或<frameset>每次出现时被自动创建

8.2.1 消息框

8.2.1.1 警告框

警告框经常用于确保用户可以得到某些信息。

<strong>alert（“文本”）</strong>

8.2.1.2 确认框

确认框用于使用户可以验证或者接受某些信息

当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作

<strong>confirm（“文本”）</strong>

如果用户点击确认，name返回值为true，如果用户点击取消，返回值为false

8.2.1.3 提示框

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值然后点击确认或取消按钮才能继续操纵

如果用户点击确认，那么返回值为输入的某个值，如果用户点击取消，返回值为null

<strong>prompt（"文本"，"默认值"）;</strong>

8.2.2定时器

8.2.2.1 单次定时器

<strong>setTimeout(匿名函数整体 或 自定义函数名称，等待时长);</strong>

8.2.2.2循环定时器

<strong>setInteval（匿名函数整体 或 自定义函数名称，间隔时长）；</strong>

8.2.2.3 清除定时器：默认开启的定时器是匿名的，开发者无法或取到它的内存位置；所以必须定义一个全局变量，用来储存定时器，再调用相应的停止方法

clearTimeout（变量名）； 停止单次

clearInterval（变量名）； 停止循环

定时器积累bug解决：

在js中，如果一次性开起了N个定时器，则会产生定时器积累的Bug；解决这一bug方法很简单，只需要在每次开启新定时器前，将旧定时器做一次清空即可

clearInterval(timer);
var timer = setInterval(...);

注意：开启定时器前，一定要先清除定时器

9.DOM ：Document Object Model 文档对象模型

作用：通过DOM对象可以访问和操作html文件的每一个标签

9.1 DOM的操作方法

9.1.1 标签元素的操作

9.1.1.1 获取id

<strong>document.getElementById("ID名");    返回指定的id对象</strong>

9.1.1.2 获取name值

document.getElementsByName("name名");    返回指定name的值得对象合集

9.1.1.3 获取标签名

document,getElementsByTagName("标签名");       返回指定标签名的对象集合

9.1.1.4 获取类名

document.getElementsByClassName("class名");    返回指定class名的对象集合

9.1.1.5 获取标签内容

element.innerHTML;    获取标签内部的所有内容
element.innerText;    获取标签内部的文本内容

9.1.1.6 节点的操作

9.1.1.6.1 判断是否有子节点

hasChildNodes();        判断是否含有子节点，返回true或false

9.1.1.6.2 删除节点

remover（）；        删除当前标签对象，等同于自杀

removerChild（childElement）；        通过父标签对象删除字标签对象

9.1.1.6.3 替换节点

replaceChild(newChild,oldChild);        替换父节点下的子节点

9.1.1.6.4 创建元素

document.createElement("tagName");            创建标签对象

需要与appendChild() 或 insertBefore() 方法联合使用

<script type="text/javascript">
    //在内存中创建一个a标签
    var a = document.createElement('a');
</script>

9.1.1.6.5 新增子节点

appendChild（newChild）;        向父标签内部末尾处追加子节点

insertBefore(newChild,refChild);        向父标签下指定的子节点前添加标签对象

9.1.2 标签属性的操作

9.1.2.1 获取属性

获取属性的值：element.getAttribute("name") 或者 element.属性名

一般来说，我们直接使用element.属性名即可，如果这种方法不行，就采取上述的方式来获取，如果用element.属性名获取class，需要用className才能得到

9.1.2.2 设置属性

设置属性的值：element.setAttribute("name","value")

可以直接采用element.属性名通过单等号来赋值

9.1.2.3 删除属性

删除某个属性：element.removeAttribute("name")

9.1.3 css样式的修改

obj.style.样式名                获取值

obj.style.样式名=值           修改值    修改的值得格式必须跟css一模一样，也就是说有单位的必须加单位

如果属性由多个单词使用"-"连接，需要将"-"删除，并将后一个单词首字母大写

例如：font-size 要改成 fontSize

10.js中的对象

10.1 Array对象 ：可以保存不同类型的数据，同时长度不固定。

10.1.1 创建数组对象的方式

（1）创建空数组：var arr = new Array();

（2）创建指定容量的数组：var arr = new Array(size);

（3）创建数组并填充元素：var arr = new Array(a,b,c...);

（4）创建元素数组：var arr = [a,b,c...];

10.1.2 数组中元素的获取：通过索引的方式获取

遍历数组中的所有元素：

for(var i = 0; i<arr.length; i++){
    alert(arr[i]);
}

10.1.3 多维数组的操作：数组中的元素还是数组

var arr = [
    [1,2,3],
    [4,5,6],
    [7,8,9]
]
获取数组中的8数字可以：arr[2][1]

10.2 日期对象

10.2.1 创建方式

创建当前日期时间：var date = new Date();

创建指定日期时间：var date = new Date(毫秒值);

其中毫秒值为1970-01-01至今的时间毫秒值

10.2.2 时间的获取

年：getFullYear() 以四位数字返回年份 
月：getMonth() 返回月份 (0 ~ 11)
日：getDate() 返回一个月中的某一天
星期：getDay() 返回一周中的某一天 (0 ~ 6)，0代表周日
小时：getHours() 返回小时（0 ~ 23）
分：getMinutes() 返回分钟（0 ~ 59）
秒：getSeconds() 返回秒数（0 ~ 59）
毫秒值：getTime() 返回 1970 年 1 月 1 日至今的毫秒数
toLocaleString() 把Date对象转换为字符串
toLocaleDateString() 把Date对象的日期部分转换为字符串

toLocaleTimeString() 把Date对象的时间部分转换为字符串

10.3 Math对象

Math 对象是数学对象，是一个工具对象，因此Math对象不用使用 new 的方式创建，直接使用Math就可以调用对象内部的方法

Math.random()    返回0~1之间的随机小数

10.4 RegExp对象：正则对象

创建正则：

（1）var reg = new RegExp("正则表达式");

（2）var reg = /正则表达式/;

当使用构造函数创造正则对象时，需要常规的字符转移规则（在前面加反斜杠\）。比如以下是等价的：

var re = new TegExp("\\w+");
var re = /\w+/;

校验正则的方法：

reg.text(字符串);

验证通过返回true，验证不通过返回false

^ 	行开始
$ 	行结尾	
var reg1 = new RegExp("^\\d");//必须以数字开头
var reg1 = new RegExp("\\d$");//必须以数字结尾
var reg1 = new RegExp("^\\d{5}$");//长度必须是5，必须全是数字
var reg1 = new RegExp("\\d{5}");//只要有数字长度为5