应用场景：
JavaScript用来做前端页面校验；
JavaScript可以实现网页的一些动画效果，列如：轮番图；
JavaScript介绍：
JavaScript 是一门跨平台、基于对象的脚本语言，来控制网页行为的，它能使网页可交互。
JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。
JavaScript（简称：JS） 在 1995 年由 Brendan Eich 发明，并于 1997 年成为 ECMA 标准。
ECMAScript 6 (ES6) 是最新的 JavaScript 版本（发布于 2015 年)。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。JavaScript语言不需要编译，直接由各大浏览器解析运行。学习JavaScript语言不需要单独安装软件，只需要浏览器即可。
1.3 JavaScript特点
脚本语言
浏览器分成两部分：渲染引擎和JS引擎。渲染引擎:用来解析HTML和CSS,俗称内核，例如chrome浏览器的blink。JS引擎：也称为JS解释器。用来读取网页中的JS代码，对其处理后运行，例如chrome浏览器的V8。浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行执行代码时逐行解释每一行源码(转换为机器语言)，然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。
弱类型
JavaScript中也有明确的数据类型，但是声明一个变量后它可以接收任何类型的数据，并且会在程序执行过程中根据上下文自动转换类型。
JavaScript的组成
组成部分 作用;
ECMAScript 构成了JavaScript核心的语法基础;
BOM Browser Object Model 浏览器对象模型，用来操作浏览器上的对象;
DOM Document Object Model 文档对象模型，用来操作网页中的元素(标签);
二.JavaScript引入方式；
内部脚本语言：
将 JS代码定义在HTML页面中，JavaScript 代码必须位于<script> </script>标签之间。
在 HTML 文档中可以在任意地方，放置任意数量的。
一般把脚本置于 元素的底部，可改善显示速度，因为脚本执行会拖慢显示
注意下面的代是js代码 只是放在HTML里面
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
alert("出现一个弹框");//alert出现一个弹框;
</script>
</body>
</html>外部脚本：
将 JS代码定义在外部 JS文件中，通过标签引入到 HTML页面中
标签要么用于定义内部脚本，要么用于引入外部js文件，不能混用
标签 不能自闭合
js代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="D:\visual.Code\day8-16\js\damo01.js"> </script>
</body>
</html>三.JavaScript基础语法。
3.1 JavaScript的书写语法。
区分大小写
每行的结尾分号可有可无
注释：单行注释：// 多行注释： /*注释内容*/。
3.2JavaScript的三种输入方式：
弹出警告框：window.alert("helloJs~")；
输出数据到页面：doucument.write(hello Js~");
输出到游览器到控制台：console.log(hello Js~");
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script >
alert("学习js的第一天");//弹出警告框aiert;
document.write("js有点难受奥")//输出数据到页面上，
console.log("简简单单");//输出到游览器控制台
</script>
</body>
</html>3.3JavaScript定义变量
JavaScript 中用 var 关键字（variable 的缩写）来声明变量
JavaScript 是一门弱类型语言，变量可以存放不同类型的值
ES 6 新增了 let 关键字来定义变量。它的用法类似于 var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明
ES6 新增了 const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script >
//Es6之前用的是var定义变量;
var i=10;
console.log(i);
var n="hello";
console.log(n);
//Es6之后就是用let来定义变量;
let i=10;
console.log(i);
let n="hello";
console.log(n);
//Es6定义常量使用const,常量的值不可以改变；
const s=3.14;
console.log(s);
</script>
</body>
</html>JavaScript数据类型；
原始类型
number：数字（整数，小数，NaN；
string ：字符，字符串，单双引皆可；
boolean：布尔 true false；
null ：对象为空；
nudefined：当声明的变量未初始化时，该变量的默认值是nudefined；
引用数据类型：
就是对象。Object Date等
使用typeof运算符可以获取数据的类型；
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script >
//number (整数 小数 NaN)
let v01=10;
console.log(v01);
console.log(typeof v01);
let v02=1-"a";
console.log(v02);
console.log(typeof v02);
//string 字符类型
let v03="hello";
console.log(v03);
console.log(typeof v03);
//布尔类型 true false
let v04=true;
console.log(v04);
console.log(typeof v04);
//null:空对象类型
let v05=null;
console.log(v05);
console.log(typeof v05);
//undefined:未定义类型
let v06;
console.log(v06);
console.log(typeof v06);
//引用数据类型 Object Date等
let date = new Date();
//获取当前系统时间
console.log(date);
</script>
</body>
</html>JavaScript运算符：
一元运算符：++，--
算术运算符：+，-，*，/，%
赋值运算符：=，+=，-=...
关系运算符：>，<，>=，<=，!=，==，===...
逻辑运算符：&&，||，!
三元运算符：条件表达式 ? 值1 : 值2；
共同点：其实上面的运算符都跟java里面的运算符用法一样，
不同点就是关系预算符里面的：==和===的区别；
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script >
/*
== 和 ===区别
==:非严格比较,会进行类型转换,
如果两端的数据类型不一致,会尝试将两端的数据转换成number,再对比number大小
===:严格比较,不会进行类型转换,
如果两端数据类型不一致,直接返回false,数据类型一致在比较是否相同
*/
let i=10;
let j='10';
console.log(i==j);//true
console.log(i===j);//false
/*
逻辑运算符: && || !
1.&& 短路与:遇false则false false && true
2.|| 短路或:遇true则true true || false
3.在JS中有六种false
false 0 空字符串"" NaN null undefined
在JS中逻辑运算符可以针对任意类型进行运算
*/
if(0 && true){
console.log("真的");
}else{
console.log("假的");
}
if("" && true){
console.log("真的");
}else{
console.log("假的");
}
</script>
</body>
</html>JavaScript全局函数
其他类型转换为数字：parseInt(数值)，将参数数值转换为整数，从左向右解析，遇到非数值就停止解析。
如果字面值不是数字，则转为NaN。
布尔类型转换为整数：Number()，true 转为1，false 转为0
其他类型转为 boolean：Boolean(value)
number：0和NaN转为false，其他的数字转为true
string：空字符串转为false，其他字符串转为true
null:转为false
undefined：转为false
在JavaScript中有全局函数概念：不归属任何对象，即可以理解为不需要任何对象就可以调用的函数；注意：所有的全局函数都可以使用浏览器窗口对象调用，即window对象调用，但可以省略不写。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script >
//整数的转换
let c = "1554hello";
let d = parseInt(c);
document.write(d);//1554
let c1 = "3.14";
let d1 = parseInt(c);
document.write(d);//3
let c2 = "hello100";
let d3 = parseInt(c);
document.write(d);//NAN
</script>
</body>
</html>
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script >
//布尔类型转换为整数；
let a =true;
let b=Number(a);
document.write(b);//1
let a1 =false;
let b1=Number(a1);
document.write(b1);//0
//其他类型转换为布尔类型
let a2 =1;
let b2=Boolean(a2);
document.write(b2);//true
let a3 =0;
let b3=Boolean(a3);
document.write(b3);//false;
</script>
</body>
</html>JavaScript流程控制语句
if
switch
for
while
do...while
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script >
//打印99乘法表：
for(let i=1;i<=9;i++){
for(let j=1;j<=i;j++){
document.write(i+"*"+j+"="+i*j+" ")
}
document.write("<hr/>");
}
</script>
</body>
</html>JavaScript函数(重要部分）:
方式一：
定义：JavaScript 函数通过 function 关键词进行定义
形式参数不需要类型。因为JavaScript是弱类型语言
返回值也不需要定义类型，可以在函数内部直接使用return返回即
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script >
/* function functionName(参数1,参数2..){
要执行的代码
}
调用函数:函数名(实参,....); 函数必须被调用才能执行
*/
function fn01(){
console.log("fn01....");
}
fn01();
function fn02(n,m){
console.log(n+"......"+m);
return n+m;
}
let sum=fn02(2,3);
console.log(sum);
</script>
</body>
</html>跟java里面的方法有些类似；但是java里面比较严谨一些；
方式二：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script >
/*
匿名函数:没有名字的函数
格式:
let 函数名=function(参数列表){
函数体
}
*/
//将匿名函数赋值给一个变量
let add=function(n,m){
console.log(n+"..."+m);
return n+m;
}
//调用函数
let sum=add(2,3);
console.log(sum);
</script>
</body>
</html>注意事项：
匿名函数还可以作为另一个函数的参数传递
在JavaScript中没有函数重载概念，如果存在函数名一样的函数，后出现的函数就会覆盖之前的函数名
在JavaScript中调用无参函数可以传递实参；调用有参函数可以不传递实参.数据没有丢失会放到js的一个内置数组对象中 arguments
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script >
//匿名函数还可以作为另一个函数的参数传递
function fn01(x){
/*
x=function(){
console.log("匿名函数...");
}
*/
console.log("fn01......");
x();
}
fn01(function(){
console.log("匿名函数...");
});
//在JavaScript中没有函数重载概念，如果存在函数名一样的函数，
//后出现的函数就会覆盖之前的函数名
function fn02(){
console.log("fn02...");
}
function fn02(a,b){
console.log("fn02..."+a+"..."+b);
}
fn02(10,20); //fn02...10...20
fn02();//fn02...undefined...undefined
//在JavaScript中调用无参函数可以传递实参；
//调用有参函数可以不传递实参.数据没有丢失会放到js的一个
//内置数组对象中 arguments
function fn03(){
console.log("fn03...");
for(let i=0;i<arguments.length;i++){
console.log(arguments[i]);
}
}
fn03(2,3);
</script>
</body>
</html>JavaScript对象：
3.1数组对象Array
3.1.1:定义格式：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script >
/*
创建数组对象方式一：采用Array方式
*/ let arr = new Array(1,2,1.2,"哈哈");
//遍历数组
//使用增强for
// for(let x of arr){//x表示数组的数据
// console.log(x);
// }
//1.采用方式一即上述方式定义数组注意：如果只给一个number类型的值，
// 那么此时数值表示数组长度，数组中的数据都是empty
let arr1=new Array(10);
console.log(arr1.length);//10
//2.采用方式一即上述方式定义数组注意：如果只给一个number类型的值，那么此时数值表示数组长度，要求不能给小数，数组长度不能是小数
let arr2=new Array(3.14);
console.log(arr2.length);
//3.采用方式一即上述方式定义数组注意：如果只给一个非number类型的值， 那么此时数值表示数组的元素
let arr3=new Array("华哥");
console.log(arr3.length);//长度是1 数据是 ['华哥']
//4.js中的数组长度是可变的
let arr4=new Array(10,20,1.2,"柳岩");//数组长度是4
//给索引是7的位置添加数据
arr4[7]="牛";//表示索引为7的添加一条数据
//数据： [10, 20, 1.2, '柳岩', empty × 3, '牛'] 长度变为8
let arr5=new Array(10,20,1.2,"柳岩");//数组长度是4
//更改长度
arr5.length=2;//[10, 20]
//创建对象方式二：
let arr5=[10,1.2,"呵呵"];
//定义数组
let arr5=[10]; //10表示数组元素，长度是1
</script>
</body>
</html>常见属性和函数：
push();向数组的末尾添加一个或则更多的元素，并返回新的长度。
splice();根据索引删除数组里面的内容。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script >
/*
数组Array对象中的函数
*/
let arr = [10, 1.2, '哈哈'];
//push() 向数组的末尾添加一个或更多元素，并返回新的长度。
arr.push(true,100,10);
console.log(arr);//长度为:6
/*
2.splice(index,n)
从数组中删除元素。
index表示从哪个索引删除
n表示删除数据的个数
*/
let arr1 = [10, 1.2, '哈哈'];
//需求:删除数据1.2 哈哈
arr1.splice(1,2); //根据数组的索引进行删除
//第一个参数1表示arr1数组的索引，从1索引开始删除
//第二个参数2表示删除2个数据
</script>
</body>
</html>3.2正则对象RegExp
直接量：注意不要加引号；
var reg = /^正则表达式符号$/;
创建RegExp对象；
Var reg = new RegExp("^正则表达式符号$");
方法：
test(str):判断指定字符串是否符合规则，返回true或则 false
语法：
^表示开始
$：表示结束
[]:代表某个范围内的单个字符，比如： [0-9] 单个数字字符
.:代表任意单个字符，除了换行和行结束符
\w:代表单词字符：字母、数字、下划线()，相当于 [A-Za-z0-9]
\d:代表数字字符： 相当于 [0-9]
量词：
+:至少一个*:零个或多个?:零个或一个
{x}:x个
{m,}:至少m个
{m,n}:至少m个，最多n个
只能输入数字: ^[0-9]*$
6到16位的数字: ^\d{6,16}$
字母开头6-16位: ^[a-zA-Z][a-zA-Z0-9]{5,15}$
需求：使用正则表达式验证指定的字符串是否满足长度为6；
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script >
/*
test(被验证的字符串) 如果被验证的字符串满足正则对象中的表达式
则test函数返回true，否则返回false
需求：验证指定字符串长度是否是6
*/ //1.创建正则对象
//let reg=new RegExp("^.{6}$");
let reg=/^.{6}$/;
//2.使用正则的对下调用验证的函数test
let b=reg.test("abcdefg");
//3.判断
if(b){
console.log("通过校验");
}else{
console.log("校验失败");
}
</script>
</body>
</html>String对象：
定义格式：
let 变量名 = new String (s);//方式一
let str = new string ("hello");
let 变量名 = s；//方式二
let str = "hello";
let str = 'hello';
属性：
length：字符串的长度。
方法：
charAt() 返回在指定位置的字符串；
indexo() 返回字符串第一次出现索引的位置；
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script >
/*
String字符串对象
*/
//1.创建对象 了解
let s = new String("abc");
console.log(s);
console.log(s.toString());//"abc"
//2.创建对象 掌握
let s1="abc";
console.log(s1);//"abc"
//3.创建对象 掌握
let s2='abc';
console.log(s2);//"abc"
//4.常见属性：length 表示求字符串的字符个数或者字符串长度
console.log(s2.length);//3
//5.常见函数
//5.1 charAt() 返回在指定位置的字符。 参数表示索引，索引从0开始
//创建对象
let s3="helloworld";
console.log(s3.charAt(5));//w
//5.2.indexOf() 检索字符串。
//查找字符串在指定字符串中存在的索引，如果不存在返回-1
console.log(s3.indexOf("wor"));//5
</script>
</body>
</html>自定义对象（重要）
格式：
let 对象名 ={
属性名称1：属性名称1;
属性名称2：属性名称2;
...
函数名称：function(形象列表）{
...
}
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script >
let person ={
//属性名:属性值
name:"柳岩",
address:"湖南",
age:18,
//定义函数 函数名:function(形参列表){}
eat:function(){
//TODO:如果在自定义对象中使用当前自定义对象中的其他属性或者函数那么格式：this.属性名或者this.函数名(实参);
console.log("干饭人，干饭魂..."+this.address);//this表示当前对象即person
console.log("干饭人，干饭魂..."+person.address);//this表示当前对象即person
}
};
//获取name和age的值并输出控制台
console.log(person.name);//柳岩 获取属性值：对象名.属性名
console.log(person.age);//18
//调用函数 对象名.函数名(实参);
person.eat();
</script>
</body>
</html>