本周群问题分享

收集时间:2016.4.18~2016.4.22

温馨提示:小编从大家的问题当中提取了几个比较经典的问题与大家一起分享。

JavaScript

如何获取上传图片的路径?

2016.4.18~2016.4.22

核心概念

本地图片与服务器图片路径

参考答案

1 可以利用后台语言PHP来获取图片路径,PHP当中通过$_FILES这个全局变量进行文件相关信息的获取,使用$_FILES["file"]["name"]获取文件的名字;如果想具体了解PHP文件上传操作可以在HTML5学堂官网搜索“文件上传”;

2 如果图片已经在服务器当中(正常来说,数据库是存储图片的路径而不是图片),可以通过AJAX向服务器请求图片相关信息,但是需要后台方面的配合;

3 获取图片路径可能跟实现图片预览有关,下面的实例是使用window.URL.createObjectURL()实现本地图片预览功能;

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>HTML5Course - HTML5学堂 | 刘国利、陈能堡</title>
 <link rel="stylesheet" href="reset.css">
 <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
</head>
<body>
 <input type="file" id="fileSelect" accept="image/*">
 <script type="text/javascript">
  var fileEle = document.getElementById('fileSelect');


  fileEle.addEventListener('change', function(e) {
   var newImg = document.createElement('img');


   // 使用 window.URL.createObjectURL() 创建URL对象
   // 把新的URL对象赋值给img.src属性
   newImg.src = window.URL.createObjectURL(this.files[0]);
   newImg.onload = function() {
    // 如果不再需要URL对象,要释放它,需要使用URL.revokeObjectURL()方法;
    // 当页面被关闭,浏览器也会自动释放它,但是为了最佳性能和内存使用,当确保不再用得到它的时候,就应该释放它.
    window.URL.revokeObjectURL(this.src);
   }
   // 添加到页面当中,显示图片
   document.body.appendChild(newImg);
  });
 </script>
</body>
</html>


如果上层元素想知道到底是从哪一个元素开始触发的事件?

2016.4.18~2016.4.22

核心概念

事件委托与事件兼容

参考答案

这个问题涉及到JS事件委托及其事件兼容性。

代码实例:

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>HTML5Course - HTML5学堂 | 陈能堡</title>
 <link rel="stylesheet" href="reset.css">
 <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
</head>
<body>
 <div class="wrap" id="wrapBox">
  <div>
   <span>HTML5学堂 | 陈能堡</span>
  </div>
 </div>
 <script type="text/javascript">
  var wrapEle = document.getElementById('wrapBox');


  // 处理事件绑定的兼容
  if (wrapEle.addEventListener) {
   wrapEle.addEventListener('click', handler, false);
  } else {
   wrapEle.attachEvent('onclick', handler);
  }


  /*
   * [handler 事件处理函数]
   * @param  {[object]} e [事件对象]
   * @return {[type]}   [无返回值]
   */
  function handler(e) {
   // 处理事件目标对象的兼容
   var target = e.target || e.srcElement;
   console.log(target);
  }
 </script>
</body>
</html>

对上面的实例还不是很理解的,堡堡推荐你去HTML5学堂官网搜索“事件”,进一步深入了解JS事件。


JS中call()方法的第二个参数不写代表什么?

2016.4.18~2016.4.22

核心概念

call()方法改变this指向

参考答案

我们都知道call()方法是改变this指向,它除了能改变this指向之外还有没有其它功能,先来看看下面的实例。

<script type="text/javascript">
    var obj = {
        name: '堡堡',
        sex: '男',
        show: function() {
            console.log(this);
        }
    }
    console.log(obj.show());


    // 把show方法的this指向改成window
    obj.show.call(window);
</script>

上面的实例已经能确定call()方法的第一个参数的作用是用来指定新的对象,那么第二个参数是有何作用?继续看下面的实例。

<script type="text/javascript">
    var obj = {
        name: '堡堡',
        sex: '男',
        // show函数定义了一个形参
        show: function(address) {
            console.log(this, address);
        }
    }
    console.log(obj.show('中国北京'));


    // 把show方法的this指向改成window,并传入实参
    obj.show.call(window, '中国福建');
</script>

上面的实例当中,告诉大家call()方法的第二个参数只是传递实参而已;

其实,call()方法除了第一个参数之外,其它参数的功能都是传递实参;

如果想具体了解关于this指向的问题,可以在HTML5学堂官网搜索“this详解”,进一步深入了解关于this指向的问题。


