本周群问题分享
收集时间: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
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- julia简易教程——安装Julia+jupyter notebooks
- Julia 终于正式发布了
- awk 列求和计算
- C++复习笔记——0_零碎问题及解决笔记
- C++复习笔记——C++ 关键字
- python函数——字典设置默认值 setdefault()
- Day 3:从尾到头打印链表
- python函数——字典get()方法
- Day 4:重建二叉树
- python函数——字典设置默认值get() 与 setdefault()区别
- tensorflow学习笔记——0_零碎问题及解决笔记
- MapReduce工作笔记——Hadoop MR Streaming通用模板
- MapReduce工作笔记——Hadoop shell 常用文件操作命令
- Julia简易教程——4_字符串操作
- MapReduce工作笔记——Job上传普通文件和大文件