三章第五回 イベントオブジェクト — JavaScript初級者から中級者になろう — uhyohyo.net
三章第五回 イベントオブジェクトこのページの最終更新日：2017年11月13日 イベントオブジェクトというものが存在します。実は、イベントが発生したときはイベントオブジェクトを通してイベントの様々な情報を得ることができます。 イベントオブジェクトの取得では、そのイベントオブジェクトはどうすれば手に入るかというと、実は、addEventListenerで登録したイベントリスナの第1引数（最初の引数）に、イベントオブジェクトが渡されます。つまり、 <!doctype html> <html> <head> <title>test</title> </head> <body> <p>test</p> <script type="text/javascript"> var p = document.getElementsByTagName('p').item(0); var listener =
Closure Compiler Service
// ==ClosureCompiler== // @compilation_level SIMPLE_OPTIMIZATIONS // @output_file_name default.js // ==/ClosureCompiler== // ADD YOUR CODE HERE function hello(name) { alert('Hello, ' + name); } hello('New user');
ボーイフレンドを直す方法 あるいは賢いjQuery.Deferredの使い方 - mizchi's blog
問題 モバイルは回線が不安定なので、ロードの失敗が頻繁に起こります。 開発時は高速なwifi環境で開発しているので、リリース間近になって帯域を圧迫していることに気づいたりします。 解決方法 画像を先読みします var preload = function(src){ var d = $.Deferred(); var img = new Image; img.src= src; img.onload = d.resolve img.onerror = d.reject return d.promise(); }; 何をやっているかというと、空のimgタグをつくってそこに画像を読み込みます。その過程でブラウザキャッシュに画像が保存されます。正確に言うとこの時点ではどこにも紐付いていないのでGC対象ですが、その後すぐDOMに画像をはるなら問題ありません。 並列で先読みする(速い・不安定) va
JavaScript Promises、CSS変数、Quartz ComposerのプラグインOrigamiなど海外WEBテク20本を一挙公開
JavaScript Promises、CSS変数、Quartz ComposerのプラグインOrigamiなど海外WEBテク20本を一挙公開 斉藤 祐也（株式会社リッチメディア） 斉藤祐也の海外WEBテク定点観測＜Issue.9: 2013/12/01-2013/12/31＞ 今月の定点観測は、JavaScriptにおけるPromises実装について、CSSの変数(Custom Properties)、Quartz ComposerのプラグインOrigamiなど合計20件の記事や動画などを紹介します。 注目ニュースピックアップ JavaScriptにおけるPromises実装について – HTML5 Rocks 原題: JavaScript Promises: There and back again これまでJavaScriptの『限界』であるシングルスレッドを解決するために、コールバ
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
ygoto3.com
現在開発担当している AbemaTV で、昨年末にパナソニックさんのスマートテレビ VIERA 向けにアプリケーションをリリースしました。AbemaTV リモコンボタンで AbemaTV にアクセスできます。今回このアプリケーションの UI を開発するにあたって、新しいデザインワークフローを導入しました。 本記事では、 Story-Assured Design というデザインワークフローを、現在プロダクト開発で直面しているデザインの課題とともに紹介します。 Story-Assured Design とは？ Story-Assured Design はその名前が示しているように、ユーザーストーリーを保証することを目的とした UI デザインのワークフローです。UI デザインを３つのステップに分けて行います。 ストーリーデザイン デザインの構造化 視覚情報デザイン 一番重要なユーザーストーリーの
Webフロントエンドパフォーマンスチューニング
Webフロントエンドのパフォーマンスチューニングについて全体的な話。javascript、Chrome DevToolsの紹介、ボトルネック、ポイントなど。
/ - 海豹日記
{今年|今月|今週|今日}も何%過ぎました ゆく河の流れは絶えずして、しかももとの水にあらず (鴨長明:荘子) FESTINA LENTE ゆっくり急げ (ローマ帝国初代皇帝 アウグストゥス) 立派にできたのであれば、それは十分早くできたことになる (ローマ帝国初代皇帝 アウグストゥス) 海豹日記 へようこそ このサイトは、個人的な覚書を残しておくサイトです 自分は、よくこんなことをします 何かの困りごとや興味の赴くままに、いろいろ調べる 数か月後に、そのことを忘れてしまって、同じことについていろいろ調べる。しかし、そのうち、数か月前の自分が、同じことを同じように調べていたことに気づく それは不毛なので、覚書を残しておこうというわけです (主人公のアリスに掴まれて、チェス盤のはるかかなたまで持ち上げられたことのあるチェスの王さまが、当時のこと思い出し) 王さま「あの瞬間の恐怖といったら、わ
JavaScript Garden
JavaScript Garden はJavaScriptというプログラム言語の一番奇妙な部分についてのドキュメント集です。 このドキュメントはJavaScriptという言語に慣れていないプログラマーがこの言語について深く知ろうとする際に遭遇する、良くある間違い・小さなバグ・パフォーマンスの問題・悪い習慣などを避ける為のアドバイスを与えます。 JavaScript GardenはJavaScriptを教える事を目的にしていません。このガイドの項目を理解する為には、この言語に対する前提知識がある事を推奨します。この言語の基礎部分についてはMozilla Developer Networkのガイド がオススメです。 著者 このガイドは愛すべきStack Overflowの2人のユーザーIvo Wetzel (執筆)とZhang Yi Jiang (デザイン)によって作られました。 貢献者 貢献
爆速でわかるjQuery.Deferred超入門
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。これまで、JavaScriptで非同期処理を書く上での問題として、コールバック地獄やエラー処理に例外が使えないことなどを解説してきました。 これらの問題に対処するライブラリの1つであるjQuery.Deferredに関して、もう少し丁寧に解説いたします。なお、jQueryのバージョンは記事執筆時点の最新である、1.9.1を想定しています。 jQuery.Deferredとは jQuery.DeferredとはjQueryのバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。 非同期処理を連結
HTML5時代のWeb開発者が知らないとガチヤバな3つの未来予測と6つの脆弱性対策
8月21～23日にパシフィコ横浜で開催された「CEDEC 2013」では、Webの世界に関するセッションも数多く行われた。本記事ではその中から、サイボウズ・ラボの竹迫良範氏による「HTML5のこれまでとこれから、最新技術の未来予測」と、セキュリティコミュニティでは大変著名なネットエージェント、長谷川陽介氏による「HTML5時代におけるセキュリティを意識した開発」の2つのセッションの様子をお送りしよう。 竹迫氏が「HTML」の周りの最新技術と、3つの未来予測を語る 未来予測その1：通信は暗号化が標準に――「スタバでドヤリング」から考える最新技術 竹迫氏はまず、スターバックスでスタイリッシュなMacBook Airをこれ見よがしに使う、「ドヤリング」という技術（？）について写真を出すところから講演を始めた。 実は、この「ドヤリング」、公衆無線LANを利用すると盗聴のリスクがあることが指摘されて
Gruntで始めるWeb制作の自動化
Gruntで始めるWeb制作の自動化 Grunt.jsとはWeb制作の様々なタスクを自動化してくれるツールです。 node.jsで開発されており、Sass/CompassやLessなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。 インストール まずはnode.jsをインストールします。公式サイトでインストーラーが配布されていますので簡単にインストールが可能です。 次にMacではターミナルを開いてgrunt-cliをインストールしましょう。cliとはCommon Language Infrastructureの略でコマンドラインからGruntを利用するためのツールです。 sudo npm install -g grunt-cli パスワードが聞かれるので入力してください。成功すればgrunt-cliのイ
jsPerf: JavaScript performance playground
jsPerf — JavaScript performance playground What is jsPerf? jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks. For more information, see the FAQ. Create a test case Login with GitHub to Create Test Cases
BigVideo.js
デモページ デモは左のメニューから、動画を変更して再生できます。 BigVideo.jsの使い方 外部ファイル BigVideo.jsはjQuery, jQuery UIと、動画再生に「video.js」を利用しています。これら全てを外部ファイルとして記述します。 <!-- BigVideo Dependencies --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="js/jquery-ui-1.8.22.custom.min.js"></script> <script src="js/jquery.imagesloaded.min.js"></script> <script src="http://vjs.zencdn.net/c/vide
JavaScriptでアニメーションを書く初歩の初歩
JavaScriptを使ってアニメーションを書くときに有用なテクニックの、基本中の基本をご紹介します。おそらく、このブログを見ている人のほとんどにとっては釈迦に説法だと思います。今回、requestAnimationFrameの話すらしません。その点、ご留意ください。 まず、JavaScriptでアニメーションをする場合に気をつけないといけないのが、一度JavaScriptの実行（Context）を抜けないとブラウザに描画が反映されないということです。簡単に言うと、 <html><head><title>bad sample</title><script> onload = function() { var e = document.getElementById("e"); for(var i = 0; i <= 100; i += 5) { e.style.left = e.style.
エンジニア夏祭り2013「はてなインターンの課題を解いてみよう」JavaScript解答編 #engineer #matsuri #hatena #javascript #夏祭り #夏の想い出 - CodeIQ Blog
CodeIQの中の人、OL元帥です。 「はてな」さんとCodeIQがタッグを組んだ『CodeIQ×はてな エンジニア夏祭り2013』 第1夜「はてなからの挑戦状」 はてなサマーインターン2013事務局さんから届きました、 JavaScriptの問題の解答・解説を公開します！ ◇◇◇◇◇◇◇◇◇◇ 全体の処理の流れ LTSV 形式の文字列をパースして、オブジェクトの配列を返す関数の処理を大きく分割すると、次の 3 つに分けることができます。 1. 各行の文字列を要素とする配列を作る 2. 各行の文字列をオブジェクトに変換する処理 3. 1 で作った配列の各要素に 2 の処理を適用して、配列を返す この処理の流れに沿って、関数を実装していく方法を解説します。 parseLTSVLog 関数定義 まずは関数の定義をします。 今回の問題では 1 つの関数を定義するだけですので、次のように単に関数定
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SECCON2013 slide
Frontrend Advent Calendar 2013 - Adventar
捗るかもしれないフロントエンド開発環境
大阪Node学園 六時限目 「generator小咄」
