はてなブックマーク

HOME JavaScript入門 ここでは、ビギナーの方を対象としたJavaScriptの解説を行っています。 JavaScriptは、Webページに組み込んでいろいろなアクションを起こすことができます。 是非JavaScriptを覚えて、一ランク上のWebページ作りに励んでみて下さい。 当サイトでは主に「初めてJavaScriptを触る人」、特にプログラム自体初めての方を対象にしています。 初めての方は様々な専門用語が出て来ると非常に難しく感じることがあるので、ここでは極力専門用語を使わないようにしています。 ここで書かれてあることをマスターしたなら、 後は色々なサイトでレベルを磨いていってください。 なお最初に断っておきますが、JavaScriptを理解するにはHTMLをある程度使える必要があります。 HTMLを十分使えない方は、まずそちらを勉強なさって下さい。 HTMLを理解してい

HOME JavaScript入門[HTML5編] テキストファイルを読み込む 前のページではファイル選択ダイアログの出し方を見ました。 ここではそれを利用してローカルにあるテキストファイルを選択し、 テキストエリアに読み込む方法を見ていきたいと思います。 テキストを読み込む ローカルにあるファイルを読み込むには、FileReaderを使います。以下に使い方を掲載します。 変数 = new FileReader() FileReaderを作成し、変数に格納します。 変数.readAsText(Fileオブジェクト) テキスト形式でファイルを読み込みます。 変数.result 読込結果を取り出します。 以下のサンプルでテキストファイルを読み込みますが、このページの文字コードがUTF-8なので、 UTF-8形式のテキストでないと字化けします。もしUTF-8形式のテキストファイルが無ければ、 以

画像を描画する命令drawImage() まずcanvasに画像を描画するdrawImage()の使い方を３通り見ておきましょう。 context.drawImage(画像,X1,Y1) 画像を指定座標に描画する X1は画像を描画するX座標,Y1は描画するY座標 context.drawImage(画像,X1,Y1,W1,H1) 画像を指定した座標に、幅と高さも指定して描画する W1は画像を描画する際の幅、H1は描画する際の高さ context.drawImage(画像,X0,Y0,W0,H0,X1,Y1,W1,H1) 元画像の一部分を切り抜いてcanvasに描画する X0,Y0は切り抜く元画像の座標、W0,H0は切り抜く画像の幅と高さ 今回描画する元画像は649×433ピクセルの下のものです。この画像を3通りの方法でcanvasに描画していきます。 元画像を切り抜いてcanvasに描画す

HOME JavaScript入門 addEventListener() 前のページで見た方法では、同じイベントに対して処理を追加するということができません。 一番最後に指定したものが適用されます。処理を追加登録する場合は、addEventListener()を利用します。 DOM要素にイベントを指定すると上書きになる 下のサンプルをご覧下さい。HTMLのタグのonclick属性で関数fnc1を呼び出すようにしています。 そこにJavaScriptを使ってonclickイベントに関数fnc2を呼び出すよう記述しました。 果たして結果はどうなるでしょうか？ <form> <input type="button" id="ev" value="イベント発動" onclick="fnc1()"> </form> <script> var obj = document.getElementById

HOME JavaScript入門[HTML5編] canvasを画像に変換する ここでは、canvasに描いた図形や文字を、画像に変換する方法を見ていきます。 画像に変換すれば、右クリックで保存したり、他の画像と入換えしたりすることができるようになります。 canvasデータを画像に変換する canvasで描画したデータを画像に変換するには、toDataURL()を使います。 canvas.toDataURL(画像形式) キャンバス内のデータをdata:形式に変換します。 画像形式はimgage/png，image/jpeg，image/svg+xmlの何れかを指定します。 省略した場合はPNG形式になります。 toDataURL()の前は、contextではなくcanvasである点注意して下さい。 画像変換サンプル 以下のサンプルでは、canvasにラインを９列、ランダムな色で描いてい

HOME HTML5時代のJavaScript入門 こちらのページでは、HTML5時代におけるJavaScriptの活用方法を解説していきます。 HTML5＋CSS3＋JavaScriptの組み合わせは、 スマートフォンのアプリなどを作る場合にも使用される注目度の高い技術です。 是非その基本をマスターしてください。 ただ、HTML5はまだ仕様が確定していない部分が多く、ブラウザによって実装がまちまちです。 動作するブラウザもあれば、しないブラウザもあります。 その点はその都度確認して使用するようになさってください。

HOME JavaScript入門 DOMでできること ここからDOM（Document Object Model）というJavaScriptの機能について解説していきます。 「DOMとは何か？」ということを説明しようと思うと結構専門的な用語を使う必要がありますし、 私も正確に理解しているわけではありません。 それでこの説明は他サイトに任せるとして、DOMでどんなことができるか、 またその為に必要な知識についてこのページで説明したいと思います。 DOMを使うと何ができるのか？ DOMを使うと、ページの再読み込みをすることなく、 ページの一部を書き換えたり、 スタイルを変更したりすることができます。 例えば以前に世界時計を作成しました。 その際、時刻はフォームのテキストボックスに表示したと思います。 テキストボックスは書き換えが可能だからです。 しかしdocument.write()は読み込

