HTML&CSS

:nth-child練習ページ・jQueryセレクタ練習ページ作成しました。

:nth-child練習ページとjQueryセレクタ練習ページを作成しました。 :nth-child練習ページの使い方 :nth-child練習ページ Lesson1 li要素を10個用意しています。 各li要素はflexBoxで横並びにしています。 ピンクの背景色の1から10までが初期表示状態です。 :nth-child()の括弧の中がテキスト入力ボックスになっていますので、数値またはnやn+1などを入力してすぐ下の結果ボタンをクリックすることにより、対象のli要素の背景色がマリンブルーに変更されます。特にnやn+1や2nや2n+1など色々確認することができます。 :nth-child()の括弧の中の数値の使い方の練習に使ってください。 Lesson1 HTMLコード Lesson2 基本的な考え方はLesson1と同様です。違うのは単純にliが10個並ぶのではなく、違う要素だったり、入れ子状態を作って複雑にしています。 :nth-child()の括弧の中の数値が思ったとおりの結果になるか試してみてください。 特に括弧内に「2」あるいは「3」を入れたときの挙動が理解できるようにしっかりと学習してください。 *参考:「:nth-child()の使い方を極める」のページ jQueryセレクタ練習ページの使い方 jQueryセレクタ練習ページ こちらはjQueryのセレクタを練習するも  >>続きを読む

日付と時間〜PHPとJavaScriptの記述方法

JavaScriptとPHPを使っていると日時表示の方法がごっちゃになってしまいます。 それでまとめました。 PHPでの日付と時間の表示 PHPで日付や時間を取り扱うにはdate()かstrftime()を使用します。 date(書式[, タイムスタンプ]) strftime(書式[, タイムスタンプ]) よく使われるフォーマット例 通常はdate()を使用すればよいと思います。フォーマットは日付、時間の最初だけ大文字の頭文字とでも覚えます。 分がiなのは月のmと区別するためでしょうか。minutesのmの次のiなので。。。? 現在時刻を表示する場合はtime()を省略できます。 JavaScriptでの日付と時間の表示 JavaScriptで日付や時間を取り扱うにはDateオブジェクトをインスタンス化する必要があります。こっちは少し面倒ですね。 var now = new Date(); document.write(now) 表示は次のようになります。 Tue Feb 17 2015 12:17:15 GMT+0900 (JST) フォーマットはDateオブジェクトのメンバを使用します。 さらに、日にちや時間など「05」などのように0を付けて表示する場合は更に手を加える必要があります。 JavaScriptの日時表示は面倒ですね。

正規表現の基礎

正規表現とは 正規表現(regular expression)とは文字パターンを表現する方法です。 つまり、文章の中のある文字列を検索したいときなど役に立ちます。 今回はJavaScript(jQuery)で正規表現を活用する説明です。 まずは正規表現で比較する文字を「/」で囲みます。 例  /JavaScript/ これは「JavaScript」という文字列にマッチします。 以下の例はjQueryを利用した単語の入れ替えを行うコードです。ボタンをクリックしたらp要素の中の「JavaScript」が「Java」に変わります。正規表現はreplace()の引数として活用します。 正規表現を利用したreplace()の使用方法は以下のとおりです。 replace(/正規表現の記述/,”変換したい文字列”) スクリプトコード HTMLコード replace()に正規表現を活用したサンプル *このサンプルはコードを変更して試すことができます。左上がHTML記述欄、右上がスクリプト記述欄、右下が実行画面です。下記内容を参考に変更して正規表現を色々試してください。ただし、保存はできません。 正規表現で使用されるメタ文字 正規表現で使用される特別な意味を持つ特殊文字(メタ文字)には以下のものがあります。 ^ $ . + * = ! : | \ / ( ) { } 行の先頭  >>続きを読む

JavaScriptでDOMを操作する

DOMとは そもそもDOMはドキュメントをオブジェクトとして扱い、ドキュメントツリーを作成するものです。 DOMを操作する上で覚えておきたい用語は次のものです。 Node(ノード):要素や属性、テキストなどの総称 Element(要素) :pやh1などのタグ Attribute(属性):hrefやsrcなどの属性 text(テキスト):テキスト DOMの世界ではノードがタグとテキストを含む要素全体を指し、要素はタグのことを言います。 つまり、特定のノードの要素や属性、テキストを抽出したり追加、置換、削除するための手段となります。 それは言い換えると「特定の場所にタグや属性やテキストを新しく作ったり、書きかえたり、消したりできる!」ということです。 DOMのレベル レベル1  1998/01 ノードの参照、追加、置換、削除 レベル2  2000/11 スタイル操作、イベントモデル、ノードの範囲 レベル3  2004/04 XPath、妥当性の検証、読み込み、保存 DOM0はDOMレベル1ができる前の標準化以前のブラウザオブジェクトのことです。 DOMの操作 特定ノードの取得 ピンポイントでアクセスする方法と相対的にアクセスする方法と2種類の方法があります。 ダイレクトアクセス:ID値やタグ名、クラス名で直接要素を取得する方法 ノードウォーキング:ある要素を起点に相対的な位置関係で要素  >>続きを読む

JavaScriptの表示についてまとめ

