JavaScript----ECMAScript（核心语法）

谁借莪１个温暖的怀抱￠ 2023-10-05 09:32 76阅读 0赞

推荐阅读：

> [学了这么久的Java，你确定真正知道System.out.println()；吗？][Java_System.out.println]  
> [先不要知道它是为什么，得先知道它能干什么！！！！！][Link 1]  
> [Java IO流史上最全详细汇总，确定不来瞅瞅吗！！(内容稍长，建议亲这边收藏慢慢看哦。)][Java IO]  
> [十三、Java异常处理机制详解（建议收藏保存）。][Java]  
> [还不知道如何安装MySQL？？看这儿就够了！MySQL安装详细步骤、常用MySQL命令、及常见问题的解决。][MySQL_MySQL_MySQL]

**学习导图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pwX2luc2lzdA_size_16_color_FFFFFF_t_70_pic_center]

#### 目录 ####

*  基础语法概述
 *   *  1、什么是JavaScript，有什么用？
     *  2、JavaScript包括三块：ECMAScript、DOM、BOM
     *  3、在HTML中怎么嵌入JavaScript代码？
     *  4、Javascript中的变量
     *   *   *   *  变量声明和赋值
                 *  函数的定义与调用
                 *  局部变量和全局变量
     *  5、JavaScript数据类型
     *   *   *   *  Undefined类型
                 *  Number类型
                 *  Boolean类型
                 *  String类型
                 *  Object类型
     *  6.JavaScript中的事件
     *  7.JavaScript控制语句

## 基础语法概述 ##

### 1、什么是JavaScript，有什么用？ ###

JavaScript是运行在浏览器上的脚本语言。简称JS。

### 2、JavaScript包括三块：ECMAScript、DOM、BOM ###

*  ECMAScript是ECMA制定的262标准，JavaScript和JScript都遵守这个标准，ECMAScript是JavaScript核心语法
 *  DOM编程是通过JavaScript对HTML中的dom节点进行操作，DOM是有规范的，DOM规范是W3C制定的。
 *  BOM编程是对浏览器本身操作，例如：前进、后退、地址栏、关闭窗口、弹窗等。由于浏览器有不同的厂家制造，所以BOM缺少规范，一般只是有一个默认的行业规范。

### 3、在HTML中怎么嵌入JavaScript代码？ ###

**第一种方式：行间事件**

*  **JS是一门事件驱动的编程语言，依靠事件驱动，然后执行对应的程序。**
 *  **JS中的任何一个事件都对应一个事件句柄，例如鼠标单击事件click，对应的事件句柄就是onclick，事件句柄都是以标签的属性方式存在。在事件句柄后面可以编写JS代码，当触发这个事件之后，这段JS代码则执行了。**
 *  **JS中的字符串可以使用单引号括起来，也可以使用双引号括起来**。
 *  window是JS中的内置BOM顶级对象，代表当前浏览器窗口，window对象有一个alert()函数，该函数可以在浏览器上弹出消息框。window.alert()中的window.可以省略。
 *  **JS中的一条语句结束后可以使用“;”结尾，也可以不写。**

**第二种方式：页面script标签嵌入**

> **1. window.alert()的执行会阻塞当前页面的加载 一个页面中可以写多个脚本块 脚本块的位置没有限制**  
> 2.暴露在脚本块中的JS代码在页面打开的时候遵循自上而下的顺序依次逐行执行  
> *3. js注释：//单行 / /多行*

**第三种方式：外部引入**

![在这里插入图片描述][20200903163539301.png_pic_center]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pwX2luc2lzdA_size_16_color_FFFFFF_t_70_pic_center 1]  
**运行结果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pwX2luc2lzdA_size_16_color_FFFFFF_t_70_pic_center 2]

### 4、Javascript中的变量 ###

###### 变量声明和赋值 ######

语法:
    		var 变量名；
    		赋值：变量名 = 值；
                 var i;
    		i=100;
    		i=false;
    		i="abc";
    		i=new Object();

> 变量未赋值，系统默认赋值undefined  
> JS是一种弱类型编程语言，无编译阶段，一个变量可以接收任何类型的数据  
> 一行上也可以声明多个变量

###### 函数的定义与调用 ######

语法格式：
    		第一种方式： 
    		function 函数名(形参列表){
        
        		函数体；		
    		}
    		第二种方式：
    		函数名=function(形参列表){
        
        		函数体；
    		}
    		js中的函数不需要指定返回值类型。

第一种方式：

