前言

接触javascript的时间说起来，长不长，短不短，其实真正开始学习它的时候应该是在去年大四11月份的时候，反正写网上的一些简单的特效，基本都是用jquery写得比较多，以致于对原生的js了解也是一知半解，平时用得有些稀里糊涂的，还清晰的记得去年实习找工作时，面试时，问我什么闭包，原型链，prototype，卧槽，问得我都傻眼了的，几乎脑子对js的理解就是个小白，直接就去面试找工作啊，现在想起来，真的好弱，始终对它有种琢磨不透的感觉，学了后忘了前，反反复复，我待它如初恋，人家却虐我千百遍啊，如今，抽出时间出来理一下，同时也是一种小小的总结，文有不恰之处，还请读者多给意见，本菜鸟感激不尽

正文从这里开始~

引例：前面一文《聊一聊HTML5那点事儿》，弱弱的码了不少文字介绍了一下HTML5,大概的了解了一下，HTML(结构层),层叠样式css(表现层)，和javascript行为动作(行为层)，我们知道HTML就是用来承载(结构化)信息的，也就是负责来装内容的，而层叠样式表css，其实它是用来描述内容的，更多关于css的内容以后详情在聊，而今天要讲的javascript其实就是负责动态，页面的交互显示的，下面我引用一张来解释下 从上方的图中，我们可以清晰的看到左边是某地公园小区，右边是某地山水瀑布，假设某房地产老板在该地圈了一块区域面积的荒地，建设了这个公园小区和开发了某地山水瀑布，我们把这块区域面积的荒地比作一个大大的div，盒子，里面装有有房子，水池，板凳，树木，花草，青山，绿水，鸽子等各种动物，而这些描述性的东西是这个公园小区里面所占有的元素，就好比是HTML页面中的一些标签元素的，本来一切都只有干巴巴的内容，一切都是静止的，它并不好看，但是由于四季变化或者人工的改造，这些树木的颜色，四季都会有着不同的变化，枝干大小，树叶花草颜色等，显示了不同姿态，而这些增加的额外属性改变了它本身的形态，添加了不少色感，这就是所谓的层叠样式，好比一件美丽的外衣，使其更加漂亮，美观，然而往往这些静态上的视觉并不能满足于我们，我们想要更加的吸引人眼球，毕竟人的欲望是永无止境的，于是我们便在公园里放了若干只能飞的鸽子，会说话的鹦鹉，静态的水池里我给它弄点喷泉，空荡的场地里弄个过山车，山里给它来灌点能流动的水等等的，那么想一下添加了这些元素是不是又不一样了呢，在保持原先的美丽的外衣上，我添加了各种能动的元素，试想是不是更加充满生机了啊，小朋友能利用水池里的水打水枪，能戏耍鸽子，鹦鹉学舌等等的，而最后我们添加的这些行为动作的，我们就好比把它比作javascript,不仅增加了动态的显示，我们还与之进行了交互，这样讲起来他们三者关系有没有清晰些了呢，有时候我在想，学习的时候，学到一定的时候，我们可以联系下生活，慢慢的就好了的，而且这种理解还是相当有趣的，只有自己懂，哈哈，又装了一下^_^，总结：HTML负责结构层，css负责表现层，javascript负责行为层，要是不懂的话呢，下面在来一波图:

无论现在我们逛哪个网站，其实javascript无处不在啊，以淘为例：上图箭头所指的下拉菜单(虽然可以用css可以做到，但是想要做些动画显示还是得借助它的)，头部导航条之间的切换中间部分所占的轮播图，右侧显示的选项卡，右图点击某个按钮时，弹出来的遮罩层，鼠标不断的往下拉，便不断的加载内容等等的，都离不开javascript的影子啊，在我现阶段的理解的javascript，其实是作为动态的与页面进行交互的，所谓交互我理解的就是你触发给它一个动作，然后它给你一个反应，或者自己自动按照某个条件进行自动的执行，动态的操作dom元素，也就是页面的标签元素，添加一些动态交互的效果，结构HTML清填充了，css外观美了，那么javascript就来点动作吧，哈哈，其实javascript一只手不仅仅在浏览器客户端已经大展伸手，而另外一只手已经伸向了后台服务器端了的(比如Nodejs,)javascript也能在服务器端上运行了的，简直霸道，帅得掉炸天得不行，这个还在学习当中，以后有时间在聊....切入正题吧，先扫一扫一些基本概念吧，做为菜鸟的我，还是要简单的聊一聊^_^....

