2011-08-01から1ヶ月間の記事一覧
<script type="text/javascript"> //<![CDATA[ flag =false; function allChange(){ flag = !flag; var chkbox = document.getElementsByName('check'); for(i = 0; i < chkbox.length; i++){ chkbox[i].checked = flag; } } //]]> </script> </head> <body> <form> <label></label></form></body>
<script type="text/javascript"> //
<script type="text/javascript"> //
<script type="text/javascript"> MyLib.event.observe(window, "load", function(){ tableColumnColor("column-color", "even", "odd"); }, false); </script> </head> <body> <table class="column-color" border="0" cellspacing="1" cellpadding="0"> td.odd { background-color: #fff; } td.even { background-color: …</table></body>
tr.odd { background-color: #fff; } tr.even { background-color: #eee; } <script type="text/javascript"> MyLib.event.observe(window, "load", function(){ tableRowColor("row-color", "even", "odd"); }, false); </script> </head> <body> <table class="row-color" border="0" cellspacing="1" cellpadding="0"> f…</table></body>
<form name="birthdayForm" id="birthdayForm" method="get" action="./birthday.cgi"> 誕生年：<input type="text" size="16" name="birthYear" id="birthYear"><br> <input type="button" value="西暦に変換" id="toSeireki"> <input type="button" value="和暦に変換" id="toWareki"> </form> (function(){ if (window.addEventListene…
(function(){ //イベントとイベントハンドラを設定 if (window.addEventListener) window.addEventListener("load", setLinkColor, true); if (window.attachEvent) window.attachEvent("onload", setLinkColor); function setLinkColor(){ //カラーを変更す…
JavaScriptでリンクを設定することによりスパムメールのクローラからメールアドレスを収集されにくくする。 <script type="text/javascript"> //
// -1){ osCss = 'win.css'; }else if(userAgent.indexOf('mac') >…
CSSのdisplayプロパティを切り替えることにより長い文章を折りたたんだように表示させることができる //
タブをクリックしたときにページを遷移せずCSSのdisplayプロパティをblockまたはnoneに設定することによりコンテンツの切り替えを行う。 <div id="tabToggle"> <ul id="tab"> <li class="selected"><a href="#chapter1">Chapter1</a> </li> <li><a href="#chapter2">Chapter2</a> </li> <li><a href="#chapter3">Chapter3</a> </li> <li><a href="#chapter4">Chapter4</a> </li> </ul></div>
郵便番号が正しく入力されているか調べる <h2>文字列から任意の文字を検索する</h2> <form name="mapForm" id="mapForm" method="get" action="./map.cgi"> 郵便番号：<input type="text" size="16" name="postalCode" id="postalCode"><br> <input type="submit" value="住所登録"> </form> (function(){ //イベントとイベントハンドラを設定する if (window.addEventListener) window.ad…
登録ボタンがクリックされたときにテキストフィールド内に半角カタカナが含まれているかを調べる。 <h2>半角・全角を判定する</h2> <form name="registrationForm" id="registrationForm" method="get" action="./regist.cgi"> ふりがな：<input type="text" size="16" name="furigana" id="furigana"><br> 名 前：<input type="text" size="16" name="username" id="username"><br> </form>
<script type="text/javascript"> window.onload = function(){ var original = document.getElementById("original"); var result = document.getElementById("result"); document.getElementById("upper").onclick = function(){ if(original.value)…
特定のclass名が設定されたa要素をクリックしたときに新しいウインドウをフルスクリーンで表示するスクリプト function fullscreen(targetClassName){ if(!targetClassName){ return false; } var anchor; var anchors = document.getElementsByTagName("a")…
特定のclass名が設定されたa要素をクリックした時に新しいウインドウをモニターの中央に開く <script type="text/javascript"> MyLib.event.observe(window, "load", function(){ openWindowCenter("open-center", 500, 334); }, false); </script> </head> <body> <div id="contents"> <a href="sub.html" class="open-center"></a></div></body>
ページが読み込まれたらhttp:で始まるリンクを外部リンクと見なしてアイコンをリンク文字の後に追加する。 (function(){ //イベントとイベントハンドラを設定する if (window.addEventListener) window.addEventListener("load", addicon, true); if (window…
a要素のhref属性に設定されたURLを検索し、自サイトのドメインとは異なる他サイトのURLが設定されている場合に別ウインドウで開く。 MyLib.event.observe(window, "load", openWindow, false); function openWindow(){ //window.locationオブジェクトのhost…
ポップアップウインドウを開く設定をするたびにJavaScriptを記述するのはメンテナンス性に欠ける。 １つのJavaScriptファイルにその機能を集約させポップアップウインドウとして開くURLを簡単に集約できるスクリプトを作る。 //ポップアップウインドウとして…
通常イベントが発生した場合の処理を記述する場合は、HTMLタグにイベントハンドラ処理を追加するか、 「オブジェクト名.イベントハンドラ=function(引数){処理の内容;}」といった記述で動的にイベントをハンドリングするかのどちらかになる。 ただしこれらの…
JavaScriptでは他のJavaScriptファイルや画像ファイルなどを読み込むなど、他のファイルと連携する事がある。 JavaScriptファイルのパスが取得出来ると他のファイルへの相対的なアクセスがしやすくなり汎用性も高まる。 <script type="text/javascript" src="js/js_path.js"></script> <script type="text/javascript"> window.onload = function(){ var …
スタイルシートプロパティに書き込む エレメントのスタイルシートにアクセスするには、getElementById()やgetElementsByTagNameで対象となるエレメントを特定する。 エレメントのstyleオブジェクト内にスタイルシートの各プロパティがある。 スタイルシート…
DOM操作を行う場合、ID名やクラス名以外に位置関係を基準に各ノードにアクセスすることが出来る。 div id="contents"> <h3>お気に入りサイト</h3> <ul id="myLink"> <li id="firstLink"><a href="http://www.MdN.co.jp/">MdN</a></li> <li><a href="http://www.w3.org/">W3C</a><li><a href="http://www.yahoo.co.jp/">Yahoo</a></li> <li><a href="http://www.google.co.jp/">G…</a></li></li></ul>
Ajaxなどを利用してWebAPIサービス等と連携する場合、動的にHTML要素を追加し、受け取ったデータを表示することがある。 <script type="text/javascript"> //JSON形式で画像情報をセットする var images = { image01 : { src: "images/image01.jpg", width: 200, height: 133, alt: "image01…
JavaScriptはブラウザを構成するパーツやHTML要素へ動的にアクセスし、コンテンツの内容を書き換えたり、プロパティの値を変更することで、動きのあるコンテンツを実装する。 JavaScriptでは(X)HTML要素にアクセスするために次のメソッドが用意されている。 …
webページ上でマウスを使ってオブジェクトをドラッグしたり、ツールチップを表示する場合など、ドラッグする位置やツールチップを表示する位置を求めるためにマウスの座標を利用する <script type="text/javascript"> //イベントハンドラでは発生したイベントの情報がイベントオブジェクトと…
JavaScriptではブラウザによって利用できるプロパティやメソッドが異なる場合がある。 ブラウザの種類を判定し適切なスクリプトを記述することでクロスブラウザに対応することが出来る。 //バージョン情報の取出しには、正規表現とStringオブジェクトのmatch…
OSの種類を判定する事でOSごとにCSSを入れ替えたりiPhone用のページへの誘導などか可能になる。 OSの情報はwindowオブジェクトのnavigatorオブジェクトが管理している。 //platformプロパティにはMacIntelなどの文字列がセットさせている //その判定に正規表…
ウインドウサイズを取得するため、window.documentオブジェクトのプロパティを参照する。 ブラウザの動作モードによって、参照するプロパティを変更する。 動作モードはdocument.compatModeで取得するが、CSS1Compatは標準準拠モードを表す。 //ウインドウサ…
モニターサイズを取得することでウインドウを全画面表示にしたり、中央に表示したりする事が可能。 モニターサイズの情報はwindowオブジェクトのscreenオブジェクトが管理している。 //モニターサイズを取得する function getMonitorSize(){ var monitorSize…