JavaScriptを勉強するときのモヤモヤ 一般的にJavaScriptはブラウザで簡単に表示して使用できるイベントドリブンな言語だと説明されます。 確かにコンパイルの必要もないし、初心者に優しい言語にまちがいないようです。 さっそく初心者用の本を開いて学習を始めると変数や関数そして演算子や制御命令の書き方、その後に配列や簡単なオブジェクト指向の説明があったりします。 けれどもその多くはJavaScriptを実行した結果をアラートで確認したり、せいぜいdocument.write()を使用して確認する程度です。 一体全体body要素の中の指定した場所に書き出すにはどうしたらいいのでしょうか? JavaScriptを勉強する際に、なにかモヤモヤした気持ちになるのはそのあたりがはっきりしないことが原因しているように思えます。 ここでは、アラートなど(普通はアラートなど使用しない!)使わずに結果をスマートに表示させる手段を確認してみます。 DOMレガシーの頃のdocument.write()メソッド 一昔前のDOMレガシーが一般的な頃にbody要素内にJavaScriptの実行結果を表示させる方法としてdocument.write()メソッドが使用されていました。 document.write(‘表示したい内容’) ただし、document.write()メソッ  >>続きを読む

DOMを使ってノードを取得する〜DOMの活用(2)

相対的な位置関係でノードを取得 あるノードを起点に、ツリーをたどることで目的のノードを取得することができます。 その方法としては、DOMのNodeインターフェイスに定義されてる プロパティを活用します。 Node インタフェイスとは、DOM に用意されているオブジェクトです。javaなどのオブジェクト指向プログラミングでいうクラスのようなものです。オブジェクトですからプロパティやメソッドが用意されているわけです。 Nodeプロパティ attributes childNodes firstChild lastChild localName namespaceURI nextSibling nodeName nodeType nodeValue ownerDocument parentNode prefix プロパティの個別の説明は詳細を説明しているサイトを参考にしてください。Interface Node よく使用されるプロパティには次のものがあります。 ノードウォーキングで使われるプロパティ プロパティ名 説明 firstChild 最初の子ノードを取得 lastChild 最後の子ノードを取得 perviousSibling 直前のノードを取得 nextSibling 直後のノードを取得 childNodes.length 子ノードに含まれるノード数を取得 parentNode 親  >>続きを読む

DOMを使ってノードを取得する〜DOMの活用(1)

DOMを利用してドキュメントを操作してみましょう。 DOMを活用してドキュメントを操作するには大きく分けて2つの方法があります。 ダイレクトアクセス ID値やクラス属性、タグ名で直接要素を指定する方法 ノードウォーキング ノードのツリーを渡り歩いて目的の要素を指定する方法 ここではダイレクトアクセスについて学習します。 ダイレクトアクセス ダイレクトアクセスをするためには次のメソッドを使用します。IDやclass名または要素名を指定してダイレクトに要素にアクセスするものです。 ID名でアクセス getElementByidメソッド タグ名でアクセス getElementByTagNameメソッド クラス名でアクセス getElementByClassNameメソッド getElementByidメソッド 使用方法 引数に指定したID値を持つ要素を取得 document.getElementById('ID値') DEMO 次の例ではボタンをクリックすると「Hello World!」を「ハロー・ワールド!」に換えます。 HTMLコード JavaScriptコード getElementByTagNameメソッド 使用方法 引数に指定したタグ名を持つ要素を取得 document.getElementByTagName('タグ名') タグ名を指定した場合はID名と違い複数の要素が返ってきま  >>続きを読む

選択ボックスの作成 JavaScriptを使用して作成

選択ボックス 複数の年齢などを表示するoption要素をループ文を使用して作成する方法です。 while文 10代から80代まで10歳ずつ表示する例 for文 1際から50歳まで1歳ずつ表示する例

JavaScriptの高度なイベント処理 イベント伝播

DOMレベル2のイベント処理 DOM0レベルのイベントモデルでは、イベントが発生した要素に対してイベントハンドラで命令が実行されますが、そしてそれ以上には何もありません。 DOMレベル2のイベントではこれと少し違ってきます。 イベントが発生した要素に対してイベントハンドラで命令が実行されます。ここまではDOM0レベルのイベントと同じです。DOMレベル2のイベントではイベントの伝播(でんぱ)が行われます。 イベントの伝播 イベントの伝播には3つの段階があります。 キャプチャリング Documentオブジェクトからドキュメントツリーを下ってターゲットノードにイベント伝播していきます。 ターゲット ターゲットノード自信に登録したイベントハンドラが実行されます。DOM0のイベントと同様の振る舞いです。 バブリング イベントがターゲットノードからDocumentオブジェクトまで階層構造を上って伝播します。その様が泡が浮き上がるようだからバブリングです。 この仕組みを知らないでDOMレベル2のイベントを使用すると思わぬ結果を招くことになります。 更に重要なポイントがあります。DOMレベル0モデルではある特定のオブジェクトの特定の種類のイベントに対しては、イベントハンドラは1つしか登録できません。けれどもDOM2のイベントモデルではある特定のオブジェクトのある特定の種類のイベントに対して複数のイ  >>続きを読む

JavaScriptのイベント処理 イベントハンドラ

JavaScriptはイベントドリブンモデルのプログラムです。 それは、あるイベント(ページロード、マウスクリック、テキストボックスの内容が変更されたなど)に応じて実行するコードを記述することです。 DOMレベル0のイベントモデル JavaScript初期の頃のイベントハンドラの設定方法です。 イベントタイプ イベントハンドラの種類 分類 イベントハンドラ 発生タイミング 主な対象要素 読み込み onabort 画像の読み込みが中断されたとき img onload ページ、画像の読み込みが完了したとき body,img onunload 他ページに移動するとき body マウス onclick マウスクリック   ondbclick ダブルクリック   onmousedown マウスボタン押下時   onmousemove マウスボタン移動時   onmouseout 要素からマウスボタンが外れたとき   onmouseover 要素にマウスボタンが重なったとき   onmouseup マウスボタンを離したとき   contextmenu コンテキストメニューが表示されたとき body キー onkeydown キーを押下したとき   onkeypress キーを押下中   onkeyup キ  >>続きを読む