HTML5

HTML5与HTML4.01相比,它增加了什么?

2016.4.18~2016.4.22

核心概念

什么是HTML5

参考答案

如何来理解HTML5技术是什么呢?我们从几个角度进行阐述,分别是狭义上的HTML5(就技术来讨论技术)、广义上的HTML5(平时技术会议、聊天时的含义)、技术层面。希望大家通过文章的查看对HTML5有个更深入的理解。

狭义上的HTML5:

1 HTML4.0的升级版本

2 HTML5+CSS3+新增JS API

3 W3C制定的关于HTML技术约定的新规范

广义上的HTML5:

1 HTML5行业的代名词

2 行业的技术标准

3 当前新技术的代名词

HTML5技术概括:

从HTML5技术的角度来说,我们将HTML5技术分为五大类,分别是:

1 新增标签以及属性;

2 CSS3的新特性;

3 Canvas绘图;

4 JavaScript的新增API;

5 移动端。


PHP

想简单了解PHP和MySql,有书本推荐吗?

2016.4.18~2016.4.22

核心概念

PHP与MySql

参考答案

PHP方面,首先需要了解的就是PHP知识的基本组成有什么。PHP = 基本语法[和ECMAScript类似] + 数据库知识 + HTML&CSS&JQuery + PHP特有语法功能。换句话说,一个前端,基本已经掌握了40%的PHP知识。之后暂时先推荐两本书,一本是数据库入门《MySQL数据库应用从入门到精通》,另一本是head first系列中的《Head First PHP & MySQL(中文版)》,对没基础的人理解后台很有帮助。

如果想具体了解关于PHP的内容,可以在HTML5学堂官网搜索“PHP”。

HTML5学堂小编 - 陈林 & 堡堡 耗时4h

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-04-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java呓语

代理模式(控制对象访问)

最近在读 Android Binder 部分的源码,之前三三两两的读过一些片段。但总是感觉理解的不深刻,在读源码的过程中看到了代理模式的应用,那便把代理模式单独...

711
来自专栏怀英的自我修炼

怀英漫谈3-百度Echarts中日期控件的使用总结

你好, 今天下午在用百度的Echarts做一个日历图的效果,其中跌跌碰碰遇到了几个问题,好在最终都解决了,今天想跟你聊聊这几个问题。 本篇偏编程,可以跳至最后看...

3609
来自专栏程序猿DD

程序员你为什么这么累【续】:编码习惯之Controller规范

由于昨天小编没有睡好,犯了两个错误(作者写错+第二张图贴错),重新发布纠正一下。非常抱歉,感谢大家的关注...... ——请先阅读这2篇文章: 程序员你为什么这...

3097
来自专栏程序你好

在VisualStudio中提供运行时和设计时支持的WPF本地化解决方案

关于WPF本地化问题有许多其他的文章,包括使用Locbaml本地化WPF应用程序(https://www.codeproject.com/KB/WPF/Arti...

552
来自专栏非著名程序员

基于 RxJava2+Retrofit2 精心打造的 Android 基础框架 XSnow

XSnow ? 基于RxJava2+Retrofit2精心打造的Android基础框架,包含网络、上传、下载、缓存、事件总线、权限管理、数据库、图片加载、UI模...

2347
来自专栏Adamshuang 技术文章

Guava Cache -- Java 应用缓存神器

Guava 作为Google开源Java 库中的精品成员,在性能、功能上都十分出色,本文将从实际使用的角度,来对Guava进行讲解。

6557
来自专栏大数据钻研

前端面试那些坑

HTML Doctype作用?严格模式与混杂模式如何区分?它们有何意义? HTML5 为什么只需要写 ? 行内元素有哪些?块级元素有哪些? 空(void)元素有...

3126
来自专栏性能与架构

用魔数防范文件上传攻击

上传文件功能的安全风险很高,为了防范攻击,最基本的安全工作就是验证文件类型是否为系统允许的 简单的通过文件后缀来判断文件类型很不可靠,需要用更安全的方式 很多类...

3556
来自专栏JackieZheng

AngularJS入门心得1——directive和controller如何通信

  粗略地翻了一遍《JavaScript DOM编程艺术》,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too...

2006
来自专栏开发之途

在 Android 设备上搭建 Web 服务器

一般而言,Android 应用在请求数据时都是以 Get 或 Post 等方式向远程服务器发起请求,那你有没有想过其实我们也可以在 Android 设备上搭建一...

1663

扫码关注云+社区