这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战

1. JavaScript 介绍

JavaScript虽然是java作为前缀，但java和javascript的关系，就像老婆和老婆饼之间的关系，没有一毛钱关系！

网景公司在Netscape2.0首先推出了JavaScript，JavaScript 的正式名称是“ECMAScript ”，此标准由ECMA组织发展和维护，简称“js”，JavaScript 是一种网页编程技术，用来向HTML页面添加交互行为。

JavaScript 是一种基于对象和事件驱动的解释性脚本语言，直接嵌入HTML 页面，由浏览器解释执行代码，不进行预编译。

1.1 js的特点

可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序

解释执行：事先不编译，逐行执行
基于对象：内置大量现成对象
适宜：
- 客户端数据计算
- 客户端表单合法性验证
- 浏览器事件的触发
- 网页特殊显示效果制作

1.2 js的组成

ECMAScript：定义核心语法，关键字，运算符，数据类型等系列标准
DOM：文档对象模型，将一个htm l页面的所有节点看成是一个一个的对象。更有层次感的管理每一个节点。

BOM：浏览器对象模型，是对浏览器窗口进行访问和操作。

      使用BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。
      使BOM独树一帜且又常常令人怀疑的地方在于，它只是JavaScript的一个部分，没有任何相关的准。
      弹出新的浏览器窗口移动、关闭浏览器窗口以及调整窗口大小提供Web浏览器详细信息的定位对象提供用户屏幕分辨率详细信息的屏幕对象对cookie的支持IE扩展了BOM，加入了ActiveXObject类，可以通过JavaScript实例化ActiveX对象，进而实现ajax局部刷新技术

2. HTM L与javaScr ipt 结合方式

2.1.行内脚本

1. 点击按钮（触发）
1. 弹框（具体的操作）

<button onclick="alert('弹框测试') " >点我一下</button>

2.2.内部脚本

1. 使用script
1. 标准是写在head和body之间（脖子位置），但其实只要写在htm l文件内部就可以，无论什么位置

<html>外，<p></p>内部，都可以。
<body >
<script >
alert("弹框" );
</script>
</body>

2.3.外部脚本

1. 在项目根目录下创建一个目录js
1. 在js目录中创建一个文件，后缀名是.js
1. 在htm l页面中

<script src="js/xx.js"></script>

以上使用脚本的三种方式的优先级，谁在上，谁先执行。因为是解释性语言。

3. JavaScript 的使用

3.1 变量

因为js是弱类型语言，所以，在定义变量的时候，所有的数据类型都是var

声明变量： var x; var x,y;
数值类型：number:不区分整型数值和浮点型数值,所有数字都采用64位浮点格式存储，类似于double 格式
字符串：string:首尾由单引号或双引号括起,var aa=" 欢迎来到\ " JavaScript世界";
布尔类型：仅有两个值：true和false也代表1和0,实际运算中true=1,false=0

3.1.1 自动类型转换

数字+字符串：数字转换为字符串10+’a’->10a
数字+布尔值：true转换为1，false转换为0，true+5- >6
字符串+布尔值：布尔值转换为字符串true或false。 true+’a’->truea
布尔值+布尔值：布尔值转换为数值1或0， true+true->2

3.1.2 数据类型转换函数

parseInt：强制转换成整数

如果不能转换，则返回NaN（NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字）

例如：parseInt("6.32")=6 parseFloat：强制转换成浮点数，如果不能转换，则返回NaN 例如：parseFloat("6.32")=6.32

typeof：查询数值当前类型，返回string/number/boolean/object 例如：typeof("test"+3)=="string"

3.1.3 null 与 undefined

null 在程序中代表“无值”或者“无对象”。可以通过给一个变量赋值null来清除变量的内容
undefined 声明了变量但从未赋值或者对象属性不存在

3.1.4 算术运算

加(＋)、减(－)、乘( *) 、除(/) 、余数( % )

-可以表示减号，也可以表示负号，如：x = -y
+可以表示加法，也可以用于字符串的连接

递增( ++ ) 、递减( -- )

i++ 相当于	i=i+1

i-- 相当于	i=i-1

3.1.5 关系运算

