devkuma – JavaScript

SyntaxHighlighter | SyntaxHighlighterの基本

kc@example.com (kc kim) — Tue, 10 Dec 2019 01:18:45 +0900

SyntaxHighlighterのダウンロードおよび適用方法について説明する。

JavaScript入門 | 概要

kc@example.com (kc kim) — Mon, 10 Jul 2017 23:48:52 +0900

JavaScript

JavaScriptはオブジェクトベースのスクリプト言語である。
HTMLではWebの内容を作成し、CSSではWebをデザインし、JavaScriptではWebの動作を実装できる。

JavaScriptは主にWebブラウザで使用されるが、Node.jsのようなフレームワークを使用すると、サーバーサイドプログラミングでも使用できる。
現在のコンピューターやスマートフォンなどに含まれるほとんどのWebブラウザには、JavaScriptインタープリターが内蔵されている。

jQuery入門 | 概要

kc@example.com (kc kim) — Sat, 10 Jun 2017 16:01:14 +0900

jQueryはJavaScriptの生産性を高め、ドキュメントオブジェクトモデル（DOM）やイベントに関する処理を簡単に実装できる。また、AjaxアプリケーションやプラグインもjQueryを活用して素早く開発できる。

参考: http://api.jquery.com

D3.jsを始める

kc@example.com (kc kim) — Sun, 16 Apr 2023 11:31:00 +0900

Vue.js v3

kc@example.com (kc kim) — Sat, 01 Oct 2022 09:03:00 +0900

Vue 3について説明する。

公式ドキュメント

2020年9月18日、バージョン3.0にアップグレードされた。

D3.jsの基本的な使い方

kc@example.com (kc kim) — Sat, 06 May 2023 14:53:00 +0900

Vue.js v2

kc@example.com (kc kim) — Mon, 28 May 2018 22:41:57 +0900

Vue 2について説明する。

JavaScript

kc@example.com (kc kim) — Mon, 10 Jul 2017 23:48:52 +0900

JavaScriptはオブジェクト指向のスクリプト言語である。

jQuery

kc@example.com (kc kim) — Sat, 10 Jun 2017 16:01:14 +0900

jQueryは、JavaScript言語を簡単に使えるように単純化したオープンソースベースのJavaScriptライブラリである。

SyntaxHighlighter

kc@example.com (kc kim) — Tue, 10 Dec 2019 01:18:45 +0900

SyntaxHighlighterは、JavaやPHPなどのソースコードをサイトやブログに記述したときに、自動的に見やすく表示してくれるJavaScriptライブラリである。プログラミング言語ごとに用意された構文を強調表示し、行番号を表示する。ここではSyntaxHighlighterの使い方について説明する。

D3.js (Data-Driven Documents)

kc@example.com (kc kim) — Sun, 16 Apr 2023 11:31:00 +0900

D3.jsイベント

kc@example.com (kc kim) — Sun, 16 Apr 2023 11:31:00 +0900

D3.jsチャート

kc@example.com (kc kim) — Sun, 16 Apr 2023 16:55:00 +0900

jQuery入門 | 要素の選択

kc@example.com (kc kim) — Sat, 10 Jun 2017 16:01:14 +0900

jQueryを使用すると、HTML要素を簡単に選択し、選択した要素に特定の動作を設定できる。
jQueryでは、要素を選択するためにほとんどのCSSセレクターだけでなく、いくつかの非標準セレクターも提供している。

SyntaxHighlighter | カスタマイズ

kc@example.com (kc kim) — Tue, 10 Dec 2019 01:18:45 +0900

SyntaxHighlighterは表示に関するさまざまな設定を提供している。このセクションでは、それらの使用方法と、CSSを任意に追加して表示を変更する方法について説明する。

D3.js階層

kc@example.com (kc kim) — Wed, 24 May 2023 08:58:13 +0900

Node.js

kc@example.com (kc kim) — Wed, 01 Nov 2017 10:20:06 +0900

サーバーサイド開発もJavaScriptで。Herokuなどのクラウドサービスを使用すれば、誰でもWebアプリケーションを無料で公開できる。Node.jsを利用したWeb開発について説明し、Webアプリケーションの作成方法を説明する。

JavaScript入門 | 型

kc@example.com (kc kim) — Mon, 10 Jul 2017 23:48:52 +0900

