【读书札记】《JavaScript DOM编程指南》

对于Javascript的认识是来自于2011年夏天去实训基地做的一个网页项目,当时认为JavaScript是不是Java的一个派别语言什么的,老师那时候教我们调用了一些Javascript的方法。当时对这个语言的最初的印象就是会调用方法大致能懂就行了,没有深究。直到今年年初去面试几家企业,问我会不会使用Javascript,我说就调调几个方法就好了~ 
 当时瞬间就直到无地自容了。于是将这本JavaScript的电子书看了下,写下相关的读书札记,也希望能让和我有着对Javascript误解的人能够体会学习JavaScript的乐趣。

之所以这本书是JavaScript DOM 编程,必将和DOM扯上关系,DOM就是一个树形结构,很多文件都是这种类型,如xml文件,我们可以利用DOM,SAX解析。

下图展示了一个简单的html代码和树形结构模型:

之后我们就可以利用JS对相应的节点进行操作了,

如根据Id来拿取相应节点 var left  = document.getElementById("left");  以后进行验证就可以利用了。

除了对DOM进行良好的支持,我们还可以利用JS代码生成相应的html文档,这个功能可以有效的封装一些html区域。下面的代码例子就举例表明了JS动态添加html元素到html文档里面的作用,并进行相应的操作。(动态生成一个P标签加入到left的div布局下面)

<html>
	<head>
		<script type="text/javascript">
			window.onload = function(){
				//创建一个P标签
				var para = document.createElement("p");
				//在P标签中加入文字
				var txt1 = document.createTextNode("csdn");
				var txt2 = document.createTextNode("yang");
				//把文字加入P标签里
				para.appendChild(txt1);
				para.appendChild(txt2);
				//根据Id拿到left定位
				var left = document.getElementById("left");
				//将P标签加入到left的布局下面
				left.appendChild(para);
			}
		</script>
	</head>
	<body>
		<div id="content">
			<div id="left">left
					<ul>
						<li>a</li>
						<li>b</li>
						<li>c</li>
					</ul>
			</div>
			<div id="right">right</div>
		</div>

	</body>
</html>

JS中还有很多方法如getElementsByTagName("div"),可以获取一个标签对象的集合。还有相关类,如Date,Array等,详细请查看javascript API

JS的强大还在于它还能与css进行交互。

<html>
	<head>
		<script language="javascript">
			window.onload=function(){
				var para = document.getElementById("example");
				alert("fontSize : "+para.style.fontSize);   //加载文本大小
			}
		</script>
	</head>
	<body>
		<p id="example" style="font:12px ‘Arial‘,sans-serif">aaa</p>
	</body>
</html>

以下是相关JavaScript相关细节(我主要是和Java语言做的一些区别):

1.JavaScript变量区分大小写(这不废话!),字符串声明单引号双引号都能表示。

如var name="yang"或var name=‘yang‘;

2.JavaScript是弱类型语言,如可以这样声明变量

var name=‘yang‘ name = 1(没有特定的int和char的区分);

3.对数组的声明方式(我认为还是非常灵活),

如var number1 = Array(4);     var  number2 = Array();     var number3 = ("yang",11,true);

4.关于”+“号操作符,它既可以表示数字之间的相加也可以表示字符之间的连接

如var number1= 7+5;     var number2 = "csdn"+"yang";

5.JavaScript中创建对象和Java有着类似的地方。

var yang = new Person; ——yang 是变量名,Person类名。

...........其实对Javascript的认识还是九牛一毛,希望以后能写出更好的Javascript代码。

(转载本站文章请注明作者和出处Coder的不平凡 ,请勿用于任何商业用途)

【读书札记】《JavaScript DOM编程指南》

时间: 2024-12-21 17:05:46

【读书札记】《JavaScript DOM编程指南》的相关文章

【读书札记】《怦然心动——情感化交互设计指南》

近期频频有曾经的同学,朋友的朋友托我帮忙给他们做一个站点.我想一个站点嘛,他们要求的也不高,就是简简单单给他们布个局,搞点动态效果,炫一点即可了. 但是随着不断的构思,我越发的感到做一个好的站点,用户友好,界面干净.信息能良好呈现的站点是花费一点时间和精力的. 说到这里也谈到我所示这本书,为什么会看到这本书,我近期突然想到了我第一天看到这本书的情形. 情景:趁着闲暇的时间我来到了图书馆,琪琪(公司的女同事)那天一直在搞论文,我一直在看JavaScript Dom编程指南,这本书也是值得推荐的,很

UI交互设计关键词:情感化设计与心理

情感化设计,一定有一个关键词.情感,是指人对周围事物和自身以及对自己行为的态度,它是人对客观事物的一种特殊的反映形式,是主体对外界刺激给予肯定或否定的心理反应,也是对客观事物是否符合自己需要的态度或体验.亲近.仇恨.表情.很多词都是情感的体现.情感往往被看作是一种人与人之间的行为,实际上我们可以队任何事物产生情感,人与产品当然也是可以产生感情的.                 一方面产品是以物的形态存在于人们的生活当中的,另一方面如果设计师在设计产品的过程中融入情感因素,产品就将不再是单纯的物

