JavaScriptの基本

スクリプトとは

書いたらすぐに実行できるプログラムをスクリプトと呼びます。スクリプトには「原稿」「台本」の意味があります。
JavaScriptはJavaと名前が似ているが、全く異なるプログラミング言語なので、混同しないようにJavaScriptの省略の際は「js」と呼ぶとよいでしょう。

JavaScriptの特徴

  • 良いところ

    テキストエディタで、手軽に開発・実行可能。歴史があり、プログラミングに関する情報が豊富。GooglemapはJavaScriptで動いている。

  • 悪いところ

    1. ブラウザによって挙動が異なる。（※最近のブラウザでは挙動が統一されてきている。）
    2. ユーザがJavaScriptの有効・無効を決めることができるので、常に動作するとは限らない。
    3. 最近のブラウザではJavaScriptを無効にさせづらくしている。
    4. ソースコードを誰でも見ることができるためコピーや改変されやすい。
    5. 悪意のあるプログラムなどを簡単に作れてしまう。

クライアントサイドプログラム

  • JavaScript

    1. JavaScriptはクライアントサイドプログラムで閲覧者側のPCで実行される。
    2. ユーザー側がJavaScriptの表示を切ることもできる。

    PHP

    1. PHPはサーバーサイドプログラムで、サーバーでPHPがHTMLを生成する。
    2. サーバーサイドプログラムのメリットはサーバー側なので必ず実行される。
    3. PHPはサーバーが無いと動かない。

JavaScript記述のルール

  1. 基本敵には半角で記述
  2. 大文字・小文字が区別される(※logは小文字で書かないといけない)
  3. 文字列は「'」「"」のどっちかで囲む
  4. 数字(数値)はそのまま記述する
  5. 区切りのいいところでは改行OK。単語の途中の開業はNG。
  6. 命令の最後に「；」つける

console.log('ログを表示');
console.
log('ログを表示'); → OK
conso
le.log('ログを表示'); → NG

console(コンソール)で確認

htmlファイルをブラウザで確認して検証ツール(F12)を使って確認してみましょう。
※console(コンソール)とは、コンピューターの操作に用いる入出力装置の一式のことである。 【参考サイト】

JavaScript記述方法

インラインスクリプト

＜script＞ ここにJavaScriptを記述する ＜/script＞

外部スクリプト

＜script src="外部JSファイルの場所"＞＜/script＞
＜script src="output1.js"＞＜/script＞

HTMLとjsの文字コードが違う場合

＜script src="xxxxx.js" charset="utf8"＞＜/script＞

外部スクリプトのメリット

  1. JSファイルをほかのページでも再利用できる。
  2. HTML内に文書構造意外の記述が増えることを防ぐ。

    3. 以上のことから原則外部ファイル化することをおすすめします。

よくやってしまうミス

外部スクリプトとインラインスクリプトを同時に記述すると外部スクリプトのみが実行されて、インラインスクリプトは無視される。

＜script src="mistake.js"＞ console.log('インラインスクリプト'); ＜/script＞

外部スクリプトとインラインスクリプトを両方使いたい場合はタグを分ける。

＜script src="mistake.js"＞
console.log('インラインスクリプト');
＜/script＞
＜script＞
console.log('インラインスクリプト3');
＜/script＞

JavaScriptの記述位置

scriptタグはHTML内のどの部分でも記述可。 以下3か所を状況に応じて使い分け。

  1. headタグ内に記述

    事前に読み込んでおかなければいけないJSファイルによく使われる。

  2. 閉じ＜/body＞タグの直前に記述

    ブラウザは1行目から順に読み込んで解釈し表示する。HTMLの途中に処理に時間のかかるJSファイルがあるとその処理が終わるまで表示されない。処理に時間のかかるJSファイルはbody終了タグ直前に記述する。

  3. bodyタグ内の任意の位置

    JavaScriptの処理対象になるHTMLコードとJavaScriptのプログラムを近い位置に記述して 関連性を明確にする場合などに使用。

console(コンソール)

検証ツール（F12）を立ち上げると画面右下にconsole(コンソール)の記述が出現する。

console.log('コンソールにログを表示');

console.log　という記述は、コンソールに（）の中を表示するという指示

※プログラムは上から順番に実行される

エラー表示

検証ツールの下にエラーの行数が記述される

  1. シンタックスエラー

    Uncaught SyntaxError: Invalid or unexpected token

  2. タイプエラー

    inline1.html:10
    Uncaught TypeError: console.Log is not a function
    at inline1.html:10

※「'」「"」のどちらかで囲っていれば中に使用しても大丈夫ですが、同じもの（「'」か「"」）が２回連するとそこで分が終了してしまうので注意しないといけない。
中で使う「'」「"」の前に￥をつけると問題なく使用できる
※￥が出ない場合は/を記述する。
※終了の「；」無くてもエラーは出ない

よくやってしまうミス

インラインスクリプトと外部スクリプトを同時に指示することはできない。

＜body＞
＜h1＞よくやってしまうミス＜/h1＞
＜script src="mistake.js"＞
console.log('インラインスクリプト');
＜/script＞
＜/body＞
＜/html＞

※上記記述だと外部スクリプトのみ実行される

※インラインは外部スクリプトに上書きされる

【修正】

＜body＞
＜h1＞よくやってしまうミス＜/h1＞
＜script src="mistake.js"＞
＜script＞
console.log('インラインスクリプト');
＜/script＞
＜/body＞
＜/html＞

コメントの記述位置

検証ツールの下にエラーの行数が記述される

  1. １行コメント

    //あいうえお

  2. 複数行コメント

    /*あいうえお*/

inputタグ：フォームパーツ作成タグ（※HTML）

inputタグはtype属性で種類が変わってくる

type属性：
「text」　→　１行入力パーツ
「button」　→　ボタンパーツ
「button」にvalue属性:ボタン内に表示される文字

＜div class="box"＞
＜input type="text" id="message"＞
＜input type="button" value="メッセージ表示" onclick="displayMessage();"＞
＜/div＞

【上記解説】 onclick属性:対象要素がクリックされたときに属性値部分の処理が実行される。
今回はボタンがクリックされた時に「displayMessage()」が呼び出される

【そのjsの指示】
function displayMessage(){
// テキストボックスに入力したメッセージをコンソールに表示
var message = document.getElementById('message').value;
console.log(message);
}

転職を本気で考えている方向けのプログラミングスクール！【WebCampPRO】