2018.12.6
JavaScript来源
网景公司为了解决表单验证问题。
JavaScript组成
-ECMAscript：由ECMA(欧洲计算机制造者协会)定义标准。
-DOM(文档对象模型)：由W3C定义标准。
-BOM(浏览器对象模型)：由firefox来定义标准。
JavaScript简介
JavaScript是互联网上最流行的脚本语言，可用于Web和HTML，更广泛应用于服务器、pc端、移动端。一般运行在宿主环境(如：浏览器)中。
特点：
JavaScript是一种轻量级的编程语言(编程语言：有分支、有循环)。
JavaScript是一种动态语言(一个变量可以持有任意类型的值)。
JavaScript是一种脚本语言，由浏览器解释执行。
JavaScript是一种解释型语言，边解释边执行。
JavaScript的引入方式
1.方法一
可以将JavaScript代码放在<head>中或</body>标签之前。放在<head>中或</body>标签之前的JavaScript代码需要用<script></script>标签包裹起来。并且插入到HTML中的JavaScript代码无数量限制。
2.方法二
单独创建一个JavaScript文件，扩展名为.js。将编写好的js代码引入到HTML的<head></head>标签中。引入js的格式为<script src="js文件路径"></script>，将<script src="js文件路径"></script>放在<head>标签中。
JavaScript输出--write
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo1</title>
<!-- 写在head标签中的js代码 -->
<script>
document.write("写在head标签中的js代码"); //文档输出
document.write("<h1>h1标签中的内容</h1>"); //输出的内容也可以插入html标签
</script>
<!-- 引入到html中的js代码 -->
<script src="../JS/demo1.js"></script>
</head>
<body>
</body>
<!-- 写在body后的js代码 -->
<script>
document.write("写在body后的js代码"); //文档输出
</script>
</html>
注：两条性能优化的规则
-样式表一定要以<link>标签的形式放在<head>中。
-JS一定要以<script>标签的形式放在html文档的底部(ps:也就是</body>之前)。
JavaScript语法
-语句的作用：告诉浏览器应该做什么。
-分号：分号可选，可写可不写。分号在一条语句的末尾。
-js代码：按编写代码的顺序执行(从上到下，从左到右扫描)。
-js区分大小写
效果图
image.png
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo2</title>
<!-- 根据以下顺序执行代码 -->
<script>
document.write("我在前面");
</script>
<br>
<script>
document.write("我在中间");
</script>
<br>
<script>
document.write("我在后面");
</script>
</head>
<body>
</body>
</html>
-标识符：必须以字母、下划线或美元符$符号开始。
-编码时对大小写敏感。
-空格：js会保留一个空格，多余的空格会被忽略。
-保留字
JavaScript注释
-单行注释：用//注释内容。
-多行注释：用/注释内容/（多行注释不能嵌套）
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>注释 demo</title>
</head>
<body>
</body>
<script>
//document.write("hello"); //单行注释
/*document.write(1);
document.write(2);
document.write(3);*/ //多行注释
</script>
</html>
JavaScript基础--值
值分为两大类：
-基本数据类型(String、Number、Boolean、Undefined、Null)
-引用数据类型(Object、Array、Function)
字面量：
QQ截图20181210195207.png
JavaScript基础--变量
变量是存储数据的容器。通过关键字var来声明变量，变量名必须以$、_、字母开头。不能使用关键字、保留字。一般采用驼峰命名法(如:firstName),第二个单词的首字母大写。
image.png
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>variable demo</title>
</head>
<body>
</body>
<script>
var $1 = 10; //变量名以$符号开始
var _2 = 20; //变量名以_符号开始
var a = $1 + _2; //变量名以字母开始
document.write(a);
</script>
</html>
JavaScript基础--引用数据类型
引用数据类型包括：函数(Function)、对象(Object)、数组(Array)。后面会详写。
JavaScript基础--基本数据类型
字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(undefined)、Symbol (ES6中添加的类型)。可以通过赋值为null的方式清除变量。当用关键字var定义变量时，若没有给变量赋初始值，那么变量的数据类型为undefined。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DataType demo</title>
</head>
<body>
</body>
<script>
var a = "六"; //数据类型为字符串
var b = 1; //数据类型为数字
var flag = true; //数据类型为布尔
var arr = [1,2,3] //数据类型为数组，取数据时下标从0开始
var arr = new Array("我","你","他"); //数据类型为数组
var arr = new Array();
arr[0] = "我是第一个数据";
arr[1] = "我是第二个数据";
arr[3] = "我是第三个数据";
document.write(arr[0]);
var c = null; //数据类型为空
b = null; //将变量b赋值为null
document.write(b);
</script>
</html>
-typeof(a)/typeof a 返回值的数据类型，注意：是值的数据类型，而不是变量的。js中只有值才持有数据类型。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基本数据类型</title>
</head>
<body>
<h1>JS的基本数据类型</h1>
<ul>
<li>Number</li>
<li>String</li>
<li>Null</li>
<li>undefined</li>
<li>Boolean</li>
</ul>
</body>
<script>
var a = 1;
console.log(typeof a); //打印出来是Number类型
console.log(typeof typeof a); //打印出来是String类型
var b = "string";
console.log(typeof b); //打印出来是string类型
// null类型只有null一个值
var c = null;
console.log(typeof c); //打印出来是object类型(无法修复的bug)
console.log(typeof typeof c); //打印出来是string类型
// undefined类型只有undefined一个值
var d = undefined;
console.log(typeof d); //打印出来是undefined类型
console.log(typeof typeof d); //打印出来是string类型
// boolean类型只有两个值：true/false
var e = true;
console.log(typeof e); //打印出来是boolean类型
console.log(typeof typeof e); //打印出来是string类型
</script>
</html>
堆栈
基本数据类型占用空间小，它们的值保存在栈中，按值来访问。
引用数据类型占用空间大，栈内存中存放地址指向堆内存中的空间，按引用来访问。
JavaScript语法--运算符
按操作数的个数：
-一元运算符(一个操作数，如:+a,-b)
-二元运算符(两个操作数，如:a+b)
-三元运算符(三个操作数，如:条件?值1:值2)
--
按功能：
-算术运算符：+ - * / %(取余) ++(自加) --(自减)
-赋值运算符：= += -= *= /= %=
-字符串操作：+(拼接)
-比较运算符：> < == === != !== >= <=
-逻辑运算符：&& || !
-条件运算符：x<10? "x比10小"："x比10大"
算术运算符
--
以+为例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>count demo</title>
</head>
<body>
<p>i=10,j=10,i+j=?</p>
<p id="count"></p>
<button onclick="add()">结果</button>
</body>
<script>
function add() {
var i = 10;
var j = 10;
var m = i + j;
//获取p元素的id，然后对p元素进行插入内容innerHTML操作,将m的值赋给p元素，作为p元素的内容
document.getElementById("count").innerHTML = m;
}
</script>
</html>
--
以--(自减)为例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自减 demo</title>
</head>
<body>
<p>i=5,i--?</p>
<p id="subtract"></p>
<p>i=5,--i?</p>
<p id="subtractI"></p>
<button onclick="subtract()">结果</button>
</body>
<script>
function subtract(){
var i = 5;
// i--先将i的值赋给j再自减，而--i是先自减再将值赋给j
var j = i--;
var m = --i
// 现在j的值为5，然后i自减，自减后的值为4
document.getElementById("subtract").innerHTML = j;
// 现在i的值为4，先自减，自减后的值为3，将3赋给m
document.getElementById("subtractI").innerHTML = m;
}
</script>
</html>
--
++(自加)的一些例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 自增 ++
* - 通过自增可以使变量在自身的基础上增加1
* - 对于一个变量自增以后，原变量的值会立即自增1
* - 自增分成两种：后++(a++) 和 前++(++a)
* 无论是a++ 还是 ++a，都会立即使原变量的值自增1
* 不同的是a++ 和 ++a的值不同
* a++的值等于原变量的值（自增前的值）
* ++a的值等于新值 （自增后的值）
*
* 自减 --
* - 通过自减可以使变量在自身的基础上减1
* - 自减分成两种：后--(a--) 和 前--(--a)
* 无论是a-- 还是 --a 都会立即使原变量的值自减1
* 不同的是a-- 和 --a的值不同
* a-- 是变量的原值 （自减前的值）
* --a 是变量的新值 （自减以后的值）
*/
var a = 1;
var num ;
/*num = ++a;
num = a++;
console.log(a);*/
/*num = a++ + 1;
num = a++ +1;
console.log(a);
console.log(num);*/
/*num = ++a + a;
console.log(a);
console.log(num);*/
/*num =a++ + a + a;
console.log(a);
console.log(num);*/
/*num = ++a +a +a;
console.log(a);
console.log(num);*/
/*num = a++ + ++a ;
console.log(a);
console.log(num);*/
/*num = a++ + a++ ;
console.log(a);
console.log(num);*/
/*num = a++ + a++ + a;
console.log(a);
console.log(num);*/
/*num = a++ + a++ + a + ++a;
console.log(a);
console.log(num);*/
</script>
</head>
<body>
</body>
</html>
+(字符串运算符)
+拼接符号两边的字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>字符串拼接</title>
</head>
<body>
</body>
<script>
var a = "hello";
var b = 2;
alert(a+b); //做字符串拼接运算时，将数字2转换为字符2，再进行字符串拼接操作
</script>
</html>
逻辑运算符
&&(逻辑与)、||(逻辑或)、!(逻辑非)
逻辑运算返回Boolean值。
<script>
//逻辑与
var result = 2>1 && 3<1;
console.log(result);
//逻辑或
var result2 = 2>1 || 3<1;
console.log(result2);
//逻辑非
var result3 = !(3>2);
console.log(result3);
</script>
赋值运算符
复合赋值操作符
加法赋值 x += y <==> x = x + y
减法赋值 x -= y <==> x = x - y
乘法赋值 x *= y <==> x = x * y
除法赋值 x /= y <==> x = x / y
求余赋值 x %= y <==> x = x % y
--
以%=为例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>赋值运算符</title>
</head>
<body>
</body>
<script>
var x = 1;
var y = 2;
// x = x % y 取余
console.log(x%=y);
</script>
</html>
比较运算符
大于号 >= 大于等于 < 小于号 <= 小于等于
== === != !==
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>比较运算符</title>
</head>
<body>
</body>
<script>
var a = 1;
var b = "1";
alert(a==b); //返回值为true
alert(a===b); //返回值为false(===：必须值和数据类型相同)
</script>
</html>
位操作符
在计算机中数值都以二进制补码形式存储和运算。
无符号数的取值范围：0~255.
有符号数的取值范围：-128~127.
所有的按位操作符的操作数都会被转成补码形式的有符号32位整数。
image.png
--按位异或
同为0，异为1
1.将-3转换为32位二进制数
-3的原码
-3 = 1000 0000 0000 0000 0000 0000 0000 0011(负号转为1，正号为0)
-3的反码(符号位不变，按位取反)
1111 1111 1111 1111 1111 1111 1111 1100
-3的补码(末尾+1)
1111 1111 1111 1111 1111 1111 1111 1101
将8转换为32位二进制数(正数的原码、反码、补码相同)
8 = 0000 0000 0000 0000 0000 0000 0000 1000
2.按相同为0，不同为1的规则进行运算(符号位也要参与运算)
1111 1111 1111 1111 1111 1111 1111 0101(补码)
3.将上述结果转为原码(补码转原码)
先-1
1111 1111 1111 1111 1111 1111 1111 0100
取反(符号位不变，按位取反)
1000 0000 0000 0000 0000 0000 0000 1011
最终为-11
条件运算符
条件表达式？语句1：语句2
1.首先执行条件表达式
2.返回值为true则执行语句1，否则，执行语句2.
<script>
var a = 2>3?"2>3":"2<3";
console.log(a)
</script>
运算符的优先级
MDN运算符优先级表
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table
