× 無料のユーザー登録をすると学習状況を管理することができるようになります

【旧版】JavaScript入門 (全25回)

最新版のレッスンはこちらから » 【最新版】JavaScript入門 (全24回)

ブラウザ内の要素を操作して動的なウェブサイトを作ることができます。ブラウザとテキストエディタのみで開発できるので初心者におすすめです。

  • #01 開発環境を準備する (02:39)
    • JavaScriptの概要
    • 公式サイトの紹介
    • 必要となる知識
    • 必要となるツール
  • #02 HTMLを用意する (02:11)
    • JavaScript呼び出し用のHTMLを作成。
  • #03 初めてのJavaScript (01:20)
    • alertで「Hello World」と表示する。
  • #04 変数とは何か? (02:46)
    • コメントの書き方
    • varで変数を宣言する。
    • =で値を入力する。
    • 変数を指定してalert文を実行する。
  • #05 データ型を知る (01:56)
    • 文字列を格納する。
    • 数値を格納する。
    • 真偽を格納する。
    • undefined, null, 配列、オブジェクトについて。
  • #06 演算子いろいろ (02:41)
    • 代入演算子について。
    • 数値に関する演算子。
    • 文字列に関する演算子。
  • #07 ifと比較演算子 (02:56)
    • if文の書き方。
    • 条件分岐をする際の比較演算子について。
  • #08 if ... else ... (01:59)
    • if... else... 文の書き方。
    • if... else if... else...文の書き方。
  • #09 switchで分岐 (02:59)
    • switch文の書き方。
    • breakについて。
    • defaultについて。
  • #10 whileループ (02:44)
    • while文の書き方。
    • console.logの使い方。
  • #11 forループ (02:04)
    • for文の書き方。
  • #12 関数を作る (02:40)
    • 関数の基本的な書き方。
    • 引数について。
    • 返り値について(return)。
    • 関数の使い方。
  • #13 ローカル変数 (02:25)
    • ローカル変数の使い方。
    • ローカル変数が外部からアクセスできないことの確認。
  • #14 配列を理解する (02:31)
    • 配列の書き方。
    • 配列の要素へのアクセスと添え字について。
    • 配列の要素へ値を設定する方法
  • #15 連想配列を知る (02:24)
    • 連想配列の記述方法について。
  • #16 JavaScriptのオブジェクト (02:57)
    • JavaScriptオブジェクトの例(String, Date)
    • プロパティについて。
    • メソッドについて。
  • #17 Stringオブジェクト (02:58)
    • Stringオブジェクトの使い方。
    • substrメソッドについて。
    • replaceメソッドについて。
  • #18 Arrayオブジェクト (02:33)
    • Arrayオブジェクトの使い方。
    • joinメソッドについて。
    • reverseメソッドについて。
  • #19 Dateオブジェクト (02:55)
    • Dateオブジェクトの使い方。
    • getMonthメソッドについて。
    • getTimeメソッドについて。
  • #20 Mathオブジェクト (02:43)
    • Mathオブジェクトの使い方。
    • PIやSQRT2などのプロパティについて。
    • randomなどのメソッドについて。
  • #21 Browser Object Model (BOM) (02:31)
    • Browser Object Modelについて。
    • BOMで使える便利なメソッドについて。
  • #22 Document Object Model (DOM) (01:55)
    • Document Object Modelについて。
    • DOMを使って文書の見た目を変更する方法。
  • #23 DOMを操る (02:52)
    • getElementByIdについて。
    • innerHTMLについて。
  • #24 イベントを理解する (02:05)
    • .onclickについて。
    • イベントに関数を結びつける方法。
  • #25 タイマー処理 (02:21)
    • setTimeoutについて。
    • setIntervalについて。
#01 開発環境を準備する
1621日前
Javascriptについてもっと知りたい方はこちらからどうぞ。
https://developer.mozilla.org/ja/JavaScript
1621日前
動画中で使っているエディターは「Jedit X」です。
http://www.artman21.com/jp/

