JavaScript概述
•
JavaScript是客户端脚本语言,是一种基于对象（Object）和事件驱动（Event Driven）的脚本语言。
•
JavaScript认为文档和显示文档的浏览器都是由不同的对象组成的集合。这些对象具有一定的属性，你可以对这些属性进行修改或计算。
•
JavaScript的基本特点：
–
脚本语言：边解释，边执行，而不是编译完成再执行
–
基于对象
–
简单性
–
动态性:直接对用户或客户输入做出响应，无须经过Web服务程序
–
跨平台性:依赖于浏览器本身，与操作环境无关
JavaScript的引入
•
在标识<script>标签对之间就可加入JavaScript脚本代码。其中的language属性指明这段代码是用JavaScript来编写的。type则是这段代码的类型。
这两个属性写一个就行，w3c推荐使用type属性
•
•
JavaScript可以直接嵌入到html中通过浏览器直接运行的，也可以单独成一个文件，在html中导入，这非常类似于css。
导入的方法是：
<script src=
“
路径
\js
文件
"></script>
•
Html中嵌入JavaScript代码的方式：
–
可以写在任何地方，但<script>标签跟html标签同样不能交叉
–
放在<head>标签中（推荐使用）
–
放在<body>标签中：写在应用该代码的对象附近，可以提高可读性
•
跟css一样， JavaScript也可以写在某些标签里，例如：
•
<button οnclick=“alert(1)”>按钮</button>
•
单击这个按钮就会弹出警告框，输出一个1
•
•
又比如：
•
<a href=“javascript:alert(2)”>弹出警告框</a>
•
点这个超链接就会弹出警告框，输出一个2
•
注意，写在a标签的href属性时，前面要加上javascript，表示这是一段js代码
JavaScript中的注释
•
JavaScript中的注释和Java基本一致，也分为单行和多行注释。
•
注释信息仅仅做为说明来使用，在程序的解释和运行中是被忽略的。
–
单行注释：使用//符号对单行信息进行注释
–
多行注释：使用/*…..*/对多行信息进行注释
数据类型
•
字符串：“abc” ‘hello’ “你好“ （单引号和双引号均可）String
•
数字：包括整数数字和浮点型数字 number
•
布尔值：true 和 false
•
空值：null
（注意，该值跟
java
的
null
含义不同）
•
未定义值：undefined
运算符
typeof
可以获得某个值的类型，写法：
typeof
值
•
特殊字符：又叫转义字符
–
\b 表示退格
–
\n 表示换页
–
\t 表示Tab符号
–
\r 表示回车符
–
\" 表示双引号本身
–
\' 表示单引号本身
–
\\ 表示反斜线本身
•Undefined类型只有一个值，即undefined。当声明的变量还未被初始化时，变量的默认值为undefined。
•可以理解为， undefined就类似于java的Null，代表了“不存在”的意思
•Null类型也只有一个值，即null。null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。
•但js的Null不等于java的null，js中的null是一个特殊的值。一个变量的值为null，代表了这个变量“
没有有意义的值”，但不是无值，这个变量的值是
null。如果把这 个值传递到后台，在java中使用 变量==null 进行判断，会输出false。
•这实际上是js开发期间的一个错误，但因为已经被使用，也就将错就错了
•在js中，undefined==null会返回true，但不要因此混淆两者
变量声明及类型转换
•
变量的声明：
使用var来
显式声明
变量：
var str = "
你好
“
;
显式声明
跟
java
一样可以直接初始化，也可以不初始化
直接赋值称为
隐式声明
：
num=15;
隐式声明是依靠赋值来完成的，所以必须赋值
•
parseInt(字符串)和parseFloat(字符串)
可以字符串转化为整型或浮点型数字
•
类型转换：
–
字符串--〉数字 Number()
–
Number("1")
–
任何类型--〉字符串 String()
–
String(1)
–
任何类型--〉布尔类型 Boolean(value)
–
Value
是空字符串、数字
0
、
undefined
或
null
时，得到
false
，否则是
true
表达式及运算符
•
算术运算符：+
-
*
/
%
++
--
（字符串相加的规则跟
java
相同）
•
比较运算符：<
>
<=
>=
==
!=
•
逻辑运算符 &&
||
!
•
赋值运算符
=
+=
-=
*=
/=
%=
•
三元运算符 ？A：B
(age>=18)?
”
成人
”
:
”
孩子
”
;
•
这些运算符用法与
java
相同，优先级也基本相同，只是&&
优先级高于||
•
一个特殊之处是，当你使用
&&
||
时，逻辑表达式返回的值是最后被执行的表达
式的值，而不是一个
boolean
值。尝试这段代码：
var attr = true && 4;
alert(attr);
事实上你甚至能这样写：
表达式
&&
函数
。
这样会用函数的返回值进行运算，同时也就等于执行了函数
•
另外，因为自动类型转换的存在，我们可以有一些特殊的用法，比如
Boolean(value)
可以用
!!value
代替
这是因为
!value
会把
value
转化成
boolean
型，再加个
!
确保得到正确的
boolean
值，就可以简单的完成类型转换了
数组
•
数组声明：var 数组变量名 = new Array()
–
创建时指定数组长度
var week = new Array(7)
注意
A
大写
.
数组可嵌套
–
创建时不指定数组长度，自动延伸数组的长度
var week = new Arrary()
–
创建时直接赋值
var week = new Arrary(
值
1
，值
2
，
……
)
•
数组的长度：使用数组的length属性来获得数组的长度
•
Array是js内置的对象，它实际是以键值对方式存储的，类似于java的map，而在使用上类似ArrayList。因此js的数组长度是可变的。又因为Array是一个对象，所以你可以直接更改它的属性，例如：
•
var week = new Array(7);
week.length=5;
结果就是把这个数组直接变成只有5个元素的数组，另外两个元素被抛弃。
•
你也可以直接给数组的任意位置追加元素，例如:
week[9]=50;
结果数组长度会变成10，其中序号为9的元素是50，而序号为7、8的元素是undefined
•
数组1.concat(数组2)，把数组2跟数组1合并，返回一个新数组，范例：
var arr = new Array(1,2,3)
var arr2 = new Array(4,5,6)
document.write(arr.concat(arr2))
•
数组名.join([“分隔符”])，数组转化字符串，返回值是个字符串，其中用分隔符隔开每个元素，如果不写分隔符，默认是用逗号。范例：
var arr = new Array(4,13,8,6)
document.write(arr.join());
document.write("<br />");
document.write(arr.join("."));
当不设置分隔符时，也可以使用toString() 方法，跟join()效果相同
•
数组名.sort([排序函数名]) ，数组元素排序。若不指定排序函数，则默认所有元素为字符串，并按
字符顺序
排序。排序函数的写法跟java的compareTo方法相同，但函数名可自定
流程控制
•
顺序：按照程序编写的顺序来执行
•
条件
if(
条件
) {
语句
1 }
else if(
条件
)
…
else {
语句
n}
switch (
表达式
){
case
常量
1
：语句
1;break;
…
case
常量
n
：语句
n;break;
[default
：语句
n+1;]
}
•
循环
for(
初值
;
条件
;
更新
){
语句
}
do{
语句
}while(
条件
)
while(
条件
){
语句
}
同样使用
break
结束循环，
continue
跳过本次循环
函数
•
函数
–
在JavaScript中的函数可以简单理解为一组语句，用来完成一系列工作。跟java里的“方法”基本上是一样的
•
创建函数
–
function 函数名（参数 1, 参数2, …参数N）
{
函数体（语句集）
}
同样可以使用return给出返回值并结束函数
同样使用try catch来捕捉异常。不同的是js里的异常对象叫做err而不是exception。
在函数内部声明的变量是局部变量，在函数外面声明的变量是全局变量，这也跟java一样
调用函数的语法就是
函数名
([
参数
]);
事件调用函数
•
事件：
–
就是Web页面在浏览器处于活动状态时发生的各种事情。如：浏览器加载、卸载一个页面，用户单击鼠标、移动鼠标，以及按下键盘的某个键
–
•
事件调用函数：
–
当发生了某个事件之后去调用函数进行处理的方式。
–
•
事件调用函数的格式：
–
on事件名 ＝ 事件处理函数
|
事件调用函数
|
何时触发
|
支持的页面元素
|
|
onclick
|
鼠标单击时
|
所有元素
|
|
ondbclick
|
鼠标双击时
|
所有元素
|
|
onchange
|
显示的值改变时
|
表单元素
|
|
onfocus
|
窗口或元素获得焦点时
|
<body>和表单元素
|
|
onblur
|
窗口或元素失去焦点时
|
<body>和表单元素
|
|
onload
|
文档,图像,或对象加载完毕时
|
<body>, <frameset>, <img>, <iframe>, <object>
|
|
onsubmit
|
表单提交时
|
<form>
|
|
onunload
|
文档卸载时
|
<body>, <frameset>
|
•
onkeypress事件
按下键盘任意键再松开，就触发keypress事件
•
onkeydown事件
按下键盘任意键，就触发onkeydown事件，不用等松开
•
onkeyup事件
松开之前按下的键盘的某个键，这个事件就表示有一个键弹起来
•
Onmousedown
当鼠标按钮在元素上被按下时触发
•
Onmousemove
当鼠标指针在元素上移动时触发
•
Onmouseout
当鼠标指针移出某元素时触发
•
Onmouseover
当鼠标指针悬停于某元素之上时触发
•
Onmouseup
当鼠标按钮在元素上被松开时触发
这些事件对大部分常用标签都有效。但不同浏览器，效果可能有差异
Event对象
Event对象是代表被触发的事件的对象，它有这些属性：
•
altKey 布尔值，表示当事件被触发时，“ALT”是否被按下。
•
ctrlKey 布尔值，表示当事件被触发时，"CTRL" 键是否被按下。
•
shiftKey布尔值，表示当事件被触发时，“SHIFT”键是否被按下。
•
clientX 数字，表示当事件被触发时，鼠标指针相对于浏览器的水平坐标。
•
clientY数字，表示当事件被触发时，鼠标指针相对于浏览器的垂直坐标。
•
screenX 数字，表示当某个事件被触发时，鼠标指针相对于显示器的水平坐标。
•
•
screenY 数字，表示当某个事件被触发时，鼠标指针相对于显示器的垂直坐标。
•
•
type 字符串，表示所触发的事件类型，比如onclick、onload
•
•
keyCode
数字，键盘按键触发的事件中，所按下的键的ascii代码（IE专用属性，非IE浏览器用which代替）
•
•
srcElement
对象，表示触发该事件的那个浏览器对象，比如因为按钮的onclick事件触发，而执行了一段js代码，在这段js代码中，event.
srcElement
得到的就是这个按钮对象（IE专用属性，非IE浏览器用target代替）
JavaScript中的对象
•
内置对象
–
JavaScript将一些非常常用的功能预先定义成对象，用户可以直接使用，这种对象就是内置对象
–
•
浏览器对象
–
网页和浏览器本身的各种元素在JavaScript程序中的体现
–
它使JavaScript可以定位、改变内容以及展示HTML页面的所有元素
–
•
自定义对象
–
JavaScript允许用户自定义对象进行使用
常见内置对象
•
Math 数学对象
–
提供了进行所有基本数学计算的功能和常量的属性和方法
<html>
<head>
<script language="JavaScript">
alert(Math.abs(-1));
//返回绝对值
alert(Math.round(3.8));
//返回四舍五入之后的整数
alert(Math.random());
//返回0和1之间的一个伪随机数
</script>
</head>
<body>
</body>
</html>
•
Date 日期对象
–
提供了获取、设置日期和时间的属性和方法
<html>
<body>
<script type="text/javascript">
function getDate(){
var d, s = "现在时间: "; // 声明变量。
d = new Date(); // 创建 Date 对象。
s += (d.getMonth() + 1) + “/”; // 获取月份。跟java一样用0-11的数字表示
s += d.getDate() + "/"; // 获取日。
s += d.getYear()+ " "; // 获取年份。
s += d.getHours()+ "："; // 获取钟点。
s += d.getMinutes()+ "："; // 获取分钟。
s += d.getSeconds(); // 获取秒钟。
return(s); // 返回时间。
}
alert(getDate());
</script>
</body>
</html>
•
String 字符串对象
–
提供了对字符串进行处理的属性和方法
•
用法跟java的String类基本相同，同样拥有
toLowerCase 、split、charAt 等方法，功能和用法也跟java一样
•
Array 数组对象
–
用来创建数组
自定义对象
–
JavaScript允许用户自定义类和对象
–
可以直接写一个构造函数从而创建一个自定义的类，写法与java相同。然后同样使用new 构造函数来创建对象。范例：
function User(name,age){
this.name=name;
this.age=age;
}
var use=new User();
this.name=name;
this.age=age;
}
var use=new User();
–
也可以直接使用
属性：值
的列表来创建对象，并初始化属性，例如：
var user={name:“user1”,age:18}；
这种方法的效果就像是创建了一个java里的map
这种方法的效果就像是创建了一个java里的map
•
自定义对象的使用方法跟java基本相同
•
给自定义对象写方法。同样有各种写法
一、直接写在构造函数中，例如：
function User(name,age){
this.name=name;
this.age=age;
this.name=name;
this.age=age;
this.
getName
=
function(){
return this.name; } ; }
蓝色部分就是一个方法，方法名是 getName ，可以用该类的对象调用此方法
return this.name; } ; }
蓝色部分就是一个方法，方法名是 getName ，可以用该类的对象调用此方法
二、写在构造函数外面，例如：
function User(name){
this.name=name;
this.getName=getUserName; }
this.name=name;
this.getName=getUserName; }
function getUserName(){
return this.name;
}
return this.name;
}
通过红色的那句代码，外面的那个蓝色的函数被指定为该类的成员方法
三、通过名值对方式创建对象时直接写，例如：
var user={name : “user1” , age : 18 ,
getName
:
function(){
return this.name;
}
}
return this.name;
}
}
红色是方法名，蓝色是方法体
扫一扫
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