function sum(a,b){
        
    	 //a,b形参
    	  alert(a+b);
        }
    	   
       //函数必须手动调用
    	//sum(10,20);
    	
    	//用户点击按钮，调用函数
      <input type="button" value="计算10和20的和" onclick="sum(10,20)" />

**以上的sum函数，可以这样调用：sum()，没有传任何实参的时候a和b变量没有赋值，则a和b都是undefined。也可以这样调用sum(10)，这样就表示a变量赋值10，b变量仍undefined。还可以这样调用：sum(1,2)，这样则表示a是1，b是2。**

第二种方式：

sayHello=function(username){
        
        		 alert("hello "+username)
        	  }
        	//调用sayHello
        	//sayHello("张三");
         //用户点击按钮，调用函数
         <input type="button" value="hello" onclick="sayHello('杰克')" />

> JS中的函数定义在脚本块中，页面在打开的时候，函数并不会自动执行，函数是需要手动调用才能执行的。  
> 由于JS是一种弱类型编程语言，所以函数不能同名，没有重载机制

###### 局部变量和全局变量 ######

**全局变量：**

> 在函数体之外声明的变量为全局变量。  
> 全局变量的生命周期：浏览器打开时声明，浏览器关闭时销毁（少用）。耗费内存空间，尽量使用局部变量。

//全局变量
    		   var i=100;		   
    		   function access1(){
        
    			 alert(i);
    		   }
    		   
    		   access1();

**局部变量：**

> 在函数体中声明的变量，包括形参也为局部变量。  
> 局部变量生命周期：函数开始执行时局部变量内存开辟，函数执行结束之后，局部变量内存空间释放  
> 局部变量生命周期短。

var username="jack";
    		   function access2(){
        
                             //局部变量
    			   var username="lisi";
    			   //访问局部变量
    			   alert(username);
    		   }
    		   access2();
    		   //访问全局变量
    		   alert(username);

当一个变量声明时没有var关键字，那么不管这个变量在那里声明，都是全局变量。

function myfun(){
        
    		 myname="wangwu";
    	   }
    	   myfun();
    	   
      alert("myname = "+ myname);

### 5、JavaScript数据类型 ###

*  js变量在声明时不需要指定数据类型。 JS数据类型：原始类型，引用类型。
 *  原始类型（ES6之前）：Undefined、Number、String、Boolean、Null
 *  引用类型：Object以及子类
 *  （ES6之后）：基于以上六种新加了一种类型：Symbol
 *  js中有一个运算符typeof,这个运算符在程序运行期间动态获取变量的数据类型。

typeof语法格式：

> typeof 变量名  
> typeof运算结果只能是以下六个字符串之一，注意：全部为小写 ”undefin“ ”number“”string“ ”boolean" “object” “function”

**js中比较字符串使用"==",没有equals方法。**

//求和，要求a,b数据类型必须为数字，不能为其他类型
    		   //sum作用只是求和
    		   function sum(a,b){
        
    			   if(typeof a=="number" && typeof b=="number"){
        
    				   return a+b;
    			   }
    			   alert(a+","+b+"必须都为数字！");
    		   }
    		   var result=sum(false,"abc");
    		   alert(result);//Undefined
    		   
      			var result1=sum(1,2);
    		   alert(result1);

###### Undefined类型 ######

Undefined只有一个值为：undefined。
    当一个变量没有赋值系统默认赋值undefined

###### Number类型 ######

*  Number类型包括那些值？ -1，0 1 2 3 3.14 100… NaN Infinty 整数，小数…无穷大…

//关于NaN（表示Not a Number 不是一个数字，属于Number类型）
    		   //什么情况下结果为NaN？
    		   //运算结果本来是一个数字，最后计算完不是一个数字时，值为NaN.
    		   var x=100;
    		   var y="中国人";
    		   alert(x/y);//除号结果应该为一个数字，但是运算过程中导致结果不是数字，最后结果为NaN

//Infinity (当除数为0时，结果为无穷大)
    		   alert(10/0);

*  isNaN函数：isNaN(数值)，结果为true表示不是一个数字，false表示是一个数字

//关于isNaN函数？
    		   //语法： isNaN(数值)，结果为true表示不是一个数字，false表示是一个数字
    		   
      			function sum(a,b){
        
    			   if(isNaN(a)||isNaN(b)){
        
    				   alert("参数必须为数字")
    				   return;
    			   }
    			   return a+b;
    		   }
    			alert(sum(10,20));

*  parseInt()函数

//parseInt():可以将字符串自动转换成数字，并且取整数
    			alert(parseInt("3.9999"));//3
    			alert(parseInt(3.9999));//3

