BLOG
2013年3月4日、ブログは以下のURLに移行しました。最新の記事はこちらで公開しています。 新しいブログでは、コメントやリンクが一部切れていたり、一部機能が調整中です。 新しいブログへ イベントハンドラとは、イベントが発生したときに実行する処理を指定できるキーワードのことです。 イベントとは、「クリックしたとき」とか「ページが読み込まれたとき」、「マウスが乗ったとき」など、ユーザーからウェブページに対して、または何らかの処理によって起こされるアクションのことを言います。 「ページが読み込まれたとき」はこう書きます（func00()がJavaScript中に定義されているものとする）。 <body onload="func00()"> しかし今では以下のようにJavaScript中に書くのが主流になっています。 window.onload = function(){ 処理 } こういう書き
Event Listener: イベントリスナ [JavaScript / DOM]
Event Listener とは Event Listener とは、イベントを受け取って処理するものです。 JavaScript では関数がイベントリスナの役割を担うことが多いです。 ここでいうイベントとは、「画面上のどこかをクリックした」 だとか 「HTML の読み込みが完了した」 などといった事です。 従来は、イベントとイベントリスナ (関数) を結びつける方法としてイベントハンドラ式が使用されてきました。 // 「クリックされた」 というイベントを受け取るイベントリスナ (関数) myFunc を HTML 要素に結びつける例 // [(X)HTML] 要素の属性として記述する方法 <button onclick="myFunc();" id="test" /> // [JavaScript] element 要素のプロパティを使用する方法 // id が "test" である要
JavaScript OOP におけるクラス定義方法 - IT戦記
クラスを定義する方法です。考え付くだけでも、これだけたくさんの方法があります。やっぱり、 JavaScript って柔軟であり複雑な言語ですね。 ちなみに、以下のすべての例はこのクラスを定義しています。 ちなみに、僕は一番下の書き方ですね。 皆さんはどのようにプログラミングしていますか？ プロトタイプを使わない。クロージャを使う。 // プロトタイプを使わない。 // クロージャを使う。 function Item(price) { this.showPrice = function() { alert(price); }; } プロトタイプを使わない。クロージャを使わない。 // プロトタイプを使わない。 // クロージャを使わない。 function Item(price) { this.price = price; this.showPrice = function() { aler
JavaScriptのイベントリスナーの話 - public static void main
id:kz_shikabaneによるJavaScript勉強会が実施されました。 DOMの話は以前id:seiryoが行ったので、今回はイベントリスナーについて。 prototype.jsやJQueryを使っていてあまり意識したことがなかったので参考になりました。 以下まとめ。 イベントリスナーとは 普通GUIアプリケーションを作るときにはイベントドリブン（イベント駆動型）プログラミングを行います。これはJavaScriptで書くときにも当てはまります。 HTMLファイルが読み込まれた、ボタンがクリックされた、キーボードが押された、といった行動をブラウザで行ったときにイベントは発生します。このイベントを受け取るのがイベントリスナーです。 イベントリスナーはイベントを受け取るまでは何もしません。受け取ったイベントの情報を元にイベントリスナーが、HTMLタグの属性を変更する、非同期にデータを読
hitsujiwool (JavaScriptにおけるモジュール化のパターン)
はじめに ここではJavaScriptにおける「ユーザが使用するプロパティやメソッドを、適切な名前空間に展開する方法」すなわちコードのモジュール化の方法を整理します。 JavaScriptには、パッケージや名前空間を直接管理する方法はありません。 なので、オブジェクトや関数といった手持ちの素材を使って同様の機能を実装する必要があります。 この特徴は、JavaScriptの文法を一通り勉強して、いざ脱初心者を目指そうという人達にとっての大きな壁になっているように思われます。 世の中で配布されているライブラリのほぼ全てが、何らかのモジュール化の仕組みを利用しており、それを理解できない限り、人のコードを読むことも、自作のライブラリを公開することも難しいからです。 とはいえ、モジュール化の方法にはいくつかのパターンがあります。 イディオムと言っても良いかもしれません。 以下ではその典型的なパターン
HTML5の「Web Workers API」を，別ファイルを使わずページ単体で利用するサンプル （createObjectURLがあれば，1ファイルでマルチスレッドのJSコーディングが可能） - 主に言語とシステム開発に関して
JavaScriptプログラミングのTOPへ HTML5の「Web Workers API」（非同期処理の仕組み）を，外部スクリプトを使わずに，１ファイルだけで実行するサンプルコード。 ワンライナーで（たった１行で）Workerスレッドを起動できる。 簡単に書くとこんな感じ。 // スレッド内容を別ファイルに分離しなくてよい new Worker( window.URL.createObjectURL( new Blob([ elem.innerHTML ],{type:"text/javascript"}) ) ); 以下は解説。 Web Workers APIは，JavaScriptでマルチスレッド・プログラミングをするための仕組み。 正確に言えば，UIとは別に裏側で，重い処理を非同期で実行してくれるAPI。 Workerというオブジェクトに「外部スクリプト・ファイルのURL」を渡せば
JavaScriptの動かないコード (初級編) DOM要素の配列を，forループで順番に全削除できない - 主に言語とシステム開発に関して
連載目次へ 以下のJavaScriptコードが意図した動作をしないのは，なぜですか。（制限時間１分） やりたい事： DOM操作により，div要素を全て削除する。 <body> <input type="button" value="DIV要素の削除を実行" onclick="f()"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <script> function f() { // 全要素を取得 var arr = document.getElementsByTagName("div"); for( var i = 0; i < arr.length; i ++ ) { var elem = arr[i]; // 一つずつ削除 elem.parentNode.removeChild(elem); } }
今から３分で，HTML5のドラッグ＆ドロップAPIと File APIを習得しよう（JSの実装サンプル付き） - 主に言語とシステム開発に関して
JavaScriptプログラミングのTOPへ 今から３分で，HTML5の JavaScript API の使い方を２つ覚えよう。 １：ドラッグ＆ドロップAPI 画面上の要素を。 画面外から。 ２：File API 読み込み。 書き込み ※これは覚える必要はない。 シンプルなサンプルコード付きで，これらの実装の方法を素早く学習する。 ※サンプルは，IE8のようなHTML5未サポートの古いブラウザでは動かないので注意。FirefoxやChromeを使うこと。 では，ここから３分の時間のカウントを開始。集中して読もう。 （0：00〜前半の１分半） 画面内でのドラッグ・ドロップ （後半の1：30〜3：00） 画面外からのドラッグ・ドロップ 参考資料 （0：00〜前半の１分半）画面内でのドラッグ・ドロップ まず，動作例を見てみる。「リンゴ」をバスケットにドロップしてみてほしい。 動作サンプル１ ht
カジュアルJavaScript AST
今日の概要 実は使われてるJavaScript AST JavaScript AST(Abstract Syntax Tree)とは? JavaScript ASTを使ったツール紹介 使うだけじゃなくて書いてみよう browserify Node.jsで書かれたものをブラウザ向けに変換するツール Node環境で開発 -> browserifyでビルド -> ブラウザで動く JavaScriptのコードを 変換 する ≒ JavaScript ASTを見て変換 する 本体の色々な部分、transform pluginなどでASTを使ってる
(function() {})()とかnew function() {}とか - World Wide Wonderful
一昔前に (function(){})() とか new function() {} とか function() {}() とかは何やねんという記事が流行った??時期がありました。 あの時は、いくつか記事を読んでも正直もう何が何だかわからなかったのですが、久しぶりに紐解いてみるとちょっとはわかったような気がしたのでメモ。 まず、(function() {})()とかnew function() {}の違い これに関しては、ココが非常に単純明解です。 こちらも参照。 つまり、 (function(){})() 無名関数を今すぐ実行 最後の () が今すぐ実行するということ ロード後1度だけ実行 // 無名関数をすぐに実行 (function(){ // 初期化処理などを行う alert('test1'); })(); new function() {} 無名オブジェクトを作成して、その場で
(function(){ ... })() の個人的な解釈 - hogehoge @teramako
(function(var){..............})(var) と function(var){............} の違い。つまり、クロージャ。 - それ図解で。・・・tohokuaikiのチラシの裏 via: (function(){})() と function(){}() - IT戦記 解釈としてはオブジェクトの後ろに()をつけると関数とみなされて実行されるにつきると思う。 実際、どう見ても関数でないものでも後ろに()をつけると関数として評価しようとがんばってくれる。 JavaScript Shell 1.4の結果 var hoge = new Object(); hoge() TypeError on line 1: hoge is not a function 10() TypeError on line 1: 10 is not a function true
(function(var){..............})(var) と function(var){............} の違い。つまり、クロージャ。 - それ図解で。・・・tohokuaikiのチラシの裏
<script> (function(v){alert(v)}("aa")); hoge=function(v){alert(v)}; </script> ってやった場合、ローディングが終わったら alert("aa") が実行される。 ただし、 <script> (function(v){alert(v)}("aa")); hoge=function(v){alert(v)}; hoge("bb"); </script> ってやった場合、ローディングが終わったら alert("aa"); alert("bb") が実行される。 function全体を()でくくった場合は、それ自体を無名関数化して1回実行させる。 じゃあ、(function(){})は何を返すか？ <script> hoge=(function(v){alert(v)})("aa"); alert(hoge); </scr
そろそろきっちりJavaScript (1) "Firebug"の導入～関数リテラルとは? | マイナビニュース
多彩な演出効果をカンタンに導入できる事で脚光を浴びたprototype.jsの登場を皮切りに、インターネットで公開されているJavaScriptライブラリの数は、この一年で急激に増加した。何かやりたいことがあったときはWebで検索すれば、大抵、どこかにライブラリが転がっている。便利な世の中になったものだ。 一方、Webを通じて提供されるサービスは多様化の一途を辿っている。JavaScriptライブラリは整ってきたが、当然、置くだけでは機能しない。ライブラリのサポートページには簡単なサンプルが載っているものの、サンプルがそのまま適用できるケースはごくわずかだ。しかたなく、他の誰かが似たような事をやっていないかとWeb検索するはめになる。 思えば、これまでJavaScriptを言語としてとらえ、きっちり向き合う機会は少なかったのではないだろうか。 1995年の終わり、Netscape Navi
クラス風継承を今どきの書き方でやってみる - Qiita
発端は自分が書いたブログ記事に対して、@hokacchaさんが今風の書き方ってことでReplyしてくれたのがきっかけです。 ベースというか、ほぼそれのコピペですが記事元ではやっていない処理が追加されていたり、実装していないものがあったりしたのでそれを追加・修正したものです。 'use strict'しても動きます。（翻訳記事元はarguments.callee使ってるので、strictモードで動きません） (function (win, doc, exports, undefined) { 'use strict'; var fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/; function Class() { /* noop. */ } Class.extend = function (props) { var Su
JavaScriptの巧い書き方 - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 Webに言語は数あれど、特に玉石混淆の激しいJavascriptの書き方について纏めてみた。間違い指摘大歓迎！ 発端はYahoo!の Eric Miraglia による、YUI 式モジュールの作り方をまとめた記事。ざっくりまとめると、以下の手順になる。 YAHOO.myProject.myModule = function () { //"private" variables: var myPrivateVar = "I can be accessed only from within YAHOO.myProject.myModule."; //"private" m
HTML/CSS/JavaScript初歩の初歩
最近HTML/CSS/JavaScriptなどを初学者の方向けに教える機会がすごく増えきました。初学者の方ができるだけ詰まらずに、効率的に学習するための手順をいろいろな方と相談しながら、書きなおしています。 (11-09 12:45) Progate, atomを追加 導入編🐠 Webサイトを作ることは楽しい！ プログラミング経験ゼロだが180日で180個のウェブサイトを作るプロジェクトがゴールまであとわずかに プログラミング経験0のデザイナーさんが、毎日1つサイトを作っていったお話です。最初はテキストとリンクが並ぶだけのサイトでしたが、少しずつゲームやチャットなどが作れるようになっていきます。 今知っている知識だけで、作れるWebサイトを作っていく。そして、自分の知っている2つの知識を組み合わせたり、1つやりたいコトのためのパーツをGoogleに教えてもらうくらいが、挫折せずに続けられ
【JavaScript】デザインパターンを知ってみる。モジュール・パターン編 | バシャログ。
JavaScriptで書くデザインパターンが気になっているので、手始めに一番よく見ているであろうモジュール・パターンについていろいろ調べてみました。 なぜ使うの？ モジュール・パターンは名前の通り、処理を他の処理とぶつからないように安全に切り離し、モジュールの形として提供する考え方です。YUI などの大規模なフレームワークから小さなライブラリにも取り入れられています。以下のようなメリットがあります。 グローバル変数を極力減らして、機能をモジュールの形で提供できる。 コードの成長に合わせて構造を作れる コードを見通しやすくする 要件に応じて追加、置き換え、削除ができる シンプルな書き方 Sample というオブジェクトを作って、いろいろ便利な機能をつけていきたい、という場合、下記のような書き方ができます。 var Sample = { name: 'sampleくん', age: '30',
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.crystal-creation.com/web-appli/technical-information/programming/javascript/event/handler/onload.htm
GitHub - chuanxshi/javascript-patterns: JavaScript Design Patterns
javascriptでもテスト重要 - Kazzzの日記