初学者学习Javascript很吃力怎么办?到底该如何学习Js?
Js给初学者的印象总是那么的“杂而乱”,相信很多初学者都在找轻松学习Js的途径。在这里给大家总结一些学习Js的经验,希望能给后来的学习者探索出一条“轻松学习Js之路”。
Js给人那种感觉的原因多半是因为它如下的特点:
A:本身知识很抽象、晦涩难懂,如:闭包、内置对象、DOM。
B:本身内容很多,如函数库、对象库就一大堆。
C:混合多种编程思想。它里面不但牵涉面向过程编程思想,又有面向对象编程思想,同时,它的面向对象还和别的编程语言(如:C++,JAVA,PHP)不大一样。就好像又是新的一样,让你对曾经学的面向对象产生了怀疑......
D:辛苦学习后又看似和实际应用脱节。通常学了很久的js基础之后,变量、函数、对象你也都略知一二,但一到公司开发项目的时候,却又难以下手。因为公司在开发实际项目的时候通常都是直接用它的衍生库,如:jquery,angular,boostrap,amaze,layui,ueditor等,而这些库又多如牛毛,同时还有自己的难点。让你都不知道该学哪个好,甚至都怀疑自己学的是不是js了,好像有多个版本的js一样,总是学不完......
那么,怎么才能在js领域内学的轻松甚至游刃有余呢?我总结了一些实战意义的js学习经验:
1.首先要紧紧抓住它的地位
时刻都不能忘记,否则很容易犯“一叶障目不见泰山”的错误。不要学了很久就知道js是编程语言,就是写代码,而且特点就是乱七八糟就完了,那样是学不好js的。要时时抓住它的地位,确切的说是它在整个Web中的地位:它属于前端的核心,主要用来操控和重新调整DOM,通过修改DOM结构,从而来达到修改页面效果的目的。要用这个中心思想去指导后续的一切js的学习,并且形成条件反射。
2.要有一条清晰的学习路线
这个只能是过来人给你提供参考了。我的学习路线如下:
A:js基础部分,如:定义变量、函数、数组、字符串等的处理,内置函数、内置对象等;
B:js面向过程编程思想,封装出各个函数,试着用这些去做一些常见的小功能,如:选项卡、自定义多选按钮、自定义播放器、3D幻灯片;
C:js面向对象编程思想,试着去封装一些你自己的对象,提供出有意义的接口出来;
D:学了上述的内容,然后学常用的库,这里必须学jquery;
E:学基于jquery之上的常见插件,如:bootstrap,Layer,富文本编辑器等;
F:综合应用上面的多种库写实际项目的模板,多写几套。
3.从多角度去学习和领悟
充分调动你所学的东西,从多角度去做某一功能,如:以前你是从面向过程角度做的,现在改为从面向对象的角度再来做,或者继续做成可以直接使用的插件,提供属性、方法等出来。争取让你做的这个功能逐渐能使用到实际项目中来。这样的好处:既综合应用了你的所学,又能有实际意义。
4.注意培养信心
此时的你,不适合一来就看很复杂很炫的网页效果的源代码,也不适合一来就学jquery,angular,vue,bootstrap这些东西。这些内容包含了很多深奥的知识在里面,在没有任何基础的情况下直接学这些,会严重打击你的自信心。而此时你是弱小的,你需要的是培养信心,而不是反过来,否则结局很可能是“夭折”,离学有所成也就遥遥无期了。
5. 多写总结
这种总结不但包括源代码、显示效果截图,还应该很容易犯的错误和对应的解决方法以及最后一两句精简的结论性语句。对自己写的总结不是写完了就了事了,要多回顾、多改进、多精简。到做项目的时候,应该是看里面的一两句话就知道是讲什么了,而不要再去看长篇大论了。
6.构建知识导图
这个可以让你越学越清晰,你可以按你喜欢的任何形式去做,只要自己印象深刻就行。
注意:知识导图也应该是经常修改、修正,让它更合理、更清晰。
如果你正在学习前端,或者说学习javascript的过程中遇到了很多困难,也可以加我们的学习群:27062964,和大家一起学习交流,弥补自己的不足。
以下是总结的js的知识导图,能够认真看完就是一次对 JavaScript 的回顾与提升,可以很好的检验基础。
JavaScript变量
![](http://upload-images.jianshu.io/upload_images/6251785-daa7b144ab510ad9.gif?imageMogr2/auto-orient/strip)
JavaScript 运算符
![](http://upload-images.jianshu.io/upload_images/6251785-f329c56f14d82b76.gif?imageMogr2/auto-orient/strip)
JavaScript 数组
![](http://upload-images.jianshu.io/upload_images/6251785-8190e0eb843c8949.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
JavaScript 流程语句
![](http://upload-images.jianshu.io/upload_images/6251785-ec3da090d8ba47ed.gif?imageMogr2/auto-orient/strip)
JavaScript 字符串函数
![](http://upload-images.jianshu.io/upload_images/6251785-329767340f350e8d.gif?imageMogr2/auto-orient/strip)
JavaScript 函数基础
![](http://upload-images.jianshu.io/upload_images/6251785-e2a7bf28e95b5f3f.gif?imageMogr2/auto-orient/strip)
JavaScript 基础 DOM 操作
![](http://upload-images.jianshu.io/upload_images/6251785-1cde66f5662d05b9.gif?imageMogr2/auto-orient/strip)
DOM 对象
![](http://upload-images.jianshu.io/upload_images/6251785-fb7c34c5b12f51e0.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
BOM 浏览器对象模型
![](http://upload-images.jianshu.io/upload_images/6251785-e6f0c5e4871c12b8.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
JavaScript 正则表达
![](http://upload-images.jianshu.io/upload_images/6251785-a16065e491016439.gif?imageMogr2/auto-orient/strip)
是的,没有高深的知识,没有进阶的技巧。
只是,万丈高楼平地起;只是,千里之行始于足下;只是,千里长提溃于蚁穴。
能把简单的做好就是不简单,你能走多远,不是在于你有多聪明,而是取决于你有多勤奋,共勉。
学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入学习交流群
343599877,我们一起学前端!
初学者学习Javascript很吃力怎么办?到底该如何学习Js?的更多相关文章
- 学习 JavaScript(二)在 HTML 中使用 JS
基本用法 在 HTML 中使用 <script> 元素引入 Javascript , <script> 有以下 4 个常用属性: async: 异步加载,只对外部脚步有效. d ...
- 轻松学习JavaScript二十二:DOM编程学习之节点操作
DOM编程不只能够查找三种节点,也能够操作节点.那就是创建,插入,删除.替换和复制节点.先来看节点 操作方法: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...
- 更快学习 JavaScript 的 6 个思维技巧
更快学习 JavaScript 的 6 个思维技巧 我们在学习JavaScript,或其他任何编码技能的时候,往往是因为这些拦路虎而裹足不前: 有些概念可能会造成混淆,尤其当你是从其他语言转过来的时候 ...
- 学习javascript数据结构(四)——树
前言 总括: 本文讲解了数据结构中的[树]的概念,尽可能通俗易懂的解释树这种数据结构的概念,使用javascript实现了树,如有纰漏,欢迎批评指正. 原文博客地址:学习javascript数据结构( ...
- 初学者学习JavaScript的实用技巧!
Javascript是一种高级编程语言,通过解释执行.它是一门动态类型,面向对象(基于原型)的直译语言.它已经由欧洲电脑制造商协会通过ECMAScript实现语言标准化,它被世界上的绝大多数网站所使用 ...
- 十大免费教程资源帮助新手快速学习JavaScript
“JavaScript”的名头相信大家肯定是耳熟能详,但只有一小部分人群了解它的使用与应用程序构建方式.这“一小部分”人指的当然是技术过硬的有为青年.网络程序员以及IT专业人员.但对于一位新手或者说外 ...
- angularjs学习总结(~~很详细的教程)
1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...
- 转: angularjs学习总结(~~很详细的教程)
1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...
- 【转】Angular学习总结--很详细的教程
*这篇文章是转来的,做了自己的一点修改,排版.原始出处不明,如涉及原博主版权问题,请及时告知,我将会立即删除*. 1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟 ...
随机推荐
- Python爬取B站视频信息
该文内容已失效,现已实现scrapy+scrapy-splash来爬取该网站视频及用户信息,由于B站的反爬封IP,以及网上的免费代理IP绝大部分失效,无法实现一个可靠的IP代理池,免费代理网站又是各种 ...
- 【刷题】BZOJ 2882 工艺
Description 小敏和小燕是一对好朋友. 他们正在玩一种神奇的游戏,叫Minecraft. 他们现在要做一个由方块构成的长条工艺品.但是方块现在是乱的,而且由于机器的要求,他们只能做到把这个工 ...
- BZOJ3930:[CQOI2015]选数——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=3930 https://www.luogu.org/problemnew/show/P3172#sub ...
- POJ.2739 Sum of Consecutive Prime Numbers(水)
POJ.2739 Sum of Consecutive Prime Numbers(水) 代码总览 #include <cstdio> #include <cstring> # ...
- 【单调队列】【P1714】 切蛋糕
传送门 Description 今天是小Z的生日,同学们为他带来了一块蛋糕.这块蛋糕是一个长方体,被用不同色彩分成了N个相同的小块,每小块都有对应的幸运值. 小Z作为寿星,自然希望吃到的第一块蛋糕的幸 ...
- Eureka与zookeeper
Eureka的优势 1.在Eureka平台中,如果某台服务器宕机,Eureka不会有类似于ZooKeeper的选举leader的过程:客户端请求会自动切换到新的Eureka节点:当宕机的服务器重新恢复 ...
- 一个完整的upstart脚本分析
基本概念可以了解 http://www.mike.org.cn/articles/understand-upstart/ http://blog.fens.me/linux-upstart/ http ...
- like tp
$where['insurance_order_num'] = array('like',$insurance_order_num.'%'); //右边模糊搜索,2099032902309张三 和 2 ...
- 文件上传文件的权限--lnmp 环境配置,尤其整个项目复制过来动~~~
site_upload 需要是自己才建立动才会是root root 所有者:---不是root : root 上传不了文件,不是 777 就都可以上传的,也要看看是谁建立的文件夹: 打包 ...
- 问题BeanFactory not initialized or already closed - call 'refresh' before access
问题BeanFactory not initialized or already closed - call 'refresh' before access 2016-08-23 14:22 8565 ...