javascript是javascript与java没有半毛线关系

javascrip是一种脚本语言，与服务器端后台语言java，c#等区别是

• 编写出一条一条的指令能够被用户代理（浏览器）所识别，按照浏览器的规范标准，不需要经过编译并且解释性的执行，应用程序（浏览器软件）提供的编程语言，所以说，Javascript只是浏览器的所提供的编程工具，是服务于浏览器端的，不过现在javascript这家伙发展迅速，慢慢的伸手到服务器端了的，能够在服务端运行了，比如相当火爆的nodejs,这家伙要要**世界的节奏哈，当然，我觉得这是不可能的，只是在市场中分得一杯羹而已，是无法撼动java,c#,Asp等后端语言的的地位的，各有利弊吧
• 不具备通用性，所处理的问题范围有限，这就是为什么在不同的浏览器之间，有时候写代码，要兼顾这个浏览器和另一个浏览器的原因，因为应用程序不一样啊，各个浏览器的厂商的所执行的标准也不一样了
• 至于后台语言，我对它也不是很了解，没有什么大的感触，自学过些C，java,编程，大三暑假时在学习javase,但是发现内容真的好多，学到面向对象时，就把自己搞得蒙逼了的，哎，总是找不着对象，况且，学完javase，还是什么也做不了，喔靠学到后面才知道，javase根本做不了什么东西出来，后面还等着jsp,数据库，三大框架之类的，想想学习线路太长了的，由于自身不是自身不是计算机专业，传说中的万金油自控专业害死人的，哎，一说都是泪啊，临近要找工作，果断的放弃眼前的，学习前端的，算是个野路子出来的，后台接触和学习不多，不敢评头论足，简单点就是打印输入一个helloword，需要编译-链接-执行三个步骤吧，而在javascript中，并不需要这样，在浏览器右键审查元素(或者F12)，直奔console控制台直接alert("helloword")，或者console.log("helloword");便是向世界大招呼了，就是这么简单直粗暴得不行

下面是语言排行榜：看图憋说话，javascript的地位毋庸置疑啊....

javscrript包括为三个部分

DOM+ECMAscript+BOM:我画了一张图进行描述了一下 今天就先从DOM开始吧，先扫一下盲，普及讲讲一些基本的概念吧，实战是必须的，然后直奔主题，上代码啦 DOM(document Object Model):文档对象模型，喔靠，词法好深奥，官方的解释就是：一套对文档的内容进行抽象和概念化的方法，简单一点就是：打开浏览器上淘宝，我们把所看到的可视区域，当做一个文档（可理解为容器），然后里面有图片，文字，信息，表单，音频，视频等，这些都是包裹在这个文档里面的，而你要点击的寻找的图片，文字，表单就是对象(至于对象的理解，这个词太深了的)，我简单的理解就是对事物的一种描述，模型，是一种抽象化的概念，描述客观存在的事物，比如说：土豆跟番茄，不管人们怎么定义它，大家都知道它是一种东西，达成了对它认识的基本共识，他们俩就是一个完意儿,那么如何操作文档里的对象呢？w3c已经给我们定义好文档内容的描述，图片就是img标签,表单就是用form来描述,在文档中找到它：在javascript中用：document.img;document.form;对象的属性，本身document就是一个对象哈，归纳起来说，DOM就是一种API(应用程序的接口)，API已经得到有关各方共同的基本约定，是约定熟成的东西，比如说：国际时区，阿拉伯数字，中学的化学元素周期表等，指定了某个标准，就不会乱套，拥有了这个标准就可以把它应用在不同的坏境当中，其中的一些约定是不会变得，当然针对不同的浏览器之间的差异，特殊群众需要特别对待的，兼容性的东西，遇到了多总结下就好

DHTML: 动态ＨＴＭＬ的简称，描述ＨＴＭＬ，css和javascript技术组合的术语：代表的是：

1. 利用HTML把网页标记为各种元素
2. 利用css设置元素样式和显示位置 利用javascruupt实时的操控页面和更改样式 至于这个名词我理解其实就是内容结构，样式表现层，行为动作，的一个总称，杂交下产物，为什么在这提一下的，就是记得有次面试时，面试题出了这么个**的玩意，完全给蒙逼了的，没有办法，当时捶胸顿足啊，可想而知

过一过枯燥的基本概念

