JavaScript学习笔记（ECMAScript）
文章目录
- 1.前言
-
- 1.1 什么是JavaScript
- 1.2 关于Java和JavaScript
- 1.3 JavaScript的内容
- 2.HTML种嵌入JavaScript代码的三种方式
-
- 2.1 第一种方式：行间事件
- 2.2 第二种方式：脚本块
- 2.3 第三种方式：引入JS脚本
- 3.关于JavaScript中的变量
-
- 3.1 前言
- 3.2 函数初步
-
- 3.2.1 函数的定义方式
- 3.2.2 函数的使用
- 3.3 变量类型
-
- 3.3.1 运算符typeof
- 3.3.2 Undefined类型
- 3.3.3 Number类型
- 3.3.4 Boolean类型
- 3.3.5 String类型
- 3.3.6 Object类型
- 3.4 null、NaN和undefined的区别
- 4. 事件
-
- 4.1 常见事件
- 4.2 事件注册方式
- 4.3 JavaScript代码执行顺序
- 4.4 实例：代码捕捉回车键
- 4.5 void运算符
- 5.控制语句
1.前言
1.1 什么是JavaScript
JavaScript是运行在浏览器上的脚本语言。简称JS。
JavaScript是网景公司（NetScape）的 布兰登艾奇（JavaScript之父）开发的，最初叫做LiveScript。
LiveScript的出现让浏览器更加的生动了，不再是单纯的静态页面了。页面更具有交互性。
1.2 关于Java和JavaScript
JavaScript这个名字中虽然带有“Java”但是和Java没有任何关系，只是语法上优点类似。他们运行的位置不同，
Java运行在JVM当中，JavaScript运行在浏览器的内存当中。
JavaScript程序不需要我们程序员手动编译，编写完源代码之后，浏览器直接打开解释执行。
JavaScript的“目标程序”以普通文本形式保存，这种语言都叫做“脚本语言”。
Java的目标程序已.class形式存在，不能使用文本编辑器打开，不是脚本语言。
JSP和JS有啥区别？
JSP : JavaServer Pages（隶属于Java语言的，运行在JVM当中）
JS : JavaScript（运行在浏览器上。）
1.3 JavaScript的内容
（1）ECMAScript是ECMA制定的262标准，JavaScript和JScript都遵守这个标准，ECMAScript是JavaScript核心语法
（2）DOM编程是通过JavaScript对HTML中的dom节点进行操作，DOM是有规范的，DOM规范是W3C制定的。
（3）BOM编程是对浏览器本身操作，例如：前进、后退、地址栏、关闭窗口、弹窗等。由于浏览器有不同的厂家制造，所以BOM缺少规范，一般只是有一个默认的行业规范。
2.HTML种嵌入JavaScript代码的三种方式
2.1 第一种方式：行间事件
<!DOCTYPE html><html><head><meta charset="utf-8"><title>第一种方式</title></head><body> <input type="button" value="hello" onclick="window.alert('hello js');"/></body></html>2.2 第二种方式：脚本块
<!DOCTYPE html><html><head><meta charset="utf-8"><title>第二种方式</title></head><body><script type="text/javascript">//单行注释/*多行注释*//*暴露在脚本快中的js代码会在浏览器页面打开的时候执行，遵循从上往下的顺序依次往下逐行执行。*/window.alert("hello js");//alert有阻塞当前页面加载的作用。如果我们不点击弹窗的确定， /那么代码的执行将会停在这里。</script></body></html>2.3 第三种方式：引入JS脚本
<!DOCTYPE html><html><head><meta charset="utf-8"><title>第三种方式</title></head><body><script type="text/javascript" src="js/1.js"></script><script type="text/javascript" src="js/1.js" /></body></html>3.关于JavaScript中的变量
3.1 前言
JavaScript是弱类型语言，没有编译阶段一个对象可以任意赋值。
var i = 100;如果我们声明一个变量，不对其进行赋值，那么它的默认值是undefined。
如果声明一个变量，就直接使用会报错。
声明一个变量如果不使用var则默认是全局变量，不管这个变量是在哪里声明的。
3.2 函数初步
3.2.1 函数的定义方式
//第一种定义方式function 函数名 (形式参数列表){ //函数体;}//第二种定义方式函数名 = function (形式参数列表){ //函数体;}JS函数不需要指定返回值类型，返回什么类型都行。
3.2.2 函数的使用
当我们写完函数同其他编程语言一样，必须手动调用。
下面我们尝试在按钮里调用函数。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>第三种方式</title></head><body><script type="text/javascript">sayHello = function(username){alert("Hello,"+username);}</script><input type="button" value="sayHello" onclick="sayHello('zhangsan')" /></body></html>注意：在JavaScript中没有方法重载的概念，第二个定义的重名函数会将第一个函数覆盖掉。
当我们对一个方法传入不同个数的参数会发生什么？
<!DOCTYPE html><html><head><meta charset="utf-8"><title>第三种方式</title></head><body><script type="text/javascript">function sum(a,b){return a+b;}//undefined和NaN都是一个具体存在的值// 调用函数sumvar retValue = sum("jack");alert(retValue);//结果：jack赋值给a,b变量没有赋值默认为undefined，于是+做字符串连接操作var retValue = sum();alert(retValue);//结果：NaN（该值表示不是一个数字Not a Number）var retValue = sum(1,2,3);//结果：3。当传入的参数超过函数定义的参数个数，超出的部分会被默认忽略。</script></body></html>3.3 变量类型
在JavaScript中数据类型分为：原始类型、引用类型。
原始类型：Undefined、Number、String、Boolean、Null
引用类型：Object以及Object子类
在ES6以后又基于以上6种类型之外添加了一种新的类型：Symbol
3.3.1 运算符typeof
该运算符可以在程序运行阶段动态获取变量的数据类型。
语法格式：
typeof 变量名;/*该运算符的结果是以下六个字符串之一：undefinednumberstringbooleanobjectfunction注意：全是小写。*/在JS中比较字符串是否相等使用==，没有equal这一说。
3.3.2 Undefined类型
Undefined类型只有一个值就是undefined。当一个变量没有被赋值，系统会自动赋值为undefined。
我们也可以手动为一个变量赋值undefined
3.3.3 Number类型
Number类型包括：整数、小数、负数、正数、不是数字（NaN）、无穷大（Infinity）
注意：在JavaScript中10/0会得到Infinity。
关于Number的函数：
isNaN() ：这个函数返回true（不是）或false（是）表示这个值是不是数字。
Math.ceil() ：这个函数表示向上取整。
parseInt() ：这个函数可以将字符串转为数字。
parseFloat() ：这个函数也是将字符串转为数字。
isNaN(10/"10")//trueMath.ceil(2.1)//3parseInt("10")//10parseFloat("4.2")+1//5.23.3.4 Boolean类型
在JS中，Boolean类型永远只有两个值：true和false。
关于Boolean的函数：
Boolean() ：将非布尔类型转换为布尔类型。
规律：该函数会将“有”转为true，“无”转换为false。
3.3.5 String类型
创建字符串对象有两种方式：
//第一种var s = "abc";//第二种使用JS内置的支持类（String）var s2 = new String("abc");字符串拥有一个长度属性（length）。更多信息可以查询帮助文档。
//使用第一种方式创建的字符串被称为小String,使用第二种方式创建的字符串被称为大String。var s = "abc";typeof s;//stringvar s2 = new String("abc");typeof s2;//object关于字符串的函数：
indexOf () ：获取指定字符串在当前字符串出现第一次的索引，若没有则返回-1
lastIndexOf () ：获取指定字符串在当前字符串出现最后一次的索引，若没有则返回-1
replace () ：替换
substr () ：具有两个参数，截取子字符串
substring () ：具有两个参数，截取子字符串
toLowerCase () ：转换小写
toUpperCase () ：转换大写
//这里说一下substr()和substring()的区别"0123456789".substr(1,5);//12345"0123456789".substring(1,5);//234//即substring不包括开始结束下标的字符。3.3.6 Object类型
类似Java，Object是所有自定义类型的“超类”。自定义类也会包含Object类的方法。
关于Object的函数：
toString () ：
valueOf () ：
toLocaleString () ：
//关于JS中定义类和创建对象。//定义类的第一种方式function 类名(形参){ }//定义类的第二种方式类名 = function(形参){ }//创建对象的语法var obj = new 构造方法名(实参);//构造方法名和类名一致。obj是一个引用，保存内存地址指向堆中的对象。/*-----------------------------------------------------------*/function Student(name,age){ this.name = name; this.age = age; function getName(){ return this.name; }}var s = new Student("zhangsan","20");//访问对象的属性有两种方式var name = s.name;var age = ["age"];/*-----------------------------------------------------------*/关于prototype：我们可以通过这个属性来给类进行动态扩展函数或者属性。
下面我们用代码进行演示。
function Student(name,age){ this.name = name; this.age = age; function getName(){ return this.name; }}Student.prototype.getAge = function(){ return this.age;}3.4 null、NaN和undefined的区别
typeof null;//objecttypeof NaN;//numbertypeof undefined;//undefinednull == NaN;//falsenull == undefined; //trueundefined == NaN;//false从上面我们可以看出，三者的数据类型不一样。
null和undefined可以等同。
在JS中，有两个比较特殊的运算符：
==//等同运算符，只判断值是否相等===//全等运算符，既判断值相等，有判断数据类型是否相等。4. 事件
4.1 常见事件
blur ：失去焦点focus ：获得焦点click ：鼠标单击dblclick ：鼠标双击keydown ：键盘按下keyup ：键盘弹起mousedown ：鼠标按下mouseover ：鼠标经过mousemove ：鼠标移动mouseout ：鼠标离开mouseup ：鼠标弹起reset ：表单重置submit ：表单提交change ：下拉列表选中项改变，或文本框内容改变select ：文本被选定load ：页面加载完毕4.2 事件注册方式
事件注册的第一种方式：
//直接在标签中使用事件句柄sayHello = function(){alert("hello");}//以下代码的含义：将sayHello函数注册到按钮上，等待click事件发生，该函数被调用，sayHello被称为回调函数<input type="button" value="hello" onclick="sayHello()"/>在这里补充一个概念：回调函数（站在编写者的角度来看，自己写的函数等别人去调用被称为回调函数）
事件注册的第二种方式：
//使用纯JS代码完成事件注册<input type="button" value="hello" id="mybtn"/><script type="javascript"> function = doSome(){ alert("do some");}//第一步：获得按钮对象（document是全部小写，内置对象，可以直接用，代表的是整个HTML文件）var btnobj = document.getElementById("mybtn");//第二部：给按钮的onclick属性赋值。//注意这里的函数不要加括号。加了括号就是错误的写法。//这行代码的主要作用就是将回调函数doSome注册到onclick事件上。btnobj.onclick = dosome;</script>//更加粗暴的写法<input type="button" value="hello" id="mybtn1"/> <script type="javascript">document.getElementById("mybtn1").onclick = function(){ alert("匿名函数")}</script>4.3 JavaScript代码执行顺序
从上面的代码我们不难发现，事件注册都是在标签之后完成的。如果我们反过来就会出现错误，因为这个时候，我们通过id找的这个按钮对象还没有加载到内存。
于是我们可以通过onload事件来解决这个问题。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>JS代码执行顺序</title></head>//onload事件会在所有元素加载完成以后执行<body onload="ready()"> <script type="text/javascript">function ready(){var btnobj = document.getElementById("btn");btnobj.onclick = function(){alert("hello");}}</script><input type="button" value="button" id="btn" /></body></html>对于上面的代码我们还可以进行简写：（其实就是套娃）
<!DOCTYPE html><html><head><meta charset="utf-8"><title>JS代码的执行顺序</title></head><body><script type="text/javascript">// 页面加载的过程中,将a函数注册给了load事件// 页面加载完毕之后,load事件发生了,此时执行回调函数a// 回调函数a执行的过程中,把b函数注册给了id="btn"的click事件// 当id="btn"的节点发生click事件之后,b函数被调用并执行.window.onload = function(){ // 这个回调函数叫做adocument.getElementById("btn").onclick = function(){ // 这个回调函数叫做balert("hello js..........");}}</script><input type="button" value="hello" id="btn" /></body></html>4.4 实例：代码捕捉回车键
<!DOCTYPE html><html><head><meta charset="utf-8"><title>JS代码捕捉回车键</title></head><body><script type="text/javascript">window.onload = function(){var textobj1 = document.getElementById("text1");// 回车键的键值是13// ESC键的键值是27textobj1.onkeydown = function(event){if (event.keyCode==13){alert("回车键被按下......");}}//上面也可以写的更好理解一点var textobj2 = document.getElementById("text2");textobj2.onkeydown = message;}message = function(event){if(event.keyCode==27){alert("ESC键被按下......");}}</script><input type="text" id="text1" /><br><br><input type="text" id="text2" /></body></html>4.5 void运算符
通过void我们可以实现点击超链接以后页面不进行跳转。正常来说我们点击超链接以后，进行页面跳转。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>JS的void运算符</title></head><body>页面顶部<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a href="javascript:void(0)" onclick="window.alert('test code')">既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转。</a><br><a href="javascript:void(100)" onclick="window.alert('test code')">既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转。</a><br><!--既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转。--><br><br><br></body></html>5.控制语句
if、switch、while、do…while、for循环、break、continue就不再细说了，这些用法同Java差不多。
这里主要记录下for…in、with语句
//for...invar arr = [1,34,"hello",1.5];for(var i in arr){ //这里有点Python循环那个味alert(i);}//我们还可以使用它来遍历对象的属性Student = function(name,age){ this.name = name; this.age = age;}var student = new student("zhangsan", 20);for(var i in student){ alert(sudent[i]);}/*-----------------------------------------------*///withwith(student){alert(name); alert(age);}至此结束，所有的ECMAscript就讲完了。
