大家好，这是我在博客园写的第一篇博文。作为一名前端开发初学者，由于经验不足，水平有限，在做项目的过程中总会遇到这样或那样的问题，每每这时候，我都比较喜欢到博客园这里来寻求解决方案，结果也总是能找到满意的答案。人不仅要懂得获取，还应该懂得付出。因此，我今天在这里注册了一个账号，以后把自己在学习过程中积累的点点滴滴和大家一起分享一下下，还说不定也许对于那些比我晚学前端的亲们有一点点的帮助呢。我的目的很简单，那就是希望在这个平台里和大家一起学习，共同进步。其他的我就不多说了，现在直接切入正题吧，就是简单谈谈我在学习javaScript过程中比较喜欢犯下的一些错误儿，以让大家借鉴一下，免得在这些地方再次被坑。

首先，我要跟大家说说html和javascript代码的执行顺序吧。其实呢，代码的执行顺序是自上而下的。什么是自上而下的执行顺序呢？我们一起来看看下面这段代码吧，你就会知道什么是“自上而下”了！！

 <html>

     <head>

         <meta charset="utf-8"/>

         <title>

             demo1

         </title>

         <script>

             var sing = document.getElementById("startSing");

             sing.onclick = function(){

                 alert("happy birthday to you...happy birthday to you...");

             }

         </script>

     </head>

     <body>

         <input type="button" value="sing" id="startSing"/>

     </body>

 </html>

上面代码的意图是通过点击按钮"sing"，弹出一个"happy birthday to you“的窗口。但是，结果，浏览器却报错了。错误信息如下：

TypeError: sing is null

为什么会报“sing is null ”这样的错误呢，我们明明是通过id来得到startSing这个节点的dom的赋给sing的啊！sing应该是一个object才对的！！怎么会是null呢？其实道理很简单，我们前面不是说了吗？代码是自上而下执行的。当程序执行到第八行的document.getElementById("startSing")时，因为id=startSing的input节点在地15行，但在第八行之前没有id=startSing的节点，所以，得到的结果是一个null。这种错误，在项目实例开发当中是经常会碰到的。为了避开这个错误，我们应该把javascript代码放到onload这个事件函数里面去。把上面的js代码改成如下就行了。

 <script>

    window.onload=function(){

          var sing = document.getElementById("startSing");

          sing.onclick = function(){

                alert("happy birthday to you...happy birthday to you...");

            }

    }

 </script>

为什么放到onload函数里面就不会报错了呢？这是因为onload事件函数里面的代码是在整个页面加载完成之后才会执行的。也就是说，在执行里面代码时，整个页面都已经解析完了，当然，<input type="button" value="sing" id="startSing"/>这行也已经执行了。所以，就能够成功获取到了它的dom啦。

下面我们再来谈谈另外一个初学者比较容易犯错的地方吧。我们知道，要获取一个节点的dom对象有三种方法，一种同过它的id,还有一种是通过他的标签名（比如：p,div,span,h1等等），最后一种是通过name属性来获取。但是第一种方法得到的值和第二、三种是不同，第一种得到的是一个对象，第二、三种得到的是一个对象数组。比如，有下面的段代码：

<div id="box" name="box" > hello world! </div>

我们想要获取它的dom对象，现在分别用三种方法来试一下吧：

 <script>
    window.onload=function(){

     var dom1 = document.getElementById("box");//方法1:通过id；

     var dom2 = document.getElementsByName("box");//方法2:通过TagName

     var dom3 = document.getElementsByTagName("div");//方法3：通过Name

     alert("dom1是"+dom1+" " + "dom2是"+dom2+" " +"dom3是" + dom3)

    }
 </script>
 

在火狐浏览器中打开，alert的结果是：dom1是[object HTMLDivElement] dom2是[object HTMLCollection] dom3是[object NodeList]

由此可知，dom1是是一个对象，dom2是一个对象数组，dom3也是一个对象数组。一个是对象，另外两个是对象数组，那么问题就来了，比如，现在要使

<div id="box" name="box" > hello world! </div>

的背景色变成蓝色，

dom1.style.background="blue"

这种方法是正确的，结果，hello world!的背景色可以变成蓝色的。但是，以下两种方法

dom2.style.background = "blue";
dom3.style.background = "blue";

就错误了。我们刚刚已经alert过了，dom2和dom3是一个对象数组，而不是简单的一个对象。我们要指定某个对象，还要加个下标给它，只需把上面改成

dom2[0].style.background = "blue";
dom3[0].style.background = "blue";

这样就正确了。

最后，我们需要记住的是：内嵌的JavaScript代码片段的任何位置都不可以出现</script>，包括注释里的和字符串里面，如下都是会报错的：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index1</title>

    <script>

        alert("</script>");

    </script>

</head>

<body>

