前言
接触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:
动态HTML的简称,描述HTML,css和javascript技术组合的术语:代表的是:
- 利用HTML把网页标记为各种元素
- 利用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),下划线,数字(但是变量名的开头不能是数字) 这条语句导致语法错误:
-
var my cat = " huahua " // 控制台显示结果:SyntaxError: Unexpected identifier 意外的标识符,也就是不合法的标识符
-
var 1mycat = "huahua"; //Uncaught SyntaxError: Unexpected number,意想不到的数字 正确的写法:var mycat = "huahua"; 命名方式:通常是以驼峰命名格式,尽量不要用中间带下划线这种方式命名(var my_cat = "huahua";当一个变量名比较长时,第二个单词的首字母开头通常改写成大写,当然命名规范遵循的标准是:尽量短而赋有具体的实际含义
var myCat = "huahua";
更多的规范标准:可以学习下面该github博客上的命名规则:写一首好代码,应当从命名开始,我觉得挺重要的,嘎嘎... http://materliu.github.io/code-guide/
基本数据类型
- 数字,number包括浮点数(小数),整数,1.2,2
- 字符串 string,由任意的字符组成的序列
- boolean布尔 true false、真假
- null:空,没有值或者空值,不代表任何东西,null与undefined的最大区别是,null是已经被认为定义了的,只不过它不代表任何东西,通常用法是清空某个值,比较特殊,null是个对象
- undefined:当访问的这个变量不存在时或者声明了却未定义时,系统始终在变量初始化之前把它设定为undefined,undefined的类型的值只有一个就是undefined,
注意它并不是语法错误,它只是一种数据类型
,出错了,console下会出现红色的警示
非基本数据类型
除了上面五种的数据类型以外的都是对象 下面介绍一下:获取元素的几种方法:
- document.getElementById("ID属性名");
- document.getElementsByClassName(“class属性名”);
- 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操作过程
- 获取元素
- 添加事件
- 执行动作
现在稍微讲讲拖拽的原理:
首先我们知道:完成一个物体在窗体的拖拽移动过程我把它分为了四部,找到操作的目标元素
-->鼠标按下
-->鼠标移动
-->鼠标抬起
能够拖动一个物体在页面上移动的,那么首先它一定得是一个绝对定位的元素
,不然会没有效果的,当然你不妨可以试试相对定位,我试了一下的,拖动是有问题的
我们最终的目的是:要获取所移动的元素要与浏览器左边left和上边top的值,动态的获取这两个值,然后利用鼠标的移动,确定它的位置,然后计算出目标元素与浏览器左边和上边的距离,就可以了的
下面分析下拖拽原理图:
由上图清晰的可以看出,我们只有计算出盒子midbox距离浏览器左边(x轴left)和距离浏览器上方(Y轴的top值),就可以了的,由于鼠标点下,触发被移动的目标,在完成下一次鼠标的再次点击之前,他们是连续触发的,并最终完成一个拖拽的动作,其中变化的值是鼠标不停的在窗体中移动,ev.clientX和ev.clientY这个值前后会随之鼠标的位置变化而变化,而不变的值是,在点击物体时,和移动物体midbox之间,鼠标点的位置,距离midbox左边缘(left值)和距离midbox上边缘(top的值)是不会变化的,我们正是利用它们变化的值,和不变化的值,简单的完成了一次鼠标拖拽的动作
光解释了一长串,口说无力啊,毕竟不能纸上谈兵了,写代码才是最核心的,下面是:css,html,js代码:至于代码,有兴趣看的就看一下,没兴趣的也没事了,只要掌握原理了,就好了的
另外一点作为代码补充就是:
- 针对处理盒子水平垂直居中的问题
上面已经文字阐述到,就不解释了的,值得一提的就是,当用left:50%,top:50%;在利用margin-left:盒子的宽度的负一半,和margin-top:盒子的高度的负一半,如果盒子本身有内边距padding和border的话,注意也是要加上去的,这种方式是比较简单的实现水平垂直居中,而且还实现了随着窗体的大小,自适应的居中的,但是这有个问题就是我做鼠标拖拽的时候,它是存在问题的,拖拽过程中会有时会乱跑的现象,卡了一下的,这个问题值得自己看看琢磨一下的,所以我用了第二种方法:动态的获取盒子的宽度高度,用浏览器窗口的宽度高度减去自身的宽度高度在除以2,那么就水平居中了的,这个实现得很顺畅,没有什么问题的,但是值得注意的是,当body的高度内容比较多时,出现了滚动条,那么注意在计算时加上滚动条的的高度就好了的,其实里面的代码,很多都可以优化,比如那么多的点击动作,可以把它封装起来的,实现代码的重用的,今天这个就不封装了的,下次在单独的把封装单独写一篇的,下面我列出的一些的规则:没事时,可以默念,写代码的时候,记得就好的,希望对你有用:
- 尽量所写的代码与HTML结构一致,可以通过父元素查找子元素
- 把核心主程序实现,用function给包裹起来
- 把每组不同的值给找出来,然后通过传参实现,把一些不同的值通过传参的方式给扔进去,达到代码重用
- 当弹出层的盒子是用display:none属性时,用原生js,obj.offsetWidth;obj.setHeight,是获取不到它的宽度和高度的,可以试一试的,它的宽度和高度显示是0的,但是在jquery中,这两个方法,确实有值的,无论你元素是隐藏还是从页面中删除,都是有值的,当使用display:none的时候,我做拖拽的时候,动态的获取宽度高度是,是有些问题的,就是始终没办法水平居中,然后把它换成具体的数值之后,却是正常水平垂直居中,如果你知其中的原因,可以告诉告诉我,非常谢谢的哈,当然我没有用这个属性,用的visibility:hidden,然而这个却是一点问题也没有,动态的获取数值,水平垂直居中,个人推荐使用这个,用具体数值,可拓展性不怎么好,还是尝试着多用js动态的操作dom元素吧
- 至于:代码中的事件 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
扫一扫即可关注