Google Chromeのダウンロードはこちらからどうぞ。
http://www.google.co.jp/chrome/intl/ja/landing_ch.html
#02 HTMLを用意する
1588日前
ブラウザやユーザーの設定によってはJavaScriptが無効になっている場合もあります。その場合は<noscript>タグを使って、メッセージを表示することができます。そうしたシーンが想定される場合、以下のようなコードをHTML中のどこかに書いておくと親切でしょう。

<noscript>
このサイトではJavaScriptを使っています。設定画面から有効にしてください。
</noscript>
1601日前
このレッスンでは HTML5 の書き方で書いているので、script タグに type 属性をつけていません。
もし HTML5 未対応のブラウザも動作対象としたい場合には、
<script type="text/javascript">
</script>
のように type 属性をつける必要も出てくるので、注意しておきましょう。
#03 初めてのJavaScript
1424日前
JavaScriptに限らず、プログラミングを始めると「ここはスペースいれるべきだろうか?」「変数名はどうつけるべきだろうか?」と悩むようになります。そうした際には「コーディングルール」や「コーディング規約」と言語名で検索すれば「こういう書き方の方がいろいろ捗る」というアイデアを得ることができます。
JavaScriptに関しては(英語ではありますが)以下のコーディング規約も参考にしてみてください。
http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml
#04 変数とは何か?
1300日前
変数を複数宣言するときは、1個ずつ宣言してもいいですし、

var x = 1;
var y = 2;
var z = 3;

まとめてカンマ区切りで宣言しても構いません。

var x = 1, y = 2, z = 3;

次のように改行して先頭にカンマを置くスタイルも玄人っぽくていいです。

var x = 1
  , y = 2
  , z = 3;
1588日前
変数名は基本的に好きなものを使えますが、いくつかルールがあるので気をつけましょう。詳しくは以下からどうぞ。

・#02 変数名はどうつける? | JavaScriptのTips集
http://dotinstall.com/lessons/basic_javascript_tips/2102
#06 演算子いろいろ
1182日前
数値をある桁数まで表示させるには toFixed を使います。割り算の結果などを有効桁数まで求めたい場合によく使われます。

例えば小数点以下、2桁までの近似値にしたい場合は以下のようにします。
var x = 10 / 3;
console.log(x.toFixed(2)); // 3.33が表示されます

より詳しくは以下のサイトを御覧ください。
https://developer.mozilla.org/ja/docs/JavaScript/Reference/Global_Objects/Number/toFixed
1384日前
JavaScriptの "+" は文字列同士に適用すると文字列の連結になり、数値同士に適用すると足し算になります。

そして、一方が文字列で一方が数値の場合には「文字列の連結」になります。

var x = "12";  // 文字列
var y = 6;  // 数値

// z は "126" になる
var z = x + y;

上の例では z は 18 にはなりません。しかし以下のように x に 1 を掛けてから "+" を使うと x が数値になるため、結果は 18 になります。

// z は 18 になる
var z = x * 1 + y;

同様に 0 を引いても結果は同じになります。

// z は 18 になる
var z = x - 0 + y;
#08 if ... else ...
1423日前
if 文は「if / else if / else」で1つのまとまりで、「else if」は複数書くことができます。

このまとまりで上から順に条件式が評価され、その中で最初に true と判定されたブロックだけ実行されます。1度 true と判定されると、同じまとまりの以降の条件式は評価されません。

var x = 3;

if (x == 5) { // 評価される
  // 実行されない
}
else if (x == 4) { // 評価される
  // 実行されない
}
else if (x == 3) { // 評価される
  // ここが実行される
}
/* ここから else の終わりまでは無視される */
else if (x == 2) { // 評価されない
} else {
}
/* ここまで無視される */

// ここ以降の処理へ移る

