一、JavaScript导读
1.1 javascript概述：
- JavaScript主要用于HTML的页面，嵌入在HTML的源码中。
- JavaScript是因特网上最流行的脚本语言，它存在于全世界所有的Web浏览器中，能够增强用户与Web站点和Web应用程序之间的交互。
- JS是弱类型语言，没有类型声明，它的变量不必具有一个明确的类型。
- JS是脚本语言。换句话说，能够用来编程的并且直接执行源代码的语言，就是脚本语言。
- JS也是解释性的语言。何为解释性语言？是在运行的时候将程序直接翻译成机器语言。
- JS是一种基于对象（Object）和事件驱动（Event Driven）并具有安全性能的脚本语言，可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
- HTML5的出现更是突出了JavaScript的重要性，例如HTML5的绘图支持、本地存储、离线应用、客户端通信等，都大量使用了JavaScript。
1.2 javascript的作用：
1. 常见的网页效果【表单验证，轮播图......】
2. 与H5配合实现游戏【水果忍者： http://www.jq22.com/demo/html5-fruit-ninja/】
3. 实现应用级别的程序【http://naotu.baidu.com】
4. 实现统计效果【http://echarts.baidu.com/examples/】
5. 地理定位等功能【http://lbsyun.baidu.com/jsdemo.htm#i4_5】
6. 在线学编程【https://codecombat.163.com/play/】
7. js可以实现人工智能【面部识别】
8. 等等其他作用。
1.3 javscript的组成：
组成部分 |
作用 |
ECMAScript |
构成了JS的核心语法，JS语言的约束条件。 |
BOM |
Browser Object Model【浏览器对象模型】，用来操作浏览器上的对象 |
DOM |
Document Object Model【文档对象模型】，用来操作网页中的元素 |
总结：JS 就是通过固定的语法去操作 浏览器 和 标签结构 来实现网页上的各种效果
二、JS的引入方式
2.1 内嵌式：（类似超链接的方式）
用法示例：<a href="javascript:window.alert('123');">文本内容</a>(window可省略，也可不省略)
注：该方法利用到window中的alert(弹窗对象)实现。
2.2 嵌入式：（将javascript写入在<script></script>中）
用法示例：<script>
window.alert("123");
</script>
注：<script></script>最好写在<body>和<head>中，因为写在其他地方不方便<script>代码的调用。
2.3 外部式：（通过script的src属性引入）
用法示例：<script src="js/function.js"></script>
注：①通过script标签引入的脚本不能在中间编写script代码，否则将覆盖原本的script的代码。
②scr导入的文件是JS文件，是将函数提前在该文件中写好，造HTML中导入直接调用。
三、JavaScript 的注释
3.1：单行注释：
//
快捷键：Ctrl+/ （与java的注释一样）
3.2：多行注释：
/*
......
*/
（与java中的多行注释一样）
四、JavaScript的输出语句
4.1 BOW中window对象的方法：
① alert(); 弹窗
② confirm(); 确认取消弹窗
③ prompt(); 输入框
注：()中输入文本内容。
4.2 在开发者工具的控制台中显示的输入语句：
① console.log();
② console.info();
注：()中输入文本内容。
4.3 BOM对象模型中的document对象的输出语句：
write();
注：① 向页面输出指定内容。
② 内容可以是文本内容，也可以是网页标签。
五、JS事件（可以定义在HTML便签，在标签上称为事件）
5.1 事件的使用示例：
/* 点击按钮输入制定内容*/ <button onclick="alert('123')">点击</button> /*先编写一个函数*/ function a(){ } /*在按钮中设置点击事件并调用函数*/ <button onclick="a();">点击</button>
5.2 JS的事件：
onclick // 鼠标点击左键
ondbclick// 鼠标双击
oncontextmenu// 鼠标点击右键
mousedown// 鼠标按键被按下
mouseup// 松开鼠标按键
onselect// 文本被选中
oncopy// 元素内容被复制
onmouseenter// 鼠标移动到事件监听的元素内（不区分子元素）
onmouseover // 鼠标移动到有事件监听的元素或它的子元素内
onmouseleave// 鼠标离开元素外（不区分子元素）
onmouseout // 鼠标离开元素，或它的子元素外
onfocus // 获得鼠标焦点(点击input输入框)
onblur // 失去鼠标焦点（进入其他input输入框）
onmousemove // 鼠标移动
onmouseup // 鼠标弹起
onmousedown // 鼠标按下
六、JS中的变量
3.1 定义：
变量是程序在内存中申请的一块用来存放数据的空间。通过变量名称我们可以使用或修改保存在系统中的对应的数据。
3.2 声明变量：
是JS的一种弱类型或者说动态语言，不用提前声明变量的类型，变量的类型会自动判断。即使赋值之后，变量的类型根据重新赋值的数据类型同样进行改变。
用法：
var age;//声明一个age变量 age=12; //给age赋值
注：声明变量和赋值可以一起使用。
示例：
var age=12;
3.3 初始化变量：
示例：
var bb="name"; bb="00";//再次给该变量赋值时可以不用使用var //可以同是声明多个变量 var a=0,b=6,c=9;
3.4 储存变量：
示例：
var a=prompt("请输入内容：") //获取输入框的内容 alert（a）;//输出输入框的内容
3.5 定义变量的注意事项：
- 由字母、数字、下划线、$符号组成，不能以数字开头
- 不能是关键字和保留字，例如：for,while,this,name
- 区分大小写
- 变量名必须有意义
- 小驼峰命名法，如：myName
- 建议不要用$作为变量名
3.6 查看变量：
利用输出语句，在输出语句的()中传入变量名即可。
示例：
var a=123; console.log(a);//控制台显示 alert（a）;//弹窗显示 document.write(a);//页面显示
七、JS的数据类型
7.1 数字类型(number):
3 // 十进制 010 // 八进制 0xa // 十六进制 3.14 // 小数 NaN // 非数字 Not a Number
注意：数字类型的范围：
console.log(Number.MAX_VALUE); // 1.7976931348623157e+308 console.log(Number.MIN_VALUE); // 5e-324
7.2 字符串类型（String）：
7.2.1使用方式：
var a="注";
7.2.2 字符串转义符：
\n // 换行 \r // 回车 \\ \' \" \t \b // 空格 \xnn // 16进制字符，如 \x41 代表 'A' \unnn // 16进制 unicode 字符， 如 \u03a3 代表∑
7.2.3 字符串长度：
可以通过变量.length属性的到字符串的长度。
示例：
var a="这是字符串"; console.log(a.length)//返回5
7.2.4 字符串的拼接：
- 字符串与字符串拼接
var a="我是"; var b="老师"; console.log(a+b)//返回（我是老师）
- 字符串和其他类型拼接：（会自动转为字符串）
var a="数字"+123; console.log(a)//返回"数字123"
- 字符串中的双引号和单引号：
var str="我是'程序员'";
7.3 布尔型(boolean):
console.log(1+true)//布尔型数据在参与数字运算的时候，true转化为1，结果：2 console.log(1+false)//布尔型数据在参与数字运算的时候，true转化为0，结果：1 console.log("a"+false)//布尔型数据在参与字符串拼接的时候，结果转化为字符串。 console.log(null+ 'pp'); // 会拼接字符串 nullpp console.log(null + true); // 会输出 1
注：作为函数的参数，表示该函数的参数不是对象。
作为对象原型链的终点。
7.4 未定义(undefined)：
7.4.1 undefined的使用：
console.log(undefined + 'pp'); // 会拼接字符串 undefinedpp console.log(undefined + true); // 会输出 NaN console.log(undefined + 1); // 会输出 NaN
注意：
- 变量被声明了，但没有赋值时，就等于undefined。
- 调用函数时，应该提供的参数没有提供，该参数等于undefined。
- 对象没有赋值的属性，该属性的值为undefined。
- 函数没有返回值时，默认返回undefined。
7.4.2 undefined与null的区别：
只设置了null作为表示"无"的值。根据C语言的传统，null被设计成可以自动转为0。JavaScript的最初版本是这样区分的：null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
- undefined和null在if语句中，都会被自动转为false
7.5 JS的其他数据类型：
7.5.1 数组：
使用：
let shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles']; //数组的下标从0开始 //修改数组中的元素 shopping[0]='tatile';//将数组中的一个的值修改了 //获取数组的长度 shopping.length //数组的长度通常用于for循环中 //例如： for(var i=0;i<=shopping.length;i++){ console.log(shopping[0]) }
7.5.2 对象：
对象：JavaScript标准内置对象
（内容有点多，后期会一一列举）
7.6 数据类型转换：
7.6.1 typeof() 查看数据类型：
使用：
var a="哈哈哈"; console.log(typeof(a))//返回String //如果是数字类型则返回number,null的话返回object。
7.6.2 转化为字符串:(.toString()):
使用：
var a=1; console.log(a.toString());//注：toStrig无法转换undefined和null //转换undefined和null(用以下方法) console.log(String(a));
7.6.3 转换数字类型：
//转换为整型 parseInt('3.14')//如果传入的是小数会自动转换为整数（结果为3） parseInt('90px')//如果传入的内容带有单位则去除单位（结果：90） parseInt（'哈斯啊'）//如果是字符串则返货NaN（非数字类型）,如果是undefined也是一样 parseInt(null)//转换为0; parseInt(true)//传入的是布尔型的话，会转换为1或0。 //转换为浮点型（用法） parseFloat(num); parseFloat(3); // 输出3 //注：如果parseFloat()的括号中传入一个整数，输出的结果不会带有小数点。 //强转 Number(num);//num是要转换的内容。 //隐式转换(用法示例如下：) //给定表达式 “foo” + 1，那么数字 1 会被隐式转换成字符串并且表达式返回 “foo1”。 //给定指令 Number（“0x11”），字符串 “x11” 显式转换为数字 17。 //使用 - * /等符号 //注：加号正能用作正负值将字符串转为数字型，如果用在变量后边则变为拼接字符串。
7.6.4 转换为布尔型：
//示例： Boolen('abc'); // 返回 True Boolean(0); // 返回 False
注：代表空、否定的值都会被转换为 false，如：0，''，NaN，null，undefined其余值都会被转换为 true。
八、JS的运算符
8.1 运算符：
算术：+ - * / %
递增递减：++ --
比较运算：< ,>,>=,<=,==,===,!=,!==
逻辑运算：&&, ||,!
赋值运算：+=，-=，*=，/=
8.2 运算符用法：
8.2.1 算术：
// + - * / %（与java中一致）
8.2.2 递增递减：
// ++i 先加一后参与运算 // --i 先减一后参与运算 // i-- 先参与运算后减一 // i++ 先参与运算后加一 //示例： var i=9; console.log(i++ + 9);//结果18 console.log(i)//10 运算后+1 var i=9; console.log(++i +9);//结果19 i=10
8.2.3 比较运算符：
// > < >= <= 通常用于数字类型比较大小和范围 // == 比较内容是否一致 // === 比较内容和数据类型是否一致 // ！= 不等于 // !== 不全等于
注：
- 比较运算符两侧表达式先转为布尔型再进行比较
- '0' 用 Boolen() 做判断的时候是 true，但是用 == 比较运算符和布尔值比较的时候 '0' 是 false，但 '0' == 0 是真
- undefined 和 null 在 Boolen() 做判断的时候是 flase，但是用 == 比较的时候他们不等于 false
- NaN 和任何值都不相等，包括它本身，即 NaN == NaN 为假
8.2.4 逻辑运算符：
逻辑运算符 |
说明 |
&& |
并且，与 |
| | |
或者（达成一个条件即可） |
! |
非 ，取反 |
注：
- 如果只是普通逻辑运算（两侧都是布尔型），返回的还是布尔型
- 与 undefined, null 做 && 运算返回 undefined, null
- !1 返回 false
8.3 运算符的优先级：
运算符 |
结合性 |
优先级 |
.、[ ]、( ) |
从左到右 |
最高 |
++、--、-、！、new、typeof |
从右到左 |
|
*、/、% |
从左到右 |
|
+、- |
从左到右 |
|
＜、＜=、＞、＞=、in、instanceof |
从左到右 |
|
==、!=、===、!== |
从左到右 |
|
&& |
从左到右 |
|
II |
从左到右 |
|
?: |
从右到左 |
|
=、*=、/=、％=、+=、-=、&=、^=、!= |
从右到左 |
|
, |
从左到右 |
最低 |
注意事项：
- 赋值运算符优先级最低，先不用看它
- 然后是逻辑运算符 || 和 &&，从左到右开始
- 4 >= 6 为 false，所以看右侧返回值
- 右侧的三个 && 返回的都是 true，最后表达式返回 true
九、流程控制
9.1 选择结构：(用法与java中一致):
9.1.1 if分支句:
//if(条件){} //if（条件）{}else{} //if (条件) {}else if(条件){}...
9.1.2 三元运算符：
var time=90; console.log(time<100?"是"："不是");//结果为不是 //如果条件匹配则输出":"前的内容，不匹配则输出":"后的内容。
9.1.3 switch语句：
switch(表达式){ case value1; // 执行语句1 break;//中断 case value2; // 执行语句2 break;//中断 .... default ://默认（无匹配的条件则输出默认的执行语句） // 执行语句 break;//中断 }
9.2 循环结构：(用法与java中一致):
//for循环 //初始化变量 |范围 |增长量 for（var i=0， i<.. , i++）{ //循环体 } //嵌套循环 for (外层循环初始化变量; 外层循环表条件达式; 外层操作表达式){ for(内层循环初始化变量; 内层循环表条件达式; 内层操作表达式){ // 循环代码 } } //while 循环 while(条件表达式){ } //do while循环 do { // 循环体 } while(条件表达式)
注：break关键字（中断循环）
continue关键字（跳出本次循环，进入下次循环）
十、数组
10.1 数组的创建方式：
//1.利用对象匿名实例化创建 var arr=new Array(); //2.利用[]进行创建 var arr=["123","12"];
10.2 数组的使用：
//索引号（数组的索引号从0开始到长度-1） var arr=["刘智"，"小安子","黄色"]; //索引号 0 1 2 //可以根据索引号获取指定的内容 //.length var arr=["刘智"，"小安子","黄色"]; console.log(arr.length);//获取数组arr的长度 //遍历数组（利用for循环） for(var i=0,i<=arr.length,i++){ } //注意事项： //初始化量从0开始 //范围小于数组的长度，不能超出
十一、函数（初步了解，javascript02中会细讲）
11.1 函数的声明：
function 函数名 （）{ //语法体 } //调用 函数名（）;
11.2 案例：
//计算1-100的和 function sum(){ var sum = 0; for(var i=1; i<=100; i++){ sum = sum+i; } console.log(sum); } sum(); //递归 计算 1-5 的阶乘(n是几就是几的阶乘) function factorial(n){ if ((n == 0) || (n == 1)) return 1; else return (n * factorial(n - 1)); } //定义一个变量接受结果 var result=factorial(5); console.log(result);