*  parseFloat()函数

//parseFloat():可以将字符串自动转换成数字			
    			alert(parseFloat("3.14")+1);//4.140000000000001
    			alert(parseFloat("3.3")+1);//4.3

*  Math.ceil()函数（向上取整！）

//Math.ceil()
    			alert(Math.ceil("2.1"));//3

###### Boolean类型 ######

> 在Boolean类型中有一个函数：Boolean();  
> 语法：  
> Boolean(数据);  
> 作用：将非布尔类型转换为布尔类型

###### String类型 ######

*  js中字符串可以使用双引号，也可以使用单引号
 *  js中怎样创建字符串对象？
    
        var s="abc";
         				 使用JS内置的支持类String：var s2=new String("abc");
         				 注意：String类为内置类，父类Object
 *  string与String属性通用
 *  关于string类型常用函数和属性
    
        常用属性：
         				length 获取字符串长度
         		常用函数：
         				indexOf  返回 String 对象内第一次出现子字符串的字符位置。
         				lastIndexOf 返回 String 对象中子字符串最后出现的位置。
         				replace 返回替换后的字符串。
         				substr  返回一个从指定位置开始的指定长度的子字符串。
         				substring 返回位于 String 对象中指定位置的子字符串。
         				split 将一个字符串分割为子字符串，然后将结果作为字符串数组返回。
         				toLowerCase  返回一个字符串，该字符串中的字母被转换为小写字母。
         				toUpperCase  返回一个字符串，该字符串中的所有字母都被转化为大写字母
         				.......

//原始类型string
    		   var x="abc";
    		   alert(typeof x);//"string"
    		   
     //大string(属于Object类型)
    		   var y=new String("abc");// "object"
    		   alert(typeof y);
    		   
      //获取字符串长度
    		   alert(x.length); //3
    		   alert(y.length); //3
    		   
      //indexOf
    		   alert("http://www.baidu.com".indexOf("https")); //-1
    		   alert("http://www.baidu.com".indexOf("http")); //0
    		   
       //判断一个字符串是否包含一个字符串
    		    //alert("http://www.baidu.com".indexOf("https") >= 0 ? "包含" :"不包含"); //不包含
    			
       //replace
    		   alert("name=value%name=value%name=value".replace("%","&"));
    			
    //sunstr和substring区别？
    		//stringvar.substr(start [, length ])
    		alert("abcdefxyz".substr(2,4));//cdef
    		//strVariable.substring(start, end) 注意：不包含end
    		alert("abcdefxyz".substring(2,4));//cd

###### Object类型 ######

*  Object类型为所有类型超类，自定义的任何类型默认继承Object
 *  Object类包括的属性： prototype属性。作用：给类动态的扩展属性和函数 constructor属性
 *  在js中自定义的类默认继承Object类，继承Object类的所有属性和方法
 *  js中怎么定义类？怎么new对象？

定义类语法：
    					 function 类名(形参){
        
    					 
    					}
                        
                         类名=function(形参){
        
                          
    					} 
    				创建对象语法:	
    				new 构造方法名(实参)；//构造方法名和类名一致

示例代码：（1）

function User(a,b,c){
        
    			   //声明属性
    			   this.sno=a;
    			   this.sname=b;
    			   this.sage=c;
    		   }
    		   //创建对象
    		   var u1=new User(111,"zhangsan",30);
    		   //访问对象属性
    		   alert(u1.sno);
    		   alert(u1.sname);
    		   alert(u1.sage);	
    		   
     		var u2=new User(222,"王三",20);
    		   alert(u2.sno);
    		   alert(u2.sname);
    		   alert(u2.sage);	
    		   
    		  //访问对象属性还可以这样
    		   alert(u2["sno"]);
    		   alert(u2["sname"]);
    		   alert(u2["sage"]);

示例代码：（2）

Product=function(pno,pname,price){
        
    		   //属性
    		   this.pno=pno;
    		   this.pname=pname;
    		   this.price=price;
    		   //函数
    		   this.getPrice=function(){
        
    			   return this.price;
    		   }
    	   }
    	   var xigua=new Product(111,"西瓜",4.0);
    	   var pri=xigua.getPrice();
    	   alert(pri);;//4.0

示例代码：（3）

//可以通过prototype属性动态的给类扩展属性和函数
    		   Product.prototype.getPname=function(){
        
    			   return this.pname;
    		   }
    		   //调用getPname函数
    		   var pname=xigua.getPname();
    		   alert(pame);

*  null NaN undefined三个的区别

