html入门教程(初学者)-使用JavaScript扩展HTML - 书目录

html入门教程(初学者)-使用JavaScript扩展HTML

使用JavaScript扩展HTML

<!DOCTYPE html>
<html>
<head>
<title>HTML and JavaScript</title>
</head>
<body>
	<p onclick="JavaScript:alert('Hey thanks!');">Click me!</p>
</body>
</html>

以上是HTML文档中JavaScript的基本示例。当你点击<p>元素的内容时,会运行一些JavaScript。

什么是JavaScript?

JavaScript是一种可用于扩展HTML文档的脚本语言。它使用编程概念,如条件语句,循环和函数来提供潜在的复杂应用程序。

JavaScript允许你为你的网页添加交互性。使用JavaScript,您可以创建下拉菜单,为表单添加验证,显示日期等等。

为什么使用JavaScript?

JavaScript可以用于任何不能单独由HTML提供的功能。尽管在很多方面它可以用来代替 HTML,但通常使用HTML来处理HTML所能做的事情通常会更好。换句话说,如果HTML无法执行,只能使用JavaScript。

以下是JavaScript可以派上用场的一些例子:

  • 高级菜单(例如,下拉菜单,滑出菜单等)。
  • 客户端表单验证。确保用户在提交给服务器之前正确填写了表单。
  • 设置Cookie。这可以帮助您的网站“记住”其用户的偏好,或他们在上次访问期间查看的页面等。
  • AJAX应用程序。您可以使用客户端JavaScript与服务器端脚本进行通信,以便根据用户的选择从数据库提取数据。页面的单个部分可以更新而不需要刷新整个页面(当从服务器提取数据时通常需要完成)。例如,如果用户在表单上选择自己的国家,则可以使用JavaScript来动态填充该表单地区只有来自所选国家的区域。该地区 数据可能来自服务器上的数据库。
  • 显示广告。大多数广告网络向发布商提供一段JavaScript代码,他们可以添加到他们的页面以显示来自广告网络的广告。广告网络可以根据用户的偏好,以前访问过的网站,以前点击过的广告,过去搜索过的内容等等,为用户展示最合适的广告。当然,假设广告网络可以访问该数据。像Google这样的大型网络通常拥有这些信息,因为它们在网络上广泛存在。
  • 网页分析。可以将JavaScript代码添加到您的网站,以便跟踪访问者在您网站上的动作,例如访客人数,访问的网页,他们在您的网站上花费的时间等。
  • 以及更多…

将JavaScript与HTML集成

有三种主要的方法可以将JavaScript整合到HTML文档中; 内联,嵌入和外部。

一致

在上面的例子中,我们将Javascript直接放置在HTML元素中。我们使用onclick事件处理程序内容属性来执行此操作,如下所示:

<p onclick="JavaScript:alert('Hey thanks!');">Click me!</p>

嵌入式

您也可以在<script>标签之间放置JavaScript 。你可以写多行JavaScript代码,只要它被<script>标签包围,它就会运行(只要它没有任何错误!)。

使用这种方法,我们可以创建自己的函数,然后将JavaScript代码放入该函数中。该功能在特定事件触发前不会运行。我们通过使用事件处理程序内容属性(例如,onclick事件处理程序)来选择该事件。

在下面的代码示例中,我们放置一个JavaScript函数<head>并从HTML代码中调用该函数。

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<script type="text/javascript">
	function myFunction() {
		// JavaScript goes here...
	}
</script>
</head>
<body>
	<p onclick="JavaScript:myFunction();">Click me!</p>
</body>
</html>

外部JavaScript文件

HTML还提供链接到外部JavaScript文件的功能(而不是将代码包含在HTML文档中)。这样,您可以将所有JavaScript代码放入不同的文件中(通常使用.js扩展名)。这使您可以将JavaScript代码与HTML代码分开,并且可以节省HTML文档时间过长。通常,您的HTML文档越长,更新就越困难。

使用外部JavaScript文件的另一个好处是浏览器通常会缓存外部文件。换句话说,浏览器会在本地保存一份文件的副本,并且每次用户从您的网站请求另一个页面(假设这些页面也链接到相同的JavaScript文件)时,它不需要再次下载它。这节省了带宽,并且可以为访问多个页面的访问者以及返回访问者的页面加速。这是因为JavaScript文件仍然保存在本地浏览器中 – 每次访问您网站上的网页时都不需要下载它。

现在,如果所有JavaScript代码都嵌入到HTML文档中(即不在外部JavaScript文件中),则每当用户访问您网站上的新页面时,所有JavaScript都需要再次下载。如果你有很多JavaScript,这可能会相当大地增加页面下载时间。

话虽如此,有时候将JavaScript直接嵌入到HTML中可能会更好地提高性能。如果您有许多外部JavaScript文件,则尤其如此。每个需要下载的外部文件都可以为下载添加更多时间。

事件处理程序内容属性

无论您使用哪种方法,您几乎总是会以同样的方式触发JavaScript; 使用事件处理程序内容属性。

这些是您的HTML代码和JavaScript代码之间的联系。它们使您能够精确指定JavaScript运行的时间,而不是在页面加载后立即运行。也就是说,实际上您可能希望在页面加载后立即运行一些JavaScript。这可以。你也可以那样做。只是这样,在大多数情况下,你只需要一个脚本运行一个给定的事件(就像用户点击一个元素等)。

客户端与服务器端

JavaScript通常在客户端运行,它在用户的浏览器(或其他用户代理)中运行。这意味着JavaScript代码会下载一次,当用户请求页面时,它会从用户那边运行。虽然它只下载一次,但它可以在用户会话中多次运行。脚本的不同部分可能会被触发,具体取决于用户在会话期间做了些什么。

这与在服务器端运行的脚本形成对比。服务器端脚本不会下载到用户的计算机上。相反,它运行在服务器上。服务器端脚本语言的例子包括PHP,ColdFusion,Python,ASP。实际上,JavaScript也可以在服务器上运行,但它是最常用的客户端。

与服务器端脚本相比,客户端脚本倾向于更快更快地响应。这是因为不需要像服务器端脚本所需要的那样调用服务器。客户端脚本在浏览器中运行,浏览器立即响应。调用服务器端脚本通常会感觉较慢(即使服务器端脚本在服务器上运行得很快),因为客户端和服务器之间的延迟 – 用户的请求必须通过Internet传输到服务器,然后一次脚本已经在服务器上运行,结果必须通过互联网传回给用户。虽然这可能只需要一秒钟左右,但秒钟可能会感觉很长时间 – 特别是当客户端脚本通常会在几毫秒内响应时。

尽管客户端脚本有好处,但服务器端脚本是Web开发的重要组成部分。大多数现代网站将结合使用客户端脚本和服务器端脚本。服务器端脚本可以处理表单,查询数据库,实施安全措施,以及更多你不会(和/或不能)在客户端执行的操作。

但是,我们不要超越自己。从这个页面中要记住的主要事情是,您可以使用客户端JavaScript轻松扩展HTML文档。而且HTML通过<script>元素和 事件处理程序的内容属性来实现。