本文全面介绍了JavaScript的基础知识，包括JavaScript的历史背景、与Java的区别、在HTML中的应用方式、基本语法、变量类型、函数定义与使用、事件处理等内容。
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>
<!--
1.要实现的功能：用户点击按钮，弹出消息框
2.JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行相应的程序。
在JS中有很多事件，其中有一个叫：鼠标单击（click）。并且任何事件都会
对应一个事件句柄叫做onclick。
事件和句柄的区别是：事件句柄是在事件单词前添加一个on。
事件句柄是以HTML标签的属性的形式存在的。
3.οnclick="js代码"，执行的原理：
页面打开的时候js代码并不会执行，只是把js代码注册到按钮的click事件上了，
等到按钮发生click事件以后，js代码就会被浏览器自动调用。
4.如何弹出消息框：
在js中有一个内置的对象叫做window，全部小写，可以直接拿来使用，
window代表的是浏览器对象，window对象有一个函数叫做：alert，
用法是：window.alert("消息内容")
5.JS的字符串可以用单引号也可以使用双引号，每一条JS语句完成后可以使用 : 结尾，也可以不用。
-->
<!-- 这里的 window. 也可以省略 -->
<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>
<!--
引入JS文件以后，也是会按照JS文件中的代码从上往下依次逐行执行。
注意：一个script标签引入JS文本块以后，就没办法再在里面引入JS代码了。
但是在这个引入JS文本块的标签下面是不影响我们继续引入其他的脚本快的。
-->
<script type="text/javascript" src="js/1.js"></script>
<!-- ！！！注意！！！ -->
<!-- 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都是一个具体存在的值
// 调用函数sum
var 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 变量名;
/*
该运算符的结果是以下六个字符串之一：
undefined
number
string
boolean
object
function
注意：全是小写。
*/
在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被称为回调函数
<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(){ // 这个回调函数叫做a
document.getElementById("btn").onclick = function(){ // 这个回调函数叫做b
alert("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键的键值是27
textobj1.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>
<!--
void运算符的语法：void(表达式)
运算原理：执行表达式，但不返回任何结果。
javascript:void(0)
其中javascript:作用是告诉浏览器后面是一段JS代码。
以下程序的javascript:是不能省略的。
-->
<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>
<!--void() 这个小括号当中必须有表达式-->
<!--
<a href="javascript:void()" οnclick="window.alert('test code')">
既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转。
</a>
-->
<br><br><br>
</body>
</html>
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就讲完了。
扫一扫
1102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
