JavaScript
一、JavaScript概述
1、为什么使用JavaScript
拨号上网Time:网速很慢,数据提交到服务器端验证,体验很差,JavaScript横空出世,担当了浏览器端数据验证的重任,从此一发不可收拾
五彩缤纷的现在:时至今日JavaScript已经不仅仅局限于表单验证,她还能为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。
2、JavaScript是什么
JavaScript是一门客户端脚本语言,主要运行在浏览器中,浏览器中负责运行JavaScript脚本代码的程序叫JavaScript引擎。
只有当浏览器读取javaScript代码时,才进行解释、执行。所以查看HTML源文件就能查看JavaScript源代码。
案例
二、HelloWorld案例
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 1.JavaScript代码写在HTML中的script标签中 -->
<script type="text/javascript">
//2.借助window.onload事件在文档加载完成后执行程序
window.onload = function() {
//3.从文档中获取<button id="btnId">SayHello</button>标签对应的元素节点对象
var btnEle = document.getElementById("btnId");
//4.绑定单击事件响应函数
//给按钮对象的单击事件属性赋值一个函数的引用
btnEle.onclick = function() {
//5.在事件的响应函数中弹出警告框
window.alert("大数据专业");
};
};
</script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
</html>
结果:
三、Java Script 基本语法案例
1、变量
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//01.使用var关键字声明变量,声明时不需要指定类型
var a = 20;
var b = 'abc';
var c = true;
alert(a+" "+b+" "+c);
//02.变量在使用过程中可以接受不同类型的值
a = "Hello";
b = 230.53;
c = ["good",true,20];
alert(a+" "+b+" "+c);
</script>
</head>
<body>
</body>
</html>
结果:
2、函数
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//01.声明函数使用function关键字,不需要指定返回值类型,形参也不需要指定类型
function sum(a,b) {
return a+b;
}
//02.调用函数:不检查实参的类型,个数
var result = sum(5,10);
alert(result);
result = sum("Hello ","Tom");
alert(result);
result = sum("Hello ");
alert(result);
</script>
</head>
<body>
</body>
</html>
结果:
3、函数是对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//在JavaScript中,函数也作为一种数据类型存在,而且是引用数据类型,函数名就是指向其内存空间地址的引用
function sum(a,b) {
return a+b;
}
alert(sum);
var ref01 = sum;
alert("ref01="+ref01);
var ref02 = sum;
alert("ref02="+ref01);
</script>
</head>
<body>
</body>
</html>
结果:
4、回调函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//回调函数:声明后,不由自己调用,而是交给系统或其他函数执行的函数
function callBack() {
window.alert("I am call back!");
}
function call(fun) {
fun();
}
window.callBack();
call(callBack);
</script>
</head>
<body>
</body>
</html>
结果:
5、this关键字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//在JavaScript中,任何一个函数都是由对象调用的,在函数中可以通过this关键字引用调用这个函数的对象
var obj01 = {
name : "obj01 name",
getName : showName
};
var obj02 = {
name : "obj02 name",
getName : showName
};
function showName() {
alert(this.name);
}
//对象的属性指向了一个函数,所以也是函数的一个引用
//函数的引用加上()就是执行引用的函数
obj01.getName();
obj02.getName();
</script>
</head>
<body>
</body>
</html>
结果:
6、Object
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//在JavaScript中创建对象
//1.new Object()
var objByNew = new Object();
objByNew.userName = "Tom2014";
objByNew.password = "123456";
alert(objByNew.userName+" "+objByNew.password);
//2.JSON格式
//{属性名01:属性值01,属性名02:属性值02,...}
var objByJSON = {
userName : "Jerry",
password : "654321"
};
alert(objByJSON.userName+" "+objByJSON.password);
</script>
</head>
<body>
</body>
</html>
结果:
四、事件
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/*
地雷 事件监听和响应
生产 声明一个事件响应函数
找一个埋设的位置 从文档中获取一个按钮对象
埋设 将响应函数绑定到按钮对象上
触发引信爆炸 在浏览器捕获到用户对按钮的单击事件时执行响应函数
*/
window.onload = function(){
//1.从文档中获取按钮对象
var btn = document.getElementById("btnId");
//2.声明一个事件响应函数
/* function myClick() {
alert("Bom!");
} */
//3.将响应函数的引用赋值给按钮对象的onclick属性——绑定
/* btn.onclick = myClick; */
btn.onclick = function () {
alert("Bom!~~~");
};
}
</script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
</html>
结果:
五、加载方式
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 使用window.onload -->
<script type="text/javascript">
//在整个文档加载完成后执行这个函数
function myPrograme() {
var btn = document.getElementById("btnId");
alert(btn);
//4.给按钮对象绑定单击响应函数
btn.onclick = function() {
//5.在响应函数中弹出Hello
alert("Hello!Success!~~~");
};
}
//将myPrograme绑定到“文档加载完成”这个事件上
//window代表当前浏览器窗口,它加载HTML文档完成后触发“文档加载完成”这个事件
window.onload = myPrograme;
</script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
</html>
结果: