快速入门
JavaScript 代码可以直接嵌在网页的任何地方,不过通常我们都把JavaScript代码放到<head>
中:
<html>
<head>
<script>
alert('Hello, world');
</script>
</head>
<body>
...
</body>
</html>
由<script>...</script>
包含的代码就是JavaScript代码, 它将直接被浏览器执行。
第二种方式是将JavaScript代码放到一个单独的.js
文件,然后再HTML中通过<script src="..."></script>
引入这个文件:
<html>
<head>
<script src="/static/js/abc.js"></script>
</head>
<body>
...
</body>
</html>
这样,/static/js/abc.js
就会被浏览器执行。
把JavaScript代码放入一个单独的.js
文件中更利于维护代码,并且多个页面可以各自引用同一份.js
文件。
可以在同一个页面中引入多个.js
文件,还可以在页面中多次编写<script> js代码... </script>
,浏览器按照顺序依次执行。
有时候,你会看到<script>
标签还设置了一个<type>
属性:
<script type="text/javascript">
...
</script>
但这是没有必要的,因为默认的type
就是JavaScript,所以不必显式地把type
指定为JavaScript。
如何运行 JavaScript
要让浏览器运行JavaScript,必须先要有一个HTML页面,在HTML页面中引入JavaScript,然后,让浏览器加载该HTML页面,就可以执行JavaScript代码。
调试
俗话说得好,“工欲善其事,必先利其器。”,写JavaScript的时候,如果期望显示ABC
,结果却显示XYZ
,到底代码哪里出了问题?不要抓狂,也不要泄气,作为小白,要坚信:JavaScript本身没有问题,浏览器执行也没有问题,有问题的一定是我的代码。
如何找出问题代码,这就需要调试。
怎么在浏览器中调试JavaScript代码呢?
- 首先,你需要安装Google Chrome浏览器
- 安装后,随便打开一个网页,然后点击菜单“查看(View)”-“开发者(Developer)”-“开发者工具(Developer Tools)”,浏览器窗口就会一分为二,下方就是开发者工具:
先点击“控制台(Console)“,在这个面板里可以直接输入JavaScript代码,按回车后执行。
要查看一个变量的内容,在Console中输入console.log(a);
,回车后显示的值就是变量的内容。
关闭Console请点击右上角的“×”按钮。请熟练掌握Console的使用方法,在编写JavaScript代码时,经常需要在Console运行测试代码。
如果你对自己还有更高的要求,可以研究开发者工具的“源码(Sources)”,掌握断点、单步执行等高级调试技巧。
摘自
廖雪峰的官方网站