投稿
  1. 极客之音首页
  2. 技术随笔

JavaScript——2：开始使用 JavaScript

小半 • • 技术随笔 • 阅读 198

导读：本篇文章讲解 JavaScript——2：开始使用 JavaScript，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

这里以完善一个弹窗提醒功能作为开始。

一，将脚本放在哪里

（一）放在HTML文件中

脚本可以放在 HTML 页面上的两个位置： <head>和</head>标签之间，或者<body>和</body>标签之间。

<!DOCTYPE html>
<html>
<head>
	<title>My first script</title>
</head>
<body>
	<h1>
		<script>
			document.write("Hello, world!");
		</script>
	</h1>
</body>
</html>

（二）放在外部js文件中

如果希望让多个 HTML 页面共享一个脚本，这要通过包含外部脚本的引用来实现。这些外部脚本也就是只包含 JavaScript 的单独文件，称为.js 文件。

各个HTML页面只需在 script 标签中添加 src 属性，就可以调用.js 文件。

HTML文件：
<!DOCTYPE html>
<html>
<head>
	<title>My second script</title>
	<script src="script02.js"></script>
</head>
<body>
	<h1 id="helloMessage"></h1>
</body>
</html>

script02.js文件:
window.onload = writeMessage; //当窗口完成加载时，运行 writeMessage 函数

function writeMessage() {
	//获得字符串'Hello, world!'，并将它放在文档中名为 helloMessage 的元素中
	document.getElementById("helloMessage").innerHTML = "Hello, world!";
}

二，向用户发出警告

JavaScript 的主要用途之一是向浏览站点的人提供反馈。可以创建一个弹出的警告窗口，向用户提供关于页面必须了解的重要信息。

<!DOCTYPE html>
<html>
	<head>
		<title>My JavaScript page</title>
		<script src="script04.js"></script>
	</head>
	<body>
		<script>
			alert("Welcome to my JavaScript page!");
		</script>
	</body>
</html>
  • 把希望显示的文本放在 alert()方法的直引号中

在这里插入图片描述

三，确认用户的选择

有时候还希望在警告窗口从用户那里获得确认信息，可以使用confirm()方法。

if (confirm("Are you sure you want to do that?")) {
	alert("You said yes");
} else {
	alert("You said no");
}
  • confirm()方法有一个参数（向用户询问的问题），并根据用户的Ok/Cancel响应返回true/false。

四， 提示用户

有时候仅从用户那里获简单的得确认信息还不够，可以使用prompt()方法。

var ans = prompt("Are you sure you want to do that?","");
if (ans) {
	alert("You said " + ans);
}
else {
	alert("You refused to answer");
}
  • prompt() 方法显示可提示用户进行输入的对话框。如果用户单击提示框的取消按钮，则返回 null。如果用户单击确认按钮，则返回输入字段当前的文本。

五，据用户的选择进行重定向

点击按钮或链接时页面弹出提示，用户根据提示做出Ok/Cancel选择，最后根据用户做出的选择决定是否进行重定向响应。

test-1.html文件：
<!DOCTYPE html>
<html>
	<head>
		<title>Barely a script at all</title>
		<link rel="stylesheet" href="test.css">
		<script src="test.js"></script>
	</head>
	<body>
		<h1 id="myMessage">Hello, Cleveland!</h1>
		<p><button type="button" class="button" onclick="pageRedirect()">Click here</button> to play bingo!</p>
	</body>
</html>
  • 在head中引用了外部的test.js文件。
  • 为class=”button”的按钮button添加了一个onclick鼠标点击事件，这个事件绑定了test.js文件中的pageRedirect()函数。
test-2.html文件：
<!DOCTYPE html>
<html>
    <head>
        <title>Make Your Own Bingo Card</title>
        <link rel="stylesheet" href="test.css">
    </head>
    <body>
        <h1>Create A Bingo Card</h1>
        <table>
            <tr>
				<th>B</th>
				<th>I</th>
				<th>N</th>
				<th>G</th>
				<th>O</th>
            </tr>
			<tr>
			    <td id="square2">2</td>
			    <td id="square7">7</td>
			    <td id="free">free</td>
			    <td id="square16">16</td>
			    <td id="square21">21</td>
			</tr>
			<tr>
			    <td id="square2">2</td>
			    <td id="square7">7</td>
			    <td id="free">free</td>
			    <td id="square16">16</td>
			    <td id="square21">21</td>
			</tr>
			<tr>
			    <td id="square2">2</td>
			    <td id="square7">7</td>
			    <td id="free">free</td>
			    <td id="square16">16</td>
			    <td id="square21">21</td>
			</tr>
			<tr>
			    <td id="square2">2</td>
			    <td id="square7">7</td>
			    <td id="free">free</td>
			    <td id="square16">16</td>
			    <td id="square21">21</td>
			</tr>
        </table>
    </body>
</html>

test.css文件：
body {
	font-size: 20px;
	/*设置字体大小*/
}

h1 {
	color: #01d5ff;
	/*设置元素颜色*/
	font-size: 40px;
	font-family: Georgia, "Times New Roman", Times, serif;
	/*设置字体系列*/
}

table {
	margin: auto;
	/*设置元素外边距*/
	height: 100px;
	/*设置元素高度*/
	width: 400px;
	/*设置元素宽度*/
	background-color: #55ffff;
	/*设置元素背景颜色*/
}

td {
	background-color: #aaffff;
}

.button, h1, p, td {
	text-align: center;
	/*设置元素中文本水平对齐方式：剧中*/
}

