Chapter01 JavaScriptの基本

概要と目標 JavaScriptで出来ることを知り、
はじめてのJavaScriptを書いてみる。

JavaScriptの基本を学習し、画面に文字列を出力できるようになりましょう。

今回のゴール

RERUN

新しいウインドウで表示する

JavaScriptとは Webサイトに動きを付ける
ブラウザが処理するプログラミング言語。

JavaScript（ジャバスクリプト）は、ブラウザが処理を実行するプログラミング言語。
主にWebページ上の動きを付ける目的で利用される。

Webページの構成
  1. 一番土台がHTML 一番土台がHTML
  2. その上にCSS その上にCSS
  3. 一番上にJavaScript 一番上にJavaScript

JavaScriptの歩み 嫌われ者から、人気者へ。

脆弱性を狙ったウイルスにより嫌われ者になったが、
非同期通信の登場で今では欠かせない存在に。

  1. LiveScript を改名し JavaScript が登場
  2. ECMA が JavaScript を標準化
  3. JavaScript の脆弱性を利用したウイルスが登場
  4. Ajaxを使ったGoogle Mapの登場
  5. jQueryの登場
  6. ECMAScript 5（ES5）が標準化
    Node.js やAngularJSが登場
  7. Reactが登場
  8. ES2015（ES6）が標準化
    Vue.jsが登場
Ajax (Asynchronous JavaScript + XML)
フロント側の技術とバックエンド側の技術を組み合わせて非同期通信を行う仕組み

開発環境 テキストエディタと、
ブラウザで開発できる。

CSSもテキストエディタと呼ばれる文書が書けるソフトと、ブラウザがあれば開発できる。

テキストエディタ

文書を書くためのソフト。
Windowsの「メモ帳」や、Macの「テキストエディット」でも開発できる。 以下は、よりHTMLを開発しやすい無料のテキストエディタ。

ブラウザ

ホームページを閲覧するためのソフト。
Windowsの「Internet Explorer」や、Macの「Safari」でよい。 以下は、その他のよく利用されているブラウザ。

JavaScriptの記述場所 HTMLに直接書くか、
外部ファイルに書くか。

JavaScriptは、HTMLファイルの中にscript要素を用いて記述する。
JavaScriptのコードはscript要素内に直接記述する方法と、
src属性を使って、外部のJSファイル （拡張子「.js」）に記述方法がある。
なお、script要素は特に問題がない限り、</body>の手前に記述するのが一般的。

script要素内に直接記述する方法
<script type="text/javascript">
  ここにJavaScriptの処理を記述
</script>
</body>

HTML5 の場合は type属性を省略できる
外部ファイル（拡張子「.js」）に記述する方法
<script src="JSファイルのパス" type="text/javascript"></script>
</body>

HTML5 の場合は type属性を省略できる
script 要素に src属性を指定する場合、要素内には何も記述しな

はじめてのJavaScriptを
書いてみよう！

  1. 「javascript-lessons」 › 「chapter01」 › 「hello」フォルダ内の「index.html」を開く
  2. 下記を参考にはじめてのJavaScriptを記述
chapter01/hello/index.html
  <script>
    document.write('Hello JavaScript');
  </script>
</body>
  1. 上書き保存
  2. 「javascript-lessons」 › 「chapter01」 › 「hello」フォルダ内にある「index.html」をブラウザで開く
  3. 「Hello JavaScript」と表示されているかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

画面出力 プログラムの学習は、
画面に文字を出すことから始まる。

プログラミング言語を学習する際は、まず画面に文字を出す方法を学ぶ。
JavaScriptの場合は、document.write()という命令を使う。
ただしこの命令は、HTML5では非推奨となっている。
この授業では学習のため用いるが、実務では利用しないようにする。

document（ドキュメント）.write（ライト）() ・・・ 画面に出力するメソッド
document.write（メソッド名）(表示したい情報（パラメータ）)
オブジェクト      メソッド

