【南大软院大神养成计划:第十天】久违了，JavaScript——入门篇（二）

最新推荐文章于 2015-12-05 21:24:11 发布

U97F3

最新推荐文章于 2015-12-05 21:24:11 发布

阅读量700

点赞数

本文链接：https://blog.csdn.net/Sonshines/article/details/50044095

版权

今天把《JS入门篇》课程完成了，今早取快递路上思考人生时，粗略算了算，前端工程师课程总共700+节，21天学完需要每天完成37节，这样算当然不是很科学，但是也一定程度上体现了学习任务的并不轻松。

由于是入门篇，打算拿简单点的来开刀，换种学习笔记的形式，因为基础的东西，在随着设计网页的经验的积累，会越来越牢固，而如果把学习中别人消化后输出给你的东西单纯的复制粘贴到学习笔记，觉得不是很有意义，自己的文字，想法要多一点，嗯。而与其说换，不如说是增加/改善吧，因为更多的是在原有基础上“添油加醋”，敢于创新才能获得进步，不管成功不成功，先用心做吧。

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

今天学的最核心的内容便是DOM，那么首先DOM是什么？——即文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。

今天的学习中，代码任务最常用的一句，也是最核心的一句，即Object.style.property=new style;（下面贴出一张基本属性表）

而这个DOM最需要注意的略为抽象的特征呢，是DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树），解释这个特征，慕课网JS入门课程下的一张图足以：

图中元素节点即标签<a>，相似的，<html>、<body>、<p>等都是元素节点，即HTML中的标签。

文本节点即向用户展示的内容，如标签<a>中“JavaScript DOM”这一段文字。

属性节点即开发者给此元素设定的一些属性值，如标签<a>的"herf=......"这样的属性设置语句

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

这样一番用自己的话总结下来，感觉DOM所谓的节点与“变量”有些相似之处，只是这个“变量”没有自定义名字，且只有三种类型即“元素”、“属性”、“文本”，当然，提出这样的猜想也经过一定的搜索：

【一】“DOM的优势主要表现在：易用性强，使用DOM时，将把所有的XML文档信息都存于内存中，并且遍历简单，支持XPath，增强了易用性。

DOM的缺点主要表现在：效率低，解析速度慢，内存占用量过高，对于大文件来说几乎不可能使用。另外效率低还表现在大量的消耗时间，因为使用DOM进行解析时，将为文档的每个element、attribute、processing-instrUCtion和comment都创建一个对象，这样在DOM机制中所运用的大量对象的创建和销毁无疑会影响其效率。”（来源——百度百科）

【二】“最初人们把它认为是一种让JavaScript在浏览器间可移植的方法，不过DOM的应用已经远远超出这个范围。Dom技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强”（来源——百度百科）

从【一】可以看出变量的影子——申请内存，当然，思考过后也才发觉自己知识和经验上的双重空白，因为即使它的确是与变量相似，那又如何呢...这些也只有等到后续的开发过程中才能慢慢看得更清楚些，现在在学习过程中能做的，就是多思考。

看到【二】时其实是很感兴趣的，因为一开始，我就是这么认为的，认为DOM方法的应用单一，但后面的解释让我对DOM又充满了兴趣。

DOM暂时告一段落后，下面来看看其他的学习内容：

innerHTML属性（innerHTML 属性用于获取或替换 HTML 元素的内容）、display属性（隐藏或显示元素）、控制类名（获取元素class属性、给元素指定一个classname以继承对应class的CSS格式，来达到更爱元素外观的效果）。

更基础一点的就是prompt消息对话框、打开/关闭窗口(window.open/close)语句的使用了。（调试结果如下图）

今天的学习内容就暂时小结到这。

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

其实在每一小节的编程作业下，有时候会遇到不少问题（主要是粗心），如document.getElementById方法忘记区分大小写，还遇到最低级的错误，把中文的逗号、分号不小心打到代码去了，那真是场灾难...因为这种错一般不容易立马排查出来。。。

再一次赞一下慕课网的课程设计，有查看同学提交代码的功能，下面展示一下我的代码和别人代码的对比：

自己的代码

别人的代码

我笨拙地每个function下都定义变量“mychar”，当时一行行粘贴的时候也感觉到自己这样写代码不够精简，效率低，但也没想到其他办法了，一看，果然有大神分享更好的写法，我还真不知道变量声明还可以这么用，我怠慢了学习，平时没有积极积累，于是到写代码时便暴露了，没办法，跌倒了爬起来，再多花时间看看吧，今天就先到这。

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

无意中又打开此次大赛的文档，看了看后面比赛七天相关的内容，发现作品的评分细则：

一、作品创意（20分）	分值
1.创意新颖、原创度高	10
2.实用性强	10
二、作品技术性与兼容性（30分）	分值
1.网页通过w3c网页标准验证	10
2.技术实现办法高效	10
3.网页对各浏览器兼容性好	10
三、运行效果（30分）	分值
1.界面美观、风格一致	10
2.使用方便、可操作性强	10
3.页面富有动感	10
四、讲演与答辩（20分）	分值
1.讲演思路清晰、表达清楚	5
2.回答问题准确，应变能力强	10
3.讲演过程亮点突出，相关辅助材料完备	5
总分统计	100

顿时感觉有点方，不看最后的设计要求估计我还得多怠慢着学几天，“创新”、“实用”、“高效实现”、“兼容性”、”可操作性强“、“富有动感”、“讲演与答辩”，一个个Keyword都让我深刻感受到时间的宝贵，需要多调动主观能动性来学习，最后才能给整个比赛留下一个善始善终的印象，加油！

U97F3

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【南大软院大神养成计划:第十天】久违了，JavaScript——入门篇（二）

今天把《JS入门篇》课程完成了，今早取快递路上思考人生时，粗略算了算，前端工程师课程总共700+节，21天学完需要每天完成37节，这样算当然不是很科学，但是也一定程度上体现了学习任务的并不轻松。由于是入门篇，打算拿简单点的来开刀，换种学习笔记的形式，因为基础的东西，在随着设计网页的经验的积累，会越来越牢固，而如果把学习中别人消化后输出给你的东西单纯的复制粘贴到学习笔记，觉得不是很有意义
复制链接

扫一扫