JS基础-背景简介及HTML中实现

一。背景简介
在数百万张页面中,JavaScript 被用来改进设计、验证表单、检测浏览器、创建cookies,等等等等。JavaScript 是因特网上最流行的脚本语言,并且可在所有主要的浏览器中运行,
比方说 Internet Explorer、 Mozilla、Firefox、Netscape、和 Opera。

什么是 JavaScript?

        * JavaScript 被设计用来向 HTML 页面添加交互行为。
        * JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言)。
        * JavaScript 由数行可执行计算机代码组成。
        * JavaScript 通常被直接嵌入 HTML 页面。
        * JavaScript 是一种解释性语言(就是说,代码执行不进行预编译)。
        * 所有的人无需购买许可证均可使用 JavaScript。

Java 和 JavaScript 是相同的吗?

不同!在概念和设计方面,Java 和 JavaScript 是两种完全不同的语言。
Java(由SUN公司开发)很强大,同时也是更复杂的编程语言,就像同级别的 C 和 C++。

JavaScript 能做什么?
JavaScript 为 HTML 设计师提供了一种编程工具
HTML 创作者往往都不是程序员,但是 JavaScript 却是一种只拥有极其简单的语法的脚本语言!几乎每个人都有能力将短小的代码片断放入他们的 HTML 页面当中。
JavaScript 可以将动态的文本放入 HTML 页面
    类似于这样的一段 JavaScript 声明可以将一段可变的文本放入 HTML 页面:document.write("<h1>" + name + "</h1>")
JavaScript 可以对事件作出响应
    可以将 JavaScript 设置为当某事件发生时才会被执行,例如页面载入完成或者当用户点击某个 HTML 元素时。
JavaScript 可以读写 HTML 元素
    JavaScript 可以读取及改变 HTML 元素的内容。
JavaScript 可被用来验证数据
    在数据被提交到服务器之前,JavaScript 可被用来验证这些数据。
JavaScript 可被用来检测访问者的浏览器
    JavaScript 可被用来检测访问者的浏览器,并根据所检测到的浏览器,为这个浏览器载入相应的页面。
JavaScript 可被用来创建 cookies
    JavaScript 可被用来存储和取回位于访问者的计算机中的信息。

真实的名称是 ECMAScript

JavaScript 的正式名称是 "ECMAScript"。这个标准由 ECMA 组织发展和维护。
ECMA-262 是正式的 JavaScript 标准。这个标准基于 JavaScript (Netscape) 和 JScript (Microsoft)。
Netscape (Navigator 2.0) 的 Brendan Eich 发明了这门语言,从 1996 年开始,已经出现在所有的 Netscape
和 Microsoft 浏览器中。ECMA-262 的开发始于 1996 年,在 1997 年 7 月,ECMA 会员大会采纳了它的首个版本。
在 1998 年,该标准成为了国际 ISO 标准 (ISO/IEC 16262)。
这个标准仍然处于发展之中。

二。如何实现Javascript

HTML 的 <script> 标签用于把 JavaScript 插入 HTML 页面当中。

实例

生成文本
如何在页面中写文本
生成普通文本和标签
如何使用 JavaScript 在页面中写入普通文本和标签。

如何把 JavaScript 放入 HTML 页面

<html>
<body>
<script type="text/javascript">
document.write("Hello World!");//这句话其实已经隐藏了HTML DOM的概念了,
//即document是根节点,write是它的一个方法。
</script>
</body>
</html>

上面的代码会在 HTML 页面中产生这样的输出:

Hello World!

实例解释:

如果需要把一段 JavaScript 插入 HTML 页面,我们需要使用 <script> 标签(同时使用 type 属性来定义脚本语言)。

这样,<script type="text/javascript"> 和 </script> 就可以告诉浏览器 JavaScript 从何处开始,到何处结束。

<html>
<body>
<script type="text/javascript">
...
</script>

</body>
</html>

document.write 字段是标准的 JavaScript 命令,用来向页面写入输出。

把 document.write 命令输入到 <script type="text/javascript">与</script>之间后,浏览器就会把它当作一条 JavaScript 命令来执行。这样浏览器就会向页面写入 "Hello World!"。

