JavaScript简介
JavaScript是由作者Brendan Eich 花了10天就写出来的语言,主要用于代码实现和浏览器中的网页进行交互 ,因此JavaScript相比Java要简单很多,JavaScript是一种动态性语言,由于设计之初不严谨,所以漏洞相对比较多
三种变量声明方式
var 全局变量 ,值可变
let 块级变量 ,值可变 ,常用在for,while循环中
const 块级作用域,只能在声明后才能使用.const设定的值不可以改 ,相当于常量,更加安全,看代码时可以了解哪些参数不可以改变,方便看代码,推荐使用
常用方法一览
console.log(“hello!”)
alert(“hello!”)
alert(window.prompt(“请输入”)) //输入框
for循环的使用,alert 弹框,代码执行的顺序从上到下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="" name="inp" id="inp" value="123" />
</body>
<script >
// alert(document.getElementById("inp").value);
// alert("hello world!")
// abc = 123 前面abc那里不能以数字开头
for (var i = 0 ;i < 3 ;i++) {
alert(i);
} //弹框输出 0 , 1 , 2
var a = 1;
var s = "das";
a = s ;
alert(a); //弹框输出 das
</script>
</html>
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" name="" id="" value="跳" onclick="tiao()" />
<button onclick="qv()">去</button>
</body>
<script type="text/javascript">
//location.href 跳页
//a form 表单的action
function tiao(){
// alert("tiao")
window.location.href = "test09_history.html"
// window.location.reload(); //刷新
}
function qv(){
// alert(window.history.length)
window.history.go(-1)
// window.history.forward();
}
</script>
</html>
test09_history.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="hui()">回</button>
</body>
<script type="text/javascript">
function hui(){
// alert("hui")
window.history.back();
}
</script>
</html>
** location**
window.location.href=" " 跳到指定网址
window.history.go(-1) -1为后退一页,2为向前2页
window.history.forward() 向前1页
alert(window.history.length) 历史操作步数
window.history.back() 返回上一页
99乘法表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="chengfabiao()">99乘法表</button>
</body>
<script type="text/javascript">
function chengfabiao(){
document.write("下面是一个表格:<br>")
document.write("<table border = '1'>")
for (var i = 1;i <= 9;i++) {
document.write("<tr>")
for (var j = 1;j <= i;j++) {
document.write("<td>"+ i +"*"+ j +"="+ i*j + "</td>")
}
}
document.write("</tr>")
}
document.write("</table>")
// alert(1)
</script>
</html>
倒计时执行
window.setTimeout(“alert(1)”,2000) 倒数2秒执行一次(仅执行一次)
window.setInterval(“alert(1)”,3000) 每隔3秒执行一次(无限执行)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
window.setTimeout("alert(1)",2000)
window.setInterval("alert(1)",3000)
</script>
</html>
内嵌页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
内嵌页: <button onclick="loadleft()">loadleft</button><br />
<iframe src="left.html" name = "left"></iframe>
<iframe src="right.html" name="right"></iframe>
</body>
<script type="text/javascript">
function loadleft(){
left.location.href = "left.html"
}
</script>
</html>
内嵌页效果图