javaScript初学者易错点
大家好,这是我在博客园写的第一篇博文。作为一名前端开发初学者,由于经验不足,水平有限,在做项目的过程中总会遇到这样或那样的问题,每每这时候,我都比较喜欢到博客园这里来寻求解决方案,结果也总是能找到满意的答案。人不仅要懂得获取,还应该懂得付出。因此,我今天在这里注册了一个账号,以后把自己在学习过程中积累的点点滴滴和大家一起分享一下下,还说不定也许对于那些比我晚学前端的亲们有一点点的帮助呢。我的目的很简单,那就是希望在这个平台里和大家一起学习,共同进步。其他的我就不多说了,现在直接切入正题吧,就是简单谈谈我在学习javaScript过程中比较喜欢犯下的一些错误儿,以让大家借鉴一下,免得在这些地方再次被坑。
首先,我要跟大家说说html和javascript代码的执行顺序吧。其实呢,代码的执行顺序是自上而下的。什么是自上而下的执行顺序呢?我们一起来看看下面这段代码吧,你就会知道什么是“自上而下”了!!
1 <html> 2 <head> 3 <meta charset="utf-8"/> 4 <title> 5 demo1 6 </title> 7 <script> 8 var sing = document.getElementById("startSing"); 9 sing.onclick = function(){ 10 alert("happy birthday to you...happy birthday to you..."); 11 } 12 </script> 13 </head> 14 <body> 15 <input type="button" value="sing" id="startSing"/> 16 </body> 17 </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.οnlοad=function(){ var dom1 = document.getElementById("box");//方法1:通过id;var dom2 = document.getElementsByName("box");//方法2:通过TagNamevar 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>
好吧,时间不早了,该休息了。今天就写这么多吧。大家晚安。
转载于:https://www.cnblogs.com/yugege/p/4136265.html
javaScript初学者易错点相关推荐
- 【Javascript】易错点 function(e)中的e代表什么意思?
代表形参 function fn(e){//这里的e 是形参,接收调用方法的值,这里e可以理解指代elementconsole.log(e); // 'help' } fn('help'); 代表事件 ...
- JavaScript 易错知识点整理
前言 本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一 ...
- JavaScript易错知识点整理
前言 本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一 ...
- java犯的小错误_[Java教程]十个JavaScript中易犯的小错误,你中了几枪?
[Java教程]十个JavaScript中易犯的小错误,你中了几枪? 0 2015-06-01 12:00:19 序言 在今天,JavaScript已经成为了网页编辑的核心.尤其是过去的几年,互联网见 ...
- javascript中易犯的错误有哪些
javascript中易犯的错误有哪些 一.总结 一句话总结: 比如循环中函数的使用 函数中this的指向谁(函数中this的使用) 变量的作用域 1.this.timer = setTimeout( ...
- 关于Verilog HDL的一些技巧、易错、易忘点(不定期更新)
本文记录一些关于Verilog HDL的一些技巧.易错.易忘点等(主要是语法上),一方面是方便自己忘记语法时进行查阅翻看,另一方面是分享给大家,如果有错的话,希望大家能够评论指出. 关键词: ·技巧篇 ...
- 10道C++输出易错笔试题收集
10道C++输出易错笔试题收集 下面这些题目都是我之前准备笔试面试过程中积累的,大部分都是知名公司的笔试题,C++基础薄弱的很容易栽进去.我从中选了10道简单的题,C++初学者可以进来挑战下,C++大 ...
- javascript初学者_针对JavaScript初学者的调试技巧和窍门
javascript初学者 by Priyanka Garg 由Priyanka Garg My intended audience for this tutorial is beginner pro ...
- php易错,PHP学习1:几种常见数据类型及其易错点
PHP学习1:几种常见数据类型及其易错点 (本篇随笔就是关于几种常见数据类型及其易错点,适合初学者观看,并未包含全部九种数据类型,且通篇以代码和注释的形式来呈现.) /* 双引号字符串和单引号字符串之 ...
最新文章
- 关于Python函数的一些问题
- QPW 点评阅读日志表(tf_appraise_read_log)
- Standard C++ Episode 7
- 表格存储TableStore全新升级,打造统一的在线数据存储平台!
- wxpython使用_wxPython学习笔记(二)
- JMeter压力测试和性能优化
- 等级保护三级基本要求
- 【STC15】使用PCA0和PCA1做的模拟串口
- 如何正确的使用国产杀毒软件
- 小白如何从零开始运营微信公众号?
- 干货丨语雀Baklib在产品帮助手册制作过程中的实际亲测
- 第127讲:Hadoop集群管理之安全模式解析及动手实战学习笔记
- 如何使用 Docker 部署一个私有化的为知笔记
- 蓝桥杯B组初赛2019
- 对JAVA多态的理解
- NMOS与PMOS的导通条件与使用方法
- 美国计算机科学专业学校排名,美国计算机科学专业排名
- mysql8 设置binlog过期时间
- 香港网络新危机:黑客入侵网上银行账户买卖股票
- 磁盘问题--系统盘出现只读现象( read-only file system)