技術の犬小屋

Webプログラミングを餌に生きる犬のメモ帳

Posts in the JavaScript category

仕事でJavaScriptからDOMを通してHTMLを操作したことはあったけど、今回改めて勉強したのでメモしておく。
 

DOMとは

DOMとは、「Document Object Model」の略である。プログラムから「HTML 文書」や「XML 文書」を利用するための、標準化された仕様を指す。
DOMが生まれた背景として、JavaScriptのようなクライアント側のプログラムを使ってHTMLの内容を動的に変化させる「ダイナミックHTML」という概念の登場がある。登場初期の頃はブラウザごとに制御方法が違っていたので、ブラウザごとに専用のJavaScriptのコードを用意する必要があったが、それが煩わしかったので、制御方法を統一するためにDOMという仕様が生まれた。
 

DOMを構成するもの

HTML文書は、「タグ」「属性」「値」「文書」などの部品で構成されている。この部品のことをノードと呼ぶ。HTML文書がブラウザに読み込まれると、JavaScript 内でこれらの部品が「DOMオブジェクト」として自動的に生成される。
この「DOMオブジェクト」から、メソッドやプロパティを利用する事が出来、メソッドやプロパティを通してHTMLを操作する。
 

ノードとは

ノードとは、節、結節(点)、節点、交点、中心点、集合点、こぶ、膨らみ、などの意味を持つ英単語。ネットワークや木構造など、複数の要素が結びついてできた構造体において、個々の要素のことをノードという。
HTMLでは、開始タグと終了タグの間に別のタグを挟み込むと、タグをネスト(入れ子)にすることが出来るが、これを行うとタグ間で木構造の親子関係を構築することが出来る。今回の場合は「タグ」「属性」「値」「文書」といったものがノードに当たる。
 

ノードの種類について

「DOMオブジェクト」であれば、共通して利用できる基本的な機能として、Nodeというインターフェースが定められている。「Nodeインターフェース」から派生して、12種類のインターフェースが用意されているが、主に利用するインターフェースは以下の4つである。

インターフェース 解説
Document ドキュメント、階層のルートに相当
Element エレメント、要素に相当
Attr アトリビュート、属性に相当
Text テキストノード、タグ以外の文字データに相当

 

Windowオブジェクトとは

Windowオブジェクトとは、ブラウザそのものの情報を保持しているオブジェクトである。例えば、ブラウザの高さのプロパティ(outerHeight)、ブラウザの幅のプロパティ(outerWidth)、アクセスしている位置情報(Location)、閲覧しているHTMLの情報(Document)などを保持している。
 

Documentオブジェクトとは

現在閲覧しているHTML自体を保持しているオブジェクトである。DocumentオブジェクトはWindowオブジェクトに内包されている。DOM(document Object Model)では、documentオブジェクトを通して、個々の要素を取得・操作することが出来る。
 

DOMの操作方法

データの取得方法

メソッド名 解説
getElementById IDをキーにして要素を操作する。
getElementsByClassName クラス名をキーにして要素を操作する。
getElementsByTagName タグ名をキーにして要素を操作する。

 

記述例

document.getElementById("ttl");
document.getElementsByClassName("student");
document.getElementsByTagName("h1");

 

サンプル

処理ボタンをクリックすると、アラートで「成績表」と表示する。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript">
function htmlChange() {
   var h1;
   h1 = document.getElementById("ttl").innerHTML;
   alert(h1);
}
</script>

</head>
<body>
<div id="ttl_box"><h1 id="ttl">成績表</h1></div>
<table id="tbl">
<tr><th>名前</th><th>成績</th></tr>
<tr><td class="student">田中</td><td class="score">100</td></tr>
<tr><td class="student">山本</td><td class="score">90</td></tr>
<tr><td class="student">小山</td><td class="score">70</td></tr>
<tr><td class="student">大木</td><td class="score">85</td></tr>
</table>
<div id="add"></div>
<input type="button" value="処理" onclick="htmlChange()" />
</body>
</html>

 

要素の追加・削除方法

メソッド名 解説
createElement 要素を追加する。引数として、追加するタグの名前を指定する。
createTextNode タグの中に含まれるテキスト部分を作成する。
appendChild 子要素として追加する。
removeChild 子要素を削除する。
deleteRow テーブルの要素を削除する。

 

サンプル