变量：用来存储数据的存放具体的数值，通常这个值是可以变化的，也就是不稳定的，比如说，年龄，age,心情，mood,时间 time,等是变化的 如何定义变量？：var 关键字 var age;(左边是关键字，右边是变量名，一条语句并以分号作为结束)

var time;

两个定义的语句，可以等价于：var age,time;变量之间用逗号隔开，一条语句可以声明多个变量，其实我觉得这也是一种优化吧，至少减少了代码量了，要是程序中有很多的，这也占了不少字节数呢，但是刚开始还是分开写的吧，毕竟连着写，这种程序的可读性差了些的，也容易出错，中间多打个逗号，少个单词的，也是难以察觉的；

赋值：var age = 18;var mood = "bad";也可以等价于var age,mood; age = 18; mood ="bad";

变量名区分大小写，比如说:var Age =18,Mood ="bad";他们是不一样的 javascript语法不允许变量名中包含空格，标点符号($,逗号，符号除外)，字母(A-Z,a-z）,下划线,数字(但是变量名的开头不能是数字) 这条语句导致语法错误：

1. var my cat = " huahua " // 控制台显示结果:SyntaxError: Unexpected identifier 意外的标识符，也就是不合法的标识符

2. var 1mycat = "huahua"; //Uncaught SyntaxError: Unexpected number，意想不到的数字 正确的写法：var mycat = "huahua"; 命名方式：通常是以驼峰命名格式，尽量不要用中间带下划线这种方式命名(var my_cat = "huahua";当一个变量名比较长时，第二个单词的首字母开头通常改写成大写，当然命名规范遵循的标准是：尽量短而赋有具体的实际含义

var myCat = "huahua";

更多的规范标准：可以学习下面该github博客上的命名规则：写一首好代码，应当从命名开始,我觉得挺重要的，嘎嘎... http://materliu.github.io/code-guide/

基本数据类型

1. 数字，number包括浮点数(小数)，整数，1.2,2
2. 字符串 string,由任意的字符组成的序列
3. boolean布尔 true false、真假
4. null：空,没有值或者空值，不代表任何东西,null与undefined的最大区别是，null是已经被认为定义了的，只不过它不代表任何东西，通常用法是清空某个值，比较特殊,null是个对象
5. undefined：当访问的这个变量不存在时或者声明了却未定义时，系统始终在变量初始化之前把它设定为undefined,undefined的类型的值只有一个就是undefined,注意它并不是语法错误，它只是一种数据类型，出错了，console下会出现红色的警示

非基本数据类型

除了上面五种的数据类型以外的都是对象 下面介绍一下：获取元素的几种方法:

1. document.getElementById("ID属性名");
2. document.getElementsByClassName(“class属性名”);
3. document.getElementByTagName("标签名");

下面就直接做个简单的demo用来热热脑的吧：毕竟文字码多了，看起来就很烦，js的东西还是很多的，每个知识点都有它的特殊的用武之地，以后在具体详谈，用来简易的熟悉下documentById("")；这个BOM方法，获取元素，并进行属性的操作，更改样式,另外一点就是加了一个是拖拽的效果，对物体进行拖拽，并且限制物体的运动范围： 需要用到下面的几个知识: 事件1:假设一下，当你在刷新闻时，突然新闻媒体里，放出习大大要准备炮轰小日本,这下是不是全名全名震惊呢，大块人心呢 2：这两天我在刷微博时，看到iphone7出来啊，对于有钱人来说，剁手党已经开始了，而对我来说，iphone7简直好奢侈啊，我得砸锅卖铁，赞好几个月的毛爷爷啊，网上看看的，天天写iphone页面，要一个自己随时写一个..

上面的例子中阐述的事件，就是我们所听到或者看到某件事情发生后，我们做出的一个反应动作，是喜，是笑，是哭...由本身决定，那么当我们打开浏览器时，拖动鼠标，无论你是点击百度的链接，还是淘宝，或者按住鼠标不放，拖动页面中的某个元素，它都会随之做出相应的反应，点击百度，弹出搜所框，点击淘宝，进入淘宝官网，拖动页面上的某一个元素，它便会跟着移动，所以当我们进行动作时，浏览器都会产生一个事件，如果javascript应用程序关注特定类型的事件，那么它可以对这个事件发生时要调用一个或者多个函数（比如说，你在网页中拖动一个元素时，拖动它，然后你松开鼠标，它便会自动的跳转到所指定的页面，这中间发生了鼠标按下时，然后鼠标移动，最后鼠标抬起，而鼠标抬起时后就给它绑定了一个事件，指定页面进行跳转），事件就是web浏览器通过应用程序做出的反应(事情) 事件类型: a:文档加载和准备事件(例如window.onload = function(){}..)

b:鼠标事件(onmousedown,onmousemove,onmouseup)

c:鼠标滚动事件

d:拖放事件

e:键盘事件

f:文本输入事件 哎，事件的类型，一大串挺多的，一口吃不了一个胖子，以后慢慢来吧，今天就简单的讲下鼠标事件，并且实现一个拖拽的效果的，并限制它的移动范围，希望对大家有用,下面是效果图 通过 1,2,3个步骤便可以完成一个简单的拖拽效果: 下面是简单的具体实现过程:

• 简易div+css布局
• 注意定位position:absolute当所定位的元素没有父元素时，它会以body,html作为定位元素，注意定位元素的特点
• 遮罩层：background:rgba(0,0,0,.5);还有一种实现透明的方法，opacity,但是注意在Ie8以下不兼容，需要用一个过滤器：filter:Alpha(opacity="");来处理
• 怎么把一个盒子在浏览器实现水平垂直居中： 方法一:tion:absolute;left:50%;top:50%;margin-left:盒子宽度的负一半，margin-left:盒子高度的父一半，通过margin外边距来实现盒子的水垂直居中，注意如果变宽线的话，还要加上边框线 方法二:用js实现获取浏览器的宽度(高度)-盒子的(宽度)(高度)/2 获取浏览器的宽度：document.documentElement.clientWidth; // 获取文档的宽度

获取浏览器的高度：document.documentElement.clientHeight

获取元素的宽度，obj.offsetWidth

获取元素的高度：obj.offsetHeight

鼠标拖动元素在可视区域内，不能跑出去,js操作过程

1. 获取元素
2. 添加事件
3. 执行动作

现在稍微讲讲拖拽的原理: 首先我们知道：完成一个物体在窗体的拖拽移动过程我把它分为了四部,找到操作的目标元素-->鼠标按下-->鼠标移动-->鼠标抬起 能够拖动一个物体在页面上移动的，那么首先它一定得是一个绝对定位的元素，不然会没有效果的，当然你不妨可以试试相对定位,我试了一下的，拖动是有问题的 我们最终的目的是:要获取所移动的元素要与浏览器左边left和上边top的值，动态的获取这两个值，然后利用鼠标的移动，确定它的位置，然后计算出目标元素与浏览器左边和上边的距离，就可以了的 下面分析下拖拽原理图： 由上图清晰的可以看出，我们只有计算出盒子midbox距离浏览器左边(x轴left)和距离浏览器上方(Y轴的top值)，就可以了的，由于鼠标点下，触发被移动的目标，在完成下一次鼠标的再次点击之前，他们是连续触发的，并最终完成一个拖拽的动作，其中变化的值是鼠标不停的在窗体中移动，ev.clientX和ev.clientY这个值前后会随之鼠标的位置变化而变化，而不变的值是，在点击物体时，和移动物体midbox之间，鼠标点的位置，距离midbox左边缘(left值)和距离midbox上边缘(top的值)是不会变化的，我们正是利用它们变化的值，和不变化的值，简单的完成了一次鼠标拖拽的动作 光解释了一长串，口说无力啊，毕竟不能纸上谈兵了，写代码才是最核心的，下面是:css,html,js代码:至于代码,有兴趣看的就看一下，没兴趣的也没事了，只要掌握原理了,就好了的 另外一点作为代码补充就是:

1. 针对处理盒子水平垂直居中的问题

上面已经文字阐述到，就不解释了的，值得一提的就是，当用left:50%,top:50%;在利用margin-left:盒子的宽度的负一半，和margin-top:盒子的高度的负一半，如果盒子本身有内边距padding和border的话，注意也是要加上去的，这种方式是比较简单的实现水平垂直居中，而且还实现了随着窗体的大小，自适应的居中的，但是这有个问题就是我做鼠标拖拽的时候，它是存在问题的，拖拽过程中会有时会乱跑的现象，卡了一下的，这个问题值得自己看看琢磨一下的，所以我用了第二种方法：动态的获取盒子的宽度高度，用浏览器窗口的宽度高度减去自身的宽度高度在除以2，那么就水平居中了的，这个实现得很顺畅，没有什么问题的，但是值得注意的是，当body的高度内容比较多时，出现了滚动条，那么注意在计算时加上滚动条的的高度就好了的，其实里面的代码，很多都可以优化，比如那么多的点击动作，可以把它封装起来的，实现代码的重用的，今天这个就不封装了的，下次在单独的把封装单独写一篇的，下面我列出的一些的规则：没事时，可以默念，写代码的时候，记得就好的,希望对你有用:

• 尽量所写的代码与HTML结构一致，可以通过父元素查找子元素
• 把核心主程序实现,用function给包裹起来
• 把每组不同的值给找出来，然后通过传参实现，把一些不同的值通过传参的方式给扔进去，达到代码重用

2. 当弹出层的盒子是用display:none属性时，用原生js，obj.offsetWidth;obj.setHeight,是获取不到它的宽度和高度的，可以试一试的，它的宽度和高度显示是0的，但是在jquery中，这两个方法，确实有值的，无论你元素是隐藏还是从页面中删除，都是有值的，当使用display:none的时候，我做拖拽的时候，动态的获取宽度高度是，是有些问题的，就是始终没办法水平居中，然后把它换成具体的数值之后，却是正常水平垂直居中，如果你知其中的原因，可以告诉告诉我，非常谢谢的哈，当然我没有用这个属性，用的visibility:hidden,然而这个却是一点问题也没有，动态的获取数值，水平垂直居中，个人推荐使用这个，用具体数值，可拓展性不怎么好，还是尝试着多用js动态的操作dom元素吧
3. 至于：代码中的事件 var ev = ev || event;是为了做兼容ie8以下的浏览器 //设置全局捕获，当我们给一个元素设置了全局捕获以后，那么这个元素就会监听后续发生的所有事情，当有事件发生的时候，就会被当前设置了全局捕获的元素触发,所以要是不想用时，害的解除全局捕获

if(obj.setCapture){ obj.setCapture();// 为了设置全局捕获， }

//解除全局捕获 if(obj.releaseCapture){ obj.releaseCapture; //释放全局捕获， }

问题:当发生拖拽的时候，如果有文字被选中，就会产生问题，你可以试一试的了，存在着不同的问题，怪怪的 原因：当鼠标按下的时候，如果页面中有文字被选中，那么他会触发浏览器默认拖拽文字的效果

解决办法：

• 标准浏览器下：阻止默认行为 return false;
• 非标准下ie：设置全局捕获

至于拖动的元素的限制范围，四个方位，上下左右的，当是左边时，当盒子距离浏览器左边的left值小于0时,那么就不让它出去，强制把它设置为0的，当是往右边移动时，当浏览器的可视宽度减去盒子的宽度的距离要大于，盒子距离浏览器左边的距离临界状态时，那么就强制把它等于它最大的值的，当是上边时，同理，获取与浏览器上边的值,top小于0时,那么就让他等于0，否则，当浏览器的高度减去盒子的高度，大于盒子距离顶部的距离（offsetTop）时,那么就强制把它设置为它的最小临界高度的,通过上面的讲解，也许对javascript有些的认识了吧，那么个简单的例子，写那么多代码，的确很烦人,如果用Jquery,稍稍几行代码就可以实现，多方便啊，但是，我理解的是,jquery毕竟工具，虽然会了悟空72变，但是老祖宗还是不能忘啊，所有的腾云驾雾都是基于最基本的基本功，以前总是觉得会写jqurey就行了的，但是后来我发现，越学越学不会,跟个搬运工似的，后来也就从心开始学习javascript了的,来啃js了的

以下是本篇提点概要

• 引例：讲了一下html(结构化)，css(表现层),javascript(行为层)，他们三者的关系，就不多赘述了的，主要讲的目的，前端觉得日日夜夜与这个打交道比较多，分清他们三者的关系，循序渐进的学习，也许会好些
• javascript是javascript与java没有半毛线关系
• javscrript包括为三个部分
• DOM的讲解和DHTML还有过了一过基本概念
• 基本数据类型(5种)，非基本数据类型
• 简单的讲了一下事件，事件类型，鼠标事件
• 做了一个简单的demo,实现了利用dom来操作元素的样式，如何获取样式，更改对象的属性值，过程中也扯了一扯优化,以及在操作样式的基础上，做了一个拖拽

更多的知识，文章，新的体会和认知，学习心得尽在微信"itclan"公众号，旨在用心分享与交流,水平有限,如文有不对和不恰之处,还请大神们进行批判和指点,若有造成误解,还请多多谅解,如果您读完此文觉得对您有所帮助,码字不易,欢迎关注和分享转载

(结)2016/9/12

扫一扫即可关注