JavaScript学习笔记（ECMAScript）

文章目录

1.前言

1.1 什么是Javascript1.2 关于Java和Javascript1.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 运算符typeof3.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 第一种方式：行间事件

2.2 第二种方式：脚本块

2.3 第三种方式：引入JS脚本

注意：在Javascript中没有方法重载的概念，第二个定义的重名函数会将第一个函数覆盖掉。

当我们对一个方法传入不同个数的参数会发生什么？

3.3 变量类型

在Javascript中数据类型分为：原始类型、引用类型。

原始类型：Undefined、Number、String、Boolean、Null

引用类型：Object以及Object子类

在ES6以后又基于以上6种类型之外添加了一种新的类型：Symbol

3.3.1 运算符typeof

该运算符可以在程序运行阶段动态获取变量的数据类型。

语法格式：

typeof 变量名;

在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")//true
Math.ceil(2.1)//3
parseInt("10")//10
parseFloat("4.2")+1//5.2

3.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;//string
var 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;		//object
typeof NaN;			//number
typeof undefined;	//undefined

null == NaN;		//false
null == undefined;  //true
undefined == 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被称为回调函数

在这里补充一个概念：回调函数（站在编写者的角度来看，自己写的函数等别人去调用被称为回调函数）

事件注册的第二种方式：

//使用纯JS代码完成事件注册




//更加粗暴的写法

    

4.3 Javascript代码执行顺序

从上面的代码我们不难发现，事件注册都是在标签之后完成的。如果我们反过来就会出现错误，因为这个时候，我们通过id找的这个按钮对象还没有加载到内存。

于是我们可以通过onload事件来解决这个问题。

	
		
		
	

	//onload事件会在所有元素加载完成以后执行
	
        
		
		
		
		
	

对于上面的代码我们还可以进行简写：（其实就是套娃）

4.4 实例：代码捕捉回车键

4.5 void运算符

通过void我们可以实现点击超链接以后页面不进行跳转。正常来说我们点击超链接以后，进行页面跳转。

	
		
		
	
	
		页面顶部
		
























		
























		
























		
























		
























		
























		
























		
























		
























		
























		
























		
























		
























		
























		
























		
























		
























		
























		
























		
























		
























		
























		
























		
























		
























		
























		
























		
























		
























		
























	
		
		
			既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转。
		
		
		

		
		
			既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转。
		
		
		

		
		
		
		
		



	

5.控制语句

if、switch、while、do…while、for循环、break、continue就不再细说了，这些用法同Java差不多。

这里主要记录下for…in、with语句

//for...in
var 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]);
}


//with
with(student){
	alert(name);
    alert(age);
}

至此结束，所有的ECMAscript就讲完了。