严格相等：===
```
  类型相同
  数值相同
```
非严格相等：!==

var	a=" 10";
var	b=10;
if(a==b)
alert("equal");
if(a===b)
alert("same");

3.1.6 逻辑运算

逻辑非（!）、逻辑与（&&）、逻辑或（| | ）

逻辑运算的操作数均为boolean表达式

3.1.7 控制语句

if（关系表达式）{
//语句块1
}else{
//语句块2
}

if( 表达式1){
//语句1;
}else	if(表达式2) {
//语句2;
}else	if(表达式3) {
/ /语句3;
}else{
//语句4;
}
 
switch(表达式){
case 值1:
//语句1;
break;
case	值2:
//语句2;
break;
default:
//语句4;
}


for(vari =1;i <=5;i++) {
alert(i);
}

while(条件) {
//语句1;
. . .
}

3.2 常用字符串API

length:获取字符串的长度（字符串中字符的个数）属性，没有小括号

var str="hello";
console.log(str.lengt	);

toUpperCase/toLowerCase :转大小写

var name= AngierSun";
console.log(" 大写" +name.toUpperCase( ));
console.log(" 小写"+name.toLowerCase( ));

charAt(下标) ：返回某个下标上的字符

var str1=" javascript网页教程"
var str2=str1.charAt( 2);//下标12上的字符
console.log(st2);//教
var str3=str1.charCodeAt( 12);
console.log(str3);//25945:（汉字“教”在unicode编码中的编号）

indexof(字符)：查找字符串中字符出现的首次下标
lastIndexof(字符)：查找字符串中字符最后一次出现的下标

var str1="javascript网页教程" ;
var str2=str1.indexOf( " a" ) ;
console.log( st r 2) ;/ /1,	a字符在str1中第一次出现的下标
var str3=str1.lastIndexOf("a");// 3, a字符在str1中最后一次出现的下标
console.log(str3) ;

substring(开始,结束)：截取字符串中一部分（结束是不包含的）

var str1="ab defgh";
var str2=str1.substring(2, 4) ;
console.log(str2);/ / cd，从2开始（包含），4结束（不包含）

replace(旧的,新的)：将字符串中的旧字符替换成新字符

var str1="abcde" ;
var str2=str1.replace("cd" ,"XXX") ;
console.log(str2);//bXXXe，将st r 1中的cd替换成XXX

split(分割的节点)：一个字符串切割成N个小字符串，所以返回的是数组类型

var str1="一, 二, 三, 四, 五";
var arr=str1.split( ",") ; /将str 以逗号进行分割，分割成N份，所以返回的结果一定是数组结构
console.log(" 共分割成：" +arr.length+"份");
console.log(" 第三份是："+arr2) ;

3.3 数组

3.3.1 创建数组

var arr1=new Array();

3.3.2 初始化数组的三种方式

//第一种
var arr1=newArray( );
arr1[0]=110;
arr1[1]=119;
arr1[2]=120;
//第二种
var arr1=newArray( 10, " a" , true) ;
//第三种
var arr1=[ 10, " a" ,true] ;

for(vari=0;i<arr1. ength;i++)	{
console.log(arr1[i]);
}

3.3.3 数组的常用方法

tostring()：将数组转换成字符串

 
var arr=[ 1, 2, 3, 4] ;
console.log( "类型为："+typeof(arr));
var str=arrtoString();	//	将数组转换成字符串
console.log(str+" ,类型为："+typeof(str));

join(连接符号)：将数组中的每个元素用连接符号连接成一个新的字符串。

var arr=[ 1, 2, 3, 4] ;
var str=arr.join(" - ");	//	将数组中每个元素用- 进行连接，并形成一个全新的字符串
console.log(str+" ,类型为："+typeof(str));

concat(新元素)：将原来的数组连接新元素，原数组不变。

var arr	= 1, 2, 3, 4] ;
var arrnew=arr.concat(5,6);//	在arr 数组的后面添加新的元素，形成一个新数组，但是原数组是不变的
console.log(arrnew+" ,类型为："+typeof (arrnew));
console.log( "原数组："+arr) ;

slice(开始，结束)：在数组中提取一部分，形成新的数组。

1,2,3,4,5 slice(2,4) 结果：3,4

