- A+
JavaScript是什么
Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。Java和JavaScrip只是名字很像。
Java 服务器端的编程语言
JavaScript 运行在客户端(浏览器)的编程语言
JavaScript是一种运行在客户端 的脚本语言 JavaScript的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
JavaScript和HTML、CSS的区别
-
HTML：提供网页的结构，提供网页中的内容
-
CSS: 用来美化网页
-
JavaScript: 可以用来控制网页内容，给网页增加动态的效果
第一个JavaScript程序
在HTML页面中添加
<title>Document</title>
<script>
window.onload=function(){
for(var i = 0;i < 10;i ++){
document.write("<p>我要中奖500W！<p>");
}
}
</script>
运行页面查看效果。
JavaScript的书写位置
-
写在行内
<input type="button" value="按钮" onclick="alert('Hello World')" />
-
写在script标签中 script可以写在HTML页面的任何位置。
<head>
<script>
alert('Hello World!');
</script>
</head>
-
写在外部js文件中，在页面引入
<script src="main.js"></script>
tips:引用外部js文件的script标签中不可以写JavaScript代码
变量
什么是变量
变量是存储数据的最小单元。
就是可以变化的量。
程序在计算的时候，是CPU从内存中获取数据，进行计算，计算完成之后再将数据写入内容。
数据是存储在内存中的。内存可以认为是一个数组（表格）。表格的每一个单元格都是有序号的。任何数据存在内存中都有一个开始的位置和结束的位置。
变量就是在内存中开辟空间，存储要计算的数据，为了方便操作这个数据，给这个空间起一个别名。
别名+空间+数据 = 变量。
别名：变量名。
数据：变量的值。
空间：根据变量的数据类型开辟的。
变量的使用
tips： JS是严格区分大小写。
tips：js是弱数据类型，所以在申明变量的时候不需要申明数据类型。在做赋值运算的时候，会自动根据赋值的类型确定变量的数据类型。
-
var声明变量
var age;
任何类型的变量（对象）都是使用var/let。在申明变量的时候不需要注明数据类型。
-
变量的赋值
var age;
age = 18;
在赋值的时候才确定数据类型，也就是说，一个变量可以赋任何类型的数据。
-
同时声明多个变量
var age, name, sex;
age = 10;
name = 'mingren';
-
同时声明多个变量并赋值
var age = 10, name = 'kakaxi';
-
如果一个变量没有赋值，则默认值是：undefined
//将一个没有赋值的变量输出到控制台
var tel;
console.log(tel);// undefined
-
如果一个变量没有申明，就直接使用，会出错。
console.log(a);//出错 ： a is not defined
控制台的使用
现在的主流浏览器中都有JS的控制台。
都是打开浏览器之后，按：F12。
// 如果申请了一个变量是没有赋值的，则这个变量的值默认是undefined
var job;
// alert(job);
// 在控制台输出内容
// 直接输出字符串
console.log("我是一个直接输出的字符串");
// 输出一个变量的值,直接写变量的名字，不需要引号
console.log(c);
console.log(job);
console.log(type);
变量的命名规则和规范
规则：法律，不能触犯
①不能是JS的关键字和保留字符。
错误示例：var var ; var int ;
②不能以数字开头。（可以以数字结尾，或者中间有数字）
错误示例： var 0abc; var 10name;
正确示例： var name0; var stu10score;
③不能有特殊符号（特殊符号一般都是运算符和空字符）可以有“_”"$/￥" 也可以是中文（我建议使用拼音）。
错误示例： var name+score; var name score;
1、js中的关键字：
break case catch continue default delete do else finally for function if in instanceof new return switch this throw try typeof var void while with
2、js中的保留字：
abstract boolean byte char class const debugger double enum export extends final float goto implements import int interface long native package private protected public short static super synchronized throws transient volatile
规范：
①言简意赅。
错误示例： var a , c , def;
正确示例： var name; age; score;gender;tel;
②符合驼峰规则。
如果变量由一个单词组成，则所有的字母小写。
如果由多个单词组成，则除过第一个单词之外，其他的单词的首字母都要大写。其余的字母小写。
案例：var stuScore; var teacherTel;
如果是简称 就全部小写。
数据类型
tips：弱数据类型不代表没有数据类型。
下面我们就来看看js的数据类型。
简单数据类型
Number、String、Boolean、Undefined、Null
Number类型
-
数值字面量：数值的固定值的表示法
110 1024 60.5
-
进制
十进制 var num = 9; 进行算数计算时，八进制和十六进制表示的数值最终都将被转换成十进制数值。 十六进制 var num = 0xA; 数字序列范围：0~9以及A~F 八进制 var num1 = 07; // 对应十进制的7 var num2 = 019; // 对应十进制的19 var num3 = 08; // 对应十进制的8 数字序列范围：0~7 如果字面值中的数值超出了范围，那么前导零将被忽略，后面的数值将被当作十进制数值解析
-
浮点数
-
浮点数的精度问题
-
浮点数 var n = 5e-324; // 科学计数法 5乘以10的-324次方 浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数 var result = 0.1 + 0.2; // 结果不是 0.3，而是：0.30000000000000004 console.log(0.07 * 100); 不要判断两个浮点数是否相等
-
数值范围
最小值：Number.MIN_VALUE，这个值为： 5e-324 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308 无穷大：Infinity 无穷小：-Infinity
-
数值判断★★★★★★★★★
-
NaN：not a number
-
NaN 与任何值都不相等，包括他本身
-
-
isNaN: is not a number
-
关于NaN和isNaN的使用：
NaN是一个类型，表示不是数字。
isNaN是一个函数，判断一个数字是否是NaN。
//这是一个错误的运算 var x = 10 - "Ⅹ"; console.log(x);// NaN var r = isNaN(x); console.log(r);// true
String类型
'abc' "abc"
tips：在javaScript中的单引号和双引号是没有区别的。 再理解就是没有字符和字符串的区分。
一个字符串可以是空的，也可以是很长。
请问String 有没有长度限制？
理论上没有，实际上有。
Boolean类型
-
Boolean字面量： true和false，区分大小写
-
计算机内部存储：true为1，false为0
tips：js中的元素只要存在就是true，不存在就是false。
在JS中字符串 "" 表示 false， “123”表示true 。 0表示false，非0表示true。
看一个案例：
var a = new Object();//这里的a可以赋值为任何类型 if(a){ console.log("a"); }else{ console.log("no a"); }
Undefined和Null
-
undefined表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined
-
null表示一个空，变量的值如果想为null，必须手动设置
var student; var person = null; console.log(student);// undefined console.log(person);// null
获取变量的类型
typeof
console.log(typeof car) // object console.log(typeof person) // object console.log(typeof x) // number console.log(typeof "haha")// string
注释
单行注释： //
多行注释：
/* * 多行注释 * */
数据类型转换
转换成字符串类型
-
toString()
var num = 5; console.log(num.toString());
-
String()
String()函数存在的意义：有些值没有toString()，这个时候可以使用String()。比如：undefined和null var u;// undefined console.log(typeof u); // u = u.toString();// undefined没有toString方法 u = String(u); // tips这里的s要大写 console.log(typeof u);
-
拼接字符串方式
num + ""，当 + 两边一个操作符是字符串类型，一个操作符是其它类型的时候，会先把其它类型转换成字符串再进行字符串拼接，返回字符串
转换成数值类型
-
Number()
Number()可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN var score = "98.5a"; console.log(typeof score);// string console.log(score);// 98.5a score = Number(score); console.log(typeof score);// number console.log(score);// NaN
TIPS:使用Number（）进行转换，字符串必须是数字形式。 “123”,“95.2” 非数字形式：“32.9A”“abc123” 如果是非数字形式就转换为NaN
-
parseInt()
var num1 = parseInt("12.3abc"); // 返回12，如果第一个字符是数字会解析直到遇到非数字结束 var num2 = parseInt("abc123"); // 返回NaN，如果第一个字符不是数字或者符号就返回NaN /// 案例1 var score = "98.9"; console.log(typeof score);// string console.log(score);// 98.9 score = parseInt(score);// 将字符串转化为整数 console.log(typeof score);// number console.log(score);// 98 tips: 如果有小数部分，直接抛弃。 // 当字符串是非数字形式的时候。 var score = "98a89"; console.log(typeof score);// string console.log(score);// 98a89 score = parseInt(score);// 将字符串转化为整数 console.log(typeof score);// number console.log(score);// 98 // 如果字符串中间出现了非数字，则从非数字字符往前会转换为整形，其他的字符直接抛弃。如果第一个字符就是非数字，则直接转换为NaN -
parseFloat()
parseFloat()把字符串转换成浮点数 parseFloat()和parseInt非常相似，不同之处在与 parseFloat会解析第一个. 遇到第二个.或者非数字结束 如果解析的内容里只有整数，解析成整数 var score = "98.89.56"; console.log(typeof score);// string console.log(score);// 98.89.56 score = parseFloat(score);// 将字符串转化为Float console.log(typeof score);// number console.log(score);// 98.89
-
+，-0等运算
var str = '500'; console.log(+str); // 取正 console.log(-str); // 取负 console.log(str - 0);
tips：当使用字符串和数字进行数学运算的时候，如果没有歧义（+可以链接字符串），会自动将字符串转换为数字，如果字符串不是纯的数字形式，最终的结果就是NaN。
转换成布尔类型
-
Boolean()
0 ''(空字符串) null undefined NaN 会转换成false 其它都会转换成true
操作符（运算符）
运算符 operator
5 + 6
表达式 组成 操作数和操作符，会有一个结果
算术运算符
+ - * / %
和数学中表达的意思是一样的。
+特殊情况： 当两个字符串使用+连接的时候，会作为字符串连接。
对了还是有点区别的:
两个字符串也许是可以作任何算数运算的。如果是“+”有可能会出现字符串连接。
var score1 = "23"; var score2 = "25"; // 字符串连接 var score = score1 + score2;// 2325 console.log(score); // 转换再运算。 score = eval(score1)+eval(score2); console.log(score); score = parseInt(score1) + parseInt(score2); console.log(score); // 其他的运算，如果操作数不出现非数字形式的字符串，都会自动转换 score = score1 - score2; console.log(score); // 如果操作数出现非数字形式，最终结果都是NaN score = score1 - "123a"; console.log(score);// NaN
一元运算符
一元运算符： ++ -- （常常被称为自加自减）。
用法：
var x = 10; x ++; // 11 给自己+1。
++和--在操作数的前后是有区别的。
试题：
15 var x = 2; 16 var j = x ++; x和j分别是多少？ x = 3; j = 2;
tips: 任何时候使用++和--无论在前还是在后，一旦程序执行之后，被操作数肯定+1或者-1了。
++在前，先++后运算。 ++在后，先运算后++；
j = x ++; 先把x的值赋值给j，再给x++； j = ++ x; 先把x++ 再赋值给j。
案例： var x = 2; j = x ++ + 4; y = ++ x + 5; 上面的情况 x = 4; j = 6; y = 9;
试题：
var x = 3; y = x ++ + ++ x; 结果： x = 5; 运算过程： 先计算++x，x=4； 继续计算 x + x (4 + 4)，接下来就是赋值。所以y是8。 接下来执行 x ++;x = 5;
试题：交换两个变量的值。
var x = 3;y = 4;
中间变量做法：
var t = x;
x = y;
y = t;
在不使用中间变量的情况下的做法：
x = x + y;
y = x - y;
x = x - y;
关系运算符(比较运算符)
任何时候一个表达式中只要出现了 “ 关系运算符 ”，那么这个表达式的结果必然是一个boolean值。
< > >= <= == != === !== ①绝对不能出现等于大于 >= 也不能出现 等于小于 ②比较两个变量的值是否相等，使用 == 是否不相等使用 != ③比较两个变量的值和类型是否相等，使用 ===
==与===的区别：==只进行值得比较，===类型和值同时相等，则相等 var x = 10; var y = 9 var result = x > y; console.log(result); // < >= <= 都是一样的。 // 如果是字符串.... var name = "卡卡西"; var name1 = "佐助"; result = name < name1; console.log(result); // 数字形式的字符串直接按照数字处理。 var score = "98.5" var score1 = 98.5; console.log(score >= score1); // 运算符 == 和 != var s1 = "abc"; var s2 = "abc"; console.log(s1 == s2);// true console.log(s1 != s2);// false var c1 = "95.8"; var c2 = 95.8; console.log(c1 == c2);// true var c3 = "abc" - 98; var c4 = "def" * 95; console.log(c3 == c4);// false 所有的NaN == 的结果都是false。 // 运算符 === (要求值和类型完全一致，才是true) var c1 = "95.8"; var c2 = 95.8; console.log(c1 === c2);// false console.log(c1 !== c2);// true
逻辑运算符(布尔运算符)
逻辑运算符主要用来链接或者操作一个或多个结果为布尔值的表达式。
&& 与 两个操作数同时为true，结果为true，否则都是false || 或 两个操作数有一个为true，结果为true，否则为false ! 非 取反
案例：
var score1 = 90; var score2 = 80; // 两个条件同时是true var result = score1 >= 85 && score2 >= 85; console.log(result); // 两个条件满足一个即可 result = score1 >= 90 || score2 >= 90; console.log(result); // 逻辑非 ! 取反 优先级贼高 result = !(score1 >= 90) || score2 >= 90; console.log(result); result = !(score1 >= 90 || score2 >= 90); console.log(result);
逻辑运算符连或者操作的表达式肯定是boolean类型的表达式。 任何一个表达式如果出现了逻辑运算符，结果肯定也是boolean值。
短路情况：
（笔试面试常考的细节）
// 特殊情况 var score1 = 90; var score2 = 80; var a = 10; result = score2 > 85 && (a = score1) > 85; console.log(result);// false console.log(a);// 10
逻辑与 && 和逻辑或|| 都有短路的作用：当运算符前面的表达式已经决定了整个表达式的结果，运算符后面的表达式不会再运算了。
赋值运算符
= += -= *= /= %=
赋值运算符的主要作用就是将运算符右边的表达式的结果赋值给左边的变量。
例如： var num = 0; num += 5; //相当于 num = num + 5;
运算符的优先级
优先级从高到底 1. () 优先级最高 2. 一元运算符 ++ -- ! （++和--要考虑在前还是在后） 3. 算数运算符 先* / % 后 + - 4. 关系运算符 > >= < <= 5. 相等运算符 == != === !== 6. 逻辑运算符 先&& 后|| 7. 赋值运算符
案例：计算一个年份是否是闰年
var result = ((year % 400) == 0) || (((year % 100) != 0) && ((year % 4) == 0));
三目运算
或者说是三元运算。
运算符：result = 表达式1 ？ 表达式2 ： 表达式3
result的结果 = 如果表达式1的结果是true，则整个表达式的结果是表达式2的结果。如果表达式1的结果是false，则整个表达式的结果是表达式3的结果。
性别：
var gender = 1; console.log(gender == 1?'男':'女');
流程控制
程序的三种基本结构
顺序结构
从上到下执行的代码就是顺序结构
程序默认就是由上到下顺序执行的
分支结构
根据不同的情况，执行对应代码
循环结构
循环结构：重复做一件事情
分支结构
if语句
语法结构
情况1: 如果xxx就xxxx
if (/* 条件表达式 */) { // 执行语句}
案例：
var score = 85;
if(score > 85){
console.log("奖励《奎华宝点》");
}
console.log("程序结束")
情况2：如果xxx就xxx，否则就xxxx
if (/* 条件表达式 */){ // 成立执行语句 } else { // 否则执行语句 }
案例：
var score = 85;
if(score > 85){
console.log("奖励《奎华宝点》");
}else{
console.log("奖励《一顿暴揍》");
}
console.log("程序结束");
// 三目运算解决问题
console.log(score > 85 ?"《奎华宝点》":"《一顿暴揍》");
tips: 这个世界上最远的距离就是你在if里，我在else里。 if(条件)，条件理论上必须是布尔值的表达式。但是js中的默认会自动将其他类型转换为布尔型。所以书写上就感觉可以写任何类型。
var x = 0;
if(x){// 默认会将其他的类型转换为布尔型、
console.log("111");
}else{
console.log("222");
}
其他类型转换为布尔值的情况：
| 其他类型 | 布尔型 |
|---|---|
| 数字 | 0->false，非0 -> true |
| 字符串 | "" -> false,其他都是true |
| undefined,null，NaN | 全部都是false |
| 其他的对象 | 全部都是true |
案例：
var username = document.getElementById("username").value;
// 判断用户名是否是空字符或者是否是undefined
if(username != undefined && username != ""){
// username不是空的
}
// ---------------
if(username){
// username不是空的
}else{
// username是空的
}
情况3 多重分支语句
if (/* 条件1 /){ // 成立执行语句 } else if (/ 条件2 /){ // 成立执行语句 } else if (/ 条件3 */){ // 成立执行语句 } else { // 最后默认执行语句 }
tips：这里的if（条件） 后面的条件可以是任何类型，因为它会自动进行类型转换。 else模块是可选的。
<input type="text" id="score">
<input type="button" onclick="showScore()" value="click me">
<script>
function showScore(){
var score = document.getElementById("score").value;
if(score == undefined || score ==""){// 没有输入任何内容
alert("请输入一个成绩");
return;// 让这个程序中断
}
// 判断输入的是否是一个数字
if(isNaN(Number(score))){ // 如果是true，就说明不是一个数字
alert("请输入一个数字");
return;// 让这个程序中断
}
// 判断数字范围
if(score > 100 || score < 0){
alert("请输入一个0~100之间数字");
return;
}
// 你输入的格式符合要求了
// 多重分支
if(score >= 90){
console.log("奖励《亏华宝殿》");
}else if(score >= 80){
console.log("奖励宝马自行车");
}else if(score >= 70){
console.log("奖励《三年模拟五年高考》");
}else{
console.log("奖励《一顿暴揍》");