JavaScript01 JS基础入门(详细描述)
一、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 内嵌式：（类似超链接的方式）
用法示例：文本内容(window可省略，也可不省略)
注：该方法利用到window中的alert(弹窗对象)实现。
2.2 嵌入式：（将javascript写入在中）
用法示例：
注：最好写在和中，因为写在其他地方不方便
注：①通过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 事件的使用示例：
/* 点击按钮输入制定内容*/
/*先编写一个函数*/
function a(){
}
/*在按钮中设置点击事件并调用函数*/
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-3247.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)//返回57.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=108.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);