1.内嵌javascript代码。如下所示：
<!DOCTYPE> <html> <head> <title>example</title> <script> <!-- javascript code --> </script> </head> </html>2.引入javascript文件。如下所示：
<!DOCTYPE> <html> <head> <title>example</title> <script src="example.js"></script> </head> </html>1.内嵌js代码位置
<!--<script>标签放在<head>中时--> <!DOCTYPE> <html> <head> <title>example</title> <script> <!-- javascript code --> </script> </head> </html>如果放在<head>标签里面，会先执行js代码，然后再呈现页面的内容。
<!--<script>标签放在<body>中时--> <!DOCTYPE> <html> <head> <title>example</title> </head> <body> <!-- page content --> <script> <!-- javascript code --> </script> </body> </html>如果放在<body>标签尾部，会先呈现页面的内容，再执行js代码。如果放在<body>中其他位置，则会在加载页面内容到<script>标签位置处执行js代码，再继续加载页面。
注：对于内嵌js代码，如何在页面加载之后执行js代码，常用方法如下： 1.如果js代码写在<head>标签里面，则用： window.onload=function(){<!-- js代码 -->}; 如果使用jquery，则可以用： $(document).ready(function(){<!-- js代码 -->}); 或者： $(window).load(function(){<!-- js代码 -->}); 来实现，但是这三种方法是有区别的： window.onload需要等到页面内所有元素包括图片加载完毕后才能执行，而且 window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个 。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 而且可以同时编写多个，并且都可以得到执行 。 $(window).load();也是所有元素包括图片加载完毕才能执行，而且可以编写多个。
如果js代码量很大的话，一般不建议直接内嵌js代码，因为容易造成代码冗余，而且不好维护。
2.外部js文件引入位置
<!--<script>标签放在<head>中时--> <!DOCTYPE> <html> <head> <title>example</title> <script src="example.js"></script> </head> <body> <!-- page content --> </body> </html> <!--<script>标签放在<body>中时--> <!DOCTYPE> <html> <head> <title>example</title> </head> <body> <!-- page content --> <script src="example.js"></script> </body> </html>如果在<head>标签中引入外部js文件，意味着必须等到全部js代码都被下载、解析和执行完成以后，才能开始呈现页面的内容。 如果想在页面内容被呈现之后再执行js代码，可以把js外部文件放在<body>标签尾部。
注：如果在<head>标签中引入外部js文件，而且还想在页面内容呈现之后再下载执行js代码，可以在<script>标签中增加defer="defer"属性，这个属性的用途是表明js脚本在执行时不会影响页面的构造，也就是说js脚本会被延迟到整个页面都被解析完毕后再运行。即浏览器会立即下载js代码文件，但是延迟执行。