<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>

</body>
</html>

TIY

注意:如果我们不使用 <script> 标签,浏览器就会把 document.write("Hello World!") 当作纯文本来处理,也就是说会把这条命令本身写到页面上。

TIY

如何与老的浏览器打交道(很重要)

那些不支持 JavaScript 的浏览器会把脚本作为页面的内容来显示。为了防止这种情况发生,我们可以使用这样的 HTML 注释标签:

<html>
<body>
<script type="text/javascript">
<!--
document.write("Hello World!");
//-->
</script>
</body>
</html>

注释行末尾的两个正斜杠是 JavaScript 的注释符号,它会阻止 JavaScript 编译器对这一行的编译。


三。如何调用Javascript

当页面载入时,会执行位于 body 部分的 JavaScript。

当被调用时,位于 head 部分的 JavaScript 才会被执行。

实例

head 部分
包含函数的脚本位于文档的 head 部分。这样我们就可以确保在调用函数前,脚本已经载入了。
body 部分
执行位于 body 部分的脚本。
外部 JavaScript
如何访问外部脚本。

在哪里放置 JavaScript

页面中的脚本会在页面载入浏览器后立即执行。我们并不总希望这样。有时,我们希望当页面载入时执行脚本,而另外的时候,我们则希望当用户触发事件时才执行脚本。

位于 head 部分的脚本:

当脚本被调用时,或者当事件被触发时,脚本就会被执行。当你把脚本放置到 head 部分后,就可以确保在需要使用脚本之前,它已经被载入了。

<html>
<head>
<script type="text/javascript">
....
</script>

</head>
....

位于 body 部分的脚本:

在页面载入时脚本就会被执行。当你把脚本放置于 body 部分后,它就会生成页面的内容。

<html>
<head>
</head>

<body>
<script type="text/javascript">
....
</script>

</body>
</html>

在 body 和 head 部分的脚本:

你可以在文档中放置任何数量的脚本,因此你既可以把脚本放置到 body,又可以放置到 head 部分。

<html>
<head>
<script type="text/javascript">
....
</script>

</head>

<body>
<script type="text/javascript">
....
</script>

</body>
</html>

使用外部 JavaScript!!!

有时,你也许希望在若干个页面中运行 JavaScript,同时不在每个页面中写相同的脚本。

为了达到这个目的,你可以将 JavaScript 写入一个外部文件之中。然后以 .js 为后缀保存这个文件。

注意:外部文件不能包含 <script> 标签。

然后把 .js 文件指定给 <script> 标签中的 "src" 属性,就可以使用这个外部文件了:

<html>
<head>
<script src="xxx.js">....</script>
</head>
<body>
</body>
</html>

提示:您可以把 .js 文件放到网站目录中通常存放脚本的子目录中,这样更容易管理和维护。


四。Javascript语句执行顺序

JavaScript 是由浏览器执行的语句序列。

JavaScript 语句

JavaScript 语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。

这个 JavaScript 语句告诉浏览器向网页输出 "Hello world":

document.write("Hello world");

通常要在每行语句的结尾加上一个分号。大多数人都认为这是一个好的编程习惯,而且在 web 上的 JavaScript 案例中也常常会看到这种情况。

分号是可选的(根据 JavaScript 标准),浏览器把行末作为语句的结尾。正因如此,常常会看到一些结尾没有分号的例子。注释:通过使用分号,可以在一行中写多条语句。

JavaScript 代码

JavaScript 代码是 JavaScript 语句的序列。

浏览器按照编写顺序依次执行每条语句。

本例向网页输出一个标题和两个段落:

<script type="text/javascript">
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
</script>

TIY

JavaScript 代码块

JavaScript 可以分批地组合起来。

代码块以左花括号开始,以右花括号结束。

代码块的作用是一并地执行语句序列。

本例向网页输出一个标题和两个段落:

<script type="text/javascript">
{
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
}
</script>

TIY

上例的用处不大。仅仅演示了代码块的使用而已。通常,代码块用于在函数或条件语句中把若干语句组合起来(比方说如果条件满足,就可以执行这个语句分组了)

转载于:https://www.cnblogs.com/happyforev1/articles/1644014.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值