Ajax

reflection.jsとRico.jsのコンフリクト回避

Posted 10月 28th, 2006 by hippos
in

Rico.jsと同時にreflection.jsも組み込んでみました。これは画像が水面に反射したような効果を与えてくれるスクリプトなんですがこういうのはちょっと流行っているんですかね？あちこちで見かけます。使用はとても簡単で、imgタグに「class="reflect"」を追加するだけ。Javascriptでここまでできるのは驚き。

ところで、「class="reflect"」だけでこういう効果がでるのはちょっと不思議。ちょっとソースを覗いてみたら、

var previousOnload = window.onload;
window.onload = function () { 
　if(previousOnload) previousOnload(); addReflections(); 
}

AjaxライブラリのRico.js/Accordionを導入してみました

Posted 10月 25th, 2006 by hippos
in

Ricoを使って、accordionを導入してみました。accordionの部分は最小で４つの<div>で囲みます。一番外側の<div>はaccordion枠の全体、二番目は一つ目のaccordion全体。そして３番目はaccordionのタブ部分、最後はコンテンツとなります。コードはこんな感じ。

<script type="text/javascript" src="rico.js">
<script type="text/javascript"><!--
function init(){
  new Rico.Accordion( $('whale_accordion'), {panelHeight:300} );
}
//-->
</script>
<body onload="javascript:init();">
:
<div id="whale_accordion">
 <div id="accordiaon1">
   <div id="tab1">tab</div>
   <div id="contents1"> ~コンテンツ~ </div>
 </div>
</div>
</body>

formオブジェクトのプロパティ

Posted 10月 24th, 2006 by hippos
in

JavaScriptで使用頻度が高いと思われる、formオブジェクトのプロパティと下位オブジェクトの一覧、併せて対応するHTMLのタグを整理しました。ようやくHTMタグとの対応が見えてきたのでプログラミングの際、見当を付けやすくなってきました。JavaScriptはまったく素人とはいえ（一応）プログラミング経験はあるので後は適時リファレンスを引けばなんとかなりそうです。

プロパティ 内容
action form内容の送信先URL
encoding enctype属性の指定
length form内の要素数(readonly)
method post/getの文字列
name formの名称(readonly)
target ウィンドウ名/フレーム名。または_self/_blank/_top/_parent

Ajaxにたどり着く前のJavaScript

Posted 10月 24th, 2006 by hippos
in

作成したWebページのコンテンツをより充実させるためAjaxを勉強中。そもそもJavaScriptのことをよくわかっていないのでそこから整理し直します。

JavaScriptのオブジェクト構造

Posted 10月 24th, 2006 by hippos
in

JavaScriptを書くとき頻繁に使用する、windowオブジェクト以下を整理してみました。とりあえずのとっかかりとしてdocumentオブジェクトとformオブジェクトを押えておこうと思います。

windowオブジェクト 説明
document コンテンツ内容を包含するオブジェクト
frame Frame固有プロパティ・メソッドに加えウィンドウオブジェクトの一部プロパティメソッドも使用化
history 表示履歴を保持するオブジェクト
location location情報を包含するオブジェクト。URLを参照したり設定できる

このうち、さらによく使用するdocumentオブジェクトはさらに下記のような階層構造を持ちます。

マークアップ言語の呼び名を整理する

Posted 10月 23rd, 2006 by hippos
in

html/xmlなどのドキュメントを扱う際の呼び名がどうにもスッキリしません。その用語が何を指すのかはっきりしないことには理解もままなりませんので纏めてみました。DOMもCSSも基本的には以下の呼び方で大丈夫だと思いますが、このテの用語は日本語になりにくいところもあって参考書によっては英語で記述されたりして注意が必要です。

名前 指すもの
要素 <p class='class_name'>paragraph</p>
要素内容 <p class='class_name'>paragraph</p>
要素名 <p class='class_name'>paragraph</p>
属性 <p class='class_name'>paragraph</p>
属性名 <p class='class_name'>paragraph</p>
属性値 <p class='class_name'>paragraph</p>

コンテンツの配信