一.JavaScript简介
a.JavaScript与Java的区别
1.java:是Sun公司推出的面向对象的程序设计语言
? ?JavaScript：是Netscape公司的产品，目的是为了拓展Netscape浏览器功能，是一种可以嵌入? ? ? ? ? ? ? ? ? ? ? ? ? ?Web页面的解释性语言
2.Java：是面向对象的程序设计语言，必须从类定义开始
? ?JavaScript：是基于对象的，本身提供了非常丰富的内部对象供设计人员使用。
3.Java语言的最小程序单位是类定义;而JavaScript 中充斥着大量函数。
4.两种语言的执行方式完全不一样。
Java：必须先经过编译，生成字节码，然后由Java虚拟机运行这些字节码。
JavaScript：是一种脚本语言，其源代码无须经过编译，由浏览器解释执行。
5.两种语言的变量声明也不一样。
Java：是强类型变量语言，所有的变量必须先经过声明，才可以使用，所有的变量都有其固定的? ? ? ? ? ? ? ?数据类型。
JavaScript：是弱类型变量语言，其变量在使用前无须声明，由解释器在运行时检查其数据类型。
6.代码格式不一样。
Java：采用一种与HTML 无关的格式，必须像HTML 中引用外媒体那样进行装载，其代码以字节代码的形式保存在独立的文档中。
JavaScript ：它的代码采用一种文本字符格式，可以直接嵌入HTML 文档中，并且可动态装载，编写HTML文档就像编辑文本文件一样方便。
b.ECMAScript
除了JavaScript（JavaScript是由 Netscape公司开发的），还有另一种脚本语言:JScript 语言（JScript语言是由Microsoft公司开发的）。两种语言的核心功能、作用基本一致，都是为了扩展浏览器的功能而开发的脚本语言。早期的JScript和 JavaScript差异相当大，Web程序员不得不痛苦地为两种浏览器分别编写脚本。于是诞生了ECMAScript，这是一个国际标准化的JavaScript 版本，现在的主流浏览器都支持这个版本。现在平时所说的JavaScript，严格意义上讲，其实应该是 ECMAScript，ECMAScript一般简写成ES。
c.运行JavaScript
1.方法一：使用javascript:前缀构建执行JavaScript 代码的URL。（所有可以设置URL的地方都可使用这种方法）
2.方法二：使用<script.../>元素来包含 JavaScript代码。（如果页面里需要包含大量的JavaScript 代码，则建议将这些JavaScript脚本放在<script>和</script>标签之间。<script...>元素既可作为<head.….>子元素，也可作为<body.../>子元素。）
<body>
????<a?href="javascript:alert('运行javascript')">HELL</a>
????<script>
????????alert('直接运行的javascript');
????</script>
</body>
?
d.导入JavaScript
1.把js与html做到文件级别分离，便于各自维护开发，推荐使用
? ? ? ? ? ? ? ? ? <script src="***.js"></script>
（src:指定外部脚本文件的 URL。指定该属性之后，该<script...>元素只能引入外部脚本，不能在该元素内部写脚本。）
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<title>Document</title>
????<script>
????????var?tar?=?document.getElementById("target");
????????tar.innerHTML?=?"HELLO";
????????tar.style.background?=?"blue";
????</script>
</head>
<body>
????<div?id="target">world</div>
</body>
</html>该段为错误代码，js无法执行的原因是：先执行js,js中去查询html元素，此时html元素还未渲染，所以找到html元素，因此报错。
解决办法：
1、把js代码放到html元素的下边
2、如果是外部js文件，可以使用defer属性来延迟js等到html元素加载完之后执行
3、如果使用jquery,可以使用文档就绪函数来解决
e.noscripy
<noscript..>元素用来向不支持JavaScript或禁用了JavaScript 的浏览器显示提示信息。该元素的用法非常简单，直接在该元素内放提示信息即可，无须指定任何属性。
二.JavaScript变量
a.定义变量方式
1.隐式定义：直接给变量赋值
2.显示定义：使用var关键字定义变量
<script>
????a?=?"1223";//隐式定义变量
????var?a;//显式定义变量
var a，b，c；//一次定义多个变量
</script>JavaScript中的变量是区分大小写的。因此变量abc和 Abc是两个不同的变量。
b.自动类型转换
<script>
var a = "3.145";//本身是字符串值
var b = a - 2; //将3.145字符串自动转换成数字，进行减运算
var c = a + 2; //+起到了连接作用，将2自动转换成字符
alert(b + "\n" + c);
</script>
?
对于加号运算符，因为字符串可用加号作为连接运算符，所以系统自动将数值转换成字符串，并将两个字符串进行连接运算。
c.强制类型转换
1.toString():将布尔值、数值等转换成字符串。
2.parselnt():将字符串、布尔值等转换成整数。
3.parseFloat():将字符串、布尔值等转换成浮点数。
<script>
var a = "3.145";
var b = a - 2;
var c = parseFloat(a) + 2;//parseFloat将a字符串强制转换成数字
alert(b + "\n" + c);
</script>
4:通过parseInt()或parseFloat()强转后的结果（要不,是成功的数，要不,是NaN））
字符串值:如果字符串是一个数值字符串,则可以转换成一个数值,否则将转换成 NaN。
undefined、null、布尔值及其他对象:一律转换成 NaN。
5.当字符串不是数字开头时，转换成NaN；如果是数字开头，但包含非数字字符时，从非数字开始截掉。
alert(parseInt("qcby"));//当字符串不是数字开头时，转换成NaN，输出结果为NaN
alert(parseInt("999qcby6")); //如果是数字开头，但包含非数字字符时，从非数字开始截掉,输出结果为999?
d.变量作用域
根据变量定义的范围，变量分为全局变量和局部变量：
全局变量：不在所有函数里定义的变量和在函数里不使用var(隐式定义)定义的变量，就是全局变量
局部变量：在函数里定义的、且使用var(显式定义)定义的变量，是局部变量
var?test?=?"全局变量";//全局变量
function?myFun()?{
????age?=?20;//全局变量
????var?male?=?"局部变量";//局部变量
}
myFun();
alert(test?+?age);
alert(male);1.全局变量与局部变量名字相同时：局部变量覆盖全局变量（在函数里，局部变量覆盖全局变量；在函数外，局部变量失效，访问全局变量）
<script type="text/javascript">
var text = "全局变量";
function checkScope() { //定义函数checkScope
var text = "局部变量"; //函数内并且用var修饰一定满足局部变量
alert(text); //输出局部变量
}
checkScope();
alert(text); //输出全局变量
</script>依次输出的结果为： 局部变量? ? 全局变量
?2.，javascript变量没有块范围（不是绝对的，因为可以通过let定义变量），{}指的就是块范围，就是在{}里定义的变量，出了{}依然可以使用
{
var i = 0;//i的作用范围是整个函数
if (typeof o == "object") {
var j = 5;//j的作用范围是整个函数内，而不是if块内
for (var k = 0; k < 10; k++)
{
document.write(k);//因为javascript没有代码块范围，所以作用在整个函数内，而不是循环体内
}
}//即使跳出了循环体，k依然存在
alert(k + "\n" + j);
}3.全局变量的作用范围对于html事件处理一样有效（全局变量的作用范围是可以拓展到html的事件处理中的）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
//定义全局变量
var x = "全局变量";
</script>
</head>
<body>
<!--在onclick事件中重新定义了x局部变量-->
<input type="button" value="局部变量" onclick="var x='局部变量';alert('输出x局部变量的值：'+x);" />
<!--直接输出局部变量x的值-->
<input type="button" value="全局变量">
</body>
</html>e.变量提升机制
此处需要理解JavaScript的变量提升机制。所谓变量提升，指的是变量声明总是会被解释器“提升”到函数体的顶部。JavaScript变量提升甚至不需要定义变量的语句真正执行，只要在函数中包括了定义变量的语句，该变量声明就会被提升到函数体的顶部。
var?a?=?10
function?test()?{
????console.log(a) //if语句里的var a得到提升，结果为undefined
????if?(0)?{
????????var?a?=?20 //即使a在这个括号里不起作用，也会被提升，导致输出结果为undefined
????}
}
test()变量提升只是提升变量声明部分,并不会提升变量赋值部分
f.let变量
var定义的变量存在如下问题：var定义的变量没有块作用域。var定义的全局变量会自动添加全局 window对象的属性。var定义的变量会提前装载。
1.let定义的变量有块作用域：
<script type="text/javascript">
for (let i = 0; i < 10; i++) {
console.log(i);
}
console.log("循环体之外：" + i);
</script>
2.let定义的变量不会强加给window对象：
<script type="text/javascript">
let name = 'hello';
console.log(name);//输出hello
console.log(window.name);//window.name不存在
</script>?3.let定义的变量不会提前转载（提升）：
<script type="text/javascript">
var name = 'hello'
function func()
{
//下面的name变量不存在，因此程序导致错误
console.log(name);
let name='fkit';
console.log(name);
}
func();
</script>g.const常量
使用const定义常量，
语法：要求必须在定义时初始化值，并且之后不可以修改常量的值，
约定俗称的规范：常量一般都是大写命名，如果是多个单词，中间使用_连接
const MAX_AGE=120;//正确
MAX_AGE=120;//语法错误
MAX_AGE++；//自加可以改变MAX_AGE的值，也会导致错误
const MAX_AGE；//cont常量没指定初始值，错误三.JavaScript变量
a.基本数据类型
1.数值类型:包含整数或浮点数。
2.布尔类型:只有true或false两个值。
3.字符串类型:字符串变量必须用引号括起来，引号可以是单引号，也可以是双引号。
4.undefined类型:专门用来确定一个已经创建但是没有初值的变量。
5.null类型:用于表明某个变量的值为空。
b.数据类型
1.字面量创建数值类型：var a = 10
? 面向对象创建数据类型：var a = new Number("10");
2.科学计数法使用51.2E2来表示，其中E不区分大小写，举例：5.12e3、4E-4
<script type="text/javascript">
var a, b;//声明变量a,b
a = 5E2;
b = 1.23e-3;
alert(a + "\n" + b);
</script>
2.如果包含小数，则小数点前面的0可以省略
d=.34e4;?数值直接量不要以0开头。因为JavaScript不仅支持十进制数，还支持其他进制数。八进制数以0开头，十六进制数以0x或者0X开头。
3.数值类型里两个特殊值：正无穷大、负无穷大
当数值变量的值超出了其表数范围时，将出现两个特殊值:Infinity(正无穷大)和-Infinity(负无穷大)。前者表示数值大于数值类型的最大值，后者表示数值小于数值类型的最小值。两个正无穷大总是相等，虽然真实值不相等，但是都是正无穷大后，就相等了；负无穷大同理。
4.JavaScript中的NaN,全称Not a Number ,代表非数。NaN不会与任何数值变量相等，也就是 NaN==NaN也返回 false。JavaScript专门提供了isNaN()函数来判断某个变量是否为NaN。
<input type="text" id="xc">
<input type="button" value="验证是否为整数" id="check">
<script>
var xc = document.getElementById("xc");
var check = document.getElementById("check");
check.onclick = function() {
var val = xc.value;
val = parseInt(val);
if (isNaN(val)) {
alert("不是整数");
} else {
alert("是整数");
}
}
</script>
?
5.浮点数精度丢失，所以要比较浮点数，需要使用差值法
var?a?=?0.3333;
var?b?=?a?*?5;
console.log(b);
console.log(b?-?1.6665)
console.log(Math.abs(b?-?1.6665));
//差值比较法
if?(Math.abs(b?-?1.6665)?<?0.00000000001)?{
????console.log("b等于1.6665");
}?else?{
????console.log("b不等于1.6665");
}?
c.字符串类型
1.字符串定义方式，仅有一个字符的字符串也是字符串类型，没有字符类型
2.字符串必须用引号括起来，可以是双引号也可以是单引号，而且值是相等的
3.JavaScript中的字符串与Java中的字符串主要有两点区别:①JavaScript中的字符串可以用单引号引起来;②JavaScript中比较两个字符串的字符序列是否相等使用==即可,无须使用equals(）方法。
5.JavaScript提供字符串相关的方法和属性：
String():类似于面向对象语言中的构造器，使用该方法可以构建一个字符串。
charAt():获取字符串特定索引处的字符。
charCodeAt():返回字符串中特定索引处的字符所对应的 Unicode值。
length:属性，直接返回字符串长度。
toUpperCase():将字符串的所有字母转换成大写字母。
toLowerCase():将字符串的所有字母转换成小写字母。
fromCharCode():静态方法，直接通过String类调用该方法，将一系列Unicode值转换成字符串。
indexOf():返回字符串中特定字符串第一次出现的位置。
lastIndexOf():返回字符串中特定字符串最后一次出现的位置。
substring():返回字符串的某个子串。
slice():返回字符串的某个子串，功能比substring 更强大，支持负数参数。
match():使用正则表达式搜索目标子字符串。
search():使用正则表达式搜索目标子字符串。
concat():用于将多个字符串拼加成一个字符串。
split():将某个字符串分隔成多个字符串，可以指定分隔符。
replace():将字符串中某个子串以特定字符串替代。
?
?<script>
????var?text?=?"agoulkjsdhlsjd";
????var?a?=?text.charAt(1);?//获得第二个字符
????var?b?=?text.charCodeAt(1);?//获得第二个字符对应的unicode值
????var?c?=?text.length;?//获得整个字符串的长度
????var?d?=?text.toUpperCase();?//转化成大写
????var?e?=?String.fromCharCode(98);?//获得unicode值为98的字符
????console.log(text);
????console.log(a,?b,?c,?d,?e);
</script>?（javaScript字符串里第一个字符的索引是0，而不是1。）
6.indexOf()和lastIndexOf()查找方法：
indexOf(searchString[, startIndex]):搜索目标字符串 searchString出现的位置。其中startIndex指定不搜索左边 startIndex个字符。
lastlndexOf(searchString[, startIndex]):搜索目标字符串searchString最后一次出现的位置。如果字符串中没有包含目标字符串，则返回-1。功能更强大的搜索方法是search()，它支持使用正则表达式进行搜索。
var?text?=?"agoulkjsdhlsjd";
var?f?=?text.indexOf("l");?//寻找l子串第一次出现的位置，如果没有就返回-1，如果就就返回位置?4
var?f?=?text.indexOf("l",?6);?//跳过6个字符后，寻找l子串第一次出现的位置，如果没有就返回-1，如果就就返回位置?10
var?g?=?text.lastIndexOf("l");?//寻找l子串第一次出现的位置，如果没有就返回-1，如果就就返回位置
console.log(f,?g)?//7.match()和search()查找方法
match()和 search()方法都支持使用正则表示式作为子串;区别是前者返回匹配的子字符串，后者返回匹配的索引值。match()支持使用全局匹配，通过使用g标志来表示全局匹配，match()方法返回所有匹配正则表达式的子串所组成的数组。
match()方法的返回值为字符串数组或null，如果包含匹配值，将返回字符串数组;否则就返回null。search()返回值为整型变量，如果搜索到匹配子串，则返回子串的索引值;否则返回-1。
?var?text?=?"ag3ou7l3kjs4d3h1ls5jd";
????????var?a?=?text.match(/\d/g);?//寻找所有的数字，最终组成数组，其中g表示全局匹配
????????var?b?=?text.search(/\d/);?//寻找第一次数字的位置
????????console.log(b);
????????console.log(a);
8.substring()和slice()截取方法：
substring(start [, end]):从start（包括）索引处，截取到end(不包括）索引处，不截取 end索引处的字符。如果没有end参数，将从start处一直截取到字符串尾。
slice(start[, end]):与substring()的功能基本一致，区别是slice()可以接受负数作为索引，当使用负索引值时，表示从字符串的右边开始计算索引，即最右边的索引为-1。
var?text?=?"ag3ou7lsdfds";
var?a?=?text.substring(3,?6);?//从原字符串中截取索引处3、4、5三个字符?即ou7
var?b?=?text.slice(3,?-1);?//从原字符串中截取索引是3的字符开始到倒数第一个字符之间的字符?即ou7lsdfd
console.log(a);
console.log(b);d.boolean(布尔)类型
布尔类型的值只有两个:true和 false。布尔类型的值通常是逻辑运算的结果
e.undefined类型和null类型?
undefined类型的值只有一个undefined,.该值用于表示某个变量不存在，或者没有为其分配值,也用于表示对象的属性不存在。null 用于表示变量的值为空。总体而言，undefined表示没有为变量设置值或属性不存在;而null表示变量是有值的，只是其值为null。但如果不进行精确比较，很多时候undefined和 null本身就相等，即null==undefined将返回true。如果要精确区分null和 undefined，应该考虑使用精确等于符。
判断变量是什么类型，使用typeof运算符；判断对象是什么类型的对象，使用instanceof运算法
?