.button {
	background-color: #01d5ff;
	border: none;
	/*设置元素为无边框*/
	color:black;
	padding: 10px 30px;
	/*设置元素内边距*/
	font-size: 20px;
	margin: auto;
}

test.js文件：
function pageRedirect() {
	if (confirm("Are you sure you want to play bingo?")) {
		alert("You said yes");
		window.location = "test-2.html";
	} else {
		alert("You said no");
	}
	return false;
}
  • pageRedirect()函数使用window.location加载指定页面达到重定向目的。return false 表示停止对用户单击的处理，避免重复点击。
  • 实际上，如果html中使用一个 a 标签链接而不是按钮，链接有 href 属性指定了url，则可以使用window.location = this;直接重定向到 a 标签的 href 属性值，关键字 this 使脚本能够根据使用这个关键字的上下文将值传递给函数。在这个示例中， this 是在一个由按钮的事件触发的函数中使用的，所以 this 是一个链接对象。

但这里还是有个问题：如果我们的html页面足够大，JavaScript可能会在浏览器等不到页面加载完毕之前就被执行，如果此时 DOM 未加载完成，则JavaScript中可能就无法获取指定的DOM节点从而导致JavaScript功能失效甚至页面报错。

六，使用 JavaScript 改进链接提醒

通常来说，都希望浏览器等到页面加载完毕之前再执行JavaScript。

这可以使用window.onload() 方法待页面加载完成后再初始化其他操作。

test-1.html文件：

<!DOCTYPE html>
<html>
	<head>
		<title>Barely a script at all</title>
		<link rel="stylesheet" href="test.css">
		<script src="test.js"></script>
	</head>
	<body>
		<h1 id="myMessage">Hello, Cleveland!</h1>
		<p><button type="button" id="redirect">Click here</button> to play bingo!</p>
	</body>
</html>

test-2.html文件：

<!DOCTYPE html>
<html>
    <head>
        <title>Make Your Own Bingo Card</title>
        <link rel="stylesheet" href="test.css">
    </head>
    <body>
        <h1>Create A Bingo Card</h1>
        <table>
            <tr>
				<th>B</th>
				<th>I</th>
				<th>N</th>
				<th>G</th>
				<th>O</th>
            </tr>
			<tr>
			    <td id="square2">2</td>
			    <td id="square7">7</td>
			    <td id="free">free</td>
			    <td id="square16">16</td>
			    <td id="square21">21</td>
			</tr>
			<tr>
			    <td id="square2">2</td>
			    <td id="square7">7</td>
			    <td id="free">free</td>
			    <td id="square16">16</td>
			    <td id="square21">21</td>
			</tr>
			<tr>
			    <td id="square2">2</td>
			    <td id="square7">7</td>
			    <td id="free">free</td>
			    <td id="square16">16</td>
			    <td id="square21">21</td>
			</tr>
			<tr>
			    <td id="square2">2</td>
			    <td id="square7">7</td>
			    <td id="free">free</td>
			    <td id="square16">16</td>
			    <td id="square21">21</td>
			</tr>
        </table>
    </body>
</html>

test.css文件：

body {
	font-size: 20px;
	/*设置字体大小*/
}

h1 {
	color: #01d5ff;
	/*设置元素颜色*/
	font-size: 40px;
	font-family: Georgia, "Times New Roman", Times, serif;
	/*设置字体系列*/
}

table {
	margin: auto;
	/*设置元素外边距*/
	height: 100px;
	/*设置元素高度*/
	width: 400px;
	/*设置元素宽度*/
	background-color: #55ffff;
	/*设置元素背景颜色*/
}

td {
	background-color: #aaffff;
}

#redirect, h1, p, td {
	text-align: center;
	/*设置元素中文本水平对齐方式：剧中*/
}

#redirect {
	background-color: #01d5ff;
	border: none;
	/*设置元素为无边框*/
	color:black;
	padding: 10px 30px;
	/*设置元素内边距*/
	font-size: 20px;
	margin: auto;
}

test.js文件：

window.onload = initAll;

function initAll() {
	document.getElementById("redirect").onclick = initRedirect;
}

function initRedirect() {
	if (confirm("Are you sure you want to play bingo?")) {
		alert("You said yes");
		window.location = "test-2.html";
	} else {
		alert("You said no");
	}
	return false;
}
  • 使用window.onload() 方法等待完成页面加载后触发initAll()函数。
  • initAll()函数在id=”redirect”的元素被单击时应该调用initRedirect()函数。
  • initRedirect()函数将使用 window.location对象重定向到一个新页面。

七，使用多级条件

如果在一个条件测试中需要两个和两个以上的选择，可使用 if...else... 和 if...else if...else... 或 switch。

<!DOCTYPE html>
<html>
	<head>
		<title>Switch/Case handling</title>
		<script src="script09.js"></script>
	</head>
	<body>
		<h2>Famous Presidential Quotes</h2>
		<form action="#">
			<input type="button" id="Lincoln" value="Lincoln">
			<input type="button" id="Kennedy" value="Kennedy">
			<input type="button" id="Nixon" value="Nixon">
		</form>
	</body>
</html>

window.onload = initAll;

function initAll() {
	document.getElementById("Lincoln").onclick = saySomething;
	document.getElementById("Kennedy").onclick = saySomething;
	document.getElementById("Nixon").onclick = saySomething;
}

function saySomething() {
	switch(this.id) {
		case "Lincoln":
			alert(this.value + ": Four score and seven years ago...");
			break;
		case "Kennedy":
			alert(this.value + ": Ask not what your country can do for you...");
			break;
		case "Nixon":
			alert(this.value + ": I am not a crook!");
			break;
		default:
	}
}

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/98092.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！