</body>

</html>

或者：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index1</title>

    <script>

        //这里是</script>代码

        alert("Hello World");

    </script>

</head>

<body>

</body>

</html>

好吧，时间不早了，该休息了。今天就写这么多吧。大家晚安。

javaScript初学者易错点的更多相关文章

  1. JavaScript 编程易错点整理

    Case 1: 通过getElementById("id")获得是一个DOM元素节点对象: 通过getElementsByTagName("tagName")获 ...

  2. JavaScript易错知识点整理

    前言 本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一 ...

  3. JavaScript 易错知识点整理

    本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一些ES ...

  4. JavaScript易错点转载

    前言 本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一 ...

  5. JavaScript易错知识点整理[转]

    前言 本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一 ...

  6. JavaScript易错知识点

    JavaScript易错知识点整理1.变量作用域上方的函数作用域中声明并赋值了a,且在console之上,所以遵循就近原则输出a等于2. 上方的函数作用域中虽然声明并赋值了a,但位于console之下 ...

  7. javascript中易犯的错误有哪些

    javascript中易犯的错误有哪些 一.总结 一句话总结: 比如循环中函数的使用 函数中this的指向谁(函数中this的使用) 变量的作用域 1.this.timer = setTimeout( ...

  8. 关于Verilog HDL的一些技巧、易错、易忘点（不定期更新）

    本文记录一些关于Verilog HDL的一些技巧.易错.易忘点等(主要是语法上),一方面是方便自己忘记语法时进行查阅翻看,另一方面是分享给大家,如果有错的话,希望大家能够评论指出. 关键词: ·技巧篇 ...

  9. 【经验总结】Java在ACM算法竞赛编程中易错点

    一.Java之ACM易错点 1. 类名称必须采用public class Main方式命名 2. 在有些OJ系统上,即便是输出的末尾多了一个“ ”,程序可能会输出错误,所以在我看来好多OJ系统做的是非 ...

随机推荐

  1. python 循环技巧

    原文地址:http://docs.pythontab.com/python/python3.4/datastructures.html#tut-tuples 在字典中循环时,关键字和对应的值可以使用  ...

  2. boost之bind

    bind1st bind2nd在stl里面有具体的实现,只是只能绑定两个参数. boost里面的bind使用bind(Fun f,A1 a1,A2,a2...)产生一个对象,这个对象可以有占位符,可以 ...

  3. poj 2711 Leapin' Lizards && BZOJ 1066: [SCOI2007]蜥蜴 最大流

    题目链接:http://poj.org/problem?id=2711 题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1066 Your p ...

  4. Leetcode#174 Dungeon Game

    原题地址 典型的地图寻路问题 如何计算当前位置最少需要多少体力呢?无非就是在向下走或向右走两个方案里做出选择罢了. 如果向下走,看看当前位置能提供多少体力(如果是恶魔就是负数,如果是草药就是正数),如 ...

  5. JAVA算法系列 冒泡排序

    java算法系列之排序 手写冒泡 冒泡算是最基础的一个排序算法,简单的可以理解为,每一趟都拿i与i+1进行比较,两个for循环,时间复杂度为 O(n^2),同时本例与选择排序进行了比较,选择排序又叫直 ...

  6. 从程序员到CTO的Java技术路线图 （转自安卓巴士）

    在技术方面无论我们怎么学习,总感觉需要提升自已不知道自己处于什么水平了.但如果有清晰的指示图供参考还是非常不错的,这样我们清楚的知道我们大概处于那个阶段和水平. Java程序员 高级特性 反射.泛型. ...

  7. [转]日期格式化（yyyy-MM-dd）中，为什么 M 多大写？

    最近犯了个可傻逼的错误,格式化年月日的时候不小心将yyyy-MM-dd写成YYYY-MM-dd,导致格式化结果中年不正确. 看看知乎上的说法 问题: http://www.zhihu.com/ques ...

  8. 解决IE不支持position:fixed问题

    #box { /* 非IE6浏览器使用固定元素 */ position:fixed; top:0; left:0; /* IE6改为绝对定位,并通过css表达式根据滚动位置更改top的值 */ _po ...

  9. HDU4966 GGS-DDU(最小树形图)

    之前几天想着补些算法的知识,学了一下最小树形图的朱刘算法,不是特别理解,备了份模板以备不时之需,想不到多校冷不丁的出了个最小树形图,没看出来只能表示对算法不太理解吧,用模板写了一下,然后就过了.- - ...

  10. POJ3469 Dual Core CPU(最小割)

    题意:给你n个模块,每个模块在A核花费为ai,在B核跑花费为bi,然后由m个任务(ai,bi,wi),表示如果ai,bi不在同一个核上跑,额外的花费为wi,求最小的花费. 一开始想的时候以为是费用流, ...