前言:在花费了两周历时一个月的时间里,我又重新读了一遍《JavaScript-DOM编程艺术》,这次阅读明显比第一次通读有进步的多,好多之前标记的疑问点这次几乎都能恍然大悟,还是很期待再下一次的阅读,肯定还会收货更多。

唯一不满意的地方就是我太能拖延了,学习的时候只有两周,却花费了一个月,中间的两周硬生生给浪费掉了。心痛 (;´༎ຶД༎ຶ`) 希望这个毛病能慢慢的改掉 (ง •̀_•́)ง

前面都是废话,本次《JavaScript高级程序设计》学习,基于如何正确学习JavaScript 当然,去年的时候我已经按着这个计划学习到了第五章,你问然后呢,当然然后就没有然后了嘛 ┌( ´_ゝ` )┐

1~2周学习计划

计划:

1~2周(简介,数据类型,表达式和操作符)

  1. 阅读《JavaScript高级程序设计》的前言和第1~2章。

  2. 十分重要:在书中遇到的每个样例代码都要动手敲出来并且在火狐或Chrome浏览器控制台中跑起来、尽量蹂躏它(做各种试验)。也可以用jsfiddle,但不要用Safari浏览器。我建议用火狐搭配Firebug插件去测试和调试代码。浏览器控制台就是可以让你编写和运行JavaScript代码的地方。

  3. 完成Codecademy JavaScript Track上的Introduction to JavaScript部分。
  4. 阅读《JavaScript高级程序设计》第3~4章。你可以跳过位操作部分,在你的JavaScript生涯中一般不会用上这个。
  5. 再次说明,记得要不时停下来把书本的代码敲到浏览器控制台里(或者JSFiddle)做各种测试,可以改变几个变量或者把代码结构修改一番。
  6. 完成Codecademy JavaScript Track上的2~5部分。

实践:
2017.07.03

前言and第一章: “JavaScript简介”

2017.07.06

第二章: “在HTML中使用JavaScript”

  1. 混杂模式(让ie的行为与ie5相同)和标准模式(让ie的行为更接近标准行为);; noscript元素
    1
    2
    3
    <noscript>
    <p>本页面需要浏览器支持JavaScript</p>
    </noscript>

第三章: 基本概念

  1. 基本类型: Null,Boolean,String,Number,Underfined
  2. object类型是所有对象的基础类型
  3. 无须指定函数的返回值,因为任何ECMAScript函数都可以在任何时候返回任何值
  4. 可以向ECMAScript函数传递任意数量的参数,并可通过arguments对象来访问这些参数
  5. 由于不存在函数签名的特性,ECMAScript函数不能重载(函数或者方法有相同名称,但参数列表不同叫重载)

2017.07.17

第四章: “变量、作用域和内存问题”

  1. JavaScript用来保存两种类型的值:基本类型和引用类型
    • 栈内存(保存基本类型值,里面的值会被覆盖)
    • 堆内存 (保存引用类型值,从一个变量向另一个变量复制引用类型的值,复制的其实是指针,因此两个变量最终都指向同一个对象–不过是指向对象的地址不同)
  2. typeof操作符: 确认哪种基本类型;
    instanceof操作符: 确认哪种引用类型
  3. “标记清除”是目前主流的垃圾收集算法
  4. 解除引用: 将值设为NULL;;其作用是让值脱离执行环境,以便垃圾收集器下次运行时将其回收

3~4周学习计划

计划:

3~4周(对象,数组,函数,DOM,JQuery)

  1. 以下三选一:

    1. 阅读我的博文JavaScript 对象详解.
    2. 阅读《JavaScript高级程序设计》第6章。注意:只需要看“理解对象”(Understanding Objects)部分。
      两本书会涉及更多的一些细节,但只要看完我的博文,你可以完全放心地跳过这些细节。
  2. 阅读《JavaScript高级程序设计》第5和7章。

  3. 此时,你应该花大量时间在浏览器控制台上写代码,测试if-else语句,for循环,数组,函数,对象等等。更重要的是,你要锻炼和掌握独立写代码,不用借助Codecademy。在Codecademy上做题时,每个任务对你来说应该都很简单,不需要点帮助和提示。如果你还卡在Codecademy上,继续回到浏览器上练习,这是最好的学习方法。就像詹姆斯年轻时在邻居的篮球场上练球,比尔盖茨在地下室里学习编程。
    持续地练习,这一点点的进步积累起来效果会非常惊人。你要看到这个策略的价值,相信它是可行的,全心投入进去。
    Codecademy会造成已掌握的错觉。
    使用Codecademy最大的问题是,它的提示和代码小片段会让人很容易就把答案做出来,造成一种已经掌握这个知识点的错觉。你可能一时看不出来,但这样做你的代码就不是独立完成的了。
    但目前为止,Codecademy依然是学习编程的好帮手。特别是从一些基本的代码结构如if语句,for循环,函数和变量去指导你了解小项目和小应用的开发过程。

  4. 回到Codecademy完成JavaScript路线。做完6~8部分(数据结构做到Object 2)。

  5. 实现Codecademy上Projects路线的5个基础小项目(Basic Projects)。做完之后,你已不再需要Codecademy了。这是一件好事,因为自己做的越多,学得就越快,就能更好准备开始独立编程。
  6. 阅读《JavaScript高级程序设计》第8,9,10,11,13和14章。这本书没有涉及到jQuery,而Codecademy上的jQuery知识也覆盖得不够。可以看看jQuery的官方教程,免费的:http://try.jquery.com/
    你也可以在《JavaScript权威指南》第19章了解更多的jQuery知识。

  7. 完成全部的jQuery教程http://try.jquery.com/