D3.js forceSimulation

kc@example.com (kc kim) — Tue, 16 May 2023 02:29:00 +0900

React

kc@example.com (kc kim) — Sat, 16 Dec 2017 00:04:13 +0900

SyntaxHighlighter | トラブルシューティング

kc@example.com (kc kim) — Tue, 10 Dec 2019 01:18:45 +0900

SyntaxHighlighterを使用する中で発生した問題の解決方法について説明する。

jQuery入門 | 要素の操作

kc@example.com (kc kim) — Sat, 10 Jun 2017 16:01:14 +0900

jQueryは、新しい要素やコンテンツを簡単に編集できるように、いくつかのメソッドを提供している。

要素の追加
要素内部の変更
要素のコピー
要素の置換
要素の削除

Angular

kc@example.com (kc kim) — Mon, 28 May 2018 22:41:57 +0900

Angularについて説明する。

Vue.js

kc@example.com (kc kim) — Mon, 28 May 2018 22:41:57 +0900

Vueについて説明する。

バージョン	リリース日
3.0	2020年9月18日
2.0	2016年9月30日
1.0	2015年10月27日
0.6	2013年12月8日

JavaScript入門 | 演算子

kc@example.com (kc kim) — Mon, 10 Jul 2017 23:48:52 +0900

演算子

JavaScriptは、さまざまな種類の演算を行うための多様な演算子を提供している。

jQuery入門 | 要素の探索

kc@example.com (kc kim) — Sat, 10 Jun 2017 16:01:14 +0900

ツリー探索

ツリー探索とは、特定の要素から他の要素との関係を通じて、選択したい要素までDOMツリーを検索していく過程を意味する。

このようなツリー探索は、次の3つの領域に分けることができる。

上位要素の探索
下位要素の探索
兄弟要素の探索

JavaScript入門 | 制御文

kc@example.com (kc kim) — Mon, 10 Jul 2017 23:48:52 +0900

制御文

プログラムの逐次的な流れを制御する必要があるときに使用する実行文を制御文という。
このような制御文には、条件文、繰り返し文などが含まれる。

jQuery入門 | 要素の領域

kc@example.com (kc kim) — Sat, 10 Jun 2017 16:01:14 +0900

JavaScript入門 | 配列

kc@example.com (kc kim) — Mon, 10 Jul 2017 23:48:52 +0900

配列

配列とは何か。

JavaScriptにおける配列は、名前とインデックスで参照される順序付きの値の集合として定義される。配列を構成するそれぞれの値を配列要素と呼び、配列内の位置を示す数値をインデックスという。

JavaScriptにおける配列の特徴は次のとおりである。

配列要素の型は固定されていないため、同じ配列内の要素同士で型が異なる場合がある。
配列要素のインデックスは連続していなくてもよく、そのため特定の配列要素が空になる場合もある。
JavaScriptでは、配列はArrayオブジェクトとして扱われる。

jQuery入門 | CSSスタイルとプロパティの設定

kc@example.com (kc kim) — Sat, 10 Jun 2017 16:01:14 +0900

jQueryを使用すると、選択したHTML要素のCSSスタイルに関するプロパティ値を簡単に取得または設定できる。

JavaScript入門 | 関数

kc@example.com (kc kim) — Mon, 10 Jul 2017 23:48:52 +0900

関数とは

関数とは、特定の目的を持つ作業を実行するように設計された独立したブロックを意味する。
このような関数は必要なときに呼び出して、その作業を繰り返し実行できる。

function addNum(x, y) {
    return x + y;
}
document.write(addNum(2, 3));

JavaScriptにおけるブロックとは、関数や実行文の波括弧（{}）で囲まれた部分を指す。

JavaScriptの関数

JavaScriptでは、関数も1つのデータ型である。

そのため、関数を変数に代入したり、関数にプロパティを指定したりすることもできる。
また、JavaScriptの関数は他の関数内にネストして定義することもできる。

関数の定義

JavaScriptにおける関数の定義はfunctionキーワードで始まり、次の構成要素を持つ。

関数名
丸括弧内にカンマで区切って記述する関数のパラメータ
波括弧（{}）で囲まれたJavaScriptの実行文

JavaScriptで関数を定義する構文は次のとおりである。

