JobbyM

## readfile.html
<script>
// 读取指定文本文件并将内容显示在下面的<pre> 元素中
function readfile(f){
  var reader = new FileReader();                    // 创建一个FileReader 对象
  reader.readAsText(f);                             // 读取该文件
  reader.onload = function(){                       // 定义一个事件处理程序
    var text = reader.result;                       // 这是文件内容
    var out = document.getElementById("output");    // 查询output 元素
    out.innerHTML = "";                             // 清除该元素内容
    out.appendChild(document.createTextNode(text)); // 显示文件内容

## BlobURL.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用Blob URL 来显示一个拖放的图片文件</title>
  <script>
  // 截至撰写本书时，Firefox 和Webkit在
  // createObjectURL() 函数的命名上意见不统一
  var getBlobURL = (window.URL && URL.createObjectURL.bind(URL)) ||
    (window.webkitURL && webkitURL.createObjectURL.bind(webkitURL)) ||

## getBlobURL.js
var getBlobURL = (window.URL && URL.createObjectURL.bind(URL)) ||
  (window.webkitURL && webkitURL.createObjectURL.bind(webkitURL)) ||
  window.createObjectURL;

## getBlob.js
// 使用XMLHttpRequest 下载Blob
// 以Blob 的形式获取URL 指定的内容，并将其传递给指定的回调函数
function getBlob(url, callback){
  var xhr = new XMLHttpRequest();     // 创建一个新的XHR 对象
  xhr.open("GET", url);               // 指定要获取内容的URL
  xhr.responseType = "blob";          // 以Blob 的形式
  xhr.onload = function(){            // onload 比onreadystatechange 更容易
    callback(xhr.response);           // 将Blob 传递给回调函数
  }                                   // 注意，这里是.response，不是.responseText
  xhr.send(null)                      // 发送请求

## little_endian.js
// 如果整数 0x00000001 在内存中表示成：01 00 00 00，
// 则说明当前系统是低位优先系统
// 相反，在高位系统中，它会表示程：00 00 00 01
var little_endian = new Int8Array(new Int32Array([1]).buffer)[0] === 1;

## 52.js
// 此文件会通过一个新的Worker() 来载入，因此，它是运行在独立的线程中的，
// 可以放心地使用同步XMLHttpRequest API
// 消息是URL 数组的形式。以字符串形式同步获取每个URL 指定的内容，
// 并将这些字符串数组传递回去。
onmessage = function(e){
  var urls = e.data;                        // 输入：要获取的URL
  var contents = [];                        // 输出：URL 指定的内容

  for (var i = 0; i < urls.length; i++) {
     var url = urls[i];                     // 每个URL

## SmearWorker.js
// 在Web Worker 中进行图片处理
// 从主线程获取ImageData 对象，对其进行处理并将它传递回去
onmessage = function(e) { postMessage(smear(e.data));}

// 将ImageData 中的像素信息向右涂抹，产生动态模糊效果
// 对于大图片，此方法会进行大量计算,
// 如果它用在主线程中的话，很有可能导致无法响应UI 操作的问题
function smear(pixels){
  var data = pixels.data, width = pixels.width, height = pixels.height;
  var n = 0, m = n - 1;                              // 设置n 倍大，用于更多的涂抹

## TwitterSearch.html
<!DOCTYPE html>
  <!-- 这是一个Twitter 搜索gadget。将它通过iframe 的形式内嵌在任何web 页面中，
  通过postMessage() 方法将查询字符串传递给它来搜索tweet。由于它是内嵌在
  <iframe> 中而不是<script> 中，因此它无法对内嵌它的页面造成破坏 -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Twitter 搜索gadget，由postMessage() 来控制</title>
  <style>
    body {

## 51.js
// 异步的获取我的位置，并在指定的元素中展示出来
function whereami(elt){
  // 将此对象作为第三个参数传递给getCurrentPosition() 方法
  var options = {
    // 设置为true，表示如果可以的话
    // 获取高精度的位置信息（例如，通过GPS 获取）
    // 但是，要注意的是，这会影响电池寿命
    enableHighAccuracy: false,  // 可以近似：这是默认值

    // 如果获取缓存过的地理位置信息就足够的话，可以设置此属性

## 50.js
// 返回一个新创建的<img> 元素，该元素用于在获取到地理位置信息后，显示一张Google 地图，
// 该地图上显示了当前的位置。要注意的是，此函数的调用者必须要将返回的元素
// 插入到文档中，以使它可见
// 如果当前浏览器不支持地理位置API，则抛出一个错误
function getmap(){
  // 检查是否支持地理位置API
  if(!navigator.geolocation) throw "Geolocation not supported";

  // 创建一个新的<img> 元素，并开始请求地理位置信息，
  // img 元素显示包含当前位置的地图，然后再将返回该图片
	<script>
	// 读取指定文本文件并将内容显示在下面的<pre> 元素中
	function readfile(f){
	var reader = new FileReader(); // 创建一个FileReader 对象
	reader.readAsText(f); // 读取该文件
	reader.onload = function(){ // 定义一个事件处理程序
	var text = reader.result; // 这是文件内容
	var out = document.getElementById("output"); // 查询output 元素
	out.innerHTML = ""; // 清除该元素内容
	out.appendChild(document.createTextNode(text)); // 显示文件内容
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>用Blob URL 来显示一个拖放的图片文件</title>
	<script>
	// 截至撰写本书时，Firefox 和Webkit在
	// createObjectURL() 函数的命名上意见不统一
	var getBlobURL = (window.URL && URL.createObjectURL.bind(URL)) \|\|
	(window.webkitURL && webkitURL.createObjectURL.bind(webkitURL)) \|\|
	var getBlobURL = (window.URL && URL.createObjectURL.bind(URL)) \|\|
	(window.webkitURL && webkitURL.createObjectURL.bind(webkitURL)) \|\|
	window.createObjectURL;
	// 使用XMLHttpRequest 下载Blob
	// 以Blob 的形式获取URL 指定的内容，并将其传递给指定的回调函数
	function getBlob(url, callback){
	var xhr = new XMLHttpRequest(); // 创建一个新的XHR 对象
	xhr.open("GET", url); // 指定要获取内容的URL
	xhr.responseType = "blob"; // 以Blob 的形式
	xhr.onload = function(){ // onload 比onreadystatechange 更容易
	callback(xhr.response); // 将Blob 传递给回调函数
	} // 注意，这里是.response，不是.responseText
	xhr.send(null) // 发送请求
	// 如果整数 0x00000001 在内存中表示成：01 00 00 00，
	// 则说明当前系统是低位优先系统
	// 相反，在高位系统中，它会表示程：00 00 00 01
	var little_endian = new Int8Array(new Int32Array([1]).buffer)[0] === 1;
	// 此文件会通过一个新的Worker() 来载入，因此，它是运行在独立的线程中的，
	// 可以放心地使用同步XMLHttpRequest API
	// 消息是URL 数组的形式。以字符串形式同步获取每个URL 指定的内容，
	// 并将这些字符串数组传递回去。
	onmessage = function(e){
	var urls = e.data; // 输入：要获取的URL
	var contents = []; // 输出：URL 指定的内容

	for (var i = 0; i < urls.length; i++) {
	var url = urls[i]; // 每个URL
	// 在Web Worker 中进行图片处理
	// 从主线程获取ImageData 对象，对其进行处理并将它传递回去
	onmessage = function(e) { postMessage(smear(e.data));}

	// 将ImageData 中的像素信息向右涂抹，产生动态模糊效果
	// 对于大图片，此方法会进行大量计算,
	// 如果它用在主线程中的话，很有可能导致无法响应UI 操作的问题
	function smear(pixels){
	var data = pixels.data, width = pixels.width, height = pixels.height;
	var n = 0, m = n - 1; // 设置n 倍大，用于更多的涂抹
	<!DOCTYPE html>
	<!-- 这是一个Twitter 搜索gadget。将它通过iframe 的形式内嵌在任何web 页面中，
	通过postMessage() 方法将查询字符串传递给它来搜索tweet。由于它是内嵌在
	<iframe> 中而不是<script> 中，因此它无法对内嵌它的页面造成破坏 -->
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Twitter 搜索gadget，由postMessage() 来控制</title>
	<style>
	body {
	// 异步的获取我的位置，并在指定的元素中展示出来
	function whereami(elt){
	// 将此对象作为第三个参数传递给getCurrentPosition() 方法
	var options = {
	// 设置为true，表示如果可以的话
	// 获取高精度的位置信息（例如，通过GPS 获取）
	// 但是，要注意的是，这会影响电池寿命
	enableHighAccuracy: false, // 可以近似：这是默认值

	// 如果获取缓存过的地理位置信息就足够的话，可以设置此属性
	// 返回一个新创建的<img> 元素，该元素用于在获取到地理位置信息后，显示一张Google 地图，
	// 该地图上显示了当前的位置。要注意的是，此函数的调用者必须要将返回的元素
	// 插入到文档中，以使它可见
	// 如果当前浏览器不支持地理位置API，则抛出一个错误
	function getmap(){
	// 检查是否支持地理位置API
	if(!navigator.geolocation) throw "Geolocation not supported";

	// 创建一个新的<img> 元素，并开始请求地理位置信息，
	// img 元素显示包含当前位置的地图，然后再将返回该图片