JavaScript快速入门手册
一、初识JavaScript
1、简介
JavaScript是运行在浏览器上的脚本语言，简称js，不需要手动编译，以普通文档形式保存，后缀名为“.js”，，通过向浏览器发出命令，可以实现动态的页面功能与用户交互
2、组成
JavaScript程序是由语句、语句块（多行语句用“{ }”括起来，作用是使语句序列一起执行）、函数、对象、方法、属性等构成，通过顺序、选择、循环三种基本程序控制结构来进行编程。
3、注意点
每一条语句末尾的“；”可以加也可以不加
声明变量的时候可以赋值也可以不赋值
字符串可以使用单引号也可以使用双引号
二、怎样引入JavaScript文件
1、直接写在需要的位置
通过直接绑定事件句柄来出发事件的实现（事件句柄就是在事件前直接加上“on”，如“click”的事件句柄就是“onclick”）。本案例是通过事件句柄“onclick”来触发鼠标单击事件。
<input type="button" onclick="alert('直接在事件处理代码中加入JavaScript代码')" value="直接调用JavaScript代码">
2、脚本块方式（同css内联样式表）
暴露在脚本块当中，在页面打开的时候执行
并且遵守自上而下的顺序执行的（这个代码的执行不需要事件）。
<script type="text/javascript">
document.write("第一个JavaScript实例")
alert("第一个JavaScript实例")
</script>
3、引入独立的（同css外联样式表）
在需要的位置映入js脚本文件。
引入外部独立的js文件时，js文件中的代码会遵循自上而下的顺序依次逐行执行。
<script type="text/javascript" src="../JavaScript文件/demo.js">
document.write("src是可选属性，如果加上src属性，则script中的代码会被忽视——这行代码不会执行")
</script>
三、JavaScript基本语法
1、js中的变量
变量的声明
- java是一种强类型语言
java存在编译阶段，假设有代码 int ：i；那么在java中有一个特点是：java程序编译阶段就已经确定了i变量的数据类型，该i变量的数据类型在编译阶段是int类型，那么这个变量到最终内存释放，一直都是int类型，不可能变成其他类型 - JavaScript是一种弱类型的语言
JavaScript不存在编译阶段，一个变量可以随意赋值，赋什么类型的值都可以，变量的类型由所赋的值的类型决定，所以变量的声明统一使用“var” - 举个例子（JavaScript中如何声明一个变量）：
var i=1;（此时变量类型是整型）
var i=3.14;（此时的变量名是浮点型）
var i`=‘abc’;（此时变量的类型是字符串）
- 在js当中，当一个变量没有手动赋值的时候，系统默认赋值undefined（此处的undefined是一个具体的值而不是字符串。没有定义/声明就去访问一个变量是会报出语法错误：“变量” is not defined。
变量的类型
- undefined
- number
包括整数、小数、正数、负数、不是数字、无穷大 - string
“+”两边，只要其中有一个是string，“+”就做字符串拼接操作
可以出现10/3=3.333333的结果（弱类型语言） - boolean
只有两个值，true和false - object
- object子类
- NaN
是一个具体的值，该值表示不是数字“Not a Number”，单数属于number类型 - 全局变量
在函数体之外声明的变量属于全局变量，全局变量的声明周期是：
浏览器打开时声明，浏览器关闭时销毁，尽量少用，因为全局变量会一直在浏览器的内存中，耗费内存空间。能使用局部变量尽量使用局部变量 - 局部变量
在函数体中声明的变量，包括一个函数的形参都属于局部变量
局部变量的声明周期是：函数开始执行时局部变量的内存口空间开辟，函数执行结束之后，局部变量内存空间释放
局部变量的生命周期比较短
在一个函数中，如果局部变量和全局变量重名，则采用“就近原则”调用局部变量；在函数体之外调用的是全局变量（因为此时局部变量已经被销毁了）
当一个变量声明的时候没有用var关键字时，那么不管这个变量在哪里声明的都是全局变量
//举个例子
function myfun（）{
name = "wangwu"
}
//访问函数
myfun();
alert("name="+name);//name=wangwu
2、js中的标识符和关键字
- 标识符命名规则和规范按照java执行
- 关键字不需要刻意去记
3、js中的注释
- 单行注释：
//单行注释
/*
多行注释1
多行注释2
*/
四、JavaScript中的函数
1、函数的定义方式
- 等同于java语言中的方法，函数也是一段刻意被重复利用的代码片段。函数一般都是刻意完成某个特定的功能的
- 因为它是一种弱类型语言，所以不需要指定返回值类型，返回什么类都行
- 函数定义的方法有两种
第一种方式：
function 函数名（形式参数列表）{
函数体；
}
第二种方式：
函数名 = function （形式参数列表）{
函数体；
}
//其中，形式参数可以由也可以没有
//可以传指定的参数个数，也可以不传指定的参数个数
- 函数必须调用才能执行
调用方法：
函数名（实际参数）；
- js中函数没有重载机制
- 在java中
重载是依靠参数类型和数量的不同来实现重载的 - 在js中
js是一种弱类型的语言，函数参数的类型不是人为定义的，而是由参数自身的类型来决定的，所以它不能像java那样通过参数的数量和类型来区分不同的函数从而实现重载
如果两个函数名相同，后边的函数会覆盖前边的函数
2、特殊运算符和函数
警告框
- 用法
- alert(massage)，用于输入警告信息
提示框
- 用法
- confirm(massage)，用于让用户确认操作
确认框
- prompt(“提示信息”，“默认值”)，用于显示确认信息
//示例
<!--三种消息对话框-->
<script type="text/javascript">
//alter(massage)
alert("这是警告框，用于输出警告信息")
function show_confirm(){
//confirm(massage)
var tf=confirm("请选择确认按钮！")
if(tf==true){
alert("您按了确认按钮")
}else{
alert("您按了取消按钮！")
}
}
function disp_confirm(){
//prompt("提示信息"，"默认值");
var name=prompt("请输入您的姓名","李大为");
if(name!=null && name!=""){
document.write("您好",+"name")
}
}
</script>
<form action="" method="POST">
<input type="button" onclick="show_confirm()" value="显示确认框"/>
<input type="button" onclick="disp_confirm()" value="显示提示框"/>
</form>
typoof运算符
- 用法
- alert(typeof 变量名)，可以在程序运行阶段动态地获取变量的数据类型
- 运算结果是以下6个字符串之一
“undefined”
“number”
“string”
“boolean”
“object”
“function”
//例子
var v1 = 1;
alert(typeof v)//"number"
var v2 = "abc";
alert(typeof v)//"string"
“==”同等运算符
- 用法
- （变量1 == 变量2），只判断值是否相等
“===”全等运算符
- 用法
- （变量1 === 变量2），既判断值是否相等又判断数据类型是否相同
isNaN函数
- 用法
- isNaN（数据），结果是true表示是一个数字，结果是false表示不是一个数字
parsenInt（）函数
- 用法
- parseInt（数据），可以将字符串自动转换成数字，并且取整数位
parseFloat（）函数
- 用法
- parseFloat（“字符串”），可以将字符串自动转换为数字
Math.ceil（）函数
- 用法
- Math.ceil（数字），可以向上取整
Boolean（）函数
- 用法
- Boolean（数据），可以将非布尔类型转换为布尔类型，也可以省略不写，如
if(3) 相当于 if(Boolean(3))
字符串常用函数
- length
获取字符串长度 - indexOf
获取指定字符串在当前字符串中第一次出现的索引 - lastIndexOf
获取指定字符串在当前字符串中最后一次出现的索引 - replace
替换 - substr
截取子字符串 - substring
截取子字符串 - toLowerCase
转换小写 - toUpperCase
转换大写 - split
拆分字符串
*注意substr和substring之间的区别
var str = “avghsdkl”
substr(2,4)——截取ghsd,包括str[4]
substring（2,4）——截取ghs，不包括str[4]
*
五、类和对象的定义
1、类的定义
有两种定义方式
第一种方式：
function 类名（形式参数列表）{
}
第二种方式：
类名 = function （形式参数列表）{
}
2、Object类
- 是所有类型中的超类，自定义的任何类型，默认继承Object。
- 包括prototype属性（常用），可以给类动态扩展属性和函数
constructor属性 - 包括toString（）函数
valueOf（）函数
toLocaleString（）函数 - 在js中定义的类默认继承Object，汇集成Object类中所有的属性及函数
3、对象的创建
new 构造方法名（实参）；//构造方法名和类名一致
//定义一个学生信息函数
function Student(number,name,score){
this.number = number;
this.name = name;
this.score = score;
}
//函数调用
Student(222,"Jack" ,54);
//创建对象(传几个参数都可以)
var stu1 = new Student();
var stu2 = new Student2(544);
var stu3 = new Student(32,"Helen");
var stu = new Student(111,"Rose",65);
//访问对象属性
alter(stu.number);
alter(stu.name);
alter(stu.score);
//访问对象的另一种方法
alert(stu["number"]);
alert(stu["name"]);
alert(stu["score"]);
4、字符串对象
两种创建方式
- 第一种:直接创建
var s=“abc”; - 第二种：使用内部支持类
var s2 = new String(“abc”);
需要注意的是：String是一个内置的类，可以直接使用，String的父类是Object
//小String（属于原始类型String）
var x = "king";
alter(typeof x);//"string"
//大String（属于Object类型）
var y = new String("abc");
alter(typeof y);//"object"
六、JavaScript中的事件与事件注册
1、事件
-
blur
失去焦点 -
focus
获得焦点 -
click
鼠标单击 -
dblclick
鼠标双击 -
keydown
键盘按下 -
keyup
键盘弹起 -
mousedown
鼠标按下 -
mouseover
鼠标经过 -
mousemove
鼠标移动 -
mouseout
鼠标离开 -
mouseup
鼠标弹起 -
reset
表单重置 -
submit
表单提交 -
change
下拉列表中选项改变 -
select
文本被选定 -
load
页面加载完毕（整个HTML页面中所有元素全部加载完毕之后发生）
2、事件注册
通过事件句柄直接注册
- 任何一个事件都会对应一个事件句柄
- 事件句柄一属性的方式存在
通过js代码来注册
下面分别是两种方式的具体实例
function hello(){
alter("事件的注册例子”）；
}
//第一种方法
<input type="button" value="第一种方法" onclick="hello（）"/>
/*
将hello函数注册到按钮上，等待onclick事件发生之后，该函数被浏览器调用，我们称这个为回调函数
回调函数的特点：自己把这个代码写出来了，但是这个函数不是自己负责调用的，由其他程序员负责调用该函数
*/
//第二种方法
<input type="button" value="第二种方法" id="mybtn"/>
<input type="button1" value="第二种方法1" id="mybtn1"/>
//第一步、先获取这个按钮对象
var btn = document.getElementById("mybtn");
//第二步、给按钮对象的onclick属性赋值
btn.onclick = hello;//注意：千万不要加小括号
//这行代码的含义是：将回调函数hello注册到click事件上
//使用匿名事件注册
var btn1 = document.getElementById("mybtn1");
btn1.onclick = function(){
aleter("使用匿名函数注册事件");
}
七、正则表达式