function 関数名(パラメータ1, パラメータ2,...) {
    関数が呼び出されたときに実行したい文;
}

関数名は、関数を識別する識別子である。
パラメータとは、関数を呼び出すときに引数として渡された値を関数内部で使用できるようにする変数である。

// addNumという名前の関数を定義する。
function addNum(x, y) {    // x、yはこの関数のパラメータである。
    document.write(x + y);
}
addNum(2, 3);              // addNum()関数に引数として2と3を渡して呼び出す。

上の例では、パラメータxには引数2が保存され、yには引数3が保存されて使用される。
このように、引数とパラメータは個数だけでなく順序も非常に重要である。

関数の引数とは、関数が呼び出されるときに関数へ値を渡す変数や定数を意味する。

return文

JavaScriptでは、関数にreturn文を含めることができる。
このreturn文により、呼び出し元は関数で実行された結果を受け取ることができる。

return文は関数の実行を中断し、returnキーワードの後に指定された式の値を呼び出し元へ返す。 return文は配列やオブジェクトを含む、すべての型の値を返すことができる。

function multiNum(x, y) {
    return x * y;         // xとyを掛けた結果を返す。
}
var num = multiNum(3, 4); // multiNum()関数が呼び出された後、その戻り値が変数numに保存される。
document.write(num);

関数の呼び出し

定義された関数は、プログラム内で呼び出されて初めて実行される。
一般的な関数の呼び出しは、関数の定義文と同じ形式で行うことができる。

関数の定義

function addNum(x, y) {
    return x + y;
}

関数の呼び出し

var sum = addNum(3, 5); // addNum()を呼び出し、引数として3と5を渡す。
                        // 関数の呼び出しが終わった後、その戻り値を変数sumに代入する。

上の例で引数として渡された数値3と5は、関数で定義されたパラメータxとyにそれぞれ代入される。
したがって、呼び出された関数の内部では、パラメータxとyにそれぞれ3と5が代入されて計算される。

値としての関数

JavaScriptにおいて関数は構文上の構造であるだけでなく、値でもある。
そのため、関数を変数に代入したり、他の関数の引数として渡したりすることもできる。

次の例は、関数を変数に保存して使用する例である。

function sqr(x) {                // 2乗の値を求める関数sqrを定義する。
    return x * x;
}
var sqrNum = sqr;                // 変数sqrNumに関数sqrを代入する。
document.write(sqr(4) + "<br>"); // 関数sqrを呼び出す。
document.write(sqrNum(4));       // 変数sqrNumを関数のように呼び出す。

jQuery入門 | イベント処理

kc@example.com (kc kim) — Sat, 10 Jun 2017 16:01:14 +0900

JavaScript入門 | オブジェクト

kc@example.com (kc kim) — Mon, 10 Jul 2017 23:48:52 +0900

オブジェクトとは

オブジェクトとは、実生活で私たちが認識できる物として理解できる。

オブジェクトの例

オブジェクト

猫 kitty

プロパティ

cat.name = “ナビ”
cat.family = “コリアンショートヘア”
cat.age = 0.1
cat.weight = 300

メソッド

cat.mew()
cat.eat()
cat.sleep()
cat.play()

猫オブジェクトはすべて上記のようなプロパティを持つが、各プロパティの値はインスタンスごとにすべて異なるだろう。

JavaScriptオブジェクト

JavaScriptの基本データ型はオブジェクトである。

オブジェクトとは、名前と値で構成されるプロパティの順序付けされていない集合である。プロパティの値として関数が来ることもあり、このようなプロパティをメソッドという。

var cat = "ナビ"; // 一般的な変数の宣言
// オブジェクトも多くの値を持つ変数の一種である。
var kitty = { name: "ナビ", family: "コリアンショートヘア", age: 1, weight: 1.1 };
cat          // ナビ
kitty.name   // ナビ

JavaScriptでは、数値、文字列、真偽値、undefined型を除くすべてがオブジェクトである。
ただし、数値、文字列、真偽値のようなプリミティブ型は、値が決まったオブジェクトとして扱われるため、オブジェクトとしての特徴もあわせ持つ。

オブジェクトのプロパティ参照

JavaScriptでオブジェクトのプロパティを参照する方法は次のとおりである。

構文

オブジェクト名.プロパティ名
または
オブジェクト名["プロパティ名"]

