25.これは明日会議で使う資料です　

动词（简体形）+ 名词 小句（动词简体形）+ 名词

表示某种习惯或将要发生的动作用基本型，如果是已经玩成的动作用 “た形”

1

これは 明日会議で使う 資料です。

小句（动词简体形）+ 名は 名/形　です

动词小句修饰名词形成的名词短语做主语

1

私が 明日乗る 飛行機は中国航空です。

小句（动词简体形）+ 名を/に/から　动ます

动词小句修饰名词形成的名词短语做主语以外的其他部分

1

中国で買ったCD を 友達に貸しました。

fileList对象和file对象

html5 中的 input[type=’file’] 的标签有 multiple 属性，允许用户选择多个文件，fileList 对象则是保存了这些文件的列表，列表每一项都是一个 file 对象

属性

• name ：文件名
• type ：文件类型。图片类型可通过image/开头关键字限制只允许上传图片
• size ：文件大小
• lastModified ：文件最后修改时间

input:file 对象中还存在一个 accept 属性，可以用来规定能够通过文件上传进行提交的文件类型。
accept=”image/*” 可以用来限制只允许上传图像格式。但是在 Webkit 浏览器下却出现了响应滞慢的问题，要等上好几秒才弹出文件选择框。
解决方法就是将 ‘‘ 通配符改为指定的 *MIME 类型。

应用

多文件FileList

链接请戳 多文件fileList

1
2
3
4
5
6
7
8
9
10
11
12
13

<input type="file" id="files" accept="image/gif,image/jpeg,image/jpg,image/png" multiple>
<script>
    var elem = document.getElementById('files');
    elem.onchange = function (event) {
        var files = event.target.files;
        for (var i = 0; i < files.length; i++) {
            // 文件类型为 image 并且文件大小小于 200kb
            if(files[i].type.indexOf('image/') > -1 && files[i].size < 204800){
                console.log(files[i].name + files[i].type);
            }
        }
    }
</script>

文件预览

链接请戳 文件预览

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<input type="file" id="files" accept="image/jpeg,image/jpg,image/png">
<img src="blank.gif" id="preview">
<script>
    var elem = document.getElementById('files'),
        img = document.getElementById('preview');
    elem.onchange = function () {
        var files = elem.files,
            reader = new FileReader();
        if(files && files[0]){
            reader.onload = function (ev) {
                img.src = ev.target.result;
            }
            reader.readAsDataURL(files[0]);
        }
    }
</script>

Blob对象

表示一个不可变，原始数据的类似文件对象。区别于 mysql 的 blob 类型（二进制容器），html5 中的 blob 对象除了可以存储二进制数据之外，还可设置数据的 mime 类型，从某种程度讲，实现了文件的存储。
而 html5 中的 file 对象则是基于 blob 对象继承扩展而来。

构造函数

1

Blob(blobparts[,options])

所以需要关键字 new 来声明，旧式的 BlobBuilder 方法已经过时，不在讨论。

1
2
3
4

<script>
var blob = new Blob(["Hello World!"],{type:"text/plain"});
console.log(blob)
</script>

属性

• isClosed：bool 是否为关闭状态，关闭状态的 blob 对象不可读
• size：数据大小
• type：字符串，表明对象包含数据的数据类型

img fail

前言：据说，一个公司的网速决定着一个程序员的心情与产出，而网速决定着一篇文章裂图的程度。

告别裂图

html 中的 img 标签预设了几个关于自身加载的事件：

• onError
  图片加载出现错误，多数的处理是将图片路径指向默认图片
• onLoad
  图片加载完成之后触发事件
• onAbort
  图片加载过程中，用户手动停止加载（浏览器停止按钮）触发事件

前面也讲过，图片加载缓慢乃至加载失败并不全因为是网速问题，还有可能是图片服务器延迟，或者图片过期请求失效等。
然后就会出现所谓的“裂图”,而这时 img 标签的 alt 属性就会发挥作用，提示用户当前加载失败图像的信息。
如图：

然后从运行下面代码可以在控制台看到图片加载几个事件相应的输出。

响应式图片处理

just note

固定宽度图像

浏览器会根据设备像素比来选择加载图片

参数

• srcset
  srcset 属性会罗列出当前可加载的备选图片，用逗号分隔。
  不识别此属性的浏览器会直接加载 src 属性声明的图像。
• x
  x 表示图像的设备像素比。

场景

网站 logo 等宽度固定，大小不随着 viewport 的变化而变化

示例

1
2
3
4

<div class="img-box1">
	<img srcset="images/gakki-540.jpg 1.5x,images/gakki-720.jpg 2x,images/gakki-1080.jpg 3x"
		 src="images/gakki-360.jpg" alt="Responsive Images">
</div>

ios底部输入框遮挡

接上节，因为fixed元素的变现不友好，底部固定元素多采用了absolute定位。但底部固定元素内包含输入控件时，聚焦会发生输入框被键盘遮挡。

背景

• 场景
  为了实现类 IM 即时通讯页面，输入框聚焦并紧贴键盘顶部浮起。

• 表现
  某些浏览器会发生输入框遮挡被键盘遮挡。
  qq内置以及微信内置浏览器估计对此作了些处理，基本没发现这种情况。
  而别的浏览器，或多或少会复现这个问题（第一次触发）

  阅读全文 »

抽风的电脑，字怎么变成繁体了。主要为正则对象函数的应用。

正则对象创建

创建RegExp对象实例

1. 显式构造: new RegExp(“pattern”[, “flags”]) 或 new RegExp(/pattern/[, “flags”])
2. 隐式构造: /pattern/[flags]

参数

• pattern 正则表达式
• flags
  标志匹配规则。例如 “g” 全局匹配，”i” 不区分大小写，”m” 多行匹配等，常用的为 “g” 和 “i”。

心血來潮，又挖出正則表達式，順便整理下筆記。

元字符

常用的元字符：

脑子一热一抽筋把家里电脑换了个硬盘，重做了个系统..

起因

重装系统遇到阻碍，无奈格掉了硬盘，代之前的十几篇就随风而去了

解决

还是原来的配方，不过已经变了味道。
在原先的博客分支添加了一个hexo分支用作本地未编译代码的备份，而另一个master分支则用于博客编译文件的push分支。
so，妈妈再也不担心我的代码因为各种原因丢失了。

待做

趁着这次机会算是让我好好的了解了一下github ssh同步代码的流程。
然后接下来就是单纯做个计划，计划下后来的几篇的内容。

ES5新增数组方法

ES5新增数组方法学习笔记。

Foreach

接收一个函数作为参数，对数组进行循环遍历，而并不改变数组。

语法

1
2
3
4
5

array.forEach(callback(currentValue, index, array){
},this)
array.forEach(callback[, thisArg])

参数

forEach方法会对数组的有效值的每一项执行callback函数，已经删除或者未初始化的项会被跳过。而callback函数会被传入三个参数：

• 数组当前项值
• 当前项的索引
• 数组对象本身