//三个数据类型不一致
    			alert(typeof null);	//"object"
    			alert(typeof NaN);	//"number"
    			alert(typeof undefined); //"undefined"

*  js中有两个特殊的运算符

==(等同运算符，值判断值是否相等)
     ===(全等运算符，即判断值是否相等，也判断数据类型是否相等)

### 6.JavaScript中的事件 ###

*  js中常用的事件：

> blur失去焦点  
> focus获得焦点  
> click鼠标单击  
> dblclick鼠标双击  
> keydown键盘按下  
> keyup键盘弹起  
> mousedown鼠标按下  
> mouseover鼠标经过  
> mousemove鼠标移动  
> mouseout鼠标离开  
> mouseup鼠标弹起  
> reset表单重置  
> submit表单提交  
> change下拉列表选中项改变，或文本框内容改变  
> load页面加载完毕（整个HTML页面全部元素加载完毕之后发生）  
> select文本被选定

任何一个事件都对应一个事件句柄，
    		在事件前加ononXXX这个事件句柄出现在一个标签的属性位置上。（事件句柄以属性形式存在）

*  注册事件的两种方式：

**第一种：直接在标签中使用事件句柄**

function sayHello(){
        
    			   alert("hello  js");
    		   }
    		   
    
    <input type="button" value="hello" onclick="sayHello()" />

**第二种：使用js代码完成注册**

*  js通过keydown事件演示捕获回车键，ESC键

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>js捕捉回车键ESC键</title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			window.onload=function(){
        
    				var usernameElt=document.getElementById("username");
    				usernameElt.onkeydown=function(event){
        
    					//获取键值 回车：13 ESC:27
    					//对于键盘事件对象来说，都有keyCode属性,获取键值
    					//ale(event.keyCode);
    					
    					if(event.keyCode === 13){
        
    						alert("正在进行登录...");
    					}else if(event.keyCode === 27){
        
    						alert("正在进行退出..");
    					}
    				}
    			}
    		</script>
    		
    		<input type="text" id="username" />
    	</body>
    </html>

*  JS的void运算符

void运算符语法：void(表达式)
    			运算原理：执行表达式，但是不返回结果
    			javascript:作用：告诉浏览器后面为js代码，javascript:不能省略。
    <a href="javascript:void(0)" onclick="window.alert('text')">既保留超链接的样式，同时用户点击该超链接执行js代码，但页面不跳转</a>

### 7.JavaScript控制语句 ###

> if  
> switch  
> while  
> do…while  
> for  
> break  
> continue  
> for…in  
> with

//创建数组
    		   var arr=[true,false,1,3,"abc",3.14];//js数组元素类型随意，自动扩容
    		   ///遍历数组
    		   for(var i=0;i<arr.length;i++){
        
    			   alert(arr[i]);
    		   }
    		   
       //for...in
    		   for(var i in arr){
        
    			   alert(arr[i]);
    		   }
    	   User=function(username,password){
        
    			   this.username=username;
    			   this.password=password;
    		   }
    		   var u=new User("张三",222);
    		   alert(u.username+","+u.password);
    		   alert(u["username"]+","+u["password"]);	
                 //with	   
    		   with(u){
        
    			   alert(username+","+password);
    		   }

JavaScript控制语句与Java控制语句相类似

**今天的分享就到这里啦！！~感谢大家的观看，希望对大家有帮助的话麻烦给个丝滑三连击。（点赞＋转发+关注）  
一起加油，一起努力，一起秃见成效**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pwX2luc2lzdA_size_16_color_FFFFFF_t_70_pic_center 3]

[Java_System.out.println]: https://blog.csdn.net/Zp_insist/article/details/107629383
[Link 1]: https://blog.csdn.net/Zp_insist/article/details/106760228
[Java IO]: https://blog.csdn.net/Zp_insist/article/details/107464797
[Java]: https://blog.csdn.net/Zp_insist/article/details/107234792
[MySQL_MySQL_MySQL]: https://blog.csdn.net/Zp_insist/article/details/107654309
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pwX2luc2lzdA_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200903172053374.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pwX2luc2lzdA==,size_16,color_FFFFFF,t_70#pic_center
[20200903163539301.png_pic_center]: https://img-blog.csdnimg.cn/20200903163539301.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pwX2luc2lzdA_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20200903163518930.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pwX2luc2lzdA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pwX2luc2lzdA_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20200903163518852.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pwX2luc2lzdA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pwX2luc2lzdA_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20200903173107137.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pwX2luc2lzdA==,size_16,color_FFFFFF,t_70#pic_center