外部ファイルに書いてみよう。

  1. 「javascript-lessons」 › 「chapter01」 › 「hello」フォルダ内の「index.html」をテキストエディタで開く
  2. 新たにscript要素を作成し、src属性で、「app.js」ファイルを参照
chapter01/hello/index.html
<body>
  <script src="app.js"></script>
  <script>
    document.write('Hello JavaScript');
  </script>
</body>
  1. 上書き保存
  2. 「javascript-lessons」 › 「chapter01」 › 「hello」フォルダ内に「app.js」を作成
  3. 画面に「外部ファイルを実行」と表示する命令を記述
chapter01/hello/app.js
document.write('外部ファイルを実行');
  1. 上書き保存
  2. 「javascript-lessons」 › 「chapter01」 › 「hello」フォルダ内にある「index.html」をブラウザで開く
  3. 「外部ファイルを実行」と表示されているかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

コメント プログラムの内容は頭にメモせず、
ソースコード内にメモをする。

ソースコードにメモを残すことを、コメントや、コメントアウトと呼ぶ。

JavaScriptのコメント
// １行分のコメント

/*
  複数行の
  コメント
*/

コメントを記述してみよう！

  1. 「javascript-lessons」 › 「chapter01」 › 「hello」フォルダ内の「app.js」をテキストエディタで開く
  2. 下記を参考にコメントを追記
chapter01/hello/app.js
// JavaScript の基本

/*
  document.write()
  画面に出力するメソッド
*/
document.write('外部ファイルを実行');
  1. 上書き保存

コンソールの活用 ブラウザには「コンソール」と呼ばれる場所がある。

ブラウザには「コンソール」と呼ばれる場所がある。
（Google Chromeの場合： 「表示」 › 「開発/管理」 › 「JavaScriptコンソール」）
もし、JavaScriptのエラーが発生した時は、この「コンソール」に表示される。
また、この「コンソール」に値を出力されることも出来る。

console.log() ・・・ コンソールに出力する命令
console.log(表示する内容)

コンソールに出力してみよう。

  1. 「javascript-lessons」 › 「chapter01」 › 「hello」フォルダ内の「app.js」をテキストエディタで開く
  2. コンソールに「コンソールにこんにちは」と出力
chapter01/hello/app.js
// コンソールに出力
console.log('コンソールにこんにちは');
  1. 上書き保存
  2. 「javascript-lessons」 › 「chapter01」 › 「hello」フォルダ内にある「index.html」をブラウザで開く
  3. ブラウザのJavaScriptコンソールを表示し、 「コンソールにこんにちは」と表示されているかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

エスケープシーケンス 文字列の中に「'」や「"」など、
特殊な記号を埋め込む。

console.log()などで、出力する文字列の中に「'」や「"」を使う場合は、
文字列に含めない方の引用符を使うか、引用符の前に¥ （Mac: option + ¥ ）を入力する。
これをエスケープシーケンスを言う。 

// 文字列に含めない方の引用符を使う
console.log("I'm Fine!");
// 文字列に含めない方の引用符を使う
console.log('I\'m Fine!');

エスケープシーケンスを使ってみよう！

  1. 「javascript-lessons」 › 「chapter01」 › 「hello」フォルダ内の「app.js」をテキストエディタで開く
  2. console.log()命令で、エスケープシーケンスを活用して、「I'm Studying」と出力
chapter01/hello/app.js
// エスケープシーケンス
console.log('I\'m Studying');
  1. 上書き保存
  2. 「javascript-lessons」 › 「chapter01」 › 「hello」フォルダ内にある「index.html」をブラウザで開く
  3. ブラウザのJavaScriptコンソールを表示し、 「I'm Studying」と表示されているかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

主なエスケープシーケンス
エスケープシーケンス 説明
\n 改行
\t タブ
\' シングルクォーテーション
\" ダブルクォーテーション

警告ダイアログ 「OK」ボタンがある
ダイアログボックス

JavaScriptには画面上にポップアップウインドウを表示する命令がいくつかある。
「OK」ボタンがあるダイアログボックスをアラートボックスという。

