??JavaScript（简称“JS”）一种具有函数优先的轻量级，解释型或即时编译型的编程语言。以开发Web 页面的脚本语言出名，被应用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
??① ECMAScript（核心）：JavaScript 语言基础，规定 JavaScript 脚本的核心语法，如数据类型、关键字、保留字、运算符、对象和语句等
??② DOM（文档对象模型）：规定访问 HTML 和 XML 的接口，提供了访问 HTML 文档，如body、form、div、textarea 等的途径以及操作方法
??而Node是一个接口，表示文档中的节点。Node接口是DOM中所有节点类型的基础接口，包括Document、Element、Attr和Text等。Node接口定义了一些常用的属性和方法，用于操作和访问节点的信息
??③ BOM（浏览器对象模型）：是指浏览器提供的一组对象和方法，用于在浏览器窗口之间进行交互。BOM提供了访问浏览器窗口的各种功能，例如获取浏览器窗口的大小、版本信息、浏览历史记录等。
??BOM的核心对象是window对象，它代表了浏览器窗口本身。通过window对象，我们可以访问和操作浏览器窗口的各种属性和方法
??JavaScript 是一种解释性脚本语言，代码不进行预编译，主要用来向 HTML页面添加交互行为，可以直接嵌入 HTML 页面，但写成单独的 js 文件有利于结构和行为的分离。
??HTML 和 JS 都是直接交给浏览器去执行和渲染, 每个浏览器中都有对应的 JS 引擎,JS 代码的执行需要依赖 HTML，不能单独执行。
① 直接编写在 HTML 的 script 标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部引入</title>
<!--内部引入js可以在当前文件的任意位置都能执行，推荐写在 head 标签中-->
<!--HTML 中 js 的所有代码都是顺序执行,出错则不再往下执行，SyntaxError 则都不执行-->
<script>
//js代码
alert("内部引入js......");
</script>
</head>
<body>
<p></p>
<script>
//js代码
alert("内部引入js......")
</script>
</body>
</html>
<script>
//js代码
alert("内部引入js......")
</script>
② 编写在 JS 文件中
??单独编写一个文件 (*.js) 来存放 Javascript 代码，在需要使用的 html 页面直接引入该 js 文件。
??好处：可以使 js 文件和 HTML 文件相分离、一个 js 文件可被多个 HTML 文件使用、维护起来也更方便
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部引入</title>
<!--外部引入：引入的位置可以是当前文件的任意位置-->
<!--使用 script 标签的 src 属性加载指定的 js文件,type 可省略-->
<script src="js/js01.js"></script>
</head>
<body>
<!--同一个script标签不能同时执行内部引入和外部引入，一个标签之前选择是内部引入或者是外部引入-->
<script src="js/js01.js"></script>
<script >
//引入js
alert("内部引入")
</script>
</body>
</html>
<script src="js/js01.js"></script>
js
//外部文件的js代码 javascript-demo\views\js\js01.js 这里只能编写JS代码
alert("外部引入js。。。。。。。")
③ 注意事项
??script标签不能同时引入js文件和编写其他js代码
??script 标签是双标签,不能写成单标签。
<!-- 错误的演示代码 -->
<script type="text/javascript" src="login.js">
alert("这样不行");
</script>
??变量，常量，函数，语句块的名字，统称为标识符。标识符可以由任意顺序的大小写字
母、数字、下划线和美元符号组成，标识符不能以数字开头，不能是 JavaScript 中的保留字
或关键字。
??合法的标识符举例：ename、e_name、_eName、$ename；
??非法的标识符举例：int、3.14、Nice Day
??username 和 userName 是两个完全不同的符号。
??每条功能执行语句的最后必须用分号 ; 结束，每个词之间用空格、制表符、换行符或大括号、小括号分隔符隔开 。语句块使用{}来表示。
??/…/ 中可以嵌套“//”注释，但不能嵌套“ /…/ ”。 、 /**…文档注释.*/
??程序可以用变量名来指向具体的对象内存，并通过变量名来获得对应的对象
??① JS 是弱类型的语言,未严格区分数据类型，故使用 var 或 let 关键字代替所有类型
??例如：var name; 若变量没有初始化，默认是undefined。
??② 也可以在声明变量的同时为其赋值, 例如 ：var name = “大黄”;
??③ 单独对变量赋值（注意类型）,例如：name =18;
??④ 变量的类型由值来决定,值是什么类型,变量就是什么类型.
??⑤ var 可声明同名变量，后声明覆盖前声明，let 同名则报错。
??⑥ 常量使用 const 声明，值不可修改
??⑦ JavaScript 定义变量无需指定类型，任何类型都使用 var 或 let声明，可以将 var / let 理解为
Java 中的 Object ,可以接收任何类型的值
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>tjjs</title>
<script type="text/javascript">
var ename;
//不事先声明变量而直接使用会报错
// alert(变量名)在浏览器中弹出对话框需点击确定
alert(ename); // undefined
var ename = "大黄"; // 声明的同时赋值，可声明同名变量，会覆盖前面的变量
alert(ename);
ename = 18; // 单独赋值，需注意值的类型的合理性
let age = 6;
// let age = 8; // 错误，SyntaxError，解开则整个js文件无法执行
alert(age);
// console.log(变量名);等级以下五种（info、log、debug、warn、error）在浏览器控制台打印内容
console.info(age,ename);
const phone="3366"; // 声明常量，值不可修改
// phone="4399"; // TypeError 错误使用
</script>
</head>
<body>
</body>
</html>
??在 JavaScript 中，变量是动态类型的，这意味着它们可以在任何时候改变其数据类型。当你使用 var 或 let 关键字声明一个变量时，这个变量会被默认为 undefined。然后你可以给它赋一个值，这个值的类型决定了该变量的类型。
??此外，JavaScript 有一些原始类型（包括 Number、String、Boolean、Null、Undefined 和 Symbol），以及一些对象类型（包括 Object、Array、Function）。其中，Null 和 Undefined 是特殊的值，而不是数据类型。
??对于 Object 对象，它是 JavaScript 中所有对象的基类。你可以通过字面量的方式创建对象，也可以通过 new 关键字创建新的对象实例。在 JavaScript 中，几乎所有的东西都是对象，包括函数（Function 对象）。
① Number 数值
??整数常量,如: 60
??实数常量, 如: 3.14、 2E7、3e6等
??特殊数值：NaN、Infinity (除数为零)，对应的判断函数 isNaN()、isFinite()
② Boolean 布尔
??true 和 false
③ String 字符串
??值可用单引号或者双引号括起来。 js 没有 char 类型，故 ‘h’ 也是一个字符串
④ 其他常量
??null 常量、undefined 常量 （定义未赋值）
??获取变量的数据类型
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>tjjs</title>
<script type="text/javascript">
var msg ='yellow';
console.log(typeof msg );//string
msg = 27;
console.log(typeof msg);//number
</script>
</head>
<body>
// js只有" var/let 变量名 = 值 ", 不可以 " 变量类型 变量名 = 值
// name 是自带的一个成员变量,类型无法修改,所以结果一直为 string
// 正确 var age = 10;
// 错误 Number age = 10;
</body>
</html>
① 比较运算符
??= 和 == 以及 === 之间的区别：
??= 赋值运算符：把一个常量/变量的值赋值给另外一个变量
??== 比较运算符：比较两个数据的值是否相等，不会去判断类型 console.log(“24” == 24 );
??=== 比较运算符：先判断数据类型是否相等，然后再去判断值是否相等 console.log(“24” === 24);
② 逻辑运算符
??逻辑运算中 0、“”、false、NaN、undefined、null 表示为 false，其他类型数据都表示true。
??a && b 将 a, b 先转换为 Boolean 类型，在执行逻辑与，若 a 为 false，则返回 a，否则就返回b；
??a || b 将 a, b 先转换为 Boolean 类型，再执行逻辑或，若 a 为 true，则返回 a，否则就返回b。
③ && 和 || 运算符的区别
??&& 操作：从左往右依次判断，返回第一个为 false 的值，否则返回最后一个为 true 的值；
??&& 找 false ,找到则返回对应的值,直到最后一个如果没有找到,则返回最后一位的值.
?? || 操作：从左往右依次判断，返回第一个为 true 的值，否则返回最后一个为 false 的值。
?? || 找 true ,找到则返回对应的值,直到最后一个如果没有找到,返回最后一位的值.
<script type="text/javascript">
/*先转布尔，找false直接返回*/
console.log(true && true);// true
console.log(2 && true);// true
console.log(2 && 4);// 4
console.log("A" && 4);// 4
console.log("" && 8);//
console.log(null && "B");// null
console.log("A" && "B");// B
console.log(1 && 2 && 3);// 3
console.log("" && null && 0);//
console.log(1 && null && 3);// null
/*先转布尔，找true直接返回*/
console.log(true || true);// true
console.log(2 || true);// 2
console.log(2 || 4);// 2
console.log("A" || 2);// A
console.log("" || 2);// 2
console.log(null || "B");// B
console.log("A" || "B");// A
console.log(1 || 2 || 3);// 1
console.log("" || null || 0);// 0
console.log(1 || null || 3);// 1
/*若x为true的值,则返回x的值,否则返回0*/
function func(x){
x = x || 0;
console.info(x);
}
</script>
??将脚本编写为函数，避免页面载入直接执行脚本，定义一次即可多次调用，实现代码的复用性
// JS中不需指定函数的返回值类型(无论怎样都有返回)
function 函数名([参数名称1, 参数名称2, ..., 参数名称N]){
//程序代码
[return 值;]
}
// 参数和返回值都是可选的, 若函数没有返回值，默认返回 undefined
// 普通函数定义,有参有返回
function fun1(name){
return name;
}
// 普通函数定义,无参无返回
function fun2(){
console.log(name);
}
??无固定的函数名称，通常定义一个变量接收该匿名函数，可将匿名函数看成一个普通的值
var 变量名 = function([参数名称1, 参数名称2, ..., 参数名称N]){
//程序代码
[return 值;]
}
var sum = function(i, j){
return i+j;
}
??去除匿名函数的 function ，于参数右边加 => 即可
// 无参单行函数体的箭头函数
/*
function (){
console.log("play";
}
*/
() => console.log("play");
// 无参多行函数体的箭头函数
() => {
console.log("函数体1");
console.log("函数体2");
};
// 一个形参数的箭头函数
ename => console.log(ename);
// 多个参数多行函数体
(ename,age) => {
console.log(ename);
console.log(age);
}
??函数定义后不会立即执行, 需要执行到调用函数的代码时才会执行,方法如果有返回值，那么变量接收到的结果则是实际返回的值，方法如果没有返回值,那么变量的值为 undefined
var 变量 = 函数名(实参1,实参2,...);
// 普通函数定义,有返回
function fun1(ename){
return ename;
}
// 普通函数定义,无返回
function fun2(ename){
console.log(ename);
}
// 匿名函数定义，把没有名称的函数赋值给一个变量（当变量的值）
var sum = function(x, y){
return x+y;
}
// 多个参数多行函数体
var fun3 = (username,age) => {
console.log(username);
console.log(age);
}
// 普通函数调用
var ret1 = fun1("小黄");
var ret2 = fun2("小白");
console.log(ret1); // 小黄
console.log(ret2); // 小白 返回值：undefined
// 匿名函数定义，把没有名称的函数赋值给一个变量（当变量的值）
var sum = function(x, y){
return x+y;
}
// 多个参数多行函数体
var fun3 = (username,age) => {
console.log(username);
console.log(age);
}
// 匿名函数调用
sum(1,3); // 直接把变量作为函数名去调用匿名行数
// 把匿名函数作为变量的值传递给另一个函数（printSumResult），在另一个函数中来调用
function printSumResult(sum){
console.log(sum(3,5));
}
// 调用printSumResult 时带入匿名函数sum
printSumResult(sum); // 传入已定义的函数
// 调用 printSumResult 时重新定义函数
printSumResult(function (x,y){
return x + y;
});
// 箭头函数的定义
fun3("小黄",17);
// 可以将箭头函数作为匿名函数使用
printSumResult((x,y) =>{
return x-y;
});
调用函数时, 实参和定义函数的形参可以不一致
sum(); // 函数被调用，但是参数都为 undefined
sum(2,4,6,8); // 只有前两个，后面的自动忽略
查看函数被调用时传了哪些参数：arguments（箭头函数没有 arguments）
function fun4(){
console.log(arguments); // 每个函数都内置了一个arguments属性，用于存放调用时带入的实际参数值
}
fun4(1,2,3);// 1，2，3
fun4();
fun4("小黄","小白",18);// 小黄，小白，18
??JS 中的构造函数（Constructor）模式，即普通函数内部使用了 this 变量。对构造函数使用 new 运算符，可生成实例，并且 this 变量会绑定在实例对象上。加 new 执行的函数构造内部变化：自动生成对象，this 指向这个新创建的对象，函数自动返回这个新创建的对象
构造函数(类)定义：
//JS定义一个类(构造函数)
function Person(name, age){
//添加属性
this.name = name;
this.age = age;
//添加方法
this.sleep = function(){
console.log("困了,睡一觉");
}
}
创建对象和操作成员
<script>
//构造函数：可以new生成对象实例
function Person(name,age){
this.name=name;
this.age=age;
this.sleep=function (){
console.log("干饭")
}
}
//创建对象
var person1=new Person("小黄",20);
console.log(person1)
// 访问对象中的成员
console.log(person1.name);
// 访问对象中的方法
person1.sleep();
//可以给当前对象绑定自定义属性
person1.email="yellow@123.com";
console.log(person1)
var person2=new Person("大黄",24);
console.log(person2)
//字面式创建对象:ES6语法 obj 类型
var person3={name:"小小黄",age:14}
console.log(person3)
</script>
??此时 Person 称之为构造函数，也可以称之类，构造函数就是类 。person1, person2均为 Person 的实例对象。
??Person 构造函数中 this 指向 Person 实例对象, 即 new Person( ) 出来的对象。构造函数首字母大写（规范）
创建对象的快捷方式：字面式创建对象
// 属性名如果有特殊字符需要加引号括起来。
var obj = {username:"小黄", age:"18"};
console.log(obj.username);
console.log(obj.age);
① Object
??constructor 对创建对象的函数的引用（指针）。对于 Object 对象，该指针指向原始的 Object() 函数。
??Prototype对该对象的对象原型的引用。对于所有的对象，它默认返回 Object 对象的一个实例。
??Object 对象还具有几个方法：
??hasOwnProperty(property)判断对象是否有某个特定的属性。必须用字符串指定该属性。（例如，o.hasOwnProperty(“name”)）
??IsPrototypeOf(object)判断该对象是否为另一个对象的原型。
??PropertyIsEnumerable判断给定的属性是否可以用 for…in 语句进行枚举。
??ToString()返回对象的原始字符串表示。对于 Object 对象不同的ECMAScript 实现具有不同的值。
② Date
Date() 返回当前日期和时间
getFullYear() 获取Date对象中四位数字的年份
getMonth() 获取Date对象中的月份(0~11)
getDate() 获取Date对象中的天(1~31)
getHours() 获取Date对象中的小时
getMinutes() 获取Date对象中的分钟
getSeconds() 获取Date对象中的秒
<script>
//日期对象：获取系统当前时间
var d=new Date();
console.log(d)
//格式化日期参数
var time = d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate() +" " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
console.log(time)
</script>
③ String
属性:
length 字符个数
方法:
charAt(index) 返回指定位置的字符
concat(string1,string2,string3,…) 拼接字符串
fromCharCode(num) 可接受一个指定的 Unicode 值，然后返回一个字符串
substring(start,stop) 提取字符串中两个指定的索引号之间的字符。
<script>
//String对象
var str="asdhasjdhjkashdjk";
// 属性:字符个数
console.log(str.length)
// 方法
console.log(str.charAt(10))
console.log(str.toUpperCase())
console.log(str.substring(1,12))
</script>
// 创建数组对象
var arr = new Array();
// 静态初始化
var arr2 = new Array("大黄","小黄","小小黄");
var arr2 = new Array(1, 2, 3);
// 动态初始化 这里的3是数组的长度不是元素
var arr3 = new Array(3);
var arr4 = ["大黄","小黄","小小黄"];
//对于 js 中的数组不会出现数组越界的异常，也不是定长的。
① 属性
length 属性，获取数组长度。
② 方法
concat(array1, array2, ......, arrayX)：连接两个或更多的数组，并返回结果。
join(separator)：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
reverse()：颠倒数组中元素的顺序（该方法会改变原来的数组，而不会创建新的数组）。
slice(start[, end])：从某个已有的数组返回选定的元素（返回的是一个新数组）。
pop()：删除并返回数组的最后一个元素。
shift()：删除并返回数组的第一个元素。
push(newelement1, newelement2, ...., newelementX)：向数组的末尾添加一个或更多元素，并返回新的长度。
unshift(newelement1, newelement2, ...., newelementX)：向数组的开头添加一个或更多元素，并返回新的长度。
splice(index, howmany, element1, ....., elementX)：用于插入、删除或替换数组的元素。
// 例子
<script>
//定义数组
var arr=["java","msyql","redis",12,33];
var arr2=[1,2,3,3];
//获取数组元素:通过元素下标获取
console.log( arr)
console.log( arr[5])//数组不会出现越界异常
console.log(arr.length)
//拼接数组:数组可以存储不同类型的数据
var arr3= arr.concat(arr2);
console.log(arr3)
</script>
① for
var arr = ["A","B","C","D"];
for(var i = 0; i< arr.length; i++){
console.log(arr[i]);
}
② forEach
数组里的元素个数有几个，该方法里的回调函数就会执行几次
第一个参数是数组里的元素
第二个参数为数组里元素的索引
第三个参数则是遍历的数组本身
数组自带的遍历方法，性能比普通循环低点
var arr = ["A","B","C","D"];
arr.forEach(function(item,index,array){
console.log(item);
});
// 函数中的 arguments 存了调用函数时带入的实际数据,可通过 arguments 获取带入的数据
.
③ map
遍历数组中的每个元素,将回调函数中的返回值存到一个新的数组中,并返回
var arr = ["A","B","C","D"];
var newArr = arr.map(function(item,index,array){
return item+index;
});
//newArr中的数据:["A1","B2","C3","D4"]
④ for-in
可以遍历数组（获取数组的索引）；也可以遍历对象（获取对象的属性名）
//如果是遍历数组,i对应的是数组的索引
var arr = ["A","B","C","D"];
for(var i in arr){
console.log(i); //索引
console.log(arr[i]); //元素
}
//如果是遍历对象，对象是一种复合数据类型，可以包含多个键值对
var obj = new Object();
// 为obj对象添加了两个属性
obj.username = "小黄";
obj.age = 18;
// 遍历对象的所有属性。在每次循环中，变量name都会被赋值为当前正在被遍历的属性名。
for(var name in obj){
// 分别打印出当前属性名和该属性对应的值
console.log(name);
console.log(obj[name]);
}