• input的onchange事件实际触发条件与解决方法

    input中onchange事件特别常用,现在同onclick一样使用频率很高,然而onchange的机制实际上有很多童鞋并不清楚,我们通过实例来分析这个事件的特征。

    触发onchange

    首先页面有一个input标签,并且已绑定onchange事件,如

    <input type="text" onchange="console.log(this.value);" />
    

    这个事件要做的动作很简单,只是把input的值在控制台上打印出来就好。效果

    full

    ...

    READ ALL

  • 一些让我悲催编程经历

    rm命令

    有一次,项目出了点问题,为了图方便就直接ssh上去了。问题解决后准备delete测试文件,结果不小心直接使用rm -rf命令把项目整个程序删除了,而备份文件不是最新的程序。结果花了将近一周才把程序重新部署到线上,恢复访问。从那以后,我每次登陆服务器时,不轻易敲rm这个命令,心里有恐惧感。

    升级程序版本

    我一直喜欢把软件升级到最新的版本,有一次我发现MySQL又出新版本了,我于是赶紧下载,解压,编译,安装。但总是在某个地方出错安装始终进行不下去,而每一次编译MySQL都需要十多分钟特别耗时。最终我是放弃了最新版本的安装,而站点也因为我的升级操作停止运行了将近一天的时间。其实因为升级程序导致站点不能访问的状况已经有好几次,升级服务器软件的操作要谨慎,因为极有可能不兼容导致环境出问题。

    ...

    READ ALL

  • 关于Web服务器头部的Server与X-Powered-By信息

    通过工具可以查询到站点服务器信息与程序信息及版本,其实这是通过服务器响应头信息里返回的,如果把这些信息暴露出去对站点不安全,我们可以通过隐藏或修改头信息的方法来阻止这些信息暴露

    头信息包含服务器信息与程序信息

    有些查询工具在我们输入某个站点的URL后就能判断这个站点的WebServer与程序类型

    例如在站长工具下guofei.me站点

    full

    查询豆瓣的

    full

    ...

    READ ALL

  • Chrome可以其它浏览器拖拽图片

    Chrome永远都是走在技术前线,总会有些惊人的表现,最近我在做一个拖拽上传图片功能时发现Chrome竟然可以直接从其它浏览器拖拽图片。

    普通拖拽事件,各个浏览器都识别从本地磁盘拖拽的文件

    HTML5的拖拽drop事件让Web应用看到了两点,然而在普通的drop事件里,多数浏览器只支持从本机电脑磁盘上拖拽到浏览器,例如:

    JavaScript代码

    // 获取要触发drop事件的DIV
    var du = $('dragUpload'); 
     
    // 根据ID获取对像
    function $(id) {
      return document.getElementById(id);
    }
     
    // 把拖拽到网页上的图片显示到页面上
    function displayImage (container,dataURL) {
      var img = document.createElement('img');
      img.src = dataURL;
      container.appendChild(img);
    }
     
    // 拖放释放主要处理函数
    du.addEventListener('drop', function (e) {
      e.stopPropagation();
      e.preventDefault();
      du.className = du.className.replace('drag-over','');
    
      // 获取拖放文件 一个数组
      var files = e.dataTransfer.files;  
      handleFiles(files);  
    }, false);
    

    ...

    READ ALL

  • JavaScript判断一个变量是对象还是数组

    typeof都返回object

    在JavaScript中所有数据类型严格意义上都是对象,但实际使用中我们还是有类型之分,如果要判断一个变量是数组还是对象使用typeof搞不定,因为它全都返回object

    var o = {name: '琼台博客'};
    var a = ['reg', 'blue'];
     
    console.log( ' o typeof is ' + typeof o);
    console.log( ' a typeof is ' + typeof a);
    

    Output

    o typeof is object
    a typeof is object   
    

    ...

    READ ALL

  • JavaScript使用eval将字符转换为程序代码

    首先声明,不推荐使用eval,这是非常危险且不稳定因素太多的做法

    近期项目有这样一个需求,从服务器端返回的JSON里有一段JavaScript代码,需要在浏览器端执行它,把结果填充到一个数组里,最后toString回一个字符串,然后再提交到服务器保存。

    首先,已有一个列表:

    var list = [
      {
        name: '张三',
        fun: function () {
          console.log(this.name);
        }
      }
    ];
    

    而服务器可能读取某个js文件,内容格式如下:

    {
      name: '李四',
      fun: function () {
        console.log(this.name);
      }
    }
    

    ...

    READ ALL

  • JavaScript声明对象时属性名加引号与不加引号的区别

    这个问题很好有人关注,但我每一次在声明一个对象属性的时候都要想想要不要给属性加引号?加引号与不加引号有什么区别?

    其实在JavaScript中,加引号与不加引号都是一样用,都是有效的。如

    var obj = {
      name: '琼台博客',
      'age': 18,
    };
     
    console.log('name: ' + obj.name);
    console.log('age: ' + obj.age);
    

    Output:

    name: 琼台博客
    age: 18
    

    哪在什么时候有区别呢?在你使用一些非合法命名规则的时候,就显的有必要了,比如

    ...

    READ ALL

  • jQuery对象与JSON互相转换

    JSON串的方便以及通用性逐渐成为一种规范。jQuery有一个插件jquery-json可以轻易的实现对象与JSON互相转换。

    对象转JSON

    主要使用toJSON()方法

    var obj = {
      name: '琼台博客',
      url: 'www.qttc.net',
      desc: '个人技术日志',
      author: 'Nicholas Lee'
    };
     
    var json = $.toJSON(obj);
    console.log(json);
    

    Output:

    {"name":"琼台博客","url":"www.qttc.net","desc":"个人技术日志","author":"Nicholas Lee"}
    

    ...

    READ ALL

  • IE input file隐藏不能上传文件解决方法

    又是IE的一个问题,近来是跟IE浏览器磕上了,这个问题发现不少人也遇到过,实在蛋疼。但今天这个不能算是一个bug,因为IE可能是从安全角度上考虑结果导致的。一步步来解读。

    普通上传例子

    首先普通的文件上传呢,很简单,前端代码

    index.html

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>file标签隐藏</title>
    
      </head>
      <body>
        <form action="http://192.168.1.99/upload/upload.php" method="post" enctype="multipart/form-data">
          <input onchange="document.forms[0].submit();" type="file" name="file" />
        </form>
      </body>
    </html>
    

    ...

    READ ALL

  • IE9以下自定义命名标签方法

    自定义命名标签

    在早期,HTML网页头部常常这么写,如:

    HTML

    <html xmlns="http://www.w3.org/1999/xhtml">
    

    xmlns是值HTML文档所用到的命名空间,通常都是w3c的规范,所以都指向这个地址。如今HTML不少站点为了特殊需求,都添加不少自定义的命名标签。

    比如:

    <lee id="lee">这里是自定义lee标签</lee>
    

    样式定义

    lee {
      display:block;
      width:300px;
      height:100px;
      background:red;
      border:5px solid #000;
      color:yellow;
    }
    

    ...

    READ ALL