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]
*
void运算语法
- 用法
- void(表达式),执行表达式但是不返回任何结果
//应用案例
<a href="javascript:void(0)" onclick="window.alert('test.code')">
保留超链接的样式,点击时可以执行一段js代码但是不发生跳转
</a>
for…in语法
- 用法
- for(var 变量名 in 对象名),可以用来遍历数组、对象的属性
innerHTML属性
- 用法
- 对象名.innerHTML =“赋值的内容”,会把后边的“字符串当做一段html代码来执行”
innerText属性
- 用法
- 对象名.innerText =“赋值的内容”,即使赋值的内容时一段js代码也会当做普通文本来执行
五、类和对象的定义
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"
5、数组对象
//创建js数组
var arr = [false,true,1,"abc",3.14];//js数组中元素的类型随意,元素个数随意
//遍历数组
for(var i = 0; i<arr.length; i++){
alert(arr[1]);
}
六、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"/>
<input type="button2" value="第二种方法2" id="mybtn2"/>
//第一步、先获取这个按钮对象
var btn = document.getElementById("mybtn");
//第二步、给按钮对象的onclick属性赋值
btn.onclick = hello;//注意:千万不要加小括号
//这行代码的含义是:将回调函数hello注册到click事件上
//使用匿名事件注册
var btn1 = document.getElementById("mybtn1");
btn1.onclick = function(){
alert("使用匿名函数注册事件");
}
/*
这个函数没有名字,叫做匿名函数,匿名函数也是一个回电函数
这个函数在页面打开的时候知识注册商,不会被调用,在click事件发生之后才会调用
*/
//不定义变量,直接注册(推荐使用)
document.getElementById("mybtn2").onclick = function(){
alert("不定义变量的方法");
}
3、load事件
- 上述注册事件的方法对于没有完全加载的html页面也会执行,导致定义在按钮对象之前的js代码无法获得按钮对象而出现错误。为了解决这个问题,我们引入了load事件
- load事件发生的时间:页面元素全部加载完毕之后
- 具体应用实例如下
<input type="button" value="load事件" id="mybtn"/>
/*
页面加载过程中,将a函数注册给了load事件
页面加载完毕后,load事件发生了,此时执行回调函数a
回调函数a执行过程中,吧b函数注册给了id="btn"的click事件
当id="btn"的结点发生了click事件之后,b函数被调用并执行
*/
window.onload = function(){//函数a
document.getElementById('mybtn").onclick = function(){//函数b
alter("hello.js");
}
}
4、小案例
- 将文本框修改为复选框
window.onload = function(){
document.getElementById('mybtn").onclick = function(){
var mytext = document.getElementById("mutext");
//一个结点对象中只要有的属性都可以“.”
mytext.type = "checkbox";
}
}
<input type="text" id="mytext"/>
<input type="button" value="将文本框修改为复选框" id="mybtn"/>
5、键盘事件
- 对于键盘事件对象来说,都有keyCode属性用来获取键值。
- 用法
- alter(event.keyCode)
- 特殊的键值有
回车键键值:13
ESC键值是:27
usernameElt.onkeydown = function(event){
if(event.keyCode === 13){
alert("您按下的是回车键......");
}
}
七、DOM对象
DOM是什么?
- DOM 即Document Object Model(文档对象模型,对网页中的结点进行增删改的过程),HTML文档被当做一颗树来看待
- 包含于BOM。
八、BOM对象
BOM是什么?
- BOM 是浏览器对象模型,主要用途有
- 关闭浏览器窗口、打开一个新的浏览器窗口、后退、前景、浏览器地址栏上地址修改等
- 包括DOM