Blog
ブログで学ぶUX

カテゴリ: Web制作の記事

JavaScriptのプロトタイプ:prototypeプロパティ

JavaScriptはプロトタイプベースのオブジェクト指向言語です。ここでは、プロトタイプの概要について説明します。 JavaScriptのプロトタイプとは プロトタイプベースのオブジェクト指向では、新しいオブジェクトは元となるオブジェクトを雛形(=プロトタイプ)として作成されます。 関数はprototypeプロパティを持っている そして、全ての関数オブジェクトは、prototypeプロパティを持……

投稿日:

思わず熱中してしまうゲーム風プログラミング学習サイトまとめ

近年ではプログラミングをゲーム風に楽しく学べるサービスが増えていますが、中には「ゲームっぽい」だけでフタを開けてみたらただのプログラミング講座だった…というものも多いです。もちろん、コードを書く部分はただのプログラミング講座にはなってしまうのですが、いわゆるゲーミフィケーションとよばれる報酬制度や世界観の演出は大事です。そこで今回はゲーム好きな筆者が試して、実際記事執筆を忘れて遊んでしまいそうにな……

投稿日:

JavaScriptの例外処理:try catch finally

プログラムの実行中に例外(エラー)が発生した場合、通常はエラー内容を表示して実行を中断します。しかし、致命的なエラーでなければ、実行を中断せずに発生した例外に応じた処理を行いたいことがあります。 このような処理を例外処理と呼び、JavaScriptではtry-catch-finally構文を使って記述します。 try-catch-finnaly構文の書き方 try{ //処理 }catch……

投稿日:

JavaScriptで数値を文字列に変換する

JavaScriptで数値を文字列に変換する方法について説明します。 以下では、数値オブジェクトが持つtoString(), toFixed(), toExponential()の各メソッド、及び、暗黙の型変換を利用した型変換の方法について説明します。 toString()メソッド toString()メソッドは、引数に基数(例:2進数ならば基数は2)を指定して数値を文字列に変換します。 基……

投稿日:

JavaScriptで配列のサイズを取得する:length

JavaScriptで配列の要素数を取得するには、配列オブジェクトのlengthプロパティを使います。 以下では、lengthプロパティの基本的な使い方と使用上の注意点について説明します。 lengthプロパティの基本的な使い方 要素数の取得 配列の要素数を取得するためにはlengthプロパティを使います。 lengthプロパティの値は配列の要素数なので、以下の例のように配列の要素数を取得す……

投稿日:

JavaScriptのundefinedとnull

JavaScriptには5つの基本型(プリミティブ型)とオブジェクト型があり、基本型には数値型、文字列型、真偽値型、undefined型、null型があります。 ここでは、基本型のうちやや特殊な型であるundefined型とnull型について説明します。 undefined型 undefined型はundefinedという値のみを取り、未定義値あるいは未初期化値を表わします。 例えば、宣言されただ……

投稿日:

JavaScriptのコンストラクタによるインスタンス生成

JavaScriptはオブジェクト指向言語ですが、JavaやC++のようなクラスベースではなく、プロトタイプベースのオブジェクト指向です(注1)。 ここでは、JavaScriptにおけるインスタンスの生成方法について説明します。なお、ここではnew演算子とコンストラクタを使って新たに生成するオブジェクトを特にインスタンスと呼ぶことにします。 (注1)ECMA6からはクラス構文が導入されています……

投稿日:

JavaScriptで配列の要素を連結して文字列にする:join()

JavaScriptで配列の各要素を文字列に変換するには、arrayオブジェクトの持つjoin()メソッドを使います。 join()メソッドの基本的な使い方 array.join("区切り文字"); join()メソッドは、配列の全要素を連結した文字列を返します。各要素は全て文字列に変換され、引数として要素を連結する区切り文字を指定することができます。 区切り文字を省略した場合は、カンマ(,)……

投稿日:

jQueryで他ライブラリとのコンフリクトを防ぐ:noConflict()

jQueryを他のJavaScriptのライブラリと併用する場合、jQueryを表す「$」などがコンフリクトしてしまい正常に動作しないことがあります。 そこで、jQueryでnoConflictメソッドを使いコンフリクトを避けるための方法を紹介します。 参照:jQueryにおける「$(ドルマーク)」の意味 $を使えなくすることでコンフリクトを防ぐnoConflict() noConflict……

投稿日:

jQueryでフェードイン、フェードアウト:fadeIn(), fadeOut()

jQueryで要素のアニメーションつきのフェードイン、フェードアウトをする方法を説明します。 要素をフェードインするfadeIn() fadeIn()メソッドを使うことで、非表示になっている要素をフェードインするようにします。 アニメーションの速度 fadeIn("slow")のように引数を指定することで、アニメーションの速度を指定できます。アニメーションの速度は、「slow」「normal」「f……

投稿日: