漫谈javascript 单线程异步io回调的特性

javascript经过浏览器大战的几次更新换代,终于一统江湖,稳坐第一把交椅,经过你会发现javascript语法和实现并不尽人意,但是丝毫不影响它的发展.我们最开始接触javascript应该大部分是从html中的js脚本开始,但是这种看似简单的语言稀里糊涂的用了好几年,也没有搞清楚它的一些原理机制,有没有躺枪!起码javascript在操作dom的时候用了各种事件回调,比如按钮,链接的点击,鼠标经过,获取焦点等等.在这个过程中,我们在dom上绑定一个事件回调函数 比如 onclick="doCheck()" 这个过程就是给dom元素注册了一个click 事件,并且绑定

userAgent判断客户端浏览器来自PC还是移动端

今天在三思悦网站通过微信上分享了一篇关于婴幼儿教育的帖子,等来到公司自己点进去一看,彻底凌乱了,看上去很多余的页头,样式完全错乱了,还有画蛇添足的页脚....移动浏览器可视化范围很小,所以充分利用有限的空间去展示有价值的东西,页头,页脚,侧边栏都是可以弱化,甚至不显示效果更佳.下面进行优化改造,我打算采用js来分辨pc浏览器还是移动端浏览器,pc端浏览器和移动客户端浏览器是通过 userAgent 来分辨,直接上代码:navigator.userAgent.match(/Android/i)//安卓客户端浏览器 navigator.userAgent.indexOf('iPhone&#

jquery链式操作,dom操作,事件操作- 基础训练第二篇

jquery选择器之基础训练第一篇链式操作jQuery允许把一系列的操作像链条一项写出来,比如下面的形式$('select').find('[class=city]').find("option:selected").val(); 上面的表达式分步显示是这样的:$('select') 找到所有下拉列表$.find('[class=city]') 过滤class=city的下拉列表$.find('option:selected').val() 找到下拉列表被选中的项的值之所有jquery支持这种极

jquery选择器之基础训练第一篇

jquery是前端开发者最喜欢的javascript开发框架之一,就像他的宣传语一样,写更少的代码,做更多的事情,现在拥有一大波开发者粉丝,甚至微软将它作为官方库,这一切说明jquery在开发者心中确实有很高的地位.jquery有一个强大的构造函数jQuery() 也就是我们常常简写的 $ ,这个构造函数强大之处在于,它能识别复杂的选择表达式进而找到你想要的元素.所以使用jquery的前提是会使用他的选择表达式,下面几种类似css选择器$(document)//选择整个文档对象 $('#documentID')//选择ID为myId的网页元素 $('a[name=me

jquery 常用小功能收集