もちろんこの後に改めて if 文を書けば、それはまた別のまとまりとなりますので、条件式は順に評価されていきます。
#09 switchで分岐
901日前
コンピュータ系の座標は左上を起点とすることが多いため、右に行けばいくほど x は増加し、下に行けばいくほど y は増えていきます。
したがって上方向に移動させるには y は減らすことが多いので「y = y - 10;」としています。
#11 forループ
1223日前
for文では複数の変数を同時に回すこともできます。
具体的には次のように行います。
for (var i = 0, j = 9; i <= 9; i++, j--) {
    console.log(i, j);
}
この処理には「コンマ演算子」というものを使っています。ご興味がある方は一度以下のサイトを覗いておくといいでしょう。
https://developer.mozilla.org/ja/docs/JavaScript/Reference/Operators/Comma_Operator
#15 連想配列を知る
1447日前
JavaScriptの連想配列は、キーと値のペアから成る「オブジェクト」のことです。

次のレッスン #16 にも出てきますが、オブジェクトのプロパティには「.」(ドット)でアクセスできるので、今回のレッスンで出てきた連想配列「sales」については、

console.log( sales.year2002 );

のようにドットで「year2002」を連結しても同じ結果が得られます。

このように「sales['year2002']」と「sales.year2002」は表記法が異なるだけで、同じものを表すということを理解しておきましょう。

ただし、キーが数値の場合だけはドットで連結できないので注意してください。

var sales = { '2002': 150 };
console.log( sales.2002 ); // これはエラーになる
console.log( sales[2002] ); // これはOK
1623日前
連想配列の宣言のあとは;をつけた方がわかりやすかったかもしれません。文の最後の;は省略できますが、明示的に文の終わりを示すためにつけておく癖をつけておくといいですね。
#17 Stringオブジェクト
1588日前
Stringオブジェクトのメソッド&プロパティについては以下に詳しいです。
https://developer.mozilla.org/ja/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/String_Object
#18 Arrayオブジェクト
1621日前
レッスン中に紹介したArrayオブジェクトのメソッド一覧です。
https://developer.mozilla.org/ja/JavaScript/Guide/Predefined_Core_Objects/Array_Object
#19 Dateオブジェクト
1588日前
Dateオブジェクトの詳細についてはこちらをご覧ください。
https://developer.mozilla.org/ja/JavaScript/Reference/Global_Objects/Date
#20 Mathオブジェクト
1588日前
Mathオブジェクトの詳細については以下をご覧ください。
https://developer.mozilla.org/ja/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Math_Object
#21 Browser Object Model (BOM)
1254日前
BOMやDOMのオブジェクトが持つプロパティやメソッドは、コンソールから確認することもできます。

Chrome の JavaScript コンソールを開いて「window」と入力して Enter を押すと、コンソールに「Window」という表示がされます。それをクリックすれば、その Window オブジェクトの持つプロパティやメソッドがずらっと出てきます。

プロパティやメソッドは数が多いので、気になるものは随時 Google などで検索してみるといいでしょう。
#22 Document Object Model (DOM)
1154日前
動画中で説明されている document.body.bgColor は非推奨となっております。

document.bgColor - DOM | MDN
https://developer.mozilla.org/ja/docs/DOM/document.bgColor

正しい style の変更方法は以下の動画レッスンをご覧ください。

#25 DOM要素のスタイルを変更してみよう | JavaScript入門 (Tips集)
http://dotinstall.com/lessons/basic_javascript_tips/2125

#26 DOM要素のclassを変更してみよう | JavaScript入門 (Tips集)
http://dotinstall.com/lessons/basic_javascript_tips/2126
1514日前
ユーザーの方よりご指摘いただきましたが、動画中で紹介されている document.width は最新版のブラウザではサポートされなくなったようです(以下のURLを参照してください)。

https://developer.mozilla.org/en/DOM/document.width

上記サイトでも推奨されていますが、代わりに以下をお試しください。
console.log(document.body.clientWidth);
#24 イベントを理解する
1437日前
e.onclick = ... の書き方で関数を代入する場合、以下のように2度代入をおこなうと1個目の関数は無効になります。

// こちらは無効になる
e.onclick = function () {
  alert("1個目のalert");
}

// こちらが有効
e.onclick = function () {
  alert("2個目のalert");
}

この書き方をする場合は、1個の関数に処理をまとめましょう。

e.onclick = function () {
  alert("1個目のalert");
  alert("2個目のalert");
}