JavaScript 介绍 & 嵌入HTML

最新推荐文章于 2024-04-02 02:00:00 发布

moveofgod

最新推荐文章于 2024-04-02 02:00:00 发布

阅读量1.1k

点赞数

分类专栏： JavaScript 文章标签： javascript 脚本 xhtml 浏览器 html exception

本文链接：https://blog.csdn.net/moveofgod/article/details/7662258

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1. JavaScript 包含 ( ECMAScript , DOM , BOM ) 3 个部分

ECMAScript : ECMAScript 是语言基础, 它与WEB没有依赖关系, 换句话它可以运行在别的环境, 并分WEB宿主环境, 同时WEB宿主环境会给JavaScript提供一些额外的东西.

文档对象模型(DOM) : 是一个API接口, DOM把整个页面映射为一个多层节点结构,页面的每个组成部分都是某种类型的节点, 这些节点又包含着不同类型的数据, 通过DOM创建的这个表示文档的树型图,开发人员获得了控制页面结构和内容的主动权。借助DOM提供的API，开发人员可以轻松的删除，添加，替换或修改任何节点。

dom1 : 映射文档结构.
dom2 : 扩充dom1, 鼠标和拥护界面事件, 而且增加了对CSS的支持.等等.

dom3 : 是对bom2扩展.

浏览器对象模型(BOM) : 通过BOM可以控制浏览器显示的页面以外的部分，提供与浏览器交互的方法的和接口。

2. 如何在HTML中嵌入JavaScript

a. 直接嵌入 <script> 标签, 在使用<script>嵌入JavaScript代码时，记住不要在代码中的任何地方出现"</script>"，否则解释器会认为是结束JavaScript代码,例如你写alert("</script>") 这是不对的,可以写成 alert("</src" + "ipt>") ,因为javascript中的引号内是可以使用HTML代码的, 所以......

b. 如果是JavaScript脚本在页面以外, 则可以指定文件, 例如 <script type = "text/javascript" src = "example.js"/> , 需要注意的是, 带有src 的 <script>标签中不能在有JavaScript语句. (这种方法好 ) ( 容易维护, 可缓存(两个页面使用同一个javascript代码,只需要加载一次),外部文件语法相同,不用估计宿主)

解析方法:位于外部区域中的代码也会被加载和解析, 就像这些代码位于加载它们的页面中一样。因为JavaScript属于解释程序，所以如果代码有“问题”，则肯定会导致”网页“很慢。html5有了新的特性，async支持异步脚本解析。异步脚本解析只支持外部脚本。

脚本的摆放位置很讲究, 如果将所有的JavaScript脚本和CSS脚本都放在<head>中,则表示需要所有的脚本就解析OK以后, 才会呈现网页内容(只有看到<body>标签才会真正呈现网页内容, 所以推荐将所有的脚本放在<body>标签中的最后,</body>前, 这样就会先呈现内容,再解析脚本, defer这个属性的作用相同,都是延迟解析,但是不是所有的浏览器都支持defer.

XHTML中使用方法 <script type="text/javascript">

//CDATA区域是指所有的XHTML都不检查此区域的内容, 如果是不兼容XHTML则这段会被理解为注释

</script>

老版本的浏览器, 不支持javascript时, 需要把javascript语句写在HTML的注释中

<html>

<body>

<!--

document.write("hello world!" )

// --> -->这句话即是 html注释的后半部分, 又是javascript 的注释

</script>

</body>

</html>

3.javascript位置

1.head 中 , 在head中的javascript代码会被加载, 但是不会直接执行, 等到调用时, 会被执行.

2.body 中, 在 body中的javascript代码会象HTML语言一样, 被直接加载和执行.

3.外部文件, 可以使用外部文件加载方式.

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

<body>

!-- 这放内容

< script> // 待所有HTML全部执行完后再加载script代码, 这样, 不影响打开html网页的时间

</body>

4.javascript消息框

1. alert( "Hello,world!" ) ;

2. confirm("Confirm") ;

3. prompt("input" , "default") ;

4.For ... in 语法

For...In 声明用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）

 <html>
<body>

<script type="text/javascript">
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"

for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
</script>

</body>
</html>