kitak.blog

Kみたいなエンジニアになりたいブログ

JavaScript

DOM要素のsubmitメソッドを呼んでも、onsubmitハンドラはトリガーされない

こんにちは。そうめん大好き、きたけーです。 DOM要素のsubmitメソッドを実行しても、onsubmitハンドラは呼ばれないんですね (一時間くらい潰しました...) コードで書くと、 document.forms["myform"].submit(); とかやっても、

画像データをブラウザのJavaScriptでbase64エンコードする術

こんにちは。おなかが空きました、きたけーです。 ブラウザのJavaScriptで画像データをbase64エンコードする方法を調べてみました。(すんません、コードはCoffeeScriptです) Canvas Canvasを使う方法。こんなかんじ window.onload = -> source = $('#source'…

CoffeeScript で @ をクラス名とかメソッド名の頭につけたときの話

こんにちは。ジンギスカンキャラメルをたべました、きたけーです。 この前、読んでいたCoffeeScriptのコードで @ がクラス名とかメソッド名の頭についてて、普段あまり見かけないのでびっくりしてしまった。以下みたいなかんじ。 class @Foo @bar: -> consol…

Vue.jsのビューモデルのテストを書いてみた

こんにちは。明日はウルトラ花金です、きたけーです。 この前かいたVue.jsのコード(Vue.jsでページネーションを実装してみる - きたけーTechブログ, Vue.js で 複数のViewModelを連携させる - きたけーTechブログ)のテストをMocha+Chaiで書いてみた。 (微妙…

JavaScriptのエラーを検知したり、スタックトレースをいいかんじに表示する術

こんにちは。タブの開きすぎで、タブが増やせなくなりました、きたけーです。 JavaScriptのエラー検知 アプリケーション全体のエラーを検知するには、windowオブジェクトにonerrorハンドラを設定します。こんなかんじ。 window.onerror = function (message,…

気が触れて Chromium を ビルドするの巻

こんにちは。ガムを噛んでます。きたけーです。 今日の朝、夏の暑さと月初の忙しさで頭がやられて、突然Chromiumをビルドし始めました。 Chromium is なに Chrome の基になっているブラウザ。Chrome は Chromium にいくつか機能が足されたものです。 ビルド…

herokuでNodeアプリを公開するとき、ログまわりをどうしようか考えたときのメモ

こんにちは。ハウスダストで喉がやられたきたけーです。 herokuでNodeアプリを公開するとき、ログまわりをどうしようかあれこれ考えたときのメモです。 papertrail addon ログを管理するためにpapertrail addonを使います。 papertrailはログのアーカイブをS…

「はらへった」と検索したらピザ屋のメニューページを開くネタ拡張つくった

こんにちは.最近,Chromeのネタ拡張作りが趣味のきたけーです. 今日は天気もよくてお腹も減ったので,Googleで「はらへった」と検索したらピザ屋のメニューページを開くネタ拡張を作りました. harahe_pizza やってること やってることは簡単で 履歴の追加…

ChromeExtensionでブックマーク一覧を走査する

最近,ChromeExtensionの開発に手を出し始めたきたけーです. 素振りがてらブックマーク一覧の走査してみました.console.logするためにpopupに記述しましたが,ブックマーク情報の取得はbackgroundなどでも可能です. chrome.bookmarks.getTree(function (t…

JavaScriptの数値データからみるオブジェクトとプリミティブ

JavaScriptのデータは大きく分けてオブジェクトとプリミティブに分けられます. 厳密な定義はここを参考にしてもらいたいのですが,ややこしいのがプリミティブでもオブジェクトのように振る舞うケースがあることです.数値を例にみてみましょう. var a = 3…

JavaScriptで同じ文字がn個並んだ文字列を作る方法

こんにちは. プログラムでメッセージを出力するときに「###########...」とか書くときがありますよね. ありますよね! でも, ハードコーディングして print('###############################'); とか書くのって, 不恰好... こうしたらいいんじゃないかな! var …

on{X}で学校に「来た」「帰った」を勝手にツイートするレシピつくった

こんにちは! 先日, 紹介したon{X}ですが独自拡張が出始めてます. 熱い! ツイートする拡張 Tweet on{X} http://tweetonx.com/ Audio, Radio 痒いところに手が届く Set On{X} http://setonx.com/ どちらともアプリを入れたり, 認証が必要だったりしますが, そ…

jQueryでtapを定義してみた

こんにちは. jQueryといえば...メソッドチェーンですよね! いかに繋げて処理を書ききるかという妙な欲求が湧いてくる代物ですが, チェーンの途中でエラーが発生すると後ろの処理は実行されません(いわゆる「列車の脱線」).エラーが発生するとデバッグするのも…

on{X}で, すぐにプログラムを実行したいとき

on{X} はじめてみました. on{X}ってなに? この記事をみてください. ようはJavaScriptでタスクを自動化しちゃうツールですね. MS製なのに, Android上で動き, ログインはFacebookというなんともいえないかんじです. すぐに処理を実行するには そのon{X}ですが,…

JSONのコメント by Douglas Crockford

この記事はJavaScript界の権威Douglas CrockfordのGoogle+での投稿を翻訳したものです. JSONのコメント (Comments in JSON) 私はJSONからコメントを抜きました. なぜなら,(??? I saw people were using them to hold parsing directives, a practice which w…

SchemeのletとJSの即時関数実行パターンって同じだよね

こんにちは. この前, 部屋の掃除中, Schemeの本をみつけて,パラパラ読んでいました. 読んでいて気づいたんですけど, SchemeのletとJSの即時関数実行パターンって同じですよね?JSで (function (a, b) { return a*a + b*b; })(3, 4); とか書くじゃないですか? …

クロージャを使う意味がまったくないコード

すなわち,こんなコード. 隠蔽する理由がまったくない var hoge = (function () { var state = null; // ... return { // ... getState: function () { return state; }, setState: function (state_2) { state = state_2; } }; })(); こうしよう. var hoge =…

jQueryで配列をコピーする

こんにちは. jQueryで配列をコピーする方法をみつけたのでメモ. var old = [1, 2, 3]; var new = $.merge([], target); jQueryのmergeメソッドを使います. 第一引数の配列に第二引数の配列の要素が代入されます.

prototypeの汚染と, その対策

こんにちは. 昨日のエントリのコメントで「for-inで列挙されないようにすべき」とご指摘をいただきました. それについてのまとめ. 問題 以下のようにprototype拡張を行った場合, for-in文で列挙すると拡張をおこなったプロパティも表示される. プログラム Arra…

配列を空にするメソッドをprototype拡張した

こんにちは. 昨日書いたエントリを元にプログラムで配列を空にする処理を記述したんですが // ... ary.length = 0; // ... こんなのが突然書かれてても, 配列を空にしているようにはみえない... prototype拡張しました というわけで, prototype拡張しました.…

配列を空にする方法とそのプロファイリングを取ってみた

こんにちは. 研究でJSの配列を空にする必要があったので,そのメモ. 空にする方法 空にする方法を2つ考えることができた. lengthプロパティに0を代入する し,信じられないことにJSでは配列オブジェクトのlengthプロパティに0を代入すると配列が空になるのだ. …

リテラル, コンストラクタ, それぞれのオブジェクト生成方法のプロファイリングをやってみた

こんにちは. 今日, 研究室の女の子と「new Object()より{}のほうが早いし, new Array()より[]のほうが早いんだよ」みたいなことを喋っていた. たしか何かの本に実際に計測していた結果が載っていて, それを覚えていたのだと思う. 実際, 自分で手を動かして測っ…

new Date().getTime()と同じ結果

new Date().getTime(); と +new Date(); は同じ結果になる.だからどーしたぁ!

JavaScriptのデフォルト引数

最近,読んでるソースによくこんな記述が出てくる. function hoge(args) { args = $.extend({ id: '', actions: [] }, args); // ... } extendメソッドはjQueryのユーティリティ関数のひとつ.その名の通り,オブジェクトを拡張する.オブジェクトの継承とかコピ…

prototypeとスピリチュアル

この前,諸事情でこんなプログラム書いたんよね. // 最近のブラウザはObject.createは結構実装されてるみたいだよ!(調べろ) if(typeof Object.create !== "function") { Object.create = function(o) { function F() {} F.prototype = o; return new F(); }; …

JavaScriptの不思議

JavaScriptは不思議な子。なんでこれがtrueなの? 3<1<3 // true Pythonでは、この書き方でおkだったはず。でも、JSではNG。まず、3 false<3 // true falseが数値型に変換される。変換されると0になる。 false<3 // true 0<3 // true +false // 0 +true // 1 そうそう…

鯖江駅前の信号機のやつを作ってみました

素早くコーディングする癖をつけるために毎日練習することにしました.ルール JavaScriptを使うこと とにかく素早く作ること(お作法とかはどうでもいい) 使えないもの・くだらないものでもいい というわけで1日目は鯖江駅前の信号機のやつを作ってみました コ…

Titanium MobileでAndroidアプリを作るときはexitOnCloseがとても大事

こんにちは!Titanium Mobileで複数のウィンドウを遷移するAndroidアプリを作るときはexitOnCloseプロパティが重要になります.どういうことかというと, 以下のようなプログラムを書いたときに var win = Titanium.UI.createWindow({ title:'最初のウィンドウ'…

Facebookの左下のチャットの"アレ"を消す

(今回の記事は完全にネタです。ユーザスクリプトを試しに書いてみたかっただけです) こんにちは。突然ですが, Facebookの左下にあるチャットの"アレ"消したくないですか?"アレ"ってオンラインの友達が表示されるじゃないですか?何気なくFacebookを開いたときに…

「基礎Ajax+JavaScript」を読んだ

JavaScriptを一通り学んでみたかったので読みました。内容は基礎的な文法、DOM、Ajax(簡単な例とAPI)といった具合。ほとんどがJavaScriptのことについてだったので、本のタイトルは「基礎JavaScript+Ajax」のほうがよかったかも。HTMLがそこそこ分かる人で、…