在新窗口打开链接$(document).ready(function(){ //全部链接新页面打开 $('a[href^="http://"]').attr("target","_blank"); //部分链接新页面打开,比如class='menu'的链接 $('a[class='menu']').click(function(){ this.target="_blank"; }); });<a href="http://www.op

AngularJS快速开始

Angular学习之旅,从Hello World开始开始学习AngularJS的一个好方法是创建经典应用程序“Hello World!”:使用您喜爱的文本编辑器,创建一个HTML文件,例如:helloworld.html。将下面的源代码复制到您的HTML文件。在web浏览器中打开这个HTML文件。源代码<!doctype html><html ng-app> <head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script&g

node.js 下使用mocha 来做测试 test for node.js

NodeJS里最常用的测试框架估计就是mocha了。它支持多种node的assert libs, 同时支持异步和同步的测试,同时支持多种方式导出结果,也支持直接在browser上跑Javascript代码测试。本文示例大多源于官网示例,部分示例结合需要或自己的感想有所改动。更多介绍请看 官方网址:Mocha on GithubInstallation:当你成功安装nodejs v0.10 和 npm后执行下面这条命令。#npminstall-gmochap.s. Ubuntu的注意apt源里的nodejs版本会比较旧,某些module会不支持,请从nodejs官网进行源码安装。First st

Angular 基础学习教程

我们现在开始准备编写AngularJS应用——phonecat。这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用。进入angular-phonecat目录,运行如下命令:gitcheckout-fstep-0该命令将重置phonecat项目的工作目录,建议您在每一学习步骤运行此命令,将命令中的数字改成您学习步骤对应的数字,该命令将清除您在工作目录内做的任何更改。运行以下命令:nodescripts/web-server.js来启动服务器,启动后命令行终端将会提示Http Server running at http://lo

jquery 根据屏幕宽度改变图片宽度

投稿人: 海涛varclientWidth=parseInt(document.body.clientWidth); $('.detail_contentimg').each(function(i,n){ $(this).on('load',function(){ varwidth=parseInt(this.width);//图片实际宽度 varheight=parseInt(this.height); varoutwidth=width;//图片输出宽度 varoutheight=height;             var rateWidth = (cl

【随笔】javascript 超越 ruby 稳坐 github 第一把交椅

Github 托管这各式各样的开源项目,编程语言多种多样,当长久以来Ruby语言开发的项目居首.原因是因为Github 本身就是由Ruby 社区诞生出来的,所以长久以来它是Ruby的大本营.逐渐其他语言开发的开源项目也托管过来,久而久之语言种类越来越多,但是从未撼动过Ruby 的地位.但是到目前为止,javascript已经在github上稳坐第一把交椅,我个人认为是这几点因素:(1)如今前端javascript以垄断形式抢占web浏览器,可见前端javascript 工程师一抓一大把.(2)2009年发布至今的node.js 运行在服务器后端环境的javascript,以前得天独厚的web开

mac 下用 brew 安装mongodb

mac 下安装mongoDB一般俩种方法.(1)下载源码,解压,编译,配置,启动 比较艰难的一种模式.(2)brew install mongodb ,然后就可以悠闲的品一口茶,顺便瞄一眼网易新闻,这是一种傻瓜模式.但傻瓜模式也有人为干预的时候,粗略说一下使用brew 安装mongodbzhangzhi@moke:~/code$ brew install mongodb此图说明已经安装成功,安装的目录就是 /usr/local/Cellar/mongodb/2.4.9第一次启动服务端,这里需要做一些准备工作.1.默认mongodb 数据文件是放到根目录 data/db 文件夹下,如果没有这个文

走火入魔-javascript prototype 原型继承

在前几篇博客中谈到了用javascript中利用函数的函数模拟类,既然有类,那就应该存在面向对象的三大基本属性,或者说可以模拟出面向对象的三大基本属性.今天我们要学习的就是面向对象的继承 – javascript原型继承.为什么叫原型继承,因为我们知道javascript本没有类,它完全是基于原型对象的一门弱类型语言.所以javascript依靠原生对象创建出来的新对象就继承了原生对象的一些属性和方法.上面模拟了一个person类,person构造函数里初始化了姓名,然后我们创建一个学生的对象,并起名为 ‘小小’ 最后程序运行结果显示 小小.其实student 对象并没有定义姓名属性,为什么会

走火入魔 – javascript call apply 实现继承

上一博文说到了 javascript 中的原型继承,还说到了和大家分享 call , apply 实现继承,所以,就有了这篇博文.我们还是定义一个person 类 和一个 student 类,如下上面的student 类的构造函数传入了3个参数,当我们用call 实现 student 继承 person 的时候时,person的构造函数只实现了2个参数的传入,所以第三个参数必须要student自己来实现.及学生有了成绩的这个属性.student 类还重新定义eat 方法,到底之类重写父类的方法时,父类的同名方法会不会被覆盖? call 能不能实现 student 继承 person ? 这些疑

javascript 字符串和时间类型相互转化

常见的时间类型字符串:vardate1="2014-03-0912:00:00";javascript 对 类似上面这种时间转化不感冒,它更青睐的是这种字符串格式的时间 "2014/03/09 12:00:00" ,我们姑且称作date2所以有种非常简单的方法就是将 date1 的格式转换成 date2 的格式然后再转化时间类型.如下vartime1=newDate(Date.parse(date1.replace(/-/g,"/")));上面一行代码实现了date1 转 时间类型.求时间差方法:var days=time1-time

jQuery 源码分析学习 — 优秀前端框架jQuery框架认识

从今天开始学习优秀前端开源框架jQuery源码.本系列主要针对 jQuery1.6 源码分析学习.准备工作:初始jQuery 框架.(function(){ // javascript  代码…… })();所有的jQuery 代码都包含在这个自调用匿名函数中什么是匿名函数?类似这样的函数定义(function(a,b) { console.info( a+b); })( 5,6);匿名函数其实是一种函数字面量,就像对象字面量一样{name:”小小”,age:1}  第一对圆括号括起来的function(){….}  是匿名函数的函数体,第二对圆括号 (5,6) 是匿名函数的参数,此函数字面量

走火入魔javascript — 分享几个好多人执意往里跳的”坑”

javascript 是一门容易上手也是一门如意犯错的语言,为什么这么说,它零活的类型转化有时让你摸不到头脑.类型有没有定义都无所谓,一旦你的变量前少了var ,那可能会造成一个严重的bug ,污染了全局变量,甚至修改了全局变量的值,导致其他引用该变量的程序出错.函数形参和实参可以不匹配,不匹配到什么程度呢? 类型可以不匹配,甚至参数数量也可以不匹配……..等等javascript里的一些坑,如果你发现了一定要绕过去,如果你发现不了,那可能浪费你很多的时间去调试一个bug1.关于 NaN 类型,这是个非数值类型,那它的值是什么呢? 谁都不知道,的确,它自己都不知道.所以看下面的坑if(NaN=

走火入魔-javascript 中的类

嗯,没错,今天就是要讲下javascript中的类,哈哈,希望不要对大家有所误解!稍微对javascript有所了解的人应该知道,javascript这门弱类型语言没有类的概念,它是基于对象的.看了上面这句不仅有人低估起来了,既然有对象,为啥能没有类呢? 的确,javascript 是一门很怪异的弱类型语言,它的怪异之处以后慢慢讲,而它基于的对象并不是从类实例化过来的对象,而是原型对象.原型对象从哪来? 用一个不确切的比喻来说好比造物主创造世界的时候初始化了一些原生的东西,比如男人,女人,这是俩个活生生的原型而不是类型,也就是说javascript本身就内置了几种对象,而以后创建的对象都是从这

javascript中的对象

简单说下关于javascript中的对象.javascript 不是一门面向对象的语言,而是一门基于对象的语言,它的所有类型都基于Object原型而存在.但是我们常说 javascript中包括值类型 ,比如 boolean ,number, string 等值类型,其实这些值类型被称为 伪对象,他们对应javascript中三个内置对象分别是:Boolean , Number , String 而解析器将这三个对象的方法和属性同样绑定在对应字面量值类型上(boolean,number,string) 所以javascript中值类型也是也拥有了方法和属性,一般推荐直接使用这3个内置对象的字面

javascript私房菜-百变函数eval

如你所想,确实有点标题党手里有本鸟哥的<<linux私房菜>>对于一个linux菜鸟来说受益很大,所以我也来道私房菜,对鸟哥致敬!!eval 很神秘,你不觉得吗? 你可能常常会用到这个函数,但是有不太明天它到底是干什么的,其实我之前也一样非常糊涂,所以写了这篇博和大家一起学习探讨.很早一段时间我认为 eval 是个格式化函数,为什么这样认为,起因是ajax接收后台传过来的json格式字符串,javascript直接接收后台传入的json格式总是不识别,只要用神奇的 eval 函数转化一下就ok了,下面我们一起来认识一下 evalevalw3c 给出的定义是: eval(

jquery 判断某个元素在DOM中是否存在

javascript 代码下判断 DOM 下是否存在某个元素if(document.getElementByIdx_x(‘but’)){ alert(‘元素存在’); }else{ alert(‘元素不存在’); }但是在JQuery 下如判断某个元素是否存在.jquery 内置没有直接判断dom中某个元素是否存在的方法.$(“#but”) 获取到的是jquery 对象,是一个object,无法判断此元素是否存在.但是jquery 对象有个length 属性,表示当前jquery 对象中获取到几个 domElement 元素.所以我们的jquery代码可以这样写:if($(“#but”).le

走火入魔javascript — this关键字

this的指向是由它所在函数调用的上下文决定的,而不是由它所在函数定义的上下文决定的。(1)在全局范围内,this就是指全局对象.alert(this);this直接指向了当前环境的全局对象 window(2)调用函数时,this指向全局对象.例如 test();functiontest(){ alert(this); } test();因为调用test() 的环境就是全局,结合开开头第一句话,this 指向当前执行环境,而非定义环境,所以很容易理解当前this就是指向 window(3)函数的方法调用时,this指向调用方法的对象. 例如 obj.test(); 这时this 指 obj对

利用window.name 实现iframe 跨域传值

原理:浏览器跨域ifram禁止互相调用/传值.但是调用iframe时 window.name 却不变,正是利用这个特性来互相传值,当然跨域下是不容许读取ifram的window.name值.所以这里我们还要准备一个和主页面http://www.a.com/main.html 相同域下的代理页面http://www.a.com/other.html ,iframe调用子页面 http://www.b.com/iframe.aspx执行流程:浏览器执行主页面 http://www.a.com/main.html 时创建iframe 加载子页面 http://www.b.com/iframe.asp

走火入魔javascript – javascript中的垃圾回收机制

javascript的垃圾回收机制是运行环境自动收集机制.也就是说执行环境负责管理代码在执行过程中使用的内存.垃圾回收原理:找出内存中不再继续使用的变量,将其所占用的内存释放,开发人员不再关心内存的使用情况,内存的分配已经无用内存的释放完全实现了自动化管理.垃圾回收的方法有2种:(1)标记清除(2)引用计数标记清除:是目前javascript最常用的一种垃圾回收机制,当变量进入执行环境,将被标记为 “进入环境”当变量离开执行环境时,将被标记为 “离开环境”.垃圾收集器在运行时会给存储在内存中的所有变量都加上一个标记,然后检查哪些变量还在环境中使用,将去掉这些变量的标记,检查哪些变量被环境中的变

走火入魔javascript – 非值类型转化为整形方法

数值转化的3个函数(1) Number()(2) parseInt()(3) parseFloat()(1)可以用于任何类型转化为 数值型.(2),(3)专门用于字符串转化为 数值型.Number() 函数转化规则:Boolean 类型: true 转化为1, false 转化为0.数值型: 只是简单的传入和返回.Null类型: 转化为0.undefined: 转化为NaN.字符串:遵循如下规则(1)如果字符串只包含数字,直接转化为对应的数值.(2)如果字符串包含有效的浮点格式 如 “3.3″ 则直接转化为对应的浮点格式.(3)如果字符串中包含16进制格式字符串,如 “0xf” 则直接转化为对

javascript 基本类型有哪些?

Undefined:Undefined 类型只有一个值 undefined ,表示变量未定义此类型派生自Null 类型,所以出现一个很有趣的东西 if(null==undefined)alet(‘true’);将执行并弹出 true,因为条件是恒等的.当我们定义javascript变量的时候,其实默认就赋值为 undefined.var test; 其实等价于 var test=undefined;所以:当你要给一个对象定义变量时,最好这样, var testClass=null; 这样 testClass的默认值不少 undefined,保持的是一个空引用的null,下一步给testClas

采用P3P实现浏览器跨域 iframe读写 cookies

网站采用iframe框架形式嵌套了B网站的一个页面C,直接打开页面C会在本地保留一个cookie文件,而当采用A网站iframe框架形式嵌套后就无法成功生成cookie文件,该问题仅在IE浏览器环境下出现,firefox、chrome、Safari浏览器下没有问题。造成该问题的原因:一个所谓的隐私首选项(简称为P3P)的W3C标准。只有在每一页上设置一个cookie发送头,才能允许Internet Explorer接受第三方Cookie。换言之,只有在页面C上设置一个cookie发送头,那么A网站iframe框架形式嵌套后就可以在IE下成功获得页面C的cookie。PHP:header(‘P3

express bodyParser post上传文件request.body 不能获取表单值

问题如上描述:express bodyParser post上传文件request.body 不能获取表单值可以上传保存文件到指定目录,但是form 里其他表单项却无法用 request.body['表单name'] 来获取表单值.express 配置如下:app.use(express.bodyParser({ uploadDir:__dirname+‘/upload/’, keepExtensions:true, limit:10000000, defer:true })); app.use(express.multipart()); app.use(express.me

javascript 基础训练 Array数组

Array 是javascript语言中的一种引用类型,表示js里的数组.Array 对象的创建大致有4种方法.(1) var arr=new Array(); 上面使用构造函数创建了一个新的数组对象 arr,此数组为空数组,里面没有任何元素.(2)var arr=new Array(num);上面的num为整数,表示创建一个包含num个元素的空数组.(3)var arr=new Array(11,’xiaoxiao’,function(){alert(’3′)})上面调用构造函数时填充了3个参数,其实可以更多,表示创建一个数组并依次把参数当做新数组的元素填充到数组中.可见js的数组中元素可以

my97显示双日历

大名鼎鼎的my97 日期选择控件,做开发的攻城狮应该或多或少都了解.今天正好有个需求是现实双月份,而且截至日期要大于开始日期等需求,第一时间想到了my97控件.首先把最后的效果图放上来一睹为快!我的页面首先有2个文本框,一个开始日期,一个结束日期<inputtype=“text”id=“startTime”placeholder=“起始日期”/>- <inputtype=“text”id=“endTime”placeholder=“结束日期”/>首先去 my97 官网下载控件,引用的时候最需要引用一个主文件即可,其他样式,图片等都不需考虑,脚本内部做了引用.<sc

javascript 基础训练 Function 函数对象

正如标题所写,Function 确实是一个对象.而我们定义的任何一个函数其实都是Function 对象的一个实例,也可以理解为指向 Function 对象的一个实例.既然是对象的一个实例,那肯定指向了Function 类型的一个引用. 既然指向了一个引用类型的内存地址,那你也可以简单的把我们定义的函数理解为一个变量,这个变量指向了一个引用类型的地址,这个地址指向了Function 对象的一个实例.既然我们定义的函数其实是一个变量,那这个函数实例地址可以同时指向多个变量.看下面的代码:var add = new Function("n", "m", &qu

回到顶部