您的位置：首页 > Web前端 > JavaScript

javascript基本语法复习案例

2020-08-05 23:25 162 查看

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;//15
}
//02.调用函数：不检查实参的类型，个数
var result = sum(5,10);
alert(result);
result = sum("Hello ","Tom");
alert(result);//Hello Tom
result = sum("Hello ");
alert(result);// Hello undefined
</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>

6）Java Script 事件案例

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航