var arr=[ 'a','b','c', 'd','e','f','g','h'] ;
var arrnew=arr.slice(2, 4); // 在arr数组中截取，从2开始（包含），4结束（不包含）
console.log(arrnew);//cd

reverse()：数组的反转（倒序）

var arr=[31, 12, 111, 444] ;
console.log(arr.toString( ));
arr.reverse( );//将数组中的元素倒置
console.log(arr.toString( ));

sort()：数组排序

arr.sort() 字符排序

vararr=	[ 31, 12, 111, 444] ;
arr.sor ( ) ;	//	字符排序（不会按照字面量的大小）
console.log(arr);

arr.sort(func) 数值排序
 
var arr=[ 31, 12, 111, 444];
arr.sort(laosun);//	数字排序（会按照字面量的大小）
console.log(arr);

//定义排序函数
function laosun(a,b) {
return	a- b;
}

3.4 Math数学对象

Math 对象用于执行数学任务没有构造函数Math() 无需创建，直接把Math 作为对象使用就可以调用其所有属性和方法

//返回0- 9之间任意一个随机数字
var i=Math.random()*10;
var j=Math.floor (i);
console.log(j);

3.5 Number对象

Number.fixed(2);自带四舍五入技能

var n = new Number( 12.345 );
var n1 = n.toFixed(2); // 12.35，固定两位小数，第三位小数四舍五入
console.log( n1 );

var x = new Number( 12.3 );
var n2 = x.toFixed(2); // 12.30，固定两位小数，位数不够，0来补齐
console.log( n2 );

3.6 正则表达式

对字符串执行模式匹配的强大工具

var reg1 = /^\d{3,6}$/;	// 匹配纯数字3-6个

var reg2 = new RegExp(“^\\d{3,6}$“);

//方式1
var age="18";//判断：1- 3位纯数字
var reg=/^\d{1,3}$/;//以/ ^ 开始，中间写正则内容，以$/ 结束
var b=reg.test(age);//验证age变量的是否符合r eg的匹配
if(b==true){
console.log("验证通过！") ;
}else{
console.log("格式错误" ) ;
}
 
//	方式2
var name="abc123";//	大小写字母和数字的组合（特殊字符不能出现）,	5~8位
var reg	=newRegExp("^[a-zA-Z0-9]{5,8}$");//	以^ 开始，中间写正则内容，以$结束
if(reg.test(name)){
console.log("验证通过");
}else{
console.log( "格式错误");
}

3.7 日期对象

var time=new Date();
console.log(time);//	Tue	Jul	14	2020	11: 09: 46	GMT+0800( 中国标准时间)
var year=time.getFullYear ( ) ;//	年份
var month=time.getMonth( )+1;// 月份从0开始，11结束，所以国内习惯要+1
varday=time.getDate( );//	几号
varhour=time.getHours( )	//	几点
varmm=t i me. getMinut es( );//	分钟
vars=time.getSeconds( );// 秒
varms= ime.getMilliseconds( ); /	毫秒，	1000毫秒	=	1秒
vartimestr=year +" 年" +mont h+" 月" +day +" 号	" +hour +" 点" +mm+" 分" +s+" 秒" +ms +" 毫秒" ;
console.log(timestr) ;

3.8 函数

