JavaScript

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

:nth-child練習ページとjQueryセレクタ練習ページを作成しました。 :nth-child練習ページの使い方 :nth-child練習ページ Lesson1 li要素を10個用意しています。 各li要素はfle  >>続きを読む

レスポンシブサイトの切り替えポイント〜javaScript

レスポンシブサイトを作成するときに、javascriptで切り替えポイントを認識させる方法の説明です。 javascriptですからjQueryでも使用できます。 CSSメディアクエリによる切り替え まずは、CSSでのメ  >>続きを読む

正規表現の使い方の練習〜JavaScript編

正規表現でreplaceする replace関数を使って正規表現の使い方を覚えるために簡単なスクリプトを書きました。 replace(検索文字列 , 置換文字列 )を使用して文字を置換します。 プルダウンメニューで選んだ  >>続きを読む

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

JavaScriptとPHPを使っていると日時表示の方法がごっちゃになってしまいます。 それでまとめました。 PHPでの日付と時間の表示 PHPで日付や時間を取り扱うにはdate()かstrftime()を使用します。   >>続きを読む

正規表現の基礎

正規表現とは 正規表現(regular expression)とは文字パターンを表現する方法です。 つまり、文章の中のある文字列を検索したいときなど役に立ちます。 今回はJavaScript(jQuery)で正規表現を活  >>続きを読む

JavaScriptでDOMを操作する

DOMとは そもそもDOMはドキュメントをオブジェクトとして扱い、ドキュメントツリーを作成するものです。 DOMを操作する上で覚えておきたい用語は次のものです。 Node(ノード):要素や属性、テキストなどの総称 Ele  >>続きを読む

JavaScriptの表示についてまとめ

JavaScriptを勉強するときのモヤモヤ 一般的にJavaScriptはブラウザで簡単に表示して使用できるイベントドリブンな言語だと説明されます。 確かにコンパイルの必要もないし、初心者に優しい言語にまちがいないよう  >>続きを読む

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

相対的な位置関係でノードを取得 あるノードを起点に、ツリーをたどることで目的のノードを取得することができます。 その方法としては、DOMのNodeインターフェイスに定義されてる プロパティを活用します。 Node インタ  >>続きを読む

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

DOMを利用してドキュメントを操作してみましょう。 DOMを活用してドキュメントを操作するには大きく分けて2つの方法があります。 ダイレクトアクセス ID値やクラス属性、タグ名で直接要素を指定する方法 ノードウォーキング  >>続きを読む

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

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

fo  >>続きを読む

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

DOMレベル2のイベント処理 DOM0レベルのイベントモデルでは、イベントが発生した要素に対してイベントハンドラで命令が実行されますが、そしてそれ以上には何もありません。 DOMレベル2のイベントではこれと少し違ってきま  >>続きを読む

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

JavaScriptはイベントドリブンモデルのプログラムです。 それは、あるイベント(ページロード、マウスクリック、テキストボックスの内容が変更されたなど)に応じて実行するコードを記述することです。 DOMレベル0のイベ  >>続きを読む

初めてのDOM〜DOMの概念

DOMとは 多くの解説書ではDOMについて次のような説明がされています。 「DOM(Document Object Model)はドキュメントを構成するオブジェクトにアクセスする方法を定義したAPIです。 W3Cが標準D  >>続きを読む

Vanilla JS

君jQuery使ってる?って聞かれたら、 僕はVanilla JS を使ってるよと答えるといいらしい。 なにしろ早いからと付け加えることを忘れないようにね。

HTML5 canvasを使用してみる~少し複雑ななアニメーション

少し複雑なアニメーションの作成 複雑なアニメーションを作成するには複数行、複数列のタイルシートを作成する方法があります。 複雑になったタイルシートを指定する方法 たとえば、128X128の画像をタイルシートに複数行、複数  >>続きを読む

HTML5 canvasを使用してみる~簡単なアニメーション

