为什么我在学习HTMLCSS的时候很快就能上手，可是JS我已经接触了2个月了，还是无从下手？

回复内容：

我想，学习编程语言与学习说话是类似的，都有三要素：词法，语法，背景知识
词法：决定是否能一个词一个词的读下来
语法：决定是否能明白，表达式或者语句要做什么
背景知识：决定是否能理解整个篇章在做什么
想一想，我们从出生就生活在汉语（举例而已，少数民族同胞不要仇视）的环境里，天天看、听、说，能比较顺畅的表达自己的意图用了多少年？
诚然，编程语言在这三要素上的信息量都要远小于整个汉语世界：关键字很少，TR1文法的语句有限，背景知识也只有现代科学的几十年，但是，想把这些都了解清楚也非朝夕之功可为。
HTML/CSS入门要简单一些，在入门阶段，它们看起来更像是七巧板或者积木，能抓住东西的小孩子都能玩，所以会感觉到入门容易。可是，做到高级，仍然要考验设计师的想象力的。并不是人人都可以用乐高制作一把乐高重机枪_视频在线观看。这需要背景知识和想象力。
相比之下，js家的门槛要高不少。首先是语言本身，只是简单的词法和语法就够学一阵子的了（这取决于你的编程语言经验，掌握类似的语言，学起来自然快）。但，只会词法和语法真心没什么鸟用，比如： ，我相信很多人都知道是什么，但很少人能知道怎么用它。
那么，让你觉得js入门难的倒底是什么呢？ 其实是背景知识!
虽然我们很小就会说话，但并不会五言、七言、蝶恋花、江城子等等，这些东西是别人定义好的格式，我们只要拿来用，并且用得对，就会有不错的效果。这相当于编程基础里的数据结构。
虽然我们很小就会说话，但有时把一件事啰里啰嗦讲半天，自己都觉得没讲明白，当然别人也没听明白。后来慢慢知道一画开天、精卫填海、画地为牢、红杏出墙等等，简洁清楚，这也是别人定义好的，很好用。这相当于编程基础里的算法。
背景知识还有很多很多，如：Big Endian、农历、等差数列、角函数、傅里叶变换、AI……
一处不到一处迷，只要写代码的人用了你不知道的知识，你就会看不懂。

那么，回到正题，题主觉得js入门难，大致有两大方面的知识欠缺

1. 编程相关的基本知识：计算机原理、数据结构、算法分析等等
2. 浏览器工作原理及编程相关的API

想要快速入门，2是必需，而想跨过入门，成为软件工程师，1是关键。
而要成为职业WEB前端，还要了解整个前端的生态环境，那是一条永不止步的求索之路。 就多写这是我在块我在说一下吧。
题主现在应该处于：想动手写点东西，但是又不是怎么开始的这一个阶段。
其实我有很长一段时间是处于这个阶段，我看了完了《DOM艺术编程》，照着书上的例子写，基本就是抄。
然后关上书，还是什么都写不出来，老是去回想书里的下一步要做什么，自己根本没有思路。
看完《DOM艺术编程》后，最大的收获是 js操作dom元素还多少知道些，创建个div 创建个P 创建个txt 把txt插入到P 把P插入到div 然后把div插入到body。

我给题主的建议是前期多找js操作dom的例子来写，正面反馈，看得见摸得着。不会打击学习的积极性。
比如写一个焦点图的的例子。
写轮播图的HTML css
↓
写点击的事件，把点和对应的div关联起来
↓
用settimeout让他们动起来
↓
点击“点”后，发现自动滚动发生混乱，想办法解决。
到这里一个最基本的焦点图的例子就写完了。在写这个例子的时候你可能用到了（以JQ举例）attr eq settimeout clearInterval 等。然后你觉得这个焦点图 点一下切换一张图太单调了，你想点一下图片有个进场的动画， 这时候你又学到了用js控制 translate3d 、left 的值。
我记得 @mu mu 大神之前用游戏来形容学习编程，我很喜欢。

游戏里常有这样的设定，开局的时候，整张地图都是雾蒙蒙的，什么也看不见。先选个地方造兵采矿，建立基地，再派兵去周围的地方探索，继续造兵采矿，占领的地方越来越多，整张地图也越来越清晰。编程也是这样，一开始的时候，什么都看不清，什么都不懂，学了几年也写不出个软件。传统的学习模式是，学习，理解，运用，而学编程的时候，可以灵活一点。把编程知识想象成一个3D网络，每个知识点都是网络中的一个节点，每个节点上有一盏灯，你学会了，灯就亮了，可以看到周围的节点，接着走，点灯，再走，再点灯，这样，灯亮的越来越多，看的越来越清楚，对于自己要走的方向也越来越有信心。基本的思想是，先用后学，缩短反馈，反复迭代。

因为js一般不只是js，他一般还要配合调用别的东西，比如你的这一部分代码，它大部分的工作是操作dom，那你就要去学习dom操作的基本知识。而且dom里面findbyclass addEvent 都是相对深入一些的知识，换句话说，你看的这个代码要的基础知识稍多了一些。 编程经验很重要吧，一个优秀的程序员，要有很多的项目来锤炼。
为技术而生，岂这么容易。 看别人的代码只需要看整块函数的意思就行了，这个其实看多了没多大问题的！要学好没有捷径只有自己动手写！！看着视频写，对着书写没有多大作用，因为发现不了问题，只要不断填坑 技术才能进步！！

