第6回 JavaScriptとHTMLとDOMの基本#1 | gihyo.jp
こんにちは、太田です。前々回、前回とJavaScriptの基礎的な部分を解説しました。今回はJavaScriptからみたHTMLを中心に、DOMについても少しずつ解説しています。 JavaScriptとHTML FirefoxのアドオンやサーバーサイドJavaScriptなどの例外をのぞいて、多くのJavaScriptはHTML上で実行されるので、HTMLは土台となる重要な要素です。そこでHTMLの基礎的な部分からHTMLとJavaScriptの関係を解説します。 DOCTYPEとレンダリングモード HTMLといえば最初に書くのはDOCTYPEです。現在使われているDOCTYPEはHTML4.01、XHTML1.0、XHTML1.1といくつかの種類があり、さらにその中でTransitionalやStrictなどの違いや、XHTMLではXML宣言の有無（本来は必須ですが）などバリエーションが
JavaScript で MessagePack を実装してみた - latest log
140文字を超えちゃうので、こちらで。 id:viver さんの MessagePack を JavaScript で実装してみました。 HOT TO USE <script src="misc/msgpack.js"></script> <script src="misc/utf8.js"></script> <script> var pack = msgpack.pack("こんにちはこんにちは"); alert(msgpack.unpack(pack)); // こんにちはこんにちは </script> 現時点の仕様 / 制限事項 仕様 msgpack.pack(data:Mix):ByteArray で、data に指定されたオブジェクトをエンコードし、ByteArray( [数値, ...] ) を返します。 文字列は UTF8 な raw data として数値化します。 エンコ
neue cc - JavaScriptエディタとしてのVisual Studioの使い方入門
linq.jsってデバッグしにくいかも……。いや、やり方が分かればむしろやりやすいぐらい。という解説を動画で。HDなので文字が見えない場合はフルスクリーンなどなどでどうぞ。中身の見えないEnumerableは、デバッガで止めてウォッチウィンドウでToArrayすれば見えます。ウォッチウィンドウ内でメソッドチェーンを繋げて表示出来るというのは、ループが抽象化されているLinqならではの利点。sortしようが何しようが、immutableなので元シーケンスに影響を与えません。ラムダ式もどきでインタラクティブに条件を変えて確認出来たりするのも楽ちん。 ところで、JavaScript開発でもIDE無しは考えられません。デバッグというだけならFirebugもアリではありますが、入力補完や整形が可能な高機能エディタと密接に結びついている、という点でIDEに軍配があがるんじゃないかと私は思っています。動
ライブラリの一部でありながら単体利用も可能にする工夫 - latest log
140文字を超えちゃうので、こちらで。 JavaScriptなコードを書いてると「このへんの処理はどこにも依存してないから、特定のライブラリの一部ではなく、単体でロードしても使えるような部品としてまとめられたらなぁ」とか「でも、ライブラリの一部として利用する場合にグローバルネームスペースを汚染するのはダメだよなぁ」と、考えたことはありませんか? window.uu 以下をライブラリのネームスペースとして利用している uupaa.js では、このような工夫をしています。 // === uu.base64 / window.base64 === (function(namespace) { namespace.base64 = { encode: base64encode, // base64.encode(data:String/ByteArray, // toURLSafe64:Boole
フラクタルタイポグラフィー
Web Designing（2009年2月号）の特別企画「Webデザイナーのためのタイポグラフィ大特集」に掲載させていただいた「FractalWeb Designing（2009年2月号）の特別企画「Webデザイナーのためのタイポグラフィ大特集」に掲載させていただいた「Fractal Type」についてご紹介します。 Fractal typeの画面キャプチャ。 このプログラムを書いたのは、2005年の秋ぐらいだったと思います。当時「Ajax」という言葉があちこちで聞かれるようになり、それまで「swapImage()」ぐらいでしか使わなかったJavaScriptでいろいろなことを試していた時期でした。 Web Designing誌にも書きましたが、アートディレクターで師匠の永原康史さんのアイデアで、「デザイン言語2.0」の装丁に使う「行間、字間、書体を文章中の各文字にバラバラに適用するグラフ
SpiderMonkeyでJavaScriptからCの関数を呼び出す - NO!と言えるようになりたい
オブジェクトへ関数を定義する SpiderMonkeyを使えば，JavaScriptからC言語で書かれた関数を呼び出すことが出来る．サンプルによると，JSFunctionSpecの配列を定義して，JS_DefineFunctions関数を呼び出すことで，C言語の関数がJavaScriptの任意にオブジェクトに定義されるようだ．実際のコードは以下の通りとなる．（このコードはC言語じゃなくて，C++言語だが基本的な違いはない） #include <js/jsapi.h> #include <stdio.h> #include <stdlib.h> #include <time.h> #include <iostream> JSBool myjs_rand(JSContext *cx, JSObject *obj, uintN argc, jsval *argv, jsval *rval); J
MessagePack-JS - プログラミングは素晴らしい
cuzic です。 MessagePack の JavaScript 実装を作成しましたので、公開しました。 GitHub においております。 サーバ側で生成した MessagePack の文字列をクライアント側の JavaScript で、 var data = MessagePack.unpack(unescape("%a1%61")); alert(a); と書けば Ruby で 'a'.to_msgpack に相当する MessagePack のシリアリゼーション結果を変数 data に格納します。 現在は以下の状態です。 MessagePack 形式のデコードが可能。 整数、nil 、false 、true、浮動小数点、文字列、ハッシュ、配列 に対応 FireFox 3.6.3 と IE 8.0.6 で動作検証を実施。正常動作を確認。 作成した理由としては、以下の理由です。 最近
JavaScript Syntax探訪 - 枕を欹てて聴く
blogめったに書いてない... 2.5年で110件... 前々からJSのScannerを読んだりするのが楽しかったのですが, id:miya2000 さんからの「commentを削除するprogram」という話が出たときに, 結局JSのlexerというものは単体では生成できずParserと密着している(主にRegExpとRegExpとRegExpのせいです)ということがわかり, 自分でも書きたいという考えが浮かんできてC++でずっと書いていました. AST構築までできて, jqueryなどをparse成功 + json形式のtreeにシリアライズする程度になったのですが, せっかくなのでLLVMへのbridgeとか検討しています. LLVMおもしろいー. Constellation/iv · GitHub で, Constellation's gist: 387832 — Gist くら
ブラウザにローカルファイルを Drag & Drop でフォトライフにアップロードする Greasemonkey Script - 2nd life (移転しました)
HTML5 File API つかうとローカルファイルをブラウザに Drag したファイルをハンドリングして binary やら data スキームとして扱うことができ、Firefox 3.6 や Chrome 5 ですでに使えるというのを今さらながら知った*1ので、はてなフォトライフにローカルファイルをブラウザにドラッグするだけでアップロードできる UserScript を作ってみまんた。 http://gist.github.com/raw/406281/drag_drop_fotouploader.user.js WinXP + Firefox 3.6.3 で確認してますが OSX や Chrome5 などの環境で動くかは試してないので解りません。動作デモは以下の swf 動画を見てください。 http://rails2u.com/misc/fotolife_drag/ なんかすごい
Andrew Wang-Hoyer
SVG + CSS Animations During my funemployment between Inkling and Dropbox I started playing around with animating SVGs. This lead to building out over 200 animations off and on over 2 years. SVG CSS 11ty Open Source Feb 2020 Restyling The Game of Buttholes At the beginning of May 2019 I was looking at gagh.biz/game and thought it could use a little more Star Trek flare. CSS Django Open Source May 2
JavaScript, Canvas で putImageData による劣化を調べる : Serendip – Webデザイン・プログラミング
Ubuntu 9.10 (karmic Koala) の Google Chrome で JavaScript, Canvas の putImageData を使ってイメージの書き戻しをしていたら、イメージの色がどんどん黒っぽく変化してきた。 こちらのサイト『りす穴さくら: lislis Paintの技術的説明まとめ』によると Google Chrome では putImageData によって色が微妙に変化するので、透明な Canvas を新しく作って描画し、 drawImage で元の Canvas に書き出すという方法で対処できるらしい。 そこで、各ブラウザによってどの程度劣化するのかを putImageData と drawImage を使ってテストしてみた。 テストしたブラウザとそのバージョンは以下のとおり。 Windows Google Chrome 5.0.342.9 bet
メモリーリークパターンを理解する - babu_babu_babooのゴミ箱
メモリーリークに関する覚え書き メモリーリークとは コンピュータの動作中に、使用可能なメモリ容量が、だんだん減っていく現象。 OSやアプリケーションソフトが、処理のために占有したメモリ領域を、解放しないまま放置してしまうために起きる。 メモリーリークパターン（以下のタイプを考察） ドキュメントツリーに属さないノードに、イベントを貼り付けた場合。 DOM プロセッサが管理しているオブジェクトと、スクリプトエンジンが管理しているオブジェクト、が混在した場合 いわゆるクロージャが、その混在を招くパターン（これが難解） メモリーリークに該当しないもの DOM プロセッサが管理している変数が、グローバル変数である window, document は、グローバル変数なので、該当しない。 ドキュメントツリーに属さないノードに、イベントを貼り付けた場合 ページを破棄するときに、ドキュメントツリーのノード
Firefox 4: easier JS form handling with FormData – Mozilla Hacks - the Web developer blog
This feature has landed in Mozilla Central (trunk) and only available with a Firefox Nightly Build for the time being. XMLHttpRequest Level 2 (editor’s draft) adds support for the new FormData interface. FormData objects provide a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest send() method in “mult
ソースコードが公開されているJavaScriptエンジン - prog*sig
JavaScriptCore、SpiderMonkey、V8、Rhino embed V8 - 枕を欹てて聴く http://d.hatena.ne.jp/Constellation/20100408/1270663123 Embedder's Guide - V8 JavaScript Engine - JavaScriptで遊ぶよ - g:javascript http://javascript.g.hatena.ne.jp/edvakf/20100407/1270626241 JavaScriptCore を自分でビルドして、遊んでみる - IT戦記 http://d.hatena.ne.jp/amachang/20080610/1213109852 SpiderMonkey (JavaScript-C) Engine http://www.mozilla-japan
はてなブログ | 無料ブログを作成しよう
RX100M7を買った 今年の2月、SONYのRX100M7を買った。年明けから何度も実機を見に行って、撮影する自分の姿を想像しながらじっくりと選んで買ったカメラなので、とても気に入っている。カメラに関しては趣味程度の素人だけど一生懸命選んで買った決め手などをまとめたいと思う。 わたし…
ブックマークレットサービス・Hatena::Let を作りました - 2nd life (移転しました)
ブックマークレットをかんたんに作成・公開できるラボサービス、その名も Hatena::Let を作りました。 http://let.hatelabo.jp/ 未だにブックマークレットを作るときには、アドレスバーに javascritp:... を打ち込んで実行したり、 Firebug で実行して試しつつも外部の bookmarklet 化サービスを使って文字列削ったり、IE対策のため500ちょい文字を超えると gist にファイルを置きつつもおきまりの var script = document.createElement('scrit');... で JS のローダー書いたり、とやりたいことは同じなのにめんどくさい手順を毎回行っていたました。 ここらへんの手順を毎回繰り返すことなくさくっと作って公開したい！と思い id:cho45 と半年ぐらい前の開発合宿*1で作って眠らせていたのを、ち
Function Chain - m2
method chain (function(){ function chain() { } chain.prototype = { alert: function(value) { alert(value); return this; } }; new chain().alert(1).alert(2).alert(3); })() function chain (function(){ function chain(value) { alert(value); return chain; } chain(1)(2)(3); })() arbitrary function (function(){ function chain(f) { return function chain_impl() { f.apply(null, arguments); return chain_impl;
insertText - ellaneous
テキストボックス((textarea, input:-moz-any(:not([type]), [type=text], [type=password]))) tbox のカーソル位置へ文字列 text を挿入したいとき，HTMLTextAreaElement の貧弱な機能で実現するとこんな風になる。 var {value, selectionStart, selectionEnd} = tbox; tbox.value = value.slice(0, selectionStart) + text + value.slice(selectionEnd); tbox.selectionEnd = selectionStart + text.length; 一見うまくいくようだが，スクロール位置がリセットされるしアンドゥも狂う。 自然にやるには chrome 権限が必要。*1 const
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Code Archive - Long-term storage for Google Code Project Hosting.
?id=192