HOME JavaScript入門 チェックのON/OFF 前回はチェックボックスがチェックされているかどうかを確かめる方法について見ました。 このページではJavaScriptでチェックを付けたり消したりする方法について考えます。 JavaScriptでチェックをON・OFFする ここでは、前のページで見たHTMLのフォームを利用していきます。 ではJavaScriptの部分に、以下の関数を書き足してみてください。 function noch(){ //「この中には無い」がチェックされているか確認 if( document.chbox.elements[5].checked ) { //チェックされていたら、他の項目のチェックを外す for( i=0 ; i<5 ; i++) { document.chbox.elements[i].checked=false; } } } そして、関数

HOME JavaScript入門 配列をシャッフルする ここでは、乱数を使って配列の要素を入れ替える方法について解説します。 問題文をランダムに出題したい場合などに使うことができます。 前のページでも、問題文（カラー名の英単語）をランダムに表示する方法を見ましたが、 同じ問題文が何度も続けて表示されることもあったと思います。 それを避けるために、配列そのものをシャッフルして、 その後その配列を順に表示すればダブることがありません。 では、以下のスクリプトをHTMLのBODY内に記入してみて下さい。 <form name="quiz"> <input type="text" value=""> <input type="button" value="出題" onclick="mondai()"> </form> <script> //カラー名を格納する配列colの作成 var col =

訪問回数を表示するスクリプト では上記の流れでスクリプトを組んでみましょう。 HTMLファイルを作成し、以下のコードをBODY内に記入してみてください。 <script> var cook; //cookieデータを格納する変数 var cStart,cEnd; //訪問回数部分を切取る為の位置を格納 var cnt; //訪問回数を格納 //cookieが使えるか確認 if (navigator.cookieEnabled) { cook=document.cookie + ";"; //変数cookにcookieデータを入れる //変数cStartにカウントデータの最初の位置を入れる cStart = cook.indexOf("counts=",0); //データの有無で分岐 if (cStart == -1) { //データの無い場合は最初の訪問ということ document.wri

HOME JavaScript入門 今日の日付と現在時刻 ここからJavaScriptで日付と時間を扱う方法について解説していきます。 まず最初は、今日の日付と現在時刻を取得する方法について説明します。 今日の日付を取得する まずはHTMLのBODY内に以下のコードを記入してみてください。 <script> //今日の日付データを変数hidukeに格納 var hiduke=new Date(); //年・月・日・曜日を取得する var year = hiduke.getFullYear(); var month = hiduke.getMonth()+1; var week = hiduke.getDay(); var day = hiduke.getDate(); var yobi= new Array("日","月","火","水","木","金","土"); document.wr

HOME JavaScript入門 チェックボックスを扱う このページでは、チェックボックスをJavaScriptで扱う方法について解説します。 どのチェックボックスが選択されているか確認したり、 どれもチェックされていないと警告を出したりしてみます。 チェックボックスを扱うスクリプト HTMLのボディ内に、以下のように記述してみてください。 <form name="chbox"> <p>あなたの好きな動物は？（複数可）</p> <input type="checkbox" value="イヌ">イヌ<br> <input type="checkbox" value="ネコ">ネコ<br> <input type="checkbox" value="ウサギ">ウサギ<br> <input type="checkbox" value="ハムスター">ハムスター<br> <input type

今回は、キー押下時「onkeydown」を用いたいと思います。 このイベントをJavaScriptで受け取るには、 HTMLのヘッダーに以下の一行を記入します。 document.onkeydown = 関数名; キーが押された時の処理を記入した関数名を右辺に指定します。 これで入力されたキーを受け取れるようになります。 キー入力でページ移動するスクリプト では具体的にキーイベントを利用したスクリプトを見ていきましょう。 今回、ページ移動処理を記入する関数の名称は「pageMove」にしました。 ではHTMLのヘッダーに以下のように記入してみてください。 <script> //キー押下時に関数pageMove()を呼び出す document.onkeydown = pageMove; function pageMove() { if (event.keyCode == 66) //「Ｂ」が

HOME JavaScript入門 入力されたキーを受け取る（FireFox編） 前のページでは、Internet Explorerでキー入力を受け付ける方法について見ました。 他にもOperaやGoogle Chrome，Safariなどの最新版でも動作します。 しかしブラウザシェア率第2位のFireFoxでは残念ながら動きません（Ver.24の時点では）。 それでこのページでは、FireFoxでも動作するスクリプトを組んでみたいと思います。 今回も前のページと同じく、「Ｂ」キーを押すと前のページに戻り、 「Ｆ」キーを押すと次のページに進むスクリプトを組んでみることにします。 FireFoxでキー入力を受け付ける場合 FireFoxでキー入力を受け付ける場合、event.keyCodeが使えません。 それで、この部分を次のように変更します。 具体的には、以下のようなコードになります。 d

HOME JavaScript入門 cookieの期限を指定する 前のページで訪問カウントをCookieに記録する方法について見ました。 しか有効期限を指定していなかったので、一旦ブラウザを閉じてしまうとカウント数が消えてしまう問題がありました。 それで今回はCookieの有効期限を指定して、その時までデータを保存しておく方法について見てみることにしましょう。 cookieの有効期限を指定する流れ 最初に、Cookieの有効期限を指定する流れを掲載しておきます。 期限を30日後に指定したい場合、次のような手順を踏みます。 現在の日付データを取得します。 そのデータをもとに、30日後の日付データを作成します。 日付データをGMT（グリニッジ標準時）に変換します。 cookieに書き込むとき、有効期限も一緒に書き込みます。 では前回の訪問数カウントスクリプトに、期限を付けて記録してみることにし

HOME JavaScript入門 一定時間で繰り返す（setInterval） ここから、JavaScriptのタイマーについて解説していきます。 タイマーは、一定時間毎に動作を繰り返す時などに用いることができます。 スライドショーを作ったり、文字を切り替えたり流したりする時などに使用します。 このページでは文字を一文字ずつ表示する方法について見てみましょう。 setInterval()を使ったタイマーのサンプルスクリプト タイマーには2種類あって、ここではsetInterval()という命令文を使ってみます。 もう一つは次のページで解説します。 setInterval()は、一定時間毎に特定の関数を呼び出します。 では、以下のスクリプトをHTMLのBODY内に記入してみて下さい。 <form name="timer"> <input type="button" value="スタート"

HOME JavaScript入門 画像を切り替える ここでは、DOMで画像を切り替える方法について解説します。 この画像切り替えと、 前のページで見た文字の切り替えができれば、 ノベルゲームなどを作ることもできます。 当サイトの35パズルも、基本的にこの技術を利用して作成しています。 画像切り替えスクリプト 画像を切り替えるには、まず画像を配列に格納します。 そして、何らかのイベントでそれらを切り替えていきます。 ここでは、画像をクリックすると次の画像が表示されるようにしてみたいと思います。 では、同じサイズの画像を3枚用意してみてください。 ファイル名は以下のようにします。 それをフォルダに入れ、フォルダ名を「image」にします。 そのフォルダと同じ場所にHTMLファイルを作成してください。 では、以下のスクリプトをHTMLのBody内に記入してみて下さい。 <img id="gaz

HOME JavaScript入門 タイマーを停止する 前回まででタイマーの設定方法について見てきましたが、 一度タイマーを稼動させるとずっと動き続けていました。 それで今回は、タイマーを停止する方法について考えていきたいと思います。 タイマー停止スクリプト タイマーを停止させるには、タイマーに名前を付ける必要があります （これをタイマーIDと言います）。 具体的には、タイマー自体を変数に格納します。 変数名がタイマーIDということになります。 では、一定時間でランダムに数字を表示していくタイマーをON/OFFしてみたいと思います。 以下のスクリプトをHTMLのBODY内に記入してみてください。 <form name="tm"> <input type="text" value=""> <input type="button" value="ON" onclick="tmstr()"> <

HOME JavaScript入門 正規表現による検索 前のページで、正規表現を使った文字列置換の方法について簡単に触れましたが、 ここでは正規表現を使えばどんな検索が行えるか見てみたいと思います。 正規表現を使った検索のサンプル では以下のスクリプトをHTMLのBODY内に記入してみてください。 <script> var str = "JavaScriptで正規表現を使えば、高度な検索を行えます。"; var rep; //検索した文字列を格納する変数 //任意の文字を検索 rep = str.match(/正規表現/); document.write(rep+"<br>"); //結果「正規表現」 //指定文字前後も含めて検索 rep = str.match(/..表現/); document.write(rep+"<br>"); //結果「正規表現」 rep = str.match(

HOME JavaScript入門 innerHTML,textContent ここでは、既に読み込まれたテキストを書き換える方法について解説します。 前のページで現在時刻を1秒ずつ表示していたのも、このページで扱う機能を使って実現しています。 テキストの書き換え ではHTMLのBody内に以下のタグとスクリプトを書き込んでみてください。 <form> <input type="button" value="テキスト" onclick="reWrite(0)"> <input type="button" value="HTMLタグ" onclick="reWrite(1)"> </form> <div id="str">このタグの中身を書き換えます。</div> <script> function reWrite(num) { if (document.getElementById) {

パズルネット 智慧（ソフィア）にお越しくださり、ありがとうございます。 当サイトは、パズルとWebの融合を促進する研究所です。 パズルの話題のみならず、Web製作に関する情報・プログラム関係の情報を掲載していきます。 ソフィア「Σοφια」とはギリシャ語で「知恵」を表します。 知恵は頭の中にある知識を活用する能力です。 今まで積んできたWebの知識を使ってパズルを製作したり、解説したりしていきます。 当サイトはリンクフリーです。 どのページにでもリンクしてくださって構いません。 ただし、TOP（このページ）以外は移動・削除される可能性があります。