在html中键入javascript代码

最新推荐文章于 2024-06-10 20:53:57 发布

hardyantelope

最新推荐文章于 2024-06-10 20:53:57 发布

阅读量958

点赞数

文章标签： javascript html

本文链接：https://blog.csdn.net/ysc612/article/details/48414079

版权

1、将代码段直接写入html文档

将代码写于script标签中，置于head标签内或者body标签内：

<head>
<script type="text/javascript">
代码段
</script>
</head>

或者

<span style="font-size:12px;"><body>
<script type="text/javascript">
代码段
</script>
</body></span>

type属性表示脚本类型，这种方式只能作用于一个html文件中，效率低。

2、将代码段写入外部 .js 文件，然后在html文档中引入

将代码存于外部js文件中，然后再html文件中引用：

<head>
<script type="text/javascript" src="xxx.js"></script>
</head>

或者

<body>
<script type="text/javascript" src="xxx.js"></script>
</body>

src属性指出js脚本文件路径，这种方式可以在多个页面重复用一个脚本。

3、script插入位置对效果的影响

3.1将脚本插在head标签内

head标签是前于body标签处理的，在head标签的所有文件加载完前是不能进行body内容的展示和渲染。如果js代码较多、文件较大或者数量较多时需要花很长时间等待。在head部分的脚本语句在加载时会被执行，而函数会在被调用时执行。很可能在执行脚本的时候，页面的DOM树还没加载完成，从而导致脚本运行错误。这里使用《DOM编程艺术》里的一个例子加以说明：

function popUp(Url)
{
window.open(Url,"baidu","width=320,height=480");
}

var link = document.getElementsByTagName("a");
for(var i=0;i<link.length;i++)
{
    if(link[i].getAttribute("class")=="popup"){
       link[i].οnclick= function() {
         popUp(this.getAttribute("href"));
         return false;
       }
   }
}

如果这段脚本放在head标签里，那么第一句将在body被加载之前执行，此时body中的"a"标签还未被加载，程序会出错。