JS入门学习

最新推荐文章于 2024-07-13 18:34:07 发布

Kingdeguo

最新推荐文章于 2024-07-13 18:34:07 发布

阅读量350

点赞数

分类专栏：前端文章标签： JS HTML JSP JAVAEE 程序人生

本文链接：https://blog.csdn.net/weixin_44895666/article/details/109026767

版权

前端专栏收录该内容

8 篇文章 1 订阅

订阅专栏

文章目录

概要介绍

关于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>