推荐阅读：

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

学习导图

目录

基础语法概述1、什么是JavaScript，有什么用？2、JavaScript包括三块：ECMAScript、DOM、BOM3、在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代码？

第一种方式：行间事件

<input type="button" value="hello" onclick="window.alert('hello js')" />

JS是一门事件驱动的编程语言，依靠事件驱动，然后执行对应的程序。

JS中的任何一个事件都对应一个事件句柄，例如鼠标单击事件click，对应的事件句柄就是onclick，事件句柄都是以标签的属性方式存在。在事件句柄后面可以编写JS代码，当触发这个事件之后，这段JS代码则执行了。

JS中的字符串可以使用单引号括起来，也可以使用双引号括起来。

window是JS中的内置BOM顶级对象，代表当前浏览器窗口，window对象有一个alert()函数，该函数可以在浏览器上弹出消息框。window.alert()中的window.可以省略。

JS中的一条语句结束后可以使用“;”结尾，也可以不写。

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

<script type="text/javascript"> /* 暴露在代码块中的程序，在页面打开时执行，并且遵守自上而下的顺序 */ window.alert("helllo world"); window.alert("helllo js"); </script>

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

第三种方式：外部引入

<script type="text/javascript" src="js文件路径"></script> <script type="text/javascript" src="js/1.js"></script>

运行结果：

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”

<script type="text/javascript"> var i; alert(typeof i);//"undefined" var a=100; alert(typeof a);//"number" var b="abc"; alert(typeof b);//"string" var c=false; alert(typeof c);//"boolean" var d=null; alert(typeof d);//"object" function sayHello(){ } alert(typeof sayHello); //"function" </script>

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类型为所有类型超类，自定义的任何类型默认继承ObjectObject类包括的属性： 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代码完成注册

<script type="text/javascript"> function doSome(){ alert("do Some"); } //第一步：先获取按钮对象（document,内置对象，document代替整个HTML页面） var btnObj= document.getElementById("mybut"); //第二步：给按钮对象的onclick属性赋值 btnObj.onclick=doSome;//注意：不能有小括号 //将回调函数doSome注册到click事件上 var mybtn1=document.getElementById("mybtn1"); mybtn1.onclick=function(){//匿名函数，也是回调函数 alert("text....."); //click事件发生之后才会调用 } document.getElementById("mybtn2").onclick=function(){ alert("text2....."); } </script> 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控制语句相类似

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