サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
大そうじへの備え
javascriptist.net
JavaScriptでのキーボードイベント処理 bookmark JavaScriptでのキーボードイベントの処理はブラウザによって違っていて、クロスブラウザで動作させるためには、それぞれのブラウザに合ったコードを実行し分ける必要があります。 JavaScriptでキーボードイベントを取得し、どのキーコードが押されたかを判別するサンプルを以下に示します。CtrlキーやShiftキーが押されたかどうかなどのチェック方法も併せて示しています。 このサンプルを活用することで、Webアプリケーションにショートカット機能をつけ、より使い勝手のよいWebアプリケーションを作成する手助けになるはずです。 キーボードイベント処理サンプルコード bookmark <html> <title>クロスブラウザでキーボードイベントを処理する方法</title> <body> press keycode </bod
「オブジェクトの中身を見る」サンプルコード <html> <head> <title>Object.toSource - オブジェクトの中身を見る</title> </head> <body> <!--オブジェクトの中身を見るのサンプル--> <script type="text/javascript"> var obj = {"a":1, "b":2}; document.write(obj.toSource()); </script> </body> </html>
公式サイト ライブラリを使ったデモ ライセンス:BSDライセンス Yahoo!Incの提供するライブラリに含まれているカレンダー機能 日本語も使えて操作性も良いです。
「指定タグでのエレメント作成」サンプルコード <html> <head> <title>document.createElement - 指定タグでのエレメント作成</title> </head> <body> <!--指定タグでのエレメント作成のサンプル--> <script type="text/javascript"> function addElement() { var element = document.createElement('div'); element.id = "id"; element.innerHTML = "hogehoge"; element.style.backgroundColor = 'red'; var objBody = document.getElementsByTagName("body").item(0); objBody.appendCh
「ドキュメントのパス名を得る」サンプルコード <html> <head> <title>location.pathname - ドキュメントのパス名を得る</title> </head> <body> <!--ドキュメントのパス名を得るのサンプル--> <script type="text/javascript"> document.write(location.pathname); </script> </body> </html>
「指定要素へ子要素追加」サンプルコード <html> <head> <title>element.appendChild - 指定要素へ子要素追加</title> </head> <body> <!--指定要素へ子要素追加のサンプル--> <script type="text/javascript"> function addElement() { var element = document.createElement('div'); element.id = "id"; element.innerHTML = "hogehoge"; element.style.backgroundColor = 'red'; var objBody = document.getElementsByTagName("body").item(0); objBody.appendChild(element)
構文 stringObject.replace(find,string) 引数: find=検索文字列, string=置換文字列 「文字列置換を行う」サンプルコード <html> <head> <title>String.replace - 文字列置換を行う</title> </head> <body> <!--文字列置換を行うのサンプル--> <script type="text/javascript"> var str="String Hello" document.write(str.replace("String", "Spring") + "<br>"); document.write(str.replace(/H.+o/i, "mojiretu") + "<br>"); document.write(str.replace(/S.+H/i, "M")); </script>
「フォームをsubmitする」サンプルコード <html> <head> <title>form.submit - フォームをsubmitする</title> </head> <body> <!--フォームをsubmitするのサンプル--> <form method="get" action="index.php" name="frm"> <input type="text" name="name" value=""> <input type="submit" value="submit"> </form> <a href="#" onclick="document.frm.submit()">フォームをサブミットする</a> </body> </html>
「指定IDのエレメント取得」サンプルコード <html> <head> <title>document.getElementById - 指定IDのエレメント取得</title> </head> <body> <!--指定IDのエレメント取得のサンプル--> <div id="test">中身テキスト</div> <script type="text/javascript"> function getElement() { var element=document.getElementById("test") alert(test.innerHTML); } </script> <button onclick="getElement()">getElementById('test')</button> </body> </html>
公式サイト ライブラリを使ったデモ ライセンス:BSDライセンス Windowsで使っているカラーピッカーのような高機能なインタフェースを提供してくれる。実装はやや面倒
この機能を実行するにはprototype.jsが必要です 構文 Element.update(element, html) 引数: element=エレメント, html=中に入れるＨＴＭＬ 「エレメントのinnerHTMLを書き換える」サンプルコード <html> <head> <title>Element.update - エレメントのinnerHTMLを書き換える</title> </head> <!--エレメントのinnerHTMLを書き換えるのサンプル--> <script type="text/javascript" src="/js/prototype.js"></script> <script type="text/javascript"> function execute() { var item = $('sample'); Element.update(item, "
「エレメントのidを取得/設定」サンプルコード <html> <head> <title>element.id - エレメントのidを取得/設定</title> </head> <body> <!--エレメントのidを取得/設定のサンプル--> <form method="post" action="index.php" id="testform"> <input type="text" name="name" id="name" value="aaa"> <input type="submit" value="submit"> </form> <script type="text/javascript"> var element = document.getElementById("name"); document.write("idの値→"+element.form.id); // 属
javascript & ajax samples to improve your web development. トップページ / JavaScriptの基礎 JavaScriptの基礎 スポンサードリンク さあ、JavaScript入門 bookmark JavaScriptの基本 変数 コメント 条件分岐 配列 ループ 関数定義 連想配列 文字列を操作してみる 数学関数を色々使う 正規表現を使ってみる ブラウザを操作 DOMを操作 → 次のページ： JavaScriptでオブジェクト指向 JavaScript入門インデックス JavaScriptについて/開発環境の構築 JavaScriptの基礎 JavaScriptでオブジェクト指向 以降のJavaScript学び方 スポンサードリンク ナビゲーション copyright © Ajaxsamples. 2006 develope
この機能を実行するにはprototype.jsが必要です 構文 Ajax.Updater(container, url, options) 引数: container=更新対象のエレメントＩＤ, url=Ajaxで接続するＵＲＬ, options=オプション 「Ajaxで指定エレメントの内容を書き換える」サンプルコード <html> <head> <title>Ajax.Updater - Ajaxで指定エレメントの内容を書き換える</title> </head> <!--Ajaxで指定エレメントの内容を書き換えるのサンプル--> <script type="text/javascript" src="/js/prototype.js"></script> <script type="text/javascript"> function execute() { var a = new Aj
公式サイト ライブラリを使ったデモ ライセンス:MITライセンス prototype.jsを継承した最もポピュラーなライブラリ。 アニメーションだけでなく、ドラッグ＆ドロップやサジェストボックス作成機能などを備えている
「formタグのname値を取得/設定」サンプルコード <html> <head> <title>form.name - formタグのname値を取得/設定</title> </head> <body> <!--formタグのname値を取得/設定のサンプル--> <form method="post" action="index.php" id="frm" name="form1"> <input type="text" name="testname" value="aaa"> <select name="day" id="day"> <option value="1">1の値 <option value="2">2の値 <option value="3">3の値 <option value="4">4の値 <option value="5">5の値 </select> <input
この機能を実行するにはprototype.jsが必要です 構文 Event.observe(element, name, observer, useCapture) 引数: element=監視したいエレメント, name=イベント名, observer=イベント時関数 「イベントを監視」サンプルコード <html> <head> <title>Event.observe - イベントを監視</title> </head> <!--イベントを監視のサンプル--> <script type="text/javascript" src="/js/prototype.js"></script> <script type="text/javascript"> <!-- window.onload = function() { Event.observe('sample', 'click', han
公式サイト ライブラリを使ったデモ ライセンス:AFL and BSDライセンス バージョン0.4からグラフ描画機能が追加されました。スムーズなグラフを描画できます
prototype.jsでAjax.PeriodicalUpdaterを使う bookmark prototype.jsというライブラリのAjax.PeriodicalUpdaterという機能を使えば、ページの特定部分を定期的に簡単に書き換えることが出来ます。 コードを見てみよう bookmark Ajax.PeriodicalUpdaterのコードとしては次のようになっています。 new Ajax.PeriodicalUpdater( "container", "/samples/ajax/test.php", { "method": "get", "parameters": "p=hoge", frequency: 5, // 5秒ごとに実行 onSuccess: function(request) { // 成功時の処理を記述 // alert('成功しました'); }, onCom
この機能を実行するにはscriptaculousが必要です 構文 new Ajax.Autocompleter(targetInput, suggestElement, url, options) 引数: targetInput=入力ボックスのＩＤ, suggestElement=補完ボックスのＩＤ, url=投げるＵＲＬ, options=オプション 「Ajaxでオートコンプリート」サンプルコード <html> <head> <title>Autocompleter - Ajaxでオートコンプリート</title> </head> <!--Ajaxでオートコンプリートのサンプル--> <script type="text/javascript" src="/js/prototype.js"></script> <script type="text/javascript" src="/js
色々な言語で採用されているオブジェクト指向。 JavaScriptも例外ではなく、その考え方にそってプログラミングしよう、という流れがあります。まず、オブジェクト指向の考え方から説明し、JavaScriptでの実践法、そして、prototype.jsというライブラリを使っての実践法について説明します。 JavaScriptでのオブジェクト指向 bookmark オブジェクト指向とは？ JavaScriptでオブジェクト指向をやってみよう！ bookmark クラスを作成 prototype.jsでオブジェクト指向 bookmark prototype.jsでオブジェクト指向 prototype.jsでクラスを作ってみる prototype.jsを使ってクラスを継承 抽象（Abstract）クラスを作成
classNameプロパティを書き換える bookmark HTML要素のclass属性は、element.classNameによって簡単に書き換えることが出来ます。 コードを見てみよう bookmark <html> <body> <body>
JavaScriptリファレンス | JavaScriptリファレンス-ブラウザ関連クラス | リファレンスABCインデックス prototype.jsリファレンス | scriptaculousリファレンス ナビゲーター-navigator bookmark navigator.appCodeName | navigator.appMinorVersion | navigator.appName | navigator.appVersion | navigator.cookieEnabled | navigator.cpuClass | navigator.javaEnabled | navigator.onLine | navigator.platform | navigator.systemLanguage | navigator.userAgent | navigator.user
Event.pointerX, Event.pointerYを使う bookmark Event.pointerX, Event.pointerYを使えば、複数のブラウザで同じようにマウス位置を簡単に取得できます。 コードを見てみよう bookmark <html> <head> <title>マウス位置を得る</title> </head> <body> <body> </body> </html> コードの解説 bookmark window.onload からEvent.observeを呼び出しています。これは、ページの読み込みが完了した後でイベントを付与するようになっています。 肝心のところは、Event.observe('container', 'click', up); によって、<div id="container"> のクリック時に up 関数が呼ばれるところです。 up関
DOMとは？ bookmark HTMLやXMLを操作するためのAPIをDOMというそうです。要は、HTMLをJavaScriptを使って動的に、自由に書き換えることが出来ます。HTMLを動的に書き換えることは、Web2.0時代のWebサイトとしては必須です。 このページではDOMで行える基本的なことを紹介します。 HTMLを書き換えてみる bookmark 次のようなDIV要素があります。 <div id="content"></div> タグの中には何もHTMLが入っていませんが、次のようにJavaScriptのコードを書くことで動的にHTMLが入ります。 var content = document.getElementById("content"); content.innerHTML = 'foobar'; 上記スクリプトを実行することで、ブラウザ内のHTMLは次のようになります
この機能を実行するにはprototype.jsが必要です 構文 Element.toggle(elem1 [, elem2 [...]]]) 引数: elem1=エレメント 「エレメントの表示状態をトグル」サンプルコード <html> <head> <title>Element.toggle - エレメントの表示状態をトグル</title> </head> <!--エレメントの表示状態をトグルのサンプル--> <script type="text/javascript" src="/js/prototype.js"></script> <script type="text/javascript"> function execute() { var item = $('sample'); Element.toggle(item); // 表示→非表示、非表示→表示 } </script> <
prototype.jsでAjax.Updaterを使う bookmark prototype.jsというライブラリのAjax.Updaterという機能を使えば、ページの特定部分を簡単に書き換えることが出来ます。 Ajax.Requestという機能で、Ajaxレスポンス取得後に、より細かい処理を行うことも出来ます。 コードを見てみよう bookmark Ajax.Updaterのコードとしては次のようになっています。 new Ajax.Updater( "container", "/samples/ajax/test.php", { "method": "get", "parameters": "a=b&c=d&e=f", onSuccess: function(request) { // 成功時の処理を記述 // alert('成功しました'); // var json; // eval
公式サイト ライブラリを使ったデモ 参考記事 ライセンス:不明 prototype.jsを使ったWYSIWYGエディタ。高度なHTML編集を見たまま行えるライブラリをprototype.jsを使って実現しています。
次のページ
このページを最初にブックマークしてみませんか？
『JavaScriptist - javascript/ajax/サンプル/入門/リファレンス/ライブラリ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