処理ボタンをクリックすると、「<strong>平均は86.25点です</strong>」を「<div id=”add”></div>」の子要素として追加し、「<div id=”ttl_box”></div>」の子要素の「<h1 id=”ttl”>成績表</h1>」を削除する。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript">
function htmlChange() {
    var heikin;
    heikin = document.createElement('strong');
	var text;
    text = document.createTextNode('平均は86.25点です');
	heikin.appendChild(text);
	var add;
    add = document.getElementById("add");
	add.appendChild(heikin);
	
	ttlBox = document.getElementById("ttl_box");
	ttlBox.removeChild(ttlBox.lastChild);
}
</script>
</head>
<body>
<div id="ttl_box"><h1 id="ttl">成績表</h1></div>
<table id="tbl">
<tr><th>名前</th><th>成績</th></tr>
<tr><td class="student">田中</td><td class="score">100</td></tr>
<tr><td class="student">山本</td><td class="score">90</td></tr>
<tr><td class="student">小山</td><td class="score">70</td></tr>
<tr><td class="student">大木</td><td class="score">85</td></tr>
</table>
<div id="add"></div>
<input type="button"  value="処理" onclick="htmlChange()" />
</body>
</html>

 

CSSを操作する

CSSを変更するには、styleプロパティを利用する。
 

記述例

document.getElementById("ttl").style.color = "red";
document.getElementById("ttl").style.borderBottom = "solid 3px #ccc";
document.getElementById("ttl").style.backgroundColor = "#FFFFCC";
document.getElementById("ttl").style.fontSize = "3em";

 
 
以上
 
 
参考
JavaScriptプログラミング講座【ドキュメントオブジェクトモデル(DOM)について】
JavaScriptでDOMを操作する方法【初心者向け】
ノードとは|node – 意味/定義 : IT用語辞典
学校の教科書

各プログラミング言語には、1度しか使わない様な用途で作成するクラスやメソッドには、名前を付けずにそれを使用する方法が用意されていることに気付いた。今回はJavaScriptの関数に名前を付けずに使用する方法を勉強したのでメモしておく。
 

関数とは

関数とは、同じ処理を何度も使い回したいときに使用するものである。デフォルトの関数定義は以下のような書式となる。

<script>
function 関数名( ) {
    処理
}
</script>

 

無名関数とは

無名関数とは、名前の無い関数のことである。1度しか使わない様な用途の関数を作りたいときに使用する。逆に言うと、1度しか使わないのでわざわざ名前を付ける必要が無い。

<script>
//関数定義
var 変数名A = function (引数){
    処理
}

//関数呼び出し
var 変数名B = 変数名A(引数);
console.log(変数名B);
</script>

 

<script>
//関数定義
var sum = function (a,b){
    var result = a + b;
    return result;
}

//関数呼び出し
var answer = sum(1,2);
console.log(ancer);
</script>

 

即時関数とは

即時関数とは、無名関数の1種である。無名関数と同じで関数に名前を付けずに定義することが出来、加えて関数の呼び出しも省略することが出来る。

<script>
//関数定義
var 変数名 = (function (引数){
    処理
})(引数);

console.log(変数名);
</script>

 
関数自体を()で囲み、関数に与えたい引数を関数の後ろに記述し、それを変数に代入する。
 

<script>
//関数定義
var sum = (function (a,b){
    var result = a + b;
    return result;
})(1,2);

console.log(sum);
</script>

 
 
以上
 
 
参考
JavaScriptで即時関数を使う方法【初心者向け】

「オブジェクト指向 JavaScript」を読んでいたところ、遅延評価を使ったプログラミングテクニックが紹介されていたので、覚えることにした。自分では使わないにしても、他人のコードを読んだときには理解できるようにしたい。
 

オペランドとは

コンピュータプログラミングにおいて、演算の対象となる値や変数のことである。「被演算子」と訳されることもある。
演算内容をあらわす記号などは「演算子」または「オペレータ(operator)」という。例えば「A+10」という式では、「A」と「10」がオペランドで、「+」がオペレータである。
 

遅延評価とは

論理演算子を繋いだ式を評価するときに、最後の演算子の直前までに結果が明確になっているときは、最後のオペランドの内容が結果に影響を与えないため、最後の演算子の実行はスキップされる。

if(false || true || false || false || true) {
…
}

 
上記では、if文の条件は真と評価され、if文の中の処理が実行される。
 

論理演算のルール
演算 結果
true && true true
true && false false
false && true false
false && false false
true || true true
true || false true
false || true true
false || false false

 

遅延評価を用いたテクニック

論理演算のオペランドにBoolean型ではない式がくると、Boolean型ではない結果になる。

