本日まで私のブログをご覧いただいていた皆様 こんにちは。 mocomeiです。 一年前エンジニアたる者、毎日最低1ステップは書かにゃいかんと思い始めた当ブログですが、先日、ブログのタイトル通り365日を迎えることができました。 海外でネット環境が整わずア…
お題 jQueryでJSONPを取得する プログラム概要 jQueryのgetJSON()メソッドを利用してJSONPを取得し画面に表示する ソース <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>hoge</title> <script src="jquery-1.11.0.js"></script> </head> <body> <h1>AjaxでJSONを取得</h1> </body></html>
お題 jQueryの$.get()メソッドでGETリクエストを送信する プログラム概要 $.get()メソッドでGETリクエストを送信し、結果を画面に表示する ソース <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>hoge</title> <script src="jquery-1.11.0.js"></script> </head> <body> <h1>$.get()メソッドを使用したAjaxの例</h1> </body></html>
お題 jQueryでイベントハンドラを登録する プログラム概要 id属性が"confirm"の要素がクリックされた場合のイベントハンドラを登録し、 クリックされた時に確認ダイアログを表示する ソース <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>hoge</title> <script src="jquery-1.11.0.js"></script> </head> <body> <form> </form></body></html>
お題 jQueryでCSSスタイルの操作をする プログラム概要 ボタンを用意し、それをクリックするとボタンに応じて CSSの操作を行う ソース <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>hoge</title> <script src="jquery-1.11.0.js"></script> <style type="text/css"> .title { color: red; } </style> </head> <body>…</body></html>
お題 jQueryで子要素を追加する プログラム概要 ボタンを押すとそれに応じてli要素を追加する ソース <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>hoge</title> <script src="jquery-1.11.0.js"></script> <body> <h1>子要素の追加</h1> <input type="button" id="append" value="append"/> </body></meta></head></html>
お題 jQueryで要素に対する繰り返し処理を行う プログラム概要 jQueryのget()、each()、map()メソッドによる繰り返し処理で要素を取得し 値を表示する ソース <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>hoge</title> <script src="jquery-1.11.0.js"></script> <body> <ul id="hp"> <li data-category="hg">hoge1</li></ul></body></meta></head></html>
お題 jQueryによる要素の絞りこみ プログラム概要 jQueryを利用してインデックス、セレクタによる絞込みをして表示する ソース <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>hoge</title> <script src="jquery-1.11.0.js"></script> <body> <h1>jQueryオブジェクトの絞りこみ</h1> <ul id="books"> <li>hoge1</li> <li>hoge2…</li></ul></body></meta></head></html>
お題 jQueryで複数のセレクタの指定 プログラム概要 jQueryで複数のセレクタに一致する要素を一度に選択し コンソールに出力する ソース <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>hoge</title> <script src="jquery-1.11.0.js"></script> <body> <h1>複数のセレクタの指定</h1> <div class="description">div要素のコンテンツ</div>…</body></meta></head></html>
お題 jQueryによる基本的なセレクタの指定方法 プログラム概要 HTML内の要素をjQueryのセレクタを利用して取得しコンソールに表示する ソース <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>hoge</title> <script src="jquery-1.11.0.js"></script> <body> <h1>セレクタの基本的な指定方法</h1> <ul> <li><span class="error">エラーメッセ…</span></li></ul></body></meta></head></html>
お題 jQueryを使ってみる プログラム概要 テキストボックスに名前を入力してボタンをクリックすると 名前が表示される ソース <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>hoge</title> <script src="jquery-1.11.0.js"></script> <body> お名前をどうぞ： <input type="text" id="name"/> </body></meta></head></html>
お題 状況に応じて出力するファイルを変える プログラム概要 ファイル名を2つ画面に表示させマウスポインタがあたると非同期でファイルを取得し、 内容をtextareに表示させる ソース <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>hoge</title> </head> <body> <span id="s1" onmouseover="func(this);">a.txt</span><br> </body></html>
お題 非同期処理でデータを取得し画面に表示する プログラム概要 ボタンをクリックすると非同期処理でデータを取得し 内容をdiv要素内に表示する ソース <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>hoge</title> </head> <body> <div id="div1"> </div> <input type="button" value="click here" onclick="func();"> <script> f…</body></html>
お題 Ajaxリクエストのタイムアウトを実装する プログラム概要 非同期のGETリクエストでdata.txtを取得する。 その際、1ミリ秒を超えてもレスポンスがかえってこなければ タイムアウトさせエラーを表示させる ソース <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>hoge</title> </head> <body> <script> var request = new window.X</body></html>…
お題 画面遷移がクライアント内で発生した場合にpushState()メソッドで履歴情報追加し、 戻るボタンで直前の状態に戻れるようにする プログラム概要 タイトルをクリックして詳細を表示させる（この際サーバにはアクセスせずあくまでブラウザ内で画面が遷移す…
お題 Node.jsでデータファイルを取得する プログラム概要 非同期処理でデータファイルを取得しコンテンツを表示する ソース HTML <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>hoge</title> </head> <body> <script> var request = new window.XMLHttpRequest(); request.onreadystatechange = function() { if (…</body></html>
お題 Node.js上でHTTPサーバを実現するプログラムを作成する プログラム概要 アクセスするとHello Worldとブラウザに表示される ソース var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-type': 'text/pl…
お題 JSONPを利用する プログラム概要 JSONPを利用することで同一生成元ポリシーを超えて別サーバへのアクセスをする。 JSONPデータにはJSONオブジェクトをパラメータにした関数の呼び出しをデータとして用意する。 呼び出しもとではJSONオブジェクトの内容…
お題 ページ内に別サーバのページを表示させる プログラム概要 iframe要素を使ってページ内に別サーバのページを表示させる。 その際、src属性のハッシュ値で指定した引数を別サーバで解析し表示させる ソース 呼び出し元 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>hoge</title> </head> <body> </body></html>
お題 li要素をドラッグ＆ドロップで入れ替える プログラム概要 li要素をドラッグ＆ドロップで入れ替える ソース <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>hoge</title> </head> <body> <ul> <li id="li1" draggable="true">hoge1</li> <li id="li2" draggable="true">hoge2</li> </ul></body></html>
お題 ドロップされたファイルの名前を出力する プログラム概要 ファイルがドロップされたらファイルの名前を出力する ソース <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>hoge</title> </head> <body> <div id="div2" style="border: 1px solid gray; height: 100px;"></div> <script> var target = document.getEle…</body></html>
お題 ドロップされた画像のサムネイルを表示する プログラム概要 画像をドロップするとその画像をサムネイルとして表示する。 また読み込みの進捗を%で表示する。 ソース <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>hoge</title> </head> <body> <div id="div2" style="border: 1px solid gray; height: 100px;"></div> </body></html>
お題 ファイルのドラッグ＆ドロップ プログラム概要 ファイルをドラッグ＆ドロップしファイルのプロパティと内容を表示させる ソース <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>hoge</title> </head> <body> <div id="div2" style="border: 1px solid gray; height: 100px;"></div> <script> // ドロップ対象のdiv要素にイベントハンドラ…</body></html>
お題 CSSを取得する プログラム概要 CSSルールをすべて取得し、表示させる ソース <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>hoge</title> <style type="text/css"> h1 { color: red; } input { border: 1px solid black; } </style> </head> <body> <h1>CSSを取得</h1> </body></html>
お題 新たなノードを追加する プログラム概要 p要素をクリックするとp要素の末尾に新たなspan要素を追加する ソース <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>hoge</title> </head> <body> <p onclick="insertElement(this)"> 元のテキスト </p> <script> function insertElement(element){ // 新しいspan要素を作成 var…</body></html>
お題 DOM APIを使用してHTMLのツリーを検索 プログラム概要 H1要素配下のテキストを表示する ソース <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>hoge</title> <script> function search(){ // <html>要素を取得 var html = document.documentElement; for(var i = 0; i < html.childNodes.length; i++…</html></meta></head></html>
お題 ドラッグ＆ドロップ プログラム概要 onmousedown,onmouseup,onmousemoveイベントを使って、 ドラッグ&ドロップをする ソース <html> <head> <meta charset="UTF-8"> <title>ドラッグ＆ドロップ</title> <script> function draggable(target){ // マウスが押されたときのイベントリスナを登録 // マウスの移動を補</meta></head></html>…
お題 onchangeイベントを使う プログラム概要 onchangeイベントを使いselect要素の選択が変更されたタイミングで 選択したサイトに遷移する ソース <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>hoge</title> </head> <body> <form> <select onchange="location.href = this.value"> <option>Please select.</option></select></form></body></html>
お題 イベントハンドラ属性にJSを記述する プログラム概要 ボタンを用意し、クリックするとテキストボックスに入力された名前を表示させる。 ソース <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>hoge</title> <script> function showDialog() { alert('Hello, ' + form.name.value + '!'); } </script> </head> <body> </body></html>
お題 文字列を分解するクラスを定義する プログラム概要 文字列を分解するクラスを定義する。2つメソッドを持ち、 1つ目はコンストラクタで与えられた文字列をカンマ区切りにした配列を返す。 2つ目はコンマ区切りにした文字列を順番に返す。 メイン処理では…