var imf = function () {
	var lf = 0;
	var instances = [];
	//定义一个通过class获得元素的方法，并传入三个参数
	function getElementsByClass (object, tag, className) {
		
               var o = object.getElementsByTagName(tag);
               //定义一个数组变量，通过标签名获取元素
               //通过for循环来返回通过class获取的元素

		for ( var i = 0, n = o.length, ret = []; i < n; i++)
               //变量n等于数组o的个数，字符类型是数值
               //新增了一个数组ret用处暂不明确，继续往下读
               //遍历数组o里面的每一个对象
              
			if (o[i].className == className) ret.push(o[i]);
               //如果数组o里面元素的类名存在与传入的className参数名相同的话，将         
               //这个类名的元素添加到ret数组中（push是从数组末尾添加）
               
		if (ret.length == 1) ret = ret[0];
               //如果数组ret的个数有1个存在，那么直接返回它

		return ret;
               //for循环至此结束，继续下一个函数的读取
	}
               //定义名为addEvent函数，并传入3个参数
	function addEvent (o, e, f) {
		if (window.addEventListener) o.addEventListener(e, f, false);
       
        //通过if判断解决兼容性问题，如果浏览器支持.addEventListener()          
               //方法，给数组o添加监听事件
		else if (window.attachEvent) r = o.attachEvent('on' + e, f);
              //因为IE低版本浏览器的监听事件不符合w3c规范，只能用.attachEvent   
              //方法来兼容
	}
              
//继续定义一个名字很奇怪的函数传入2个参数
	function createReflexion (cont, img) {
		var flx = false;
             //变量flx的布尔值初始化为false，一般后面用来判断这个变量的存在是真 
             //还是假
		if (document.createElement("canvas").getContext) {
             //这也是一个兼容性判断，如果浏览器支持h5 canvas .getContext属性     
             //和方法的话，就继续下去
			flx = document.createElement("canvas");
           //读到这里，我明白了为什么提前将变量flx = false 了；如果为true的话
           //就没法判断浏览器是否支持canvas了
           //这一步是动态创建canvas节点，名为flx
			flx.width = img.width;
           //定义canvas的宽度等于img的宽度
     			flx.height = img.height;
           //定义canvas的高度等于img的高度
			var context = flx.getContext("2d");
           //获取canvas的上下文环境
			context.translate(0, img.height);
           //将canvas绘图表面向下平移img高度的像素，目的暂不明确
			context.scale(1, -1);
           //将canvas绘图表面进行缩放操作，x轴放大1倍，y轴缩小1倍，暂不明白作者
           //意图，-1应该是反向。
           //又是向下平移，又是纵向翻转，应该是做一种上下对称的东西
			context.drawImage(img, 0, 0, img.width, img.height);
           //.drawImage()方法，将图片绘制到canvas中，宽高都是图片的宽高
			context.globalCompositeOperation = "destination-out";
          //这个属性比较冷门，我是查资料才知道是：在源图像外显示目标图像。只有源  
          //图像外的目标图像部分会被显示，源图像是透明的。个人猜想作者利用这个 
          //属性不是简单的把img画到上去，而是想利用源图像外的部分来做文章。
			var gradient = context.createLinearGradient(0, 0, 0, img.height * 2);
          //绘制起点为原点的60°角的线性渐变
			gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
         //定义结束的颜色，不透明度为0
			gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
	 //定义开始的颜色，不透明度为1
		context.fillStyle = gradient;
         //上面都是基于状态的绘制，这一步是执行绘制
			context.fillRect(0, 0, img.width, img.height * 2);
         //绘制一个矩形，左上角坐标（0,0），右下角坐标（img宽度，img高度X2）

  		} else {
         //如果浏览器不支持canvas，则用css滤镜来实现此效果
			/* ---- DXImageTransform ---- */
			flx     = document.createElement('img');
			flx.src = img.src;
			flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' +
			                   'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +
							   (img.height * .25) + ')';
		}
        //上面那一大串，讲的是创建一个img标签替代canvas，定义图像src，定义滤镜
        
		/* ---- insert Reflexion ---- */
		flx.style.position = 'absolute';
		flx.style.left     = '-1000px';
		cont.appendChild(flx);
		return flx;
	}
       //设置flx的css位置属性
       //用.appendChild()方法将动态创建的flx作为子元素，添加到cont的节点中
       //结束了
      //码完注释，我猜想这是一段实现图片倒影的函数，倒影显示在图像的下方。

举一个不太恰当的例子，不懂事儿的小孩子都可以把砖块搭建起来个模型，但是，混凝土不是谁都能玩儿的。HTML，CSS是个框架性的东西，入门会很快，看看例子，类比，都可以做个模型出来。JS是一门儿编程语言，使用场景很多，使用规则很多，并不能和HTML，CSS做比较着学的。 其实我想说，两个月了看不懂说明基础知识不够再加上练习的不够，因为我自己也是零基础学js的，在此之前学了html和css，现在学js也差不多2个月了，头一个月真的很煎熬，感觉视频里说的完全听不懂。但是多听几次多练习几次，就好一点，所以一定要自己多写代码。看不懂就再看一次再写一次，就像刚开始学html的时候，基础知识起码看了10次以上，js比起它们要难一点， 所以我打算要看20次以上。这就是我的学习方法，只作参考。 html 和 css经过浏览器解析后 一步就可以看到结果
javascript 是经过一些逻辑之后，才能得到结果。
js中，只要有一点顺序不同，或者多几步，少几步，结果就会有很大不同。

你现在就想 直接看一段复杂的javascript，当然是看天书了。 js起步容易进阶难度较大
原型链彻底搞清楚的人不多
嘿嘿