window（ウインドウ）.alert（アラート）() ・・・ 警告ダイアログを表示するメソッド
window.alert(表示するメッセージ)

window オブジェクトに関しては、オブジェクト名を省略できる

警告ダイアログを使ってみよう。

  1. 「javascript-lessons」 › 「chapter01」 › 「dialog」フォルダ内の「app.js」を開く
  2. 警告ダイアログで「保存しました」と表示
chapter01/dialog/app.js
// アラートボックス
alert('保存しました');
  1. 上書き保存
  2. 「javascript-lessons」 › 「chapter01」 › 「dialog」フォルダ内にある「index.html」をブラウザで開く
  3. 警告ダイアログで、 「保存しました」と表示されているかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

確認ダイアログ 「OK」と「キャンセル」がある
ダイアログボックス

JavaScriptには「OK」ボタンと「キャンセル」ボタンがある、
確認ダイアログボックスがある。

window（ウインドウ）.confirm（コンファーム）() ・・・確認力ダイアログを表示するメソッド
window.confirm(表示するメッセージ)

window オブジェクトに関しては、オブジェクト名を省略できる

確認ダイアログを使ってみよう。

  1. 「javascript-lessons」 › 「chapter01」 › 「dialog」フォルダ内の「app.js」を開く
  2. 確認ダイアログで「削除しますか？」と表示
chapter01/dialog/app.js
// 確認ダイアログ
confirm('削除しますか？');
  1. 上書き保存
  2. 「javascript-lessons」 › 「chapter01」 › 「dialog」フォルダ内にある「index.html」をブラウザで開く
  3. ア確認ダイアログで「削除しますか？」と表示されているかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

入力ダイアログ テキストの入力を促す
ダイアログボックス

JavaScriptにはテキストの入力を促すダイアログボックスがある。

window（ウインドウ）.prompt（プロンプト）() ・・・ 入力ダイアログを表示するメソッド
window.prompt(表示するメッセージ)

window オブジェクトに関しては、オブジェクト名を省略できる

入力ダイアログを使ってみよう。

  1. 「javascript-lessons」 › 「chapter01」 › 「dialog」フォルダ内の「app.js」を開く
  2. 入力ダイアログで「お名前を入力して下さい」と表示
chapter01/dialog/app.js
// 入力ダイアログ
prompt('お名前を入力して下さい');
  1. 上書き保存
  2. 「javascript-lessons」 › 「chapter01」 › 「dialog」フォルダ内にある「index.html」をブラウザで開く
  3. 入力ダイアログで「お名前を入力して下さい」と表示されているかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

入力されたテキストを表示しよう

  1. 「javascript-lessons」 › 「chapter01」 › 「dialog」フォルダ内の「app.js」を開く
  2. 下記を参考に、document.write()メソッドを使って、prompt()で入力された内容を表示するコードに変更
chapter01/dialog/app.js
// 入力ダイアログ
document.write( prompt('お名前を入力して下さい') );
  1. 上書き保存
  2. 「javascript-lessons」 › 「chapter01」 › 「dialog」フォルダ内にある「index.html」をブラウザで開く
  3. 入力ダイアログで入力した内容が画面に表示されているかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

練習問題 今回の理解度をチェック。

「chapter01」 › 「training」フォルダ内の「index.html」を開き、
下記の問題を解いて下さい。

ブラウザでの完成例

RERUN

新しいウインドウで表示する

    • ファイル名： app.js
解答例
chapter01/training/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>練習問題1</title>
</head>
<body>
  <script src="app.js"></script>
</body>
</html>
chapter01/training/app.js
alert( prompt('お名前を入力して下さい') );

解答例は全問題のチェックボックスが on になるとご覧いただけます。

まとめ JavaScriptはブラウザが処理する
プログラミング言語。

JavaScriptは主にWebサイトの動きを付けるプログラミング言語。
HTMLやCSSとくらべてもプログラムは難しい。

  • JavaScriptは、script要素を用いて記述する
  • オブジェクトは材料
  • メソッドは作業