- 博客(90)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 《小白HTML5成长之路54》JS中如何设定静态变量
“小白，你知道什么是常量什么是变量么？”“知道啊！常量是无法被更改的，比如数学上常用的Pi的值是3.1415926、数学常数的值、黄金分割的值等等，当然还包括一些明确知道的值，比如正常人的胳膊数量是2，单手手指数量是5等等。变量是可以被随意更改的，比如人的身高、公司每月收入支出等等。”，小白利索的回答道。“你在javascript中怎么定义变量呢？”小白说：“你不是告我用var进行定义么？...
2018-03-18 18:15:40
130
原创 《小白HTML5成长之路53》入门级设计模式简单工厂模式
“小白，元旦假期过的还好吧！”“还行吧！睡了三天，冥想了三天，脑子里把最近看到javascript知识重新整理了一遍，对js的认识比以前清晰多了。”小白继续说：“只不过，我有个事情不太明白，一个站点或者一个游戏那么多功能，肯定会写很多代码的。他们肯定不会像我现在这样在页面里面一行一行的往下写代码吧？”老朱：“不错，小白，能提出这个问题说明你对js做了很深刻的思考。我在很早之前做开发的时候碰...
2018-03-13 17:35:13
64
原创 《小白HTML5成长之路52》javascript的匿名函数无处不在
自从了解js通过canvas压缩图片上传功能以后，小白对javascript的敬畏之心又提升了一大截，这两天在练习的时候发现自己平时熟悉的代码变得陌生起来，比如为什么定义函数时这两个方式都可以用。带着这个疑问，小白找到了老朱。“朱哥，为啥在js里面要用两种定义函数的方式呢？”老朱：“严格意义上来说上面那个不是定义一个函数，而是将一个变量指向了一个匿名函数，这里是引用的关系。你可以控...
2018-03-13 17:35:00
76
原创 《小白HTML5成长之路51》canvas压缩图片上传功能原理
"朱哥，昨天试了几把图片上传的功能，感觉还不错，不过有个小问题！"老朱：“什么问题？”小白：“小图片上传还好说，大图片上传的时候经常会卡顿一下。”老朱：“恩，很多人上传图片的时候都是直接上传原图的，很多相机照的原图大小都在4M左右，上传的图片如果都是这么大，不但用户觉得你的网站速度慢，还非常占服务器空间。”小白：“哦，确实是，很多人压根不知道自己上传的图片到底有多大。”老朱：“所以我们要让...
2018-03-02 23:38:15
108
原创 《小白H5成长之路50》js与PHP配合完成图片上传功能
“小白！还记得之前我们说过的jQuery中的ajax异步加载数据的方法么？”“记得，之前的代码我这里还有，你看看是不是这个？”老朱：“恩，没错，通过ajax向图片上传的页面把昨天获取到的图片base64编码发送过去，php页面就可以把图片存储到服务器上。”小白：“可是我不会php啊！这怎么办？”老朱：“没关系，你不用了解php是怎么把图片存到服务器上的，只需要知道把图片发送给图片上...
2018-03-02 23:37:42
80
原创 《小白H5成长之路49》图片上传功能之通过js拿到图片信息
“小白，昨天我们了解了input为file类型时选择图片的功能，我们暂且称它为inputfile吧，今天我们说一下javascript对inputfile的一些操作，为我们做图片上传做个准备。”小白：“好啊！真想知道js是怎么读取文件信息的！”老朱：“这是一个图片上传简单布局。”“主容器main里面包含了inputfile、缩略图容器和上传按钮。现在我们要做的第一步功能就是...
2018-02-05 13:12:04
103
原创 《小白H5成长之路48》电脑上的图片是怎样传到服务器上的
“朱哥什么时候咱做一个通过canvas图片上传的功能啊！”，小白一大早向老朱问道。老朱：“这个不能着急，图片上传涉及的功能比较多，你可以先试着做一个通过input控件上传的功能，做好以后我们在input上传的基础上配合canvas就可以实现图片压缩及剪切后上传了。”“input不是文本框么？它能做上传的功能？”老朱：“input的type如果设置成file它就能配合php等语言做文件上传，...
2018-01-24 15:01:25
68
原创 《小白H5成长之路47》将外部图片绘制到canvas上
“小白，canvas绘制图形功能自己看了么？”“看了，我自己画了些圆和线条，还绘制了问题，不过感觉没什么实用价值。”“这些功能对于做图表还是很有用的，了解一下就可以了，我们今天聊聊canvas在web前端应用中最常用的一个功能——重绘外部图片。”“外部图片直接插入到网页上不行么？为什么要在canvas中重绘呢？”老朱说：“假如用户上传头像的时候图片格式特别大，我们就可以把头像先在canva...
2018-01-24 15:00:08
87
原创 《小白H5成长之路46》与canvas的首次愉快会面
"朱哥！JavaScript这几天学的脑子都发热了，我怎么感觉越来越枯燥了！"小白一大早就向老朱抱怨道。老朱：“对象这块知识是js自始至终永远离不开的内容，而类又是对象的抽象，所以你前期了解类的知识还是有必要的，不过我们不是还没有深入学习类么！”小白：“还没有深入学习？”老朱：“恩，其实还有一种终极类的继承模式我们没有说，前两天我们做的类的继承看上去功能实现了，但是每次实例化的时候都要重新...
2018-01-24 14:59:59
75
原创 《小白H5成长之路45》JS如何实现一个完美的类继承
“朱哥，C#和java中的构造函数我明白什么意思，可是在js中并没有定义构造函数的说明，javascript中的构造函数到底在哪儿了？”小白找到老朱问道。老朱说：“你可以把定义类的时候function主体都看作是它的构造函数，通过prototype添加的方法看作是类的公共方法，这样就好理解了。你看下面这个类。”小白看了一下说道：“上面Obj1的function主体就是构造函数吧！它...
2018-01-24 14:59:42
66
原创 《小白H5成长之路44》JavaScript中也能做类的继承么？
“javascript中的prototype真是太好用了，在我理解prototype的时候感觉自己对js有了顿悟！”小白欢喜的说道。老朱：“恩，其实当你能把javascript中所有的数据类型都能理解为对象(包括函数也可以看作对象)之后，你再重新审视js就会发现它原来是这么灵活，以前很多公共js控件看不懂的代码突然能够理解了。”小白：“是啊！我在没系统学js之前一直以为js是一种简单的面向...
2018-01-18 11:34:41
76
原创 《小白H5成长之路43》js中prototype原型有多强？这才刚刚开始
"小白，昨天写的那个Man类还在不？"小白：“在呢！您看一下。”老朱看完代码以后，把代码调整了一下，跟小白说道：“我把代码改了一下，现在添加了另一个实例laozhu”“一般我们在做页面功能的时候，类基本都是从一个外部js地址加载进来，这个js文件里面可能包含了很多常用的类，我们是不能随便改它们的，因为还有其他的开发人员在引入这些js文件。但是有时我们又希望给这个类添加一个通...
2018-01-18 11:34:22
85
原创 《小白HTML5成长之路42》自己写一个简单的javascript类
“对象是具体的，类是抽象的！其他编程语言这块分的还是挺清楚的，在Javascript中类和对象有时是傻傻分不清楚。小白你看看这段代码可以执行么？”小白看完以后说道：“你这是定义了一个男人对象，然后给对象赋值后输出对象的名字和电话吧！应该可以执行！”老朱：“错了，这个是执行不了的，你有没有注意到Man里面name变量前面加了this，如果定义变量的时候前面加了this，就说明这个变量...
2018-01-18 11:33:51
77
原创 《小白HTML5成长之路41》javascript中的类其实你早就接触过
“小白最近我们说了好几次javascript中的对象，现在你对对象的构成了解了么？”小白：“了解了，对象可以通过两种方式进行定义。假如把我自己作为一个对象通过下面两种定义方式都可以：”老朱说道：“那如果页面中同时需要十几个像你一样的对象怎么办？”小白：“继续定义呗！还能咋地！”“那我要是不想让人修改对象的名字和性别怎么办呢？”小白楞了一下，说道：“这就没办法了。”老朱：“是啊！实际...
2018-01-09 16:31:21
76
原创 《小白HTML5成长之路40》怎样显示圆角图片
这几日，随着小白对HTML5认识的提升，他自己没事浏览网页的时候总会注意一些特殊的展示效果，让他印象最深刻的一个效果就是用户头像了，一个矩形的图片怎么就显示成圆形了呢？一上午没想明白，下午看着老朱没什么事，就去向老朱请教：“朱哥！网页上的图片怎么能显示成圆角呢？特别是正圆形是怎么做出来的啊？”老朱随口说道：“border-radius啊！之前我们已经用过几次了啊！”小白说：“这不是控制容器...
2018-01-08 07:34:01
97
原创 《小白HTML5成长之路39》如何通过滚动页面控制视频播放和停止
“小白，你仔细想一想网页上的视频什么情况下需要使用javascript进行操作？”“我把video的标签属性看了一下，感觉标签的属性已经可以实现所有功能了，autoplay属性可以让视频自动播放、controls属性可以给视频增加播放控件、loop属性能让视频循环播放、preload属性可以实现预加载，功能已经很完善了，还需要javascript控制么？”老朱说：“当然需要了，video标...
2018-01-08 07:33:43
462
1
原创 《小白HTML5成长之路38》插入视频的功能好简单
"朱哥，现在视频站好火啊！那些视频是怎么放到网页上进行播放的呢？一定很麻烦吧！"老朱：“不麻烦，HTML5标准下，一个video标签就搞定了。”小白：“一个标签就可以实现视频播放么？”老朱：“是啊！只要是支持HTML5的浏览器就可以，现在新浏览器都支持HTML5的，特别是手机上的浏览器妥妥的支持HTML5标准。”小白：“那是怎么实现的呢？能给我详细说一下么？我已经迫不及待的要学这个功能了。...
2018-01-05 08:03:45
107
原创 《小白HTML5成长之路37》JavaScript多个条件选择switch语句
本来对判断稍有点模糊的小白，上午经过老朱一顿各种“非”之后，感觉脑子都不够用了，他把javascript中的not true(作为判断条件当成false的undefined、null、NaN、0)这几个都自己动手写了些，终于明白了其中的奥秘，心想：“javascript中判断的时候只要记住false、undefined、null、NaN、0这几个值是假，剩下的都是真就可以了，总算记住了。”...
2018-01-02 07:56:29
111
原创 《小白HTML5成长之路36》加深了解javaScript判断语句
一大早老朱碰到小白问道：“小白，这几天学习web前端的过程中有哪些不明白的地方？”小白：“判断语句能不能再跟我系统说上一遍，用了一段时间javascript感觉判断语句还是用的不太熟练。”老朱：“好吧！那咱就再过上一遍。上次我跟你说过判断语句的条件是什么来着，还记得么？”小白：“记得，true、false还有undefined，true为真其他两个为假。判断语句：条件为真执行if里面的内容...
2017-12-30 21:31:26
94
原创 《小白HTML5成长之路35》再做一个顶部的提示信息
最近天气干燥，小白和老朱都感冒了，虽然状态不好，小白还是没有停止HTML5前进的脚步，他憋了一股劲一定要在2018年到来之前提高一个台阶。看到老朱来到办公室，小白赶紧凑过去：“朱哥，再来点新东西吧！”老朱哑着嗓子说道：“你先试着把昨天的弹窗增加一个出现的动画吧，正好熟悉一下CSS3动画。”小白：“消失的动画用不用做？”“消失先不用做，消失我们用了remove直接移除了弹窗容器，就算加上cs...
2017-12-29 08:03:56
79
原创 《小白HTML5成长之路34》给自定义弹窗添加关闭窗口事件
下午小白感觉有些感冒，身上特别沉，虽然一点状态都没有，但想起上午自定义弹窗的关闭事件还没有做，心里一直放不下，还是找到了老朱：“朱哥，有时间没？咱聊聊弹窗关闭的事情吧！”老朱也有点感冒，哑着嗓子跟小白说：“我看你今天的状态也不好，今天只把窗口关闭的方法实现了吧！你现在对JavaScript的机制还不是特别熟练，我们也不要做的太深入了，尽量用之前接触过的方法来实现。你打开上午的代码我们对着代...
2017-12-29 08:03:01
83
原创 《小白HTML5成长之路33》自定义弹窗修改弹窗内容实现方法
“小白！对象方法里面调用自己的属性怎么调用？”“this.语法调用啊！”老朱说：“没事我就是随便问问，今天我们继续完善昨天的弹窗控件，还是打开昨天建的那个javascript文件里的代码吧！”小白说：“好嘞，早就准备好了！”老朱又重新看了一遍代码说道：“小白，你说弹窗有哪几个地方是需要设置的？”小白想了想说：“提示的标题、提示的内容、还有点了确定要触发的事件！”“恩，这三个是比较关...
2017-12-28 07:52:33
179
原创 《小白HTML5成长之路32》把自定义弹窗做成控件的第一步
“小白，今天上午布局的那个弹窗想法不错！”小白说道：“我只是用CSS布了一个局，还没有添加用户交互呢！”老朱说：“不着急，像这种常用的功能你可以尝试把它做成控件，这样以后就能经常使用了，从现在开始我们用几天的时间了解一下，怎么做一个能够经常调用的控件吧！”“恩，这样确实不错，虽然做的时候麻烦点，但是以后使用起来就会很方便了！我应该做点什么准备工作呢？”老朱跟小白说：“一个控件包含CSS和J...
2017-12-28 07:41:59
81
原创 《小白HTML5成长之路31》半透明背景的自定义弹窗是怎么用CSS布局的
北方的冬天最怕有风，空气虽然好了，但是异常的冷，吸几口冷风感觉肺都结了冰。一大早小白来到办公室琢磨用户交互方面的问题，看了几个网站发现很多网站的弹窗都是自定义的，而且还把弹窗周围的区域做成了半透明状，看上去非常不错。于是小白也准备自己通过css布局一个弹窗试试，一来以后肯定会用上这个功能，二来熟悉一下最近掌握的CSS+HTML布局。说干就干，小白打开webStrom做起了弹窗的布局。他首先...
2017-12-26 08:09:41
107
原创 《小白HTML5成长之路30》怎样让任意块元素基于父容器居中
小白郁闷的找到老朱说道：“朱哥，我想让一个块容器在一个容器里面垂直居中怎么这么难啊！”老朱：“你是怎么实现的？”小白说：“比如一个容器的高度是400px，子容器的高度是300px，我就把子容器CSS上边距设置成50px。”“那要是父容器高度发生变化你的子容器岂不是很麻烦”小白郁闷的说道：“你可说吧！头疼的很！怎么才能轻松的设置垂直居中啊？”老朱说：“如果一个容器只有一行文字...
2017-12-26 07:42:26
79
原创 《小白H5成长之路29》一个简单的用户登录验证JS对象
“小白，知道怎么制作登陆模块么？”“大概能想明白，简单的登陆主要是用户名、密码两个输入框，复杂点的可能会加上验证码和手机验证。用户填写好信息以后，点击确定后把用户输入的信息通过POST方式发送给做登陆处理的PHP页面。做登陆处理的PHP页面判断如果用户名密码正确，则返回登陆正确的JSON字符串，如果用户名密码错误则返回对应的错误信息JSON字符串。”“嗯，基本没有问题，不过有一个情况你没有...
2017-12-25 12:10:04
107
原创 《小白H5成长之路28》用CSS3和jQuery实现简单的右下角弹窗
“小白，我们接着说CSS3动画的事情吧！今天上午你了解了一下关键帧keyframes，已经可以实现一些打开页面后自动执行的动画效果，现在我们试试通过jQuery动态给容器添加CSS3动画。”“为什么要动态添加呢？”“有时我们并不希望打开页面就执行一个动画，而是希望通过用户的点击或者鼠标移到某个元素上再触发对应的CSS3动画。你有没有发现，现在很多网站的图片鼠标移上去图片会稍微变大一点，鼠标...
2017-12-21 10:10:45
160
原创 《小白H5成长之路27》首次接触CSS3动画，感觉棒极了
“小白，昨天的jQuery加载JSON数据练习的怎么样了？”“感觉很不错，虽然对handle.php怎么连接的数据库，怎么输出的JSON数据不明白，不过我感觉我是不是可以把handle看成是一个静态的JSON格式的文本文件？”“恩，目前可以这么看，改天我教教你简单的PHP知识吧！今天咱再来学个新的技能CSS3动画，有了CSS3动画我们就可以让页面更活泼，给用户的体验会非常不错。”“CSS3...
2017-12-20 12:20:24
78
原创 《小白H5成长之路26》用jQuery的ajax加载实现异步信息切换
“我们继续上午的ajax加载，把剩下的事情做完吧！”，老朱跟小白说道。“好的，我现在就打开上午的那个文件。”“好的，小白，上午我们写的这个ajax加载是向handle页面发送一个用户uid，handle页面给我们返回这个用户的标识(uid)、姓名(userName)头像(imgSrc)、电话(tel)。现在我们实现这样一个简单的功能：点击用户列表中用户的名字，然后在详细信息显示区显...
2017-12-18 07:41:29
89
原创 《小白H5成长之路25》原来jQuery的ajax加载外部页面原理很简单
“嘿，小白！你能把昨天收集的用户反馈表给我么？”“可以啊，稍等，我等下给你发过去！”不一会，小白把用户反馈表给老朱拿了过去，老朱拿到反馈表以后把表放到了桌子上，对小白说：“小白，反馈表的事情我一会儿再处理，我再给你说个知识点吧！刚刚我问你要反馈表，你把表给我后我再处理的整个过程就是JavaScript的ajax请求的过程。”老朱继续说道：“都知道ajax是一个异步请求，很多人一听到异步请求...
2017-12-18 07:40:42
70
原创 《小白H5成长之路24》JavaScript处理JSON的初体验
下午办公室暖气很热，大家的工作状态都不是特别好，感觉每个人都像树懒一样或缓慢移动鼠标、或懒懒的打着瞌睡。小白也不在状态呆呆的盯着电脑，不知道该做些什么。经过一阵阵朦胧的困感之后，小白还是起身找到了老朱。“朱哥，下午实在没状态，有没有简单点的知识，给我说一个呗！”老朱也不在状态，布局方面的实在是不想说，思考了半天说道：“要不说一下JSON数据吧，这个简单，你只要了解了JSON数据接下来就可以...
2017-12-14 10:12:42
118
原创 《小白H5成长之路23》弹层与浮动导航是怎么实现的
"小白，你最近看CSS的时候碰到position属性了么？"“碰到了，通过position可以改变容器的定位，我记得官方描述是这样的：这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。”“恩，不错，今天咱说一下position里面的fixed类型吧，这个属性值是让容器基...
2017-12-13 10:23:58
105
原创 《小白H5成长之路22》JavaScript对象的另一种表现形式
经过一上午的练习，小白对JavaScript中的对象有了一定的了解，下午时分小白又找到老朱，想问他还有什么需要学习的知识。老朱对小白说：“上午我们说了对象的原始定义方式，在平时的使用中还有一个非常快速的定义对象的方法，通过大括号括起来直接定义变量和方法。”“小白，你看这里的定义方式是不是更方便？变量和方法使用键值对的方式进行定义，使用起来更加简洁。如果有一个处理用户信息的函数set...
2017-12-13 07:39:49
61
原创 《小白H5成长之路21》JavaScript中的对象之道
“道生之，德畜之，物形之，势成之，知道这句话出自哪儿么？小白！”，老朱一大早神叨叨的跟小白说。“不知道，肯定是古人说的吧！哈哈～”。“这是道德经里面的一句话，说的是：世间万物最初的生机都是来源于“道”的那个生命原始海洋，都是“道生一，一生二，二生三，三生万物”而来的。我个人认为这是老子对对象非常好的一个总结，JavaScript里面的Object就是老子说的道，在JS中所有的对象都来自于O...
2017-12-09 14:18:12
65
原创 《小白H5成长之路20》第一次体验js里面的函数
“还记得前几天我们说的鼠标事件么？里面用到了两个函数overme和outme，今天咱聊聊函数的一些基础知识吧！”“好啊！前两天说这两个函数的时候我心里就有很多不明白的地方，能系统的说一下就最好了！”老朱说：“我觉得刚开始也不一定要把函数相关的知识都说了，咱还是挑一些重要的来说吧！”老朱接着说：“在js里面函数也可以作为一个参数传递，也就是说我们可以定义一个变量，让变量等于一个匿名函...
2017-12-07 22:23:51
57
原创 《小白H5成长之路19》if判断语句的一些用法
“小白，你面临过选择么？”“面临过啊，今天上午就在犹豫是骑自行车还是坐公交，出门一看天太冷，所以就做公交来上班了。”“如果不冷你就骑自行车来了，对吧？冷或者不冷就是一个布尔类型，在js里面布尔类型只有两个值true(真)和false(假)。在js里面也存在判断类型的语句，如果把你今天早上的选择写成判断语句可以这样来写”“你看！我定义了一个cool变量让他的初始值是true，后面使用...
2017-12-07 22:23:29
265
原创 《小白H5成长之路18》聊一聊循环语句的用法
“还记的我们之前说过的数组么？”“记得，一个数组可以包含一组数据。要遍历一个数组可以通过for循环输出数组中的数据。”“好，小白，你现在定义一个数组，给数组设定一些初始值，然后遍历一下，我看看。”“这里的i是一个计数器，每循环一次i加1，当i小于数组a长度的时候，每轮执行一次控制台输出，当i等于a的长度的时候循环就会停止。”“嗯，理解的不错！那如果是一个二维数组怎么遍历？比...
2017-12-07 14:12:23
81
原创 《小白H5成长之路17》终于可以说说网页中图片的事情了
“小白，图片在网页里面的重要性不言而喻，今天咱聊聊最常见的图片吧！网页中插图图片使用img标签，img标签不是图片，它只是图片的占位容器，我们需要通过src属性告诉img容器图片的链接。”“哦~那是不是通过jQuery改变img标签的src属性就可以实时改变一个img标签的图案？”“嗯，说的不错，比如鼠标移到一个图片上后让图片变成另一个图，就可以通过jQuery更改img标签的src属性。...
2017-12-07 14:12:05
101
原创 《小白H5成长之路16》关于如何学习HTML5的一次探讨
昨天晚上有风雾霾吹的一点不剩，高楼在蓝天的映照下非常清晰高大。小白最近学习劲头很足，也没有心思出去玩，在路上一边走一边思考这几日的心得，走着走着就到了公司楼下。“我再去练习练习吧！”心里想着就走进了公司，没想到正好碰到老朱加班。“朱哥，周末过来加班啊！”“唉~有个H5的小游戏要做，客户周一就要，没办法就过来了！”“H5小游戏您是也是用之前教我的那些知识做的么？”，小白激动的问到。“你现在学...
2017-12-05 13:58:35
72
原创 《小白H5成长之路15》正确认识网页中的文本框
“小白，你知道文本框么？”“知道，就是网页里面输入文字的地方！”“哦，那你知道表单么？”“不知道，表单是什么啊？”“文本框就是一个表单元素，在HTML语言里面表单主要用来收集用户输入。比如文本框、单选框、复选框等等。其他的表单你目前学了也用不到，文本框是表单中最重要的一个，今天咱聊一聊文本框吧，文本框以后会成为你练习的常用元素。”“首先文本框是一个行内元素，行内元素跟块级元素不同之处在于它...
2017-12-04 07:35:24
170
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人