文章目录
概要介绍
关于HTML部分可以看我的这篇文章：传送门（一文带你入门）
JS是解释执行的。JS的代码写在<script type="text/javascript"></script>之间，
而<script></scripy>可以放在之间，也可以放在<body></body>之间，效果是一样的。
另外：也可以写成<script language="javascript></script>。
代码示例：
<!DOCTYPE html>
<html>
<head>
<title>JS page</title>
</head>
<body>
<script type="text/javascript">
window.alert("This is my first js application");
</script>
</body>
</html>
对于上面的弹窗显示，不同的浏览器可能显示不同的效果，例如Chrome会将弹窗显示在中间上方。
上面的写法是将JS代码写到HTML文件中，但是当代码量大了之后可能会带来维护等问题，所以我们可以把JS代码写道一个单独的文件中来。
代码示例：
a.html
<!DOCTYPE html>
<html>
<head>
<title>JS page</title>
</head>
<body>
<script src="code.js" type="text/javascript"></script>
</body>
</html>
code.js
window.alert("This is my first js application");显示效果与刚才相同。
注释方式
三种注释方式。
<!-- 注释内容-->
// 注释内容
/* 注释内容 */
基本语法：
js是一门弱变量语言，变量的定义格式为：var 变量名.因为是弱类型语言，因此变量使用前未声明是不会报错的，但很容易出现未知的错误。因此还是推荐先定义后使用。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>JS page</title>
</head>
<body>
<script type="text/javascript">
var arg1, arg2, arg3;
var arg4 = 1;
arg5 = 12.34;
arg6 = "Nice";
arg7 = new Array("赵","钱","孙","李");
</script>
</body>
</html>
函数Number可以将字符穿转化为数字，String可以将数字转化为字符。
函数的定义：
function 函数名(参数列表){
return 值;
}代码示例：
<!DOCTYPE html>
<html>
<head>
<title>JS page</title>
</head>
<body>
<script type="text/javascript">
showhello();
function showhello() {
window.alert("Hello");
}
</script>
</body>
</html>
JavaSript与Java语法类似，下面展示一个稍微复杂一点的“恶意窗口”，让别人关不掉。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS page</title>
</head>
<body>
<script type="text/javascript">
str = new Array("哈哈","你被骗了","真笨鸭");
while(true){
for (var i = str.length - 1; i >= 0; i--) {
window.alert(str[i]);
}
}
</script>
</body>
</html>
即使他点击❌还是会继续不断提示，关不掉弹窗。
JS的内置对象
window
window.alert(“content”)：出现消息框。
windows.confirm("content"):出现确认框。
windows.prompt("content"):出现输入框。
window.open()函数用来打开窗口。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>window1</title>
</head>
<body>
This is window1
</body>
</html>
关于window.open()的一些属性：
toolbar:是否有工具栏
location:是否有地址栏
status:是否有状态栏
menubar:是否有菜单栏
scollbars:是否有滚动条
resizable:是否可以改变大小
上述部分的可选值都是0或者1.
width height:窗口的宽度和高度，用像素表示
left top:窗口左上角相对于桌面左上角x和y的坐标。
window有一个定时器，
timer = window.setTimeout("需要运行的函数","时间（单位为毫秒）")需要请除计时器时使用：
clearTimeout(timer);
history
history.back():返回上一页。
history.forward();返回下一页。
window.history.go(n):正数表示前进N格，负数表示后退n格。
document
document.writeln("输出内容");document还可以对网页是一些属性进行设置，例如
document.title来设置访问标题。
document.location来设置获取当前网页的地址。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS page</title>
</head>
<body>
<script type="text/javascript">
document.writeln("<table width=400 height=400 border=1>");
for (i=1; i<=8; ++i){
document.writeln("<tr>");
for ( j=1; j<=8; ++j){
color="black";
if ((i+j)%2 == 0){
color = "white";
}
document.writeln("<td bgcolor = " + color + "></td>");
}
document.writeln("</tr>");
}
document.writeln("</table>");
</script>
</body>
</html>
想要访问文档元素，尤其是表单元素时i，使用如下方式：
document.元素名.子元素名...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS page</title>
</head>
<body>
<script type="text/javascript">
function add() {
n1 = Number(document.form1.txt1.value);
n2 = Number(document.form1.txt2.value);
document.form1.txt3.value = n1 + n2;
}
</script>
<form name="form1">
<input type="text" name="txt1"><br>
<input type="text" name="txt2"><br>
<input type="button" onclick="add()" value="求和"><br>
<input type="text" name="txt3"><br>
</form>
</body>
</html>
location对象
window.location.href = "文件路径";
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS page</title>
</head>
<body>
<script type="text/javascript">
function locationTest() {
window.location.href = "img.jpg";
}
</script>
<input type="button" onclick="locationTest()" value="showImage"><br>
</body>
</html>