var person = {
    name: "ホン・ギルドン", // 名前プロパティを定義する。
    birthday: "030219",    // 生年月日プロパティを定義する。
    pId: "1234567",        // 個人IDプロパティを定義する。
    fullId: function() {   // 生年月日と個人IDを合わせて住民登録番号を返す。
        return this.birthday + this.pId;
    }
};
person.name    // ホン・ギルドン
person["name"] // ホン・ギルドン

オブジェクトのメソッド参照

JavaScriptでオブジェクトのメソッドを参照する方法は次のとおりである。

構文

オブジェクト名.メソッド名()

var person = {
    name: "ホン・ギルドン",
    birthday: "030219",
    pId: "1234567",
    fullId: function() {
        return this.birthday + this.pId;
    }
};
person.fullId() // 0302191234567
person.fullId;  // function () { return this.birthday + this.pId; }

メソッドを参照するときにメソッド名の後ろに括弧（()）を付けないと、メソッドではなくプロパティそのものを参照することになる。
したがって、括弧を使用せずにプロパティそのものを参照すると、そのメソッドの定義そのものが返される。

jQuery入門 | 入力要素の制御

kc@example.com (kc kim) — Sat, 10 Jun 2017 16:01:14 +0900

JavaScript入門 | 標準オブジェクト

kc@example.com (kc kim) — Mon, 10 Jul 2017 23:48:52 +0900

jQuery入門 | エフェクト効果

kc@example.com (kc kim) — Sat, 10 Jun 2017 16:01:14 +0900

エフェクト効果

jQueryは、Webページにエフェクト効果を簡単に追加できるさまざまなメソッドを提供している。
これらのエフェクト効果は、基本設定のまますぐに使用することも、animate()メソッドで設定を変更して使用することもできる。

jQuery入門 | Ajaxの使用

kc@example.com (kc kim) — Sat, 10 Jun 2017 16:01:14 +0900

jQueryを使用すると、Ajaxを簡単に開発できる。

JavaScript入門 | ドキュメントオブジェクトモデル

kc@example.com (kc kim) — Mon, 10 Jul 2017 23:48:52 +0900

jQuery入門 | ユーティリティメソッド

kc@example.com (kc kim) — Sat, 10 Jun 2017 16:01:14 +0900

JavaScript入門 | ブラウザオブジェクトモデル

kc@example.com (kc kim) — Mon, 10 Jul 2017 23:48:52 +0900

ブラウザオブジェクトモデル（BOM）とは

JavaScriptを使用すると、ブラウザの情報にアクセスしたり、ブラウザのさまざまな機能を制御したりできる。
このとき使用できるオブジェクトモデルが、ブラウザオブジェクトモデル（BOM, Browser Object Model）である。

ブラウザオブジェクトモデル（BOM）は、ドキュメントオブジェクトモデル（DOM）とは異なり、W3Cの標準オブジェクトモデルではない。
しかし、このモデルはJavaScriptがブラウザの機能的な要素を直接制御し管理する方法を提供する。
JavaScriptでは、このBOMモデルのオブジェクトをグローバルオブジェクトとして使用できる。

JavaScript入門 | イベント

kc@example.com (kc kim) — Mon, 10 Jul 2017 23:48:52 +0900

イベントとは

イベントとは、Webブラウザが通知するHTML要素に関する出来事の発生を意味する。

Webページで使用されるJavaScriptは、このように発生したイベントに反応して特定の動作を実行できる。
したがって、クライアント側JavaScriptは非同期のイベント駆動プログラミングモデルと呼ばれる。

JavaScript入門 | 例外処理

kc@example.com (kc kim) — Mon, 10 Jul 2017 23:48:52 +0900

例外

例外とは、プログラムの実行中に発生するランタイムエラーを意味する。
このような例外が発生しないように事前に防ぐことも重要だが、発生した例外を処理する方法も非常に重要である。

エラーとは、プログラム文の構文上の誤りを意味する。

JavaScript入門 | 正規表現

kc@example.com (kc kim) — Mon, 10 Jul 2017 23:48:52 +0900

正規表現とは

正規表現とは、文字列の中から特定の規則を持つ文字列の集合を見つけるための検索パターンである。このような検索パターンは、あらゆる種類の文字列検索や置換などの作業で使用できる。