イメージをタイルシートにするとパラパラ漫画風のアニメーションを作成できます。 簡単な例で試してみましょう。上のタイルシートの中の2つのイメージとdrawImage()メソッドを使用してアニメーションを作成します。 2枚の  >>続きを読む

JavaScriptのaddEventListenerについて

addEventListenerとは イベントハンドラは同一の要素あるいは同一のイベントに対して複数のイベントハンドラを定義できないのですが、イベントリスナを使うと有利な事は同一の要素あるいは同一のイベントに対して複数の  >>続きを読む

Freeのオーディオエンコーダー

Mac,Win用と用意されているFreeのオーディオエンコーダーにAudacityがあります。 サウンドの編集もできてお薦めです。 Audacityはこちらから ちょっと面倒なのはmp3に変換する場合は「Lame」が必要  >>続きを読む

ローディングアニメーションが簡単に作成できるサイト

ローディングアニメーションはGIF形式のアニメーションで作成しますが、一般的なものでいい場合は以下のサイトで簡単に作成できます。 簡単に出来るものは簡単にやってしまいましょう。 ajaxload.info Generat  >>続きを読む

FlashCS6 Toolkit for CreateJSを使ってみる(2)

ボタンをクリックしたらアニメーションを開始 前回のサンプルはHTMLの読み込みが完了したらすぐにアニメーションが開始する仕組みでしたが、今度はボタンをクリックしたらアニメーションを開始するようにしてみました。 body要  >>続きを読む

FlashCS6 Toolkit for CreateJSを使ってみる(1)

FlashCS6 Toolkit for CreateJSを使ってみる FlashCS6 Toolkit for CreateJSとは FlashCS6からswfの代わりにJavaScriptでアニメーションを行うための  >>続きを読む

JavaScript基礎4

関数について 一度定義すると何度も呼び出しが行えて、なんらかの処理をしたり、その結果を返す仕組みを関数といいます。関数にはfunction命令で定義するものと関数リテラルで定義する方法があります。さらにコンストラクタとい  >>続きを読む

JavaScript基礎3

ループ制御 繰り返し処理も非常によく利用される処理です。JavaScriptの繰り返し処理にはfor文、for…in文、while文、do…while文があります。 while文とdo&#8230  >>続きを読む

JavaScript基礎2

制御命令 プログラミングでは処理を分岐していく必要がでてきます。その分岐方法としてif文とswitch文があります。 if命令文 「もし~ならば、・・・命令を実行する。そうでなければ、・・・・命令を実行する」そんな分岐方  >>続きを読む

JavaScript基礎1

変数について 変数の宣言方法 var 変数名 var 変数名 = 初期値 例

変数名に用いることができるのは半角英数字です。変数名の最初は半角英文字か$ま  >>続きを読む

JavaScriptにおけるオブジェクト指向3

プロトタイプベースオブジェクト JavaScriptではインスタンス化後にプロトタイプのメンバを追加することができます。そして、そこで追加したメンバは他のインスタンスでも使用できます。 プロパティの宣言はコンストラクタで  >>続きを読む

JavaScriptにおけるオブジェクト指向2

インスタンス化後に独自のメンバを追加 インスタンス化後に独自のメンバを追加してみます。そのメンバは当然別のインスタンスには適用されません。

スクリプト実行  >>続きを読む

JavaScriptにおけるオブジェクト指向1

オブジェクト指向 javaScriptはオブジェクト指向言語です。けれども、Javaなどと大きく異る点があります。それはインスタンス化の概念はありますが、クラスがありません。そしてクラスの代わりにプロトタイプという概念が  >>続きを読む

配列の要素を順に処理 for…in命令

for…in命令 for…in命令を使用して配列の要素を表示してみます。 for(仮変数 in 配列/オブジェクト){ループ内で実行する処理} [crayon-58452524ebf5239843  >>続きを読む

連想配列

解説 オブジェクトリテラルを使用方法です。名前をキーにアクセスできる配列です。連想配列と呼ぶ場合もあります。

スクリプト実行結果です。