交互设计实用指南系列(12)—避免出错

http://ued.taobao.org/blog/2010/04/交互设计实用指南系列12-避免出错/ 一.如何理解本条内容: 一个“简单”和“复杂”的例子 在我和开发人员沟通一个项目需求的时候,他们频频慨叹Mockup的设计所考虑情况之细致,很多程序要实现的预判和“非基础功能点”让开发人员望而却步不情愿去实现.相比较设计师为了让用户避免出错而绞尽脑汁去设想和考虑,开发人员更倾向于直接给到一个只能容许的操作行为,其他非法请求全部报错:“程序是严谨的,他错,我报错,以不变应万变.简单一点不好吗

交互设计实用指南系列11-减少记忆负担

转载: http://ued.taobao.org/blog/2010/03/交互设计实用指南系列11-减少记忆负担/ 科普 <辞海>中“记忆”的定义是:“人脑对经验过的事物的识记.保持.再现或再认.”记忆是人类一个非常重要的心理活动,它是人类很多其他思维活动和行为的基础.在所有的认知心理活动中,记忆和软件交互的关系最为密切.我们脑内的神经元反映的信息在需要用的时候可以被准确的再次呈现,也就是储存在DNA链上的信息基因,在适当条件下,指导合成信息蛋白并呈现的过程.在信息处理的角度,我们都关心怎

产品细节中的情感化设计

原研哉在他的<设计中的设计>中有介绍过这样一个案例:日本机场原来是用一个圆圈和一个方块表示出入的区别,形式简单并且好用,但设计师佐藤雅彦却用一个更“温暖”的方式来重新设计了出入境的印章:入境章是一架向左的飞机,出境章则是个向右的飞机. 通过一次次的盖章,将这种“温暖”的情绪传递给每一位进关的旅行者们.在他们的视线与印章相交的那一刻,会将这种温暖转化为小小的惊喜,而不由自主且充满善意的『啊哈』一下.一千一万次的『啊哈』就会伴随着这一千一万次对旅行者的善意与好客.这便是产品中的细节与用户直接情感化

交互设计初学者的完全指南

交互设计起源于网站设计和图形设计,但现在已经成长为一个独立的领域.现在的交互设计师远非仅仅负责文字和图片,而是负责创建在屏幕上的所有元素,所有用户可能会触摸,点按或者输入的东西:简而言之,产品体验中的所有交互. 这篇文章对有兴趣学习更多关于交互设计的知识的人来说是一个很好的起点.我们将会简要讨论交互设计的历史,相关的指导原则,值得关注的贡献者,以及有关这个迷人学科的工具. 一.什么是交互设计? 交互设计(IxD)定义了交互系统的结构和行为.交互设计师努力在用户和用户使用的产品或者服务间创建有意义

于细微处动真情!聊聊产品细节中的情感化设计

编者按:一篇可以让你会心一笑的好文.今天腾讯的同学总结了那些细节里特别打动人的产品设计,创作者的独特创意与巧妙匠心都大放异彩,这篇文章中提到的细节都会让人心头一亮,你会禁不止惊叹:这才是真正的好设计呐! 原研哉在他的<设计中的设计>中有介绍过这样一个案例:日本机场原来是用一个圆圈和一个方块表示出入的区别,形式简单并且好用,但设计师佐藤雅彦却用一个更“温暖”的方式来重新设计了出入境的印章:入境章是一架向左的飞机,出境章则是个向右的飞机. 通过一次次的盖章,将这种“温暖”的情绪传递给每一位进关的旅

《css设计指南》 读书笔记 一

<css设计指南>这本书是一个大神同学介绍给我的,据说覆盖了几乎所有前端面试的有关css的知识点,所以赶紧买来看看.( ps:这本书貌似绝版了,可以上淘宝买复印本,也可直接看电子书. ) 闭合标签,自闭合标签. html5中,将忽略所有自闭合标签最后的 / .可是建议在最后仍然加上  空格加/ 以规范格式. 所有img标签都需要加上alt属性. ps:视障用户使用的屏幕阅读器会读出图片的alt属性. 行内.块级标签.  块级: h1~h6, p, ol/ul, li, blockquote .

目标导向的交互设计:About face 3 -- The essentials of interaction design 读书分享

近段读完并分享了Allan copper的 About face3 : The essentials of interaction design,推荐没看过的程序员朋友可以抽时间看看.感觉上这本书对交互设计讲得比较透彻,首先拿出了方法--目标导向的交互设计,再介绍了交互设计的过程框架,最后介绍交互设计的细节.比较易读,不仅有大量的细节规则,还会让读者对交互设计的方法和框架有一些认识. 第一部分:目标导向的交互设计 1. 设计的定义:了解用户的需求和期望,了解商业,了解技术限制,设计出可行,满足用