JavaScript

Node.js入門(3)Node.jsでES2015(ES6) 入門

ECMAScriptはEcma Internationalによって標準化された仕様です。ECMAScript6は2015年に採用されたため、ES2015やES6などと省略されて呼ばれています。ここではES6で特筆すべき  >>続きを読む

AngularJS入門(2)〜AngularJSで送信フォームの作成でモジュールの活用

前回のAngularJS入門(1)ではviewのみでできることでした。けれどもそれだけでは不足する機能があります。 例えばセレクトボックスのoption部分をスクリプトで作成すると汎用性が上がってくるかもしれません。基本  >>続きを読む

AngularJSのDirectiveについて(2)

AngularJSのよく使うdirectiveの紹介です。 今回は「ng-if」、「ng-class」、「ng-repeat」、「ng-click」、「ng-cloak」を紹介していますが、他にも便利なdirective  >>続きを読む

AngularJSのDirectiveについて(1)

AngularJSのDirectiveは、HTMLでどのようにDOMを組み立てるか命令するものです。Directiveは例えば「ng-app」のようにHTMLのカスタム属性を使って記述していきます。 ここでは、「ng-m  >>続きを読む

値渡しと参照渡しについて

変数に値を代入する場合にその値のデータ型の種類によって「値渡し」と「参照渡し」があり、その扱われ方が変わってきます。 そして、この考え方は多くのプログラミング言語で使われるものです。このことを知っておかないと思わぬ結果に  >>続きを読む

AngularJSのインターポレーションについて

インターポレーション(interpolation)とは、書き入れ、書き入れられた語句、補間法などの意味があります。 プログラムにおけるインターポレーションとは文字列補完を行うことで、もっと簡単に言うと変数展開になります。  >>続きを読む

AngularJSにおけるminify化の問題点

minify化(ファイル圧縮)とは、改行や空白、コメントなどを取り除きファイルサイズを削減することです。一般的にはminify化でファイルのダウンロードを高速化するねらいで活用されるものです。 minify化は色々なサイ  >>続きを読む

Dependency Injection〜依存性の注入

Dependency Injection(依存性の注入)とは関数(コンストラクターを含む)にオブジェクトを渡すことです。 関数の中にオブジェクトを生成するとその関数は生成したオブジェクトに依存してしまい、大規模なプロジェ  >>続きを読む

変数宣言の巻き上げ〜JavaScriptの不思議な決まりごと

JavaScriptには変数宣言の巻き上げ(hoisting)という決まりごとがあります。これはグローバル変数、ローカル変数どちらにもあてはまる決まりごとです。 他の多くの言語はプログラムは上から順に解釈されていき、変数  >>続きを読む

NTT docomoの知識Q&A APIを使ったbot作りました。

サンプル置き場にNTT docomoの知識Q&A APIを使ったbotのサンプルを置いておきます。 遊んでみてください。 デモ

AngularJS入門(1)〜AngularJSで送信フォームの作成でviewの活用

AngularJSはGoogleが開発に携わるJavaScriptのフレームワークです。AngularJSには様々なバージョンがあり、現在(2017/11月)ではバージョン5がリリースされています。 尚、「Angu  >>続きを読む

: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  >>続きを読む