JavaScript
Javascript代码在浏览器中运行,做出更流畅、优美的页面效果,增强用户体验。与java是完全不同的东西,只是名称类似而已。写在<script></script>标签中
1.简介
head
部分:用于声明变量、函数、类型,为事件绑定处理函数
body
部分:调用脚本执行
外部脚本:用于定义函数、类型
•
将代码封装到一个扩展名为
js
的文件中,然后在需要的地方引用,完成一次定义,多处引用的效果,简化了代码的维护,在文件中不需要写<script></script>
标签。
特点:大小写敏感
弱类型语言
分号结尾
注释(单行,多行)
字符串推荐使用单引号,也可以使用双引号
2.Date对象
用于处理日期和时间
创建对象:
var
date=new Date();
看文档
JavaScript Date
对象参考手册
方法
toLocaleTimeString
()
表示根据本地时间格式,把
Date
对象的时间部分转换为字符串
方法
toLocaleDateString
()
表示根据本地时间格式,把
Date
对象的日期部分转换为字符串。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>03显示时间</title>
</head>
<body>
<script>
//创建时间对象
//var date = new Date();
获取世界时间,会提示当前时区
//alert(date.toString());
//代码分离:一般不会将html于js混合写
//定义函数,用于获取时间对象并显示当前时间
function showTime() {
var date = new Date();
alert(date.toLocaleString());
return false;//可以让a的跳转不执行
}
</script>
<input type="button" value="显示时间" onclick="showTime();"/>
<hr/>
点击超链接,执行js脚本,而不执行url跳转
<br/>
方式一:让js函数返回false,在onclick中也返回false
<a href="http://www.baidu.com" onclick="return showTime();">显示当前时间</a>
<br/>
方式二:将href指定成一段脚本
<a href="javascript:showTime();">点击显示时间</a>
</body>
</html>
3.数据类型
boolean
布尔
number
数字
string
字符串
Undefined
未定义
Null
空对象
Object
对象类型
Undefined
类型、
Null
类型都是只有一个值的数据类型,值分别为
undefined
与
null
查看变量的类型
typeof
变量名或
typeof
(
变量名
)
,返回变量类型的字符串
类型转换:类型名
(
变量名
)
或
parse***()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>04类型</title>
</head>
<body>
<script>
//当变量被声明之后,没有初始化,则值为undefined
var a1;
//alert(a1);
//输出类型
//alert(typeof (a1));//返回a1变量的类型对应的字符串
//指定null值时,当前变量为nul
a1 = null;
//alert(a1);
//alert(typeof (a1));//null是一个obejct的值
//class Person { }
var a2 = '100';
alert(a2 + 1);//字符串拼接
alert(parseInt(a2) + 1);
</script>
</body>
</html>
4.判断
双等号
==
判断值是否相等
三等号
===
先判断类型是否相同,再判断值是否相等
undefined==null
结果为什么?
undefined===null
结果为什么?
思考:如何判断变量是否可用?
答:先判断类型是否为
undefined,
再判断值是否为
null
,否则可用
提示:
typeof
(n)!='undefined‘
非数字判断:
isNaN
()
eval
()
用于将一段字符串转换成
js
代码执行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>05判等</title>
</head>
<body>
<script>
//var a1;
//var a2 = null;
//undefined表示没有,null表示没有
//if (a1 == a2) {
// alert('ok');
//} else {
// alert("no");
//}
//三个等号先判断类型是否相等,在判断值是否相等
//if (a1 === a2) {
// alert('ok');
//} else {
// alert('no');
//}
var b1 = 123, b2 = '123';;
//值都为123所以相等
//if (b1 == b2) {
// alert('ok');
//} else {
// alert('no');
//}
//b1是number类型,b2是字符串类型,不相等
//if (b1 === b2) {
// alert('ok');
//} else {
// alert('no');
//}
//null与‘null’是不同的
//var temp = null;
//if (temp == 'null') {
// alert('ok');
//} else {
// alert('no');
//}
//判段变量是否可用
//判断是否为undefined:typeof(temp) == 'undefined'
//判断是否为null:temp === null
//var temp = null;
//if (typeof (temp) == 'undefined' || temp === null) {//'null','object'
// alert('no');
//} else {
// alert('ok');
//}
//var date = new Date();
//alert(typeof (date));
//alert(typeof (Date));//function
//alert(typeof (Date()));//调用Date()方法返回当前时间的字符串,类型为string
//判断是否不是一个数字
//var temp2 = 'abc';
//alert(isNaN(temp2));
//将一段字符串当作js代码
//当从文本框中获取值时,得到的是字符串,如果希望是那段字符串当作js执行,则使用eval()方法
eval('alert("abc")');
</script>
</body>
</html>
5.定义方法
语法:
function
方法名
(
参数列表
){…}
方法名首字母小写
如果需要返回值,则在方法体中使用
return
关键字
调用:方法名
(
参数
)
如果有返回值,可以直接使用,如果没有返回值却使用,则值为
undefined
没有方法重载,后定义的方法会将先定义的方法覆盖
可以使用关键字
arguments
获取所有的参数,是一个数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>07定义方法</title>
</head>
<body>
<script>
//修饰符 返回值类型 方法名(参数列表){。。。。。。}
//function 方法名(参数列表) { ...}
function add(a, b) {
//alert(a + b);
return a + b;//使用return返回值
}
//快捷键func,tab
function add2(a, b, c) {
//alert(a + b + c);
return a + b + c;
}
//调用方法
//var sum = add(1, 2);//直接使用变量接收方法的返回值
//alert(sum);
//接收没有返回值的方法
var sum2 = add2(1, 2, 3);
alert(sum2);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>08方法重载</title>
</head>
<body>
<script>
//不存在方法重载
//声明后的函数会将先声明的函数覆盖
function add(a, b) {
alert(a + b);
}
//function add(a, b, c) {
// alert(a + b + c);
//}
//add(1, 2);
//可变参数
function sum(a) {
//使用argumens获取所有参数,是一个数组
alert(arguments.length);//返回数组元素的个数
var sum1 = 0;
for (var i = 0; i < arguments.length; i++) {
sum1 += arguments[i];
}
alert(sum1);
}
//调用
sum(1, 2, 3, 4, 5, 6);
</script>
</body>
</html>
6.匿名函数
不需要定义方法名,直接写参数列表与方法体
方式一:
function (
参数
){...return ...};
•
可以将方法赋值给一个变量,这个变量表示一个方法
方式二:
(function(n1,n2){...})(1,2);
•
定义的同时完成调用
方式三:
new Function("n1","n2","return n1+n2");
•
赋值给一个变量完成调用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>09匿名函数</title>
</head>
<body>
<input type="button" id="btnShow" value="显示"/>
<script>
//快捷键:fun,tab
//定义匿名函数,赋值给一个变量
var f1 = function (a, b) {
// alert(a + b);
};
//通过变量调用
f1(1, 2);
//典型应用:为事件绑定处理函数,传递回调函数
//根据id获取页面元素,为它绑定单击事件
document.getElementById('btnShow').onclick = function () {
alert(123);
};
</script>
</body>
</html>
7.类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>11类</title>
</head>
<body>
<script>
//为类增加成员
//function Person(name) {
// this.Name = name;
// this.Say = function () {
// alert(this.Name);
// };
// // return name; //类是没有返回值的,所以此行可不写
//}
//使用构造方法创建对象
//var p1 = new Person('aaa');
// p1.Say();//调用 方法
//alert(typeof (p1));//object
//alert(typeof (Person('aaa')));
//alert(typeof (Person));//Person就是一个函数,类型是function
function Person() {
}
//为对象增加成员
var p1 = new Person();
p1.Name = "aaa";//为对象p1新建了一个属性Name
p1.say = function () {
alert(p1.Name);
};
p1.say();
//新建出来的对象,是没有Name属性的,因为Person类中没有Name属性
var p2 = new Person();
alert(p2.Name);
</script>
</body>
</html>