Water Sunlight

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== JavaScript 記述方法の基本 ======

 --- //[[http://www.y2sunlight.com/water|y2sunlight]] 2020-10-13//

===== Hello World =====

どんな言語でも最初は **''Hello, World!''** から始めて下さい。

<code html>
<script type="text/javascript">
    window.alert('Hello, World!');
</script>
</code>
\\

===== スクリプトの記述場所 =====

html内にJavaScriptを記述する場合、以下の場所が推奨されます。

  - body要素の一番最後
  - head要素の中(関数定義)

JavaScriptの実行コードをbody要素の一番最後に置くことで、ページの描画が終わった直後にスクリプトを実行することができます。これによって見た目の描画速度が改善されます。但し、関数定義はhead要素の中に記述することが推奨されています。

<sxh html;title:Example>
<html>
    <head>
        <!-- 2.headの中(関数定義) -->
    </head>
    <body>
        ･･･
        <!-- 1.bodyの一番最後 -->
    </body>
</html>
</sxh>
\\

==== スクリプトを別ファイルに保存 ====

スクリプトのコードをhtml内に記述するのではなく、外部ファイルとして保存し、それを呼び出すことも可能です。

<code html>
<script type="text/javascript" src="sample.js"></script>
</code>

別ファイルに保存することで、htmlで記述したページレイアウトとJavaScriptを分離することができるので、コードの再利用やhtmlの見易さの観点からこちらの方が優れた方法だと言えます。

\\

==== JavaScript疑似プロトコル ====

一般的にJavaScriptは ''script'' 要素の中に記述しますが、''a'' 要素の ''href'' 属性の中に記述することもできます。

<code html>
<a href="JavaScript:window.alert('Hello, World!')">Hello, World!</a>
</code>

このような記法をJavaScript疑似プロトコルと呼びます。

\\

===== 文のルール =====

=== 大文字と小文字を区別する ===

JavaScriptでは、キーワード、変数名及び関数名は大文字と小文字を区別します。尚、HTMLでは大文字と小文字を区別しません。HTMLとJavaScriptは同じファイルで使用される機会があるので注意して下さい。

=== 空白文字と改行文字を無視する ===

プログラム内のキーワード、変数名または関数名などのように、空白文字(スペース、タブ)や改行文字を含まない字句の単位の事をトークンと呼びます。トークンの中で空白文字や改行文字を挿入すると、トークンはそこで分割されてしまいます。

JavaScriptは、他の言語と同様に、トークンを区切る空白文字及び改行文字を無視します。それらは、インデントなどのようにプログラムを見易くするために、使用することが出来ます。

=== 文はセミコロン( ; )で終わる ===

JavaScriptの文は、C/C++、PHP、Javaなどと同様に、セミコロンで終わることが出来ます。また、JavaScriptでは２つの文が別の行に分かれて記述されていれば、改行によって文を自動的に終了することも出来ます。

<sxh html;title:Example>
a = 1;    // 文を;で終了する(推奨)
b = 1;

a = 1     // 改行によって、文は自動的に終了できる
b = 1
</sxh>

しかし、改行による文の終了は、意図しない結果をもたらすことがあるので、セミコロンの省略は推奨できません。以下の例は ''return true'' を意識したコーディングですが、実際は ''return'' のみが実行されてしまいます。

<sxh html;title:Example>
return
true;
</sxh>

\\

===== コメント =====

JavaScriptの文は、C/C++、PHP、Javaなどと同様に、単一行コメントとブロックコメントが書くことが出来ます。

<sxh javascript>
// 単一行コメント
/* ブロックコメント */
</sxh>

単一行コメントは ''<nowiki>//</nowiki>'' から行末までのテキストをコメントと見なします。また、ブロックコメントは ''/*'' から始まり ''*/'' で終わるまでをコメントと見なします。ブロックコメントは、複数行にまたがることが出来ますが、入れ子にすることは出来ません。

ドキュメンテーションは関数や変数の宣言の直前に記述します。''<nowiki>/**</nowiki>'' から始まり ''*/'' で終わります。

<sxh javascript>
/** 
 * ドキュメンテーション
 */
</sxh>


\\

===== リテラル =====

リテラルとはプログラムに記述するデータ値のことです。以下の簡単な例を示します。

<sxh javascript;title:Example>
123           // 整数
1.23          // 実数
'Suzuki Taro' // 文字列
true          // 真偽値
null          // null値
[1, 2, 3]     // 配列
{name:'Taro', age:15} // オブジェクト
</sxh>

\\
===== 識別子 =====

識別子とは、変数名、関数名などの名前のことです。識別子で使える文字は、以下のものがあります。

  * 英字
  * 数字
  * アンダーバー( ''_'' )
  * ドル記号( ''$'' )

但し、先頭の文字に数字を使うことはできません。また、次に挙げる予約語（キーワード）を使用することはできません。

==== 識別子の命名規則 ====

以下にJavaScript言語で一般的によく使われる識別子の命名規則を挙げておきます。

  * 変数／関数　・・・　[[https://ja.wikipedia.org/wiki/%E3%82%AD%E3%83%A3%E3%83%A1%E3%83%AB%E3%82%B1%E3%83%BC%E3%82%B9|camelCase]]
  * クラス　　　・・・　[[https://ja.wikipedia.org/wiki/%E3%82%AD%E3%83%A3%E3%83%A1%E3%83%AB%E3%82%B1%E3%83%BC%E3%82%B9|PascalCase]]
  * 定数　　　　・・・　LARGE_SNAKE_CASE

\\

===== 予約語 =====

JavaScriptの予約語（キーワード）については、以下を参照して下さい。


  * [[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Lexical_grammar#keywords|MDN 字句文法 キーワード]]

\\
Water Sunlight

ユーザ用ツール

サイト用ツール

ページ用ツール
