javascript101之代码运行_js code 101-CSDN博客

外部代码

第一个推荐建议是在外部文件（以.js为扩展名）中编写代码，然后在我们的网页中使用一个HTML <SCRIPT>标签的src属性指向该文件的位置。如果你想在其他地方使用它，使javascript独立在一个文件中可以减少代码的重复。这样可使浏览器能够在远端的客户计算机上缓存该文件，减少页面加载时间。

<!-- Code is written in a .js file, then included via the script tag src attribute. -->
<script src="/path/to/example.js"></script>

内联代码

第二个可选是在网页中直接内联代码。这里也是使用HTML <SCRIPT>标签来实现，但代码的src属性指向到一个文件，而不是放在标签之间。虽然也有使用该选择的例子，但大部分情况下都是在一个单独的文件中保存代码，如上所述。

<!-- Embed code directly on a web page using script tags. -->
<script>
alert( "Hello World!" );
</script>

属性

最后一个选择是使用HTML元素的事件处理器。这个方法最好不要使用。

<!-- Inline code directly on HTML elements being clicked. -->
<a href="javascript:alert('Hello World');">Click Me!</a>
<button onClick="alert('Good Bye World');">Click Me Too!</a>

代码放置

前面的两个选项中的代码放置是重要的，可以根据不同的情况而有所不同。如果你的javascript代码不访问页面上的元素，你可以安全地放置脚本在关闭HTML中的标签<head>之前。相反，如果你需要访问网页的元素，那你要确保在你的javascript代码执行之时，你所访问的元素在页面上存在。下面的例子中可以看出，这种常见的陷阱。将被执行找到元素ID“hello-world”的脚本，在文档元素定义之前将执行。

<!-- Attempting to access an element too early will have unexpected results. -->
<!doctype html>
<html>
<head>
<script>
var title = document.getElementById( "hello-world" );
console.log( title );
</script>
</head>
<body>
<h1 id="hello-world">Hello World</h1>
</body>
</html>

一种常见的模式移动脚本到页面的底部，在HTML标签<body>关闭之前。这样可以确保在代码执行之时元素已经定义。

<!-- Moving the script to the bottom of the page will -->
<!-- make sure the element exists. -->
<!doctype html>
<html>
<head>
</head>
<body>
<h1 id="hello-world">Hello World</h1>
<script>
var title = document.getElementById( "hello-world" );
console.log( title );
</script>
</body>
</html>