Javascript/Ajax LOG

シンプルなコードでロールオーバー／javascript

2010-06-18T17:30:00.000+09:00

■参照サイト■ 意外とよく使うJavascript　ロールオーバー by maro-z.com ■対象フレームワーク■ なし ■サンプル■ class="rollover" を指定している画像が、マウスオーバー時にsample_on.gifに差し替わる。 ■javascriptコード■ function initRollOvers() { if (!document.getElementById){ return; } var preLoads = new Array(); var allImages = document.getElementsByTagName('img'); for (var i = 0; i < allImages.length; i++) { if (allImages[i].className == 'rollover'

シンプルなコードでロールオーバー／jquery.js

2010-06-18T17:26:00.001+09:00

■参照サイト■ 意外とよく使うJavascript　ロールオーバー by maro-z.com ■対象フレームワーク■ jquery.js ■必要なプラグイン■ jquery.rollover.js ※リンク先ページ中ほどからDLできる。 ■サンプル■ class="rollover" を指定している画像が、マウスオーバー時にsample_on.gifに差し替わる。 ■jquery.rollover.js　■ var preLoadImg = new Object(); function initRollOvers(){ $("img.rollover").each(function(){ var imgSrc = this.src; var sep = imgSrc.lastIndexOf('.');

jqueryで画像やCSS3を使わずに角丸にする

2010-06-18T16:59:00.001+09:00

■対象フレームワーク■ jquery.js ■必要なプラグイン■ jquery.corner.js ■構文■ デフォルトの場合 $('#sample').corner(); 角丸の大きさを指定する場合 $('#sample').corner("30px");/*全ての角に30pxの大きさ*/ 角丸箇所と大きさを指定する場合 $('#sample').corner("top 30px");　/* id="sample"の要素に対して、左上、右上に30pxの大きさ */ $('#sample').corner("top 30px");　/* id="sample"の要素に対して、左上、右上に30pxの大きさ */ などとできる。さらに個別に指定したいときは、　tl……左上コーナー、tr……右上コーナー　bl……左下コーナー、br……右下コーナーで、指定できるので $

.className　　エレメントのclass名を書き換える

2010-02-16T14:46:00.000+09:00

エレメントに指定されているclass名を、指定する名前に変更する。特定のid以外にも、特定のエレメント（例えば、＜p＞や＜table＞）など一括書き換えも可能。 ■対象フレームワーク■ なし ■構文■ document.getElementById("hogehoge").className="変更後の名前"

.className　　エレメントのclass名を取得

2010-02-16T14:43:00.000+09:00

エレメントに指定しているclass名を取得する。 ■対象フレームワーク■ なし ■構文■ document.getElementById("hogehoge").className

.style.display　　特定のエレメントを表示/非表示する

2010-02-16T14:42:00.002+09:00

id要素に関するスタイル情報を変更し、表示/非表示を実行する。 ■対象フレームワーク■ なし ■構文■ document.getElementById("hogehoge").style.スタイル要素="変更後の値" document.getElementById("hogehoge").style.display="none"

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール

2009-06-03T18:25:00.003+09:00

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルールposted with amazlet at 09.06.03Steve Souders スティーブサウダーズオライリージャパン売り上げランキング: 5908 おすすめ度の平均: 仕事で作る人、趣味で作る人、両方にためになりますフロントエンド方面の最適化手法がわかる本目からウロコでした。これからのフロントエンド・エンジニアリングの重要性簡単なWebサイトの高速化 Amazon.co.jp で詳細を見る

jquery

2009-05-08T23:03:00.001+09:00

■最新のjquery■ 本家（英語サイト） jQuery: The Write Less, Do More, JavaScript Library: ■お役立ちサイト■ ---------- jQuery 1.3.2 日本語リファレンス: サンプルソースを使い丁寧に解説されています。

prototype.js

2009-05-08T22:27:00.002+09:00

■最新のprototype.js■本家（英語サイト）Prototype JavaScript framework: Easy Ajax and DOM manipulation for dynamic web applications:■お役立ちサイト■----------prototype.jsを読み解くver1.5.11の中身のコードを、全10回に分けて丁寧に解説されています。ボリュームはありますが、とても勉強になります。----------prototype.js逆引きサンプル集prototype.jsリファレンスこちらもサンプルソースを使い丁寧に解説されています。

リファラー（リンク元URL）を参照する

2009-03-07T01:12:00.003+09:00

リファラー（リンク元URL）を参照する。ブックマークや直入力によるページアクセスの場合は値は存在しない。■対象フレームワーク■なし■構文■document.referrer■サンプル■----------------このページを表示する前ページのURLが表示されます。document.write('前ページのURLは'+document.referrer+'です');※ブックマークなどから直接表示された場合はURLは表示されません。

文字列を書き出す

2009-03-07T01:11:00.001+09:00

writeメソッドドキュメントに文字列を書き出す。タグも書き出せる。■対象フレームワーク■なし■構文■document.write('hogehoge')■サンプル■----------------document.write('サンプルの文字列タグの記述も可能。');

ランダム設定

2009-03-07T01:10:00.001+09:00

■構文■Math.random()■サンプル■ユニークな配列が得られる記述方法。for(i=0; i < 100; i++){n1 = Math.floor(Math.random() * title.length);n2 = Math.floor(Math.random() * title.length);n = AA[n1]; AA[n1] = AA[n2]; AA[n2] = n;}

ページ読み込み時に反映させる

2009-03-01T00:55:00.005+09:00

ページを読み込み後、実行させる ■対象フレームワーク■ prototype.js ■構文■ Event.observe(window,'load',function){ }

エレメントのinnerHTMLを書き換える

2009-03-01T00:21:00.009+09:00

HTMLに手を加えずに、ソースを書き換える方法。 ■対象フレームワーク■ prototype.js ■構文■ Element.update('elementID','HTML') ■サンプル■

JavaScriptマスターブック

2009-01-28T23:49:00.007+09:00

JavaScriptマスターブックposted with amazlet at 09.05.08山田祥寛毎日コミュニケーションズ売り上げランキング: 238357Amazon.co.jp で詳細を見る■内容紹介Ajaxの登場によりJavaScriptは新たにその価値を見いだされました。それにともない、従来の手続き的手法のプログラミングだけでなく、本格的なオブジェクト指向を駆使したプログラミング手法を身に付けることが、JavaScriptプログラマにも求められるようになっています。本書は、初学者にはもちろん、「なんとなく」JavaScriptを理解し「とりあえず」動かせていただけのプログラマにも、JavaScriptの言語としての全体像を把握し、JavaScriptが本来持っている大きな可能性を十二分に引き出せるようになるために是非読んでいただきたい1冊です。

詳解 JavaScript&DynamicHTML辞典第三版 Ajax対応

2009-01-28T23:10:00.011+09:00

Javascript/Ajax　を実践するにあたって用意したのはこちら。もう定番中の定番、秀和システムの辞典シーリーズです。簡単な例文も掲載されている。詳解JavaScript & DynamicHTML辞典 Ajax対応posted with amazlet at 09.05.08半場方人秀和システム売り上げランキング: 251314おすすめ度の平均: 手元にあると役立つ旧版の悪い点を継承Amazon.co.jp で詳細を見る概　要本書は、JavaScriptとDynamicHTMLの基本文法から、動的なWebページの作成技法までを一冊にまとめたわかりやすく使いやすいリファレンスの改訂第三版です。Internet Explorer7、Firefox2、Netscape Navigator8、Opera9、Safari2など、最新ブラウザへの対応状況を刷新したほか、話題の

このサイトについて

2009-01-25T23:52:00.005+09:00

ここはMasaki_kが業務で実際に活用したJavascriptやAjaxについて記録していくサイトです。 Scriptの制作工程、考え方、ブラッシュアップなども記録し、その時々で参考にしたサイトや書籍なども併せて紹介することで、自分自身の振り返りはもちろん、少しでもみなさんのお役に立てればと考えています。日々進化しつづける技術ですので、すでに多くの最新情報がサイトで公開されています。このサイトは、ひとつの参考事例であることをご了承ください。