实践:

2017.08.30

接近一个半月的时间完成了本应两周完成的任务,进度缓慢,期间断断续续,一天看一点,还好没有放弃。这已经是进步啦,不能气馁,继续加油。

由于时间周期久,好些知识点都忘记了,只是有印象,代码方面还应该加强,多敲多练。希望第一个项目也能顺利完成。

第一个项目学习计划

计划:

第一个项目-动态问答应用

此时,你已经掌握了足够的知识去建立一个稳固的,可维护的web应用。在做完我为你设计的这个应用之前不要看后面的章节。如果你卡住了,去Stack Overflow提问并且把书上相关的内容重新看一遍直到完全理解这些概念。

接下来开始建立一个JavaScript问答应用(还会用到HTML和CSS),功能如下:

  • 这是一套单选测试题,完成之后会显示用户的成绩。
  • 问答应用可以产生任意多的问题,每个问题可以有任意多的选项。
  • 在最后的页面显示用户的成绩。这个页面只显示成绩,所以要把最后一个问题去掉。
  • 用数组存所有的问题。每个问题包括它的选项和正确答案,都封装成一个对象。问题数组看起来应该是这样:

    1
    // 这里只演示一个问题,你要把所有问题都添加进去 var allQuestions = [ { question: "Who is Prime Minister of the United Kingdom?", choices: [ "David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], correctAnswer: 0 } ];
  • 当用户点击“Next”时,使用document.getElementById或jQuery动态的添加下一个问题,并且移去当前问题。在这个版本里“Next”是唯一的导航按钮。

  • 你可以在本文下方评论求助,最好是去Stack Overflow提问,在那里会有及时而准确的回答。

实践:
——未写——–

2017.07.

5~6周学习计划

计划:

5~6周(正则表达式,Window对象,事件,JQuery)

  1. 阅读《JavaScript高级程序设计》第20,23章。

  2. 记得要把样例代码敲到浏览器控制台上,尽可能蹂躏它,做各种测试,直到完全理解它是怎么工作,它能干些什么。

  3. 此时,你用起JavaScript来应该很顺手,有点像武林高手要出山了。但你还不能成为高手,你要把新学到的知识反复使用,不停的学习和提升。
  4. 升级之前做的问答应用
    1. 添加客户端数据验证:保证用户回答了当前问题才能进入下个问题
    2. 添加“Back”按钮,允许用户返回修改答案。最多可以返回到第一个问题。注意对于用户回答过的问题,选择按钮要显示被选中。这样用户就无需重新回答已经答过的问题。
    3. 用jQuery添加动画(淡出当前问题,淡入下个问题)
    4. 在IE8和IE9下测试,修改bug,这里应该会有得你忙了。
    5. 把问题导出JSON文件
    6. 添加用户认证,允许用户登陆,把用户认证信息保存在本地存储(local storage,HTML5浏览器存储)。
    7. 使用cookies记住用户,当用户再次登陆时显示“欢迎用户名回来”。

实践:
——未写——–

2017.07.

7周学习计划

计划:

7周,可延长到8周(类,继承,HTML5)

  1. 阅读我的博文JavaScript面向对象必知必会。。或者阅读《JavaScript高级程序设计》第6,16,22,24章,第6章只读“创建对象”(Object Creation)和“继承”(Inheritance)部分。注意:这部分是本课程中技术性强度最大的阅读,要根据自身的状况考虑要不要全部读完。你至少要知道原型模式(Prototype Pattern),工厂模式(Factory Pattern)和原型继承(Prototypal Inheritance),其它的不作要求。

  2. 继续升级你的问答应用

    1. 页面布局使用Twitter Bootstrap,把问答的元素弄得看起来专业一些。而作为额外奖励,用Twitter Bootstrap的标签控件(译者注:原文地址失效,已改)显示问题,每个标签显示一个问题。
    2. 学习Handlebars.js,将Handlebars.js模板用在问答应用上。你的JavaScript代码中不应该再出现HTML代码了。我们的问答应用现在越来越高级啦。
    3. 记录参加问答的用户成绩,展示用户在问答应用中与其他用户的排名比较。
  3. 在学完Backbone.js和Node.js后,你会用这两种最新的JavaScript框架重构问答应用的代码,使之变成复杂的单页面现代web应用。你还要把用户的认证信息和成绩保存在MongoDB数据库上。
  4. 接下来:构思一个项目,趁热打铁迅速的去开发。卡住的时候参考《JavaScript权威指南》或者《JavaScript高级程序设计》。当然,还要成为Stack Overflow的活跃用户,多问问题,也要尽量回答其它人的提问。

实践:
——未写——–

2017.07.