JavaScriptのDOM Core基礎 - 三等兵
Coreの簡易リファレンス。Coreは要素を参照したり、相対位置から周りのノードを参照したり、要素を生成するといった部分。主に利用するであろうプロパティやメソッドはカバーしているつもりですけど、これも入れとけってのあったら教えてください。 このあたりは地味で使いづらくその上理解しにくいという残念な部分。ふと忘れたときに使う個人的なものですが、慢性jQuery拒絶症候群な人よかったらどうぞ。それにしても暑い。ガリガリ君おいしいね。 DOMとは。 Document Object Model (DOM) は、HTML および XML ドキュメントのための API です。これはドキュメントの構造的な表現を提供し、内容や表示形態の変更を可能にします。端的に言えば、Web ページをスクリプトやプログラミング言語とつなぐような機構です。 https://developer.mozilla.org/ja/
JavaScriptのnewって何？一体何なの？という話 - 愛と勇気と缶ビール
マクラ JavaScriptを使っている人なら知っていることだろうけど、JavaScriptはプロトタイプベースのオブジェクト指向を採用しているので「クラス」がない。オブジェクトしかない。 でも、組み込みの演算子としてnewがあって、それを使って var obj = new Object(); とか書けちゃう。クラスってものはJavaScriptにはないはずなのに、new ClassName();と書くとあたかもClassNameクラスのオブジェクトのインスタンスが生成され、それが返ってくるかのような挙動をしている。 これは気持ち悪い。言語仕様としてはクラスは本来存在しないのに、クラスのようなものが導入されている。まともな神経を持った人間なら、一体new演算子って何なの？という疑問を持つのが当たり前である。「{}はnew Object()のシンタックスシュガーです」とか言ってふんぞり返って
JavaScriptのundefinedというクセ者のいろいろ - 風と宇宙とプログラム
はじめに JavaScriptの初心者にとってundefinedというのはちょっと混乱を招くものらしい。nullとの違いや使い分けがよく分からなかったり、数値やブール値との比較が不自然だったりするのが原因と思われる。ここでは、そのようなundefinedのいろいろについてまとめてみた。 ECMA262規格では undefinedとnullに関して、ECMA262規格では最初に以下のような記述がある。 4.3.9 undefined value primitive value used when a variable has not been assigned a value. 4.3.11 null value primitive value that represents the intentional absence of any object value. undefinedは変数に
コマンドラインからjsのリファレンスを引く - walf443's blog
昨日cpprefを久々に使ったりしていて改めてコマンドラインからリファレンスを(オフラインで)引けるのは便利だなぁと思ったので、ぱっとみないっぽかったので、jsrefというツールを作ってみた。 基本的にはcpprefと同様にサイトのpathを書きかえつつ、scrapingしてきてツールから引けるようにしただけです。ふだん案外jsは書く機会がなかったりしてあまり詳しくないですが、評判は聞くのでMozillaのサイトがよいらしいので、https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference からscrapingしてきています。 実行すると、20-30分くらいはかかってしまうので、orig/以下の入れてしまっています。日本語のマニュアルが欲しい人は、BASE_URLをhttps://developer.mozilla.org/j
indexOf と RegExp の速度比較 - m2
単純な特定文字列の存在確認をするのに indexOf と正規表現でどれくらい差があるのかなと思って、次のようなコードを書きました。 (function(){ var a = [], n = 10000; for (var i = 0; i < n; i++) { a.push('item:' + i); } var str = a.join('\n'); var s = new Date(); for (var i = 0; i < 3000; i++) { //var m = str.indexOf('item:9999'); // (1) indexOf //var m = /item:9999/.exec(str); // (2) 静的な正規表現 //var m = new RegExp('item:9999').exec(str); // (3) 動的生成の正規表現 //var m
meca.js
meca.jsとは meca.jsはマークアップエンジニアのコーディングを補助するためのjavascriptです。画像のロールオーバーやIE6の透過png対応などを実装しており、それぞれの機能を簡単にon/offできるので、使わない機能は無効にしてたりできます。その他にも、ターゲットになる要素のセレクタを設定でたりするのである程度柔軟に対応できます。（→元エントリー） 使い方 jQueryとmeca.jsを読み込みます。meca.jsの一番上の方に設定を書いてあるところがありますので、そこを自分の好きな設定に書き換えて下さい。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="meca.js"></script> ページ毎に設定を変更する meca.js本
floatさせた要素を上手い具合に整列させてくれるJavaScript「jQuery Masonry」
twitter facebook hatena google pocket CSSでfloatさせると要素の高さによっては、想定していたように並ばないことがあります。 そんな時にはjQuery Masonryを使用すれば、まず水平方向に合わせた後、垂直方向にもあわせるので、綺麗に要素を整列できます。 sponsors 使用方法 jQuery Masonryからjquery.masonry.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.masonry.js"></script> <script> $(document).ready(function() { $('要
amachang - JavaScript 入門
プログラミングのこつ 無駄な名前を極力使わないこと。意味単位に名前空間を細かく階層的に分離すること。 ここで言う名前空間とは 名前空間とは、一つの名前が一意のものを表す空間。例えば、大きな目で見れば、日本語は自然言語の名前空間である。また、専門用語なども名前空間と考えることが出来る。 日本語 { コンニチワ = 挨拶 : : } 中国語 { ニーハオ = 挨拶 } 英語 { ハロー = 挨拶 } また、名前空間は重なり（優先順位）を持つ 同音異義語などの言葉は、それぞれの細かい名前空間の重なりによって一意のものに特定されると考えられる たとえば、「コイが好き」と言った場合 池に関する名前空間 { コイ = すいすいパクパク } チャライ話題に関する名前空間 { コイ = ドキドキきゅんきゅん } お茶に関する名前空間 { コイ = にがーい } 名前空間の優先順位を考えると、一意の意味を知
JavaScript基礎文法最速マスター - gifnksmの雑多なメモ
続々と増え続ける基礎文法最速マスターシリーズ(あまりにも増えてきたので他の言語記事へのリンクは別の記事に移しました)。 JavaScript 版は誰も書いていなかったようなので書いてみます。こういう解説記事的なものを書くのは初めてなので変なところがあったら指摘して頂けるとありがたいです。 JavaScriptの基礎概念についての解説はこちら：JavaScript基本概念最速マスター - TechTalkManiacs 1/31 23:58追記 コメント欄のos0xさんのご指摘を基に一部追記・修正を行いました。 2/2 2:52追記 switch文・正規表現・例外処理について追加しました。 2/2 6:44追記 コメントでfavrilさんにご指摘頂いた点(typo & コメント・サンプル追加)を修正・加筆しました。 2/2 7:15追記 トラックバックでLiosKさんにご指摘頂いた点(cal
IE5で動くjQueryっぽいライブラリができていました - ?D of K
半分ぐらいjQueryからコードを持って来たような気がしますが、IE5でもjQueryっぽく書けるライブラリができていました。正直、あんまりブラウザのチェックとかしていないので、実際に使うのは結構危険です。 http://code.0fk.org/$/ とりあえず、イベントとアニメーションだけ設定した例です。 重要なこと jQueryから乗り換えてもいいですか？ 乗り換えない方が良いと思います。 IE5のサポートをしたいので使っても良いですか？ 商業サイトならIE6からのサポートにして、jQuery使った方が良いと思います。 ソース見ると関数呼び出し減って、速そうなので使っても良いですか？ 速さを目的とするなら、uupaa.jsをオススメします。 使っても良いですか？ 使わない方が良いと思います。 Twitterで重要なことが謙虚すぎる、つまり、目立っていないとあったので、目立つようにしま
JavaScript で、画像本来のサイズ(幅, 高さ)を取得する方法 - latest log
Opera で DOM Mutation Event を使用するコードを追記しました。 まとめを追加しました。 Opera パート2に取得できないケースが見つかったため、パート3 を追加しました。 rhino.jpg(幅:300px, 高さ:227px) を、 <img id="rhino" src="rhino.jpg" width="100" height="75" /> と、100 x 75 で表示している場合を例に、画像本来のサイズを取得する方法をご紹介します。 Firefox, Safari, Google Chrome なら image.naturalWidth と image.naturalHeight を利用します。 image.naturalWidth と image.naturalHeight の初期値は 0 です。画像の読み込みが完了した時点で適切な値に更新されます。
jQueryでブロック要素の高さを揃えてみる - 徒書
ブロックレベル要素の高さを揃えるheightLine.js[to-R]を見て不満に思ったのは、高さを揃える要素を取得するために固定のclass名を使っていることでした。これだと既存のHTML文書に適用するためには、script要素を加えるだけでなく、それ用のclass名も書き加えなければなりません。どうせJavaScriptを使うのであれば、既存のHTMLの構造を生かしつつスクリプト側で目的の要素を取得できたほうがいいのではと思いました。 というわけでまたも自分なりに書き換えてみるシリーズなのですが、今回は要素取得の柔軟さに着目してjQueryを使ってみることにしました。 できたものは以下です。 jquery.flatheights.js 動作サンプル jQueryの$関数ではCSSセレクタの書式で要素を取得できるので、例えば「"box1"というclass名を持つ要素」を集めるのであれば
innerHTML と outerHTML の使用可否のまとめ
ie で読み取り専用になっている要素タグには innerHTML は使えません。代替手段として outerHTML を利用して動的に書き換えるテクなどがあります。読み取り専用の要素は例えば table 要素が該当しますが、ちょっとやそっと調べたところで何が読み取り専用の要素なのか資料がでてきません。 と言うわけで適当にスクリプト書いて調べてみました。取りあえず調べた要素は以下の通りです。Internet Explorer Developer Center < meta Object に記述されている要素一覧です。html 要素は outerHTML すると ie がフリーズするので調査対象外です。 <a> <abbr> <acronym> <address> <applet> <area> <attribute> <b> <base> <baseFont> <bdo> <bgSound>
ランダムでバナー画像を切り替える
< 前の素材 本スクリプトは2013年02月11日を持ちまして公開を終了しました。このスクリプトの上位版にあたるRandVisual.jsを公開しましたので、そちらをご利用ください。 アップルコンピュータのフロントページはランダムでメインの画像とサブ画像が入れ替わりますよね。それってとっても素敵！見せたい画像が複数あるとき、ローテーション組めるしね！ ランダムでバナー画像を切り替えるの概要アップルコンピュータのフロントページはアクセス毎にメイン画像とサブ画像がランダムで切り替わってるって知ってますか？いつ来ても代わり映えしないサイトって再訪率が低いそうです。それはまぁあたりまえとして、見せたい画像がたくさんあったりすると、どれをメインで見せるか困りますよね。 そんな貴方はこのスクリプトを使うといい。アクセス毎にランダムで画像を切り替えて表示させます。しかもサブ画像も表示させることができる！
ハッカーに憧れてたダケのオマエらに捧ぐ（序＋目次） - Eloquent JavaScript - 暗号、数学、時々プログラミング
Eloquent JavaScript | 06:06 | 心配するな。日本語は死なんよ 来たか、ハッカー大好きはてなー野朗。ちょっとオマエ、ブクマを見せてみろ。ん？なんだこの大量の「あとで読む」タグは？！ で、これは読んだのか？ 何？ まだだと？ あ？「だって英語で書いてあるしー」だ？ で、「その前に英語やらなくっちゃ！」と思ってやった事が、英語Tips のページにブクマして「あとで読む」タグを付けること？ おめでてーなー。オマエは本当におめでてーヤツだよ。今日も新たな教材探しか？ おい、、、図星かよ。涙目になんなよ。。 今日から、そんなオマエのヘタレな日常とサヨナラ出来るよう、またオレが教材を用意してやったぞ。喜べ。元ネタは"Eloquent JavaScript （オレ的な超訳では「スゴいよ JavaScript」）"だ。コイツの出来の良さは関係各方面でお墨付きが出てるから安心しろ。
不要なテキストノードの除去 - os0x.blog
li要素などを改行すると、要素と要素の間に半角スペース分の余白が現れる件について調べてみた。 | Blog hamashun.com関連の、にツッコミしてみる。 innerHTMLの書き換えはaddEventListenerしたイベントが消えたりするのと、 Manabuさんの実装だとli要素の中の改行なども除去してしまうので意図しない動作(例えばliの中にpreがあったとき)をしてしまう可能性がある。 というわけで改案。 (function(){ var ols = document.getElementsByTagName('ol'); var TEXT_NODE = document.TEXT_NODE || document.createTextNode("").nodeType; for (var i =0,l=ols.length;i<l;i++) { var ol = ols[
2008-11-15
function と何度も入力していると、指が function と入力するのに適した形にゆがみそうなので書いた。 nodes.map(function(v)v.href.replace(/.*\//,'')) を nodes.map(V.href().replace(/.*\//,'')) とかけるようにする魔法のオブジェクト。 http://d.hatena.ne.jp/javascripter/20081002/1222940338 をヒントに、さらに変態っぽくしてみた物。 続きを読む 上で書いた、指の歪みを防止するオブジェクトを導入した。 そのサンプル :echo $('//a').evaluate().map(function(v)v.href.replace(/.*\//,'')).copy() :echo $('//a').evaluate().map($f.href().r
ke-tai.org > iPhone
スマホゲームの画面デザインをする際のポイントがまとめられているスライド資料「企画が考えるスマホUIデザイン」 Tweet 2012/2/29 水曜日 matsui Posted in Android, iPhone, デザイン 1 Comment » お仕事でもお付き合いのあるAimingさんの社内勉強会資料で、興味深いスライドが公開されていたのでご紹介します。 企画が考えるスマホUIデザイン View more presentations from onoremiz 制限の多いスマートフォン向けゲームのUIを、企画側からの視点でまとめあげた、89ページもある大作スライドです。 具体的な例を示すというよりは、概念や方向性を示すという内容になっています。 スマホゲームを作っている方は、必見の資料になっていると思いますので、チェックしてみてはいかがでしょうか。 関連： ドリコムの負荷対策のノウ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
BOS138 - Bandar Game Gacor Asia Mode Spin BarBar Ala Big BOS
Loading...