Jquery第二课 Javascript基础

2014/12/26

戴维营教育原创文章，转载请注明出处。我们的梦想是做最好的iOS开发培训！

基础知识

网页由三个部分组成：HTML、CSS和JavaScript。它们分别完成不同的功能，其中HTML描述页面内容、CSS负责内容的展示、JavaScript添加交互功能和动态效果。三者一起组成一个完整的Web页面。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>长沙戴维营教育jQuery教程 第二课</title>

        <!-- CSS -->
        <style>
            h1 {
                font-size: 14px;
                color: hotpink;
            }

            button {
                color: red;
            }
        </style>
    </head>
    <body>
        <h1>jQuery教程 第二课</h1>
        <button>点击这里</button>

        <!-- Javascript -->
        <script type="text/javascript">
            var button = document.querySelector("button");
            button.addEventListener("click", function(event){
                alert("jQuery教程 第二课");
            }, false);
        </script>
    </body>
</html>

开发工具

这三个部分都不需要编译器的支持，因此也不需要特别的开发工具。我们使用文本编辑器、浏览器就可以进行开发和调试了。当然，市面上也有许多集成开发环境，甚至可以进行可视化编辑。推荐使用下面的组合进行开发：

编辑器：Sublime Text 2/3、Vim等。
浏览器：Firefox、Chrome、Safari、IE等。
调试工具：浏览器自带的调试工具。

编写JavaScript代码

我们可以通过三种方式往网页中添加JavaScript代码：

引入外部代码。我们可以将JavaScript代码写在单独的文件中，然后通过<script>标签将它包含到一个网页中。这样可以使得代码结构更加清楚，并且能够提高代码的可重用性。JavaScript文件允许被浏览器缓存在本地，因此可以减少页面的加载时间。

<!-- JavaScript文件的扩展名为”.js“ -->
<script src="/path/to/example.js"></script>

内嵌JavaScript代码。通过<script>标签可以直接在网页中编写JavaScript代码。

<!-- 内嵌JavaScript代码 -->
<script>
    alert("戴维营教育jQuery教程 第二课");
</script>

最后一种方式是将JavaScript代码作为HTML元素的事件处理属性，但是不建议这么使用。

<!-- 事件处理属性 -->
<a href="javascript:alert('戴维营教育jQuery教程');">点击这里!</a>
<button onClick="alert('第二课');">再点这里!</button>

位置与功能

我们可以将JavaScript代码放在任意位置，但是如果它操作了HTML元素的话，需要保证代码执行的时候这些元素已经在页面上存在了。下面是一个常见的错误：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            //在元素加载前就进行访问，会导致异常
            var title = document.getElementById("title");
            console.log(title);
        </script>
    </head>
    <body>
        <h1 id="title">戴维营教育jQuery教程 第二课</h1>
    </body>
</html>

由于网页一般是从上到下进行加载和执行的，上面的Javascript代码会在<body>加载之前执行。我们只要将JavaScript代码移动到h1之后就可以修复了。

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <h1 id="title">戴维营教育jQuery教程 第二课</h1>
        <script type="text/javascript">
            var title = document.getElementById("title");
            console.log(title);
        </script>
    </body>
</html>

戴维营学院（高级开发视频）: http://v.diveinedu.com