true || "Smokydog"  //評価後、真偽値trueが返される
 

 

true && "Smokydog"  //評価後、文字列Smokydogが返される
 

 
このテクニックは、既に定義されているかどうか分からない値を使って変数の値を初期化するときにたまに使用される。次の例では、変数dogが既に定義されているときはその値がそのまま使用され、そうでなかった場合には文字列Smokydogで初期化する。

var dog = dog || "Smokydog";

 
 
以上
 
 
参考
書籍 オブジェクト指向 JavaScript
オペランドとは 【 operand 】 – 意味/解説/説明/定義 : IT用語辞典

仕事でjQueryを使っている。jQueryによるAjaxの使い方を覚えたのでメモしておく。
 

Ajaxとは

Webブラウザに実装されているJavaScriptのHTTP通信機能を使って、Webページのリロードを伴わずにサーバとXML形式のデータのやり取りを行って処理を進めていく対話型Webアプリケーションの実装形態である。
 

jQueryによるAjaxの使い方

Ajaxを使うときの大まかな流れ

jQueryでAjaxを使うときは以下のような流れで利用する。

  1. DOMでHTMLから要素を取得する。
  2. 取得したHTML要素に対してイベントを登録する。
  3. ユーザのアクションに応じてイベントが実行される。
  4. イベントの実行をトリガーにしてAjaxにより、通信・処理を行う。

 

簡単な例
$('#button1').click(function(){
  $.ajax({
    url: "ajax-test.html",
    dataType: "html",
    cache: false,
  }).done(function(data, textStatus) {
    // 成功したとき
    // data にサーバーから返された html が入る
  }).fail(function(xhr, textStatus, errorThrown) {
    // エラー処理
  });
});

 
$とは、jQueryという文字列の略記法である。すなわち、$記号を書くことによってjQueryへの命令を行うことが出来る。
 
('#button1')によってDOM操作を行い、Javascriptの呼び出し元のHTMLからid="button1"が指定されている要素を取得している。
 
.clickによってイベントの登録を行い、id="button1"の要素がクリックされた際にメソッド(function(){…})の呼び出しを行う。
 
メソッド内に記述されたAjaxの処理によって、サーバー上のajax-test.htmlの内容が取得され、data変数に格納される。
 
ajax-test.htmlの取得に成功した場合には、メソッドチェーンとして記述されたdone(function(data, textStatus) {…})が呼び出される。
 
ajax-test.htmlの取得に失敗した場合には、メソッドチェーンとして記述されたfail(function(xhr, textStatus, errorThrown) {…})が呼び出される。
 
メソッド内に記述されたAjaxの処理では、以下の3つのプロパティを指定している。この他にも多くのプロパティが用意されているので、詳しくはリファレンスを参照してほしい。

  1. url
  2. リクエストを送信するURLを指定する。初期値は、現在のページのURLとなる。例えば、今回はajax-test.htmlというファイルの内容を取得したいので、このように指定している。

  3. dataType
  4. サーバーから返されるデータの型を指定する。初期値はxml,json,script,htmlからjQueryがMIME typeを元に判別する。

  5. cache
  6. キャッシュを有効にするか否かをtrueもしくは、falseで指定する。初期値はtrue、ただし、dataTypeが’script’または’jsonp’の場合は、falseとなる。

 
 
以上
 
 
参考
Ajaxとは 【 Asynchronous JavaScript + XML 】 – 意味/解説/説明/定義 : IT用語辞典
Ajax – jQuery 入門
jQuery.ajax() | jQuery API Documentation

Gruntを使い始めてから半年経った。Gruntは主にJavascriptとCSSファイルのminifyを自動化する目的で使用している。
 

Gruntとは

Gruntとは,JavaScriptで書いたタスクを実行してくれるアプリケーション(JavaScript Task Runner)である。
面倒な作業として,以下のような作業があるが,Gruntを使うことでこれらを自動化することが出来る。

  • minify(圧縮)や結合
  • 単体テストの実行
  • JSLint(構文チェック)の実行
  • CoffeeScriptやTypeScriptを使用している場合にはコンパイル(JavaScript変換)の実行
  • SCSS(Sass)やLESSなどのCSS拡張メタ言語を使用している場合には,コンパイル(CSS変換)の実行

 

Gruntの使い方

GruntはNode.jsを使用して作られている。そのため,Gruntをインストールする際には,あらかじめhomebrewなどでNode.jsをインストールしておく必要がある。
 

Gruntのインストール

