javaScript笔记01

最新推荐文章于 2025-09-06 08:01:57 发布

转载最新推荐文章于 2025-09-06 08:01:57 发布 · 60 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gosaint/p/8372810.html

文章标签：

#javascript #ViewUI

本文介绍了JavaScript的三种定义方法，包括在head中直接使用script标签、通过超链接定义以及外部引入js文件的方式。针对外部引入js文件时可能出现的问题，如DOM元素未加载完成导致的获取不到元素情况，给出了调整脚本位置及使用window.onload函数的解决方案。

　　所谓勇气就是明知前方的路途充满了荆棘险阻，但还是义无反顾的的走下去。

　　1 Javasrcipt定义的三种方式

　　 ·1 head中的script脚本

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js-01</title>
    <script type="text/javascript">
        alert('hello World!');
    </script>
</head>
<body>
    你好，body!
</body>
</html>

执行顺序是先会弹出“hello World!”,然后界面显示‘你好，body!’

　　 ·2 超链接中直接定义

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js-02</title>
</head>
<body>
    <a href="javascript:alert(0)">我是js</a>
</body>
</html>

这个点击超链接就会执行弹出框；

　　 ·3 外部引入js的方式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js-03</title>
    <script type="text/javascript" src="index.js"></script>
</head>
<body>
    <div id="mydiv">this is div</div>
</body>
</html>

index.js文件很简单：

alert("你好，index.js");

但是此时会存在问题的，如果js对div标签存在一定的操作，那么会出现问题：

修改index.js文件：

alert("你好，index.js");
// 获取div的id
var id=document.getElementById("mydiv");
alert(id);

此时由于先执行Javascript脚本，但是js获取div的id时还没有执行到div的标签，那么获取的div的id就是null.此时我们可以将script定义在div的下面，或者使用window.onload（）函数来解决，此函数的功能是等待页面加载完毕之后才执行js脚本：

// 等待页面加载完毕执行js脚本
window.onload=function(){
    alert("你好，index.js");
    // 获取div的id
    var id=document.getElementById("mydiv");
    alert(id);
}

转载于:https://www.cnblogs.com/gosaint/p/8372810.html