js 基础 -- 循环、函数调用 、全局和局部变量、异常捕获、事件
一：循环
for
for in
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>循环</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<script>
var i = [1,2,3,4,5,6];
for(j in i) {
document.write(i[j]+"<br/>");
}
</script>
</head>
<body>
</body>
</html>
while
do while
break
continue
函数调用
方法一：在script脚本中直接调用
方法二：在html中调用
带参数函数
带返回值函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>函数调用</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<script>
//方法一 : 直接在script中调用
function Demo1(a1,a2)
{
alert(a1+a2);
}
Demo1(10,10); //直接调用
function Demo2(){
var a1 = 10;
var a2 = 10;
alert(a1+a2);
}
</script>
</head>
<body>
<!--在html中调用使用-->
<button onclick="Demo2()">按钮</button>
</body>
</html>
局部变量
全局变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>全局变量</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<script>
var b = 30; //全局变量
function Demo() {
var a = 20; //局部变量
x = 10; //全局变量
}
Demo();
alert(x);
//alert(a); //局部变量未执行
alert(b);
</script>
</head>
<body>
</body>
</html>
异常捕获
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>异常捕获</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<script>
function Demo(){
try{
alert(str); //发生异常的代码
}catch(err) {
alert(err); //错误信息处理
}
}
//通过 throw 语句创建一个自定义错误
function Demo1() {
try {
var t = document.getElementById("txt").value;
if(t == "") {
throw "请输入";
}
}catch(err) {
alert(err);
}
}
//Demo();
</script>
</head>
<body>
<!--创建一个form表单 若输入框中输入的值为空，通过按钮触发警告-->
<form>
<input id="txt" type="text"/><br/>
<input id="btn" type="button" onclick="Demo1()" value="button"/>
</form>
</body>
</html>
事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>事件</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<script>
//鼠标点击事件
function click(){
alert("onclick");
}
//鼠标经过和移出事件 鼠标经过div区域显示hello，移出后显示world
function onOver(ooj){
ooj.innerHTML = "hello";
}
function onOut(ooj) {
ooj.innerHTML = "world";
}
//文本框选中事件
function selectText(obj) {
obj.style.background = "red";
}
</script>
</head>
<body>
<button onclick="click()">单击点击事件</button>
<br/>
<!--鼠标经过事件 鼠标移出事件-->
<div style="width: 100px;height: 100px;background-color: lemonchiffon" onmouseover="onOver(this)" onmouseout="onOut(this)"></div>
<br/>
<!--文本内容改变事件-->
<form>
<input type="text" onchange="alert('文本输入框中的内容改变')"/>
</form>
<!--文本框选中事件 文本框的内容被选中后文本框显示为红色-->
<form>
<input type="text" onselect="selectText(this)"/>
</form>
<button onfocus="">光标聚集事件</button>
<button onblur="">移开光标事件</button>
<button onload="">网页加载事件</button>
<button onunload="">关闭网页事件</button>
</body>
</html>
拼命敲