Gruntは,Grunt本体とgrunt-cliが組み合わさって動作する。そのため,Grunt本体とgrunt-cliを一緒にインストールするが,コマンドから直接インストールするのではなく,package.jsonというファイルを作成し,このファイルを介してインストールする。
package.jsonを作成し,以下のように記述する。

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.3",
    "grunt-cli": "~0.1.9"
  }
}

 
package.jsonが存在するディレクトリで,以下のコマンドを実行することで,package.jsonに記述したnodeモジュールをインストールすることが出来る。今回の場合は,Gruntをインストールすることが出来る。

npm install

 
このpackage.jsonというファイルは,Node.jsのプロジェクトにおいて、そのプロジェクトの名称やバージョン,依存するモジュールを書いておくためのファイルである。Grunt自体も,このpackage.jsonを使って利用するプラグインを管理し,そしてGrunt自体もこのファイルへ依存モジュールとして登録する。
Gruntが,このような回りくどい管理方法を取っている理由は,Gruntのバージョンが異なるプロジェクトを単体のGruntでは同時に管理できない為である。
例えば,プロジェクトAではバージョン0.3.1を使っているが、プロジェクトBでは0.3.16を使っていて、マシンにはGrunt 0.3.16がインストールされている……という場合,始めのプロジェクトがビルドできなくなってしまう可能性がある。
 
続いて,Gruntfile.jsというgruntの設定ファイルを作成する。
一纏めにして実行出来る個々の設定を「タスク」と呼ぶ。以下の内容でGruntfile.jsを作成する。

module.exports = function (grunt) {

  grunt.registerTask('hello', 'description here', function() {
    grunt.log.writeln('hello World!');
  });

  grunt.registerTask('default', [ 'hello' ]);

};

 
この状態で, grunt コマンドを実行し,以下のように表示されれば,タスクが成功している。

Running "hello" task
hello World!

Done, without errors.

 

JavascriptとCSSを自動的にminifyしてみる

今回,冒頭で触れたJavascriptとCSSのファイルをminifyする方法を説明する。
 

プラグインを追加インストールする
{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.3",
    "grunt-cli": "~0.1.9",
    "grunt-contrib-cssmin": "0.4.1",
    "grunt-contrib-uglify": "~0.4.0",
    "grunt-contrib-watch": "~0.5.3"
  }
}

 
上記のようにpackage.jsonに追記し,以下のプラグインを新たにインストールする。

  • grunt-contrib-cssmin
  • CSSファイルをminifyする。

  • grunt-contrib-uglify
  • JSファイルをminifyする。

  • grunt-contrib-watch
  • ファイルの変更を監視してタスクをトリガーする。

 
おなじみのコマンドでプラグインをインストールする。

npm install

 

Gruntfile.jsを作成する

プラグインがインストール出来たので,Gruntfile.jsにタスクを記述する。

module.exports = function(grunt) {
  grunt.initConfig({
    cssmin : {
      pc : {
        src : ['css/reset.css', 'css/styles.css'],
        dest : 'css/pc.min.css'
      },
      mobile : {
        src : ['css/reset.css', 'css/styles.css', 'css/mediaqueries.css'],
        dest : 'css/mobile.min.css'
      }
    },
    uglify : {
      build : {
        options : {
          banner : grunt.file.read('js/License.js'),
        },
        src : ['js/BitmapData.js', 'js/GlowFilter.js'],
        dest : 'js/all.min.js'
      }
    },
    watch : {
      css_pc : {
        files : ['css/reset.css', 'css/styles.css'],
        tasks : ['cssmin', 'copy:css']
      },
      css_mobile : {
        files : ['css/mediaqueries.css'],
        tasks : ['cssmin:mobile', 'copy:css']
      },
      js : {
        files : ['js/BitmapData.js', 'js/GlowFilter.js', 'js/License.js'],
        tasks : ['uglify', 'copy:js']
      }
    },
  });

  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');
};

 
各プラグイン毎の設定方法は以下のページに詳しく載っていた。
Plugins – Grunt: The JavaScript Task Runner
 
 
以上
 
 
参考
現場で使えるGrunt入門 – Gruntを試そう | CodeGrid
「今どきのGruntを使ったフロントエンド開発(HTML/CSS編)」HTML5 Conference 2013 セッションレポート | HTML5Experts.jp
Gruntで始めるWeb開発爆速自動化入門(1):ブラックなWeb開発現場の救世主、Gruntのインストールと使い方 (1/2) – @IT