使用关键字function 义函数 function 函数名(形参列表) { //函数体 return 返回值; }

函数声明后不会立即执行，会在我们需要的时候调用到。注意：

形参：一定不要带数据类型
分号是用来分隔可执行JavaScript语句。由于函数声明不是一个可执行语句，所以不以分号结束。

3.8.1 无返回值

function qiuhe(a,b){
var he=	a+b;
console.log( "两数之和："+he) ;
}
qiuhe(3, 4);

3.8.2 有返回值

function qiuhe(a,b){
var he=a+b;
return "两数之和："+he;
}

var s=qiuhe(3,4);
console.log(s);

3.8.3 参数对象

在函数内部，调用参数列表的属性

functon func(a,b,c){
console. og(arguments.length);//	获得参数的个数
console.log(arguments[1]);//	获得下标为1的参数
}

3.8.4 构造函数

函数同样可以通过内置的JavaScript 函数构造器（Function()）定义

var myFunction=new Function("a"," b","return a*b");
var x=my Function(4,3);
console.log(x) ;

注：上述函数以分号结尾，因为它是一个执行语句。

3.8.5 匿名函数

没有名称的函数

var fn=function(a,b){//	没有名字的函数，应该用一个变量来接收
return	a*10+b;
};
console.log(fn(3,4));

###3.8.6全局函数

-isNaN：检查其参数是否是非数字值

console.log(isNaN(123));//	数字，false
console.log(isNaN("hello"));//	非数字，true
console.log(isNaN(4-1));//	数字，false
console.log(isNaN(123));//	数字，false
console.log(isNaN(-10));//	数字，false
console.log(isNaN("123"));//	数字，false
console.log(isNaN("1a23"));//	非数字，true

-eval：用来转换字符串中的运算

var	str="1+3";
console.log(str);//	1+3	,	+会认定为一种字符符号而已，没有加法的作用
console.log(eval(str));	//	让字符串中的运算符号生效

-encodeURI与decodeURI

var name="111";
console.log("转码前："+name);

name=encodeURI(name);
console.log("转码后："+name);

name=decodeURI(name);
console.log("解码后："+name);

###3.8.7闭包

1、闭包的概念：指有权访问另一个函数作用域中的变量的函数，一般情况就是在一个函数中包含另一个函数。
2、闭包的作用：访问函数内部变量、保持函数在环境中一直存在，不会被垃圾回收机制处理；

简单地说：就是在函数的局部范围内声明一个封闭的环境，此环境不会被垃圾回收探测到。保证了数据的安全唯一性

想了解闭包，首先要了解什么是全局变量，什么是局部变量

a=10;//全局变量，声明的时候可以不使用var
function test1(){
b=20;//不适用var声明的变量，就是全局变量
var c=30;//用var声明，并且在函数的内部。这样的变量叫做局部变量，有效范围只能在其声明的函数内部
console.log(c);
}
function test2(){
console.log(c);	//c is not defined	(c变量没有定义)
}
test1();
test2();

谁都可以访问count，所以count变量并不安全，因为是全局变量。如何才能安全呢？将count声明为局部变量a

function test1(){
var count=0;	//局部变量
return	count++;//外部无法访问count，只能通过return才能将count变量返回，并输
出
}
test1();
test1();
test1();
console.log(test1());//每次调用方法，首先就是将变量还原为0

结果一直是0，因为每次调用test1()，方法体的第一句代码就是还原，无论曾经的值是多少。突发奇想，如果在test1()函数里面，再嵌套一个函数，js是支持函数嵌套的

function test1(){
var count=0;//局部变量
function jia(){
return	count++;
}
jia();
return	count;
}

test1();
test1();
test1();

console.log(test1());//	每次调用方法，首先就是将变量还原为0

如果每次只调用test1()里面的jia()就好了。ok，闭包帮你解决此问题！

function test1(){
var count=0;	//局部变量
function jia(){
return	count+=1;
}
return	jia;
}

var	fn=test1();//	fn=>functionjia(){return count+=1;}
fn();
fn();
console.log(fn());	//	每次调用方法，首先就是将变量还原为0

闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。直观的说就是形成一个不销毁的栈环境

闭包的优点：方便调用上下文中声明的局部变量逻辑紧密，可以在一个函数中再创建个函数，避免了传参的问题
闭包的缺点：因为使用闭包，可以使函数在执行完后不被销毁，保留在内存中，如果大量使用闭包就会造成内存泄露，内存消耗很大

##3.9弹框输出

普通弹框alert("hello，111");
控制台日志输出console.log("谷歌浏览器按F12进入控制台");
页面输出document.write("h2我爱你中国h2");将h2元素输出到body中
确认框confirm("确定删除吗？");


var b=confirm("确定删除吗？");
if(b){
document.write(	"<h1>删除成功！</h1>"	);
}else{
document.write(	"<h1>你取消了操作</h1>"	);
}
//输入框 prompt("请输入姓名：");


var name=prompt("请输入你的名字：");
document.write(	"<h1>大名："+name+"！</h1>"	);

JavaScript基础知识