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

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的节点中
       //结束了
      //码完注释，我猜想这是一段实现图片倒影的函数，倒影显示在图像的下方。