元学习课心得和实践 (一)—— 八小时搞定《JavaScript DOM》

image (1).jpg

之前在新生大学参加了XDite的元学习课程,感谢XDite的元学习课程,她跌破了我的眼镜,刷新了我的认知!

XDite 提出很多反常识的学习观点

第一堂,学习是拼图,不是登山;学习要有成就感,要让自己停不下来。

比如学习编程,应该先快速把东西拼出来,拼一个大东西,然后公开给朋友,接受朋友的赞美,得到正向回馈。而不是苦逼的把一本书从头看到尾。

我是嵌入式驱动程序员,一直想学前端,想学JavaScript,书也买了几本。可是,前几章枯燥的基本概念,就像车轱辘话,磨灭了兴趣。又没有项目的压力,于是厚厚的书本最终在书架上寂寞结蛛网。而又由于一次次从入门到放弃的不良记录,打击了自信心,每当新起起“前端好好玩,我也学学吧”的念头,拿出书,大脑中的“怕失败警卫员”就开始拉着我拖延,先洗个澡吧,先泡杯咖啡,空气不错,先去花园里快步走三圈,干劲会更足?不要笑,就这样,前端越来越好玩,可是,和我并没有什么关系!长叹一声!XDite说,拖延的时候不妨骗骗自己,”我只是玩玩,并不是要如何如何“,大脑就会放弃警惕,潜意识会忘记痛苦。原来如此!

第二堂,提出左右脑配合的肌肉快速入门法。通过先用右脑感知,模仿,熟悉基本框架,再放左脑出来理性分析。

XDite批判了自学效率低的四个大坑:

  • 必须有天赋
  • 必须要看懂每一个步骤,才能往前进
  • 学习必须要扎实,要从技术原理开始学起
  • 学习当中禁止用一切捷径,比如说复制粘贴代码,模仿别人的程序。

额,中枪!这不就是我一直以来信奉的真理吗?XDite说这些观点,放在进阶学习没有问题,但是放在初学者身上就是死路一条。原来,是我以往的C/C++学习经验拖了Javascript学习的后腿。
XDite又提出了一套学习编程的高频小套路:

  • 找出一本实做型的入门指南。一至三天,写完一个小项目
    翻开书,直接跳到最后的项目,快速做3遍
    • 第一遍: 复制项目代码
    • 第二遍: 跟着打代码,熟悉基本工具,阅读错误信息,学会Debug
  • 第三遍, 分析打错的,为什么会错。体会输入什么,就会得到什么。把懂的,不懂的,都背下来。

还有独门秘籍:用markdown把自己特别傻逼犯错的地方记下来,把正确的解法也记下来,然后公开发表。同时,自己也背下来。
听完这课,磨拳搽掌,一有时间我就要Try。

第三堂,人人可以通过高频小套路,快速成为高级新手或胜任者

XDite提到了德雷福斯模型,新手—高级新手—胜任者—精通者—专家。其实市面上大于50%的都是高级新手。任何人只要有一份高频小套路的SOP,都快速成为高级新手甚至胜人者,可以入行得到一份职位。所以,同学们,希望是大大的有啊!XDite 还提醒我们专家都不是靠坚持得来的,而是上瘾和停不下来。要运用游戏化机制,行动——回馈——不确定的回馈,让自己上瘾。并呼吁大家一定要养成上瘾的习惯。

这一点,我可以胜任,通宵打游戏,用虚拟人生复刻自己小时候的社区,连夜追韩剧,看小说,我,你都可以的。


动手实践

正式课程一结束,我马上爬上凳子,从最高一排拿下《JavaScript DOM 编程艺术》,抹去上面厚厚的灰尘,露出她可爱的样子。翻到最后一章Chapter12《综合示例》,要给世界著名乐队Jay Skript and the Domsers 设计一个网站。不错哦!**“我只不过敲着代码玩玩,就一两个文件就好。” **我对竖起耳朵的大脑“怕失败警卫员”如是说,他说“OK,放行”。

第一遍: 复制项目代码(2小时)
  1. 感谢万能的github,书的示例代码github上有:$git clone https://github.com/clamaa/javascript-dom.gitClone下整个工程。
  2. 新建文件夹 /1st , 按照书中内容,规划站点结构,并建立模板html和对应的html文件。
  3. 规划文件夹目录。
    /images : 所有的图像文件
    /styles : 颜色,版式和布局的CSS文件,使用basic.css 导入其它CSS文件,更方便编码和维护。
    /scripts : Javascript 文件,使用modernizr-1.7.js 检测支援不同的浏览器,使用global.js 包含我们要编写的所有函数。
  4. 从Clone下的工程,复制粘贴所以代码,文件。
  5. 使用Chrome 打开index.html,然后逐一验证各个页面。 Bingo!
第二遍,跟着打代码,熟悉基本工具,阅读错误信息,学会Debug 4小时
  • 新建文件夹 /2nd, 把 /1st 中的所以文件拷入

  • 把所有.html, .css, global.js 文件,内容清空

  • 跟着12章各个js函数,文件出场顺序,敲代码
    在书中每个html页面检测过程,遇到bug, 解bug。
    **使用工具: Chrome自带开发工具。
    **按F12按键开启:

    打印错误信息 : 参考https://developers.google.com/web/tools/chrome-devtools/console/

    • console.log()
    • console.error()
1.jpg

** 断点调试**![]


2.jpg
第三遍, 分析打错的,为什么会错。体会输入什么,就会得到什么。把懂的,不懂的,都背下来。(2小时)

记录下所犯的错误** 1. 拼写错误:**

  • 函数名称写错:
    document.getElementById 误写成 document.getElementsById,var destination = this.getAttribute(“href”) 误写成var destination = this.getAttribut(“href”);

  • CSS 中的误写:
    font-weight: bold 误写成 front-weight:bold;@import url(layout.css) 误写成 @import ulr(layout.css), 所以Layout 不对
    href 误写成 hrdf, global.js 里面对 links.getAttribute(“href”) 当然没有作用。

  • 遗漏
    JS function 不起作用: 漏写:……

这些Bug都可以通过设置断点和打印信息一一解决。
接下来,翻翻书中的知识点,对比项目中的运用,其义自见,无比轻松。(总结重要知识点,留到下一篇。)

真的没有想到,8小时,这本书被我搞定了!棒呆!~~

如果你也有过“入门到放弃”的经历,听XDite一次,一定要试试她的方法哦!

关注微信号** 新生大学 **了解XDite 元学习课程详情。
谢谢阅读!

相关链接:
元学习实践(二) —— 从小项目倒推《JavaScript DOM》知识重点
元学习实践(三)五大法宝,助你抓住Bug,顺利通关
元学习实践(四)丰富多彩的Web开发世界

题图摄影:geralt
图片授权基于:CC0协议
个人转载内容至朋友圈和群聊天,无需特别申请版权许可。
转载时请务必注明出处。


推荐阅读更多精彩内容