カテゴリー
JavaScript

エスケープシーケンスについて知ろう

この章ではエスケープシーケンスについて説明します。
エスケープシーケンスとは、ダブルクォートやシングルクォートなど文字列として入力することが出来ない特殊な文字を1を使って表現します。
テキストエディタによっては1という表記になっています。1
では例を見てみましょう。
ダブルクォートで囲った中にさらにダブルクォートを入れてはいけません。
また、シングルクォートで囲った中にシングルクォートを入れてはいけません。
例えば以下の2つはエラーです。1 そのような場合は以下のように文字列の中にあるクォートとは逆のクォートで囲います。1 これを出力すると以下の通りです。1 もうひとつのエラーを回避する方法はエスケープ文字を使う方法です。
例えば以下のように「¥”」や「¥’」を使います。
これをエスケープ文字と言います。1 他にも「¥t」などのエスケープ文字があります。1 この例のように「¥t」を書くとその場所にタブを作ります。
この例の場合は出力した時に以下のようにダンスとダンスの間にタブを作ります。1 次の例もエスケープ文字を使った例です。1

1の中に1と言う文字がありますが、これもエスケープ文字です。
このエスケープ文字は文字列を改行します。
結果は以下の通りです。1 「¥n」が無ければ以下の通り改行されずに出力されます。1 エスケープ文字「¥n」は1で使用してください。
document.writelnの中で「¥n」を使っても改行されません。
ではdocument.writelnの中の文字列を好きな箇所で改行する場合はどうしたらいいでしょうか?方法は2つあります。
以下の例を見てください。11
2つ目の方法は以下のように出力する文の中の改行したい場所に1を付けます。1 以下のように¥nを使っても改行出来ませんので注意してください。1 結果は以下の通りです。1

カテゴリー
JavaScript

変数の型について知ろう

この章では変数の型について説明します。
C言語やC++やJavaなどの言語の場合は宣言する時に必ず、「データの型」を変数の先頭に付けなければいけません。
例えば整数型ならば1のように書きます。
JavaScriptはこのような型の宣言をする必要はありません。
変数の型を意識する必要はありませんが、まったく考えなくていいかというとそんなことは無いので、JavaScripにどのようなデータ型があるかは知っておいてください。
JavaScriptのデータ型は基本形と参照型の2つに分類されます。1 では数値型について説明します。
数値型は整数と浮動小数点に分類されます。
整数は10進数、8進数、16進数に分類されます。
10進数は1,2などの我々が普段使っている数字です。
8進数は先頭に0を付けて028などと書きます。
16進数は先頭に0xを付けて0x41などと表現します。
浮動小数点は0.2など少数点を持つ数値のことを言います。1
次は文字列型について説明します。
文字列型はダブルクォート、シングルクォートで囲われたデータのことを言います。
例えば以下の1は文字列型です。1
次に真偽型について説明します。
真偽型は「条件分岐ifの基本構文1」で詳しく説明しますので、ここでは少しだけ説明します。
真偽型はif文などの条件判定の時にtrue または falseとして返される値のことです。
数値の 0、特殊変数のnull、false、NaN、undefined、およびカラ文字は false であり、その他の値は true として扱われます。
NaNは数値型の値であり、undefinedと足し算するなどの通常とは違った演算が実行された時に返される値です(数値に変換しようとしてできなかった場合)。
nullやundefinedの詳しい説明は以下を参考にしてください。1 nullについては「様々なオブジェクト(windowオブジェクト)について知ろう9」で説明しますが、ここでは少しだけ説明します。
promptメソッドを使って1 のように書くとダイアログボックスが表示されるので、この中のキャンセルボタンを押した場合、 nullが返されます。1 undefinedは以下の例のように宣言だけをして、値が入っていない変数を出力しようとした時に返される値(未定義値)です。
では例をみてみましょう。1 結果は以下の通りです。1 データ型について説明しましたので、次は指定したデータがどのデータ型に当てはまるかを確認する方法について説明します。
指定したデータがどのデータ型に当てはまるかを確認するにはtypeof演算子を使います。
では例をみてみましょう。11 この例の結果は
「typeof a」は数値型なのでnumberが出力されます。
「typeof b」は文字列型なのでstringが出力されます。
「関数」については「関数について知ろう1」で説明し、「オブジェクト」については「オブジェクト指向型プログラミングについて」で詳しく説明します。

カテゴリー
JavaScript

変数について知ろう

この章では変数について説明します。
変数とは何かしらのデータを入れる箱みたいなものです。
バックを例に取るとバッグに財布やハンカチを入れて持ち運びますが、そのバックに当たるものが変数です。
そして、このバッグに入っている財布やハンカチがデータに該当します。変数に入れたデータを使って、計算をしたり、色々な作業を行っていくのがプログラミングの基礎の第一歩です。
では具体的な例を見てみましょう。111この例では1 が変数です。
変数は変数名の前に「var」が付いた形式です。
変数を使用するには初めに1と宣言しなければいけません。
これを変数宣言と言います。1 変数名は名前を付ければ何でもいいというのではなく、一定のルールがあります。
1つ目は1文字目は数字で始めることはできません。
例えば3bookという名前は付けることはできません。

2つ目は1文字目は1111を使うことができます。

3つ目は2文字目からは11111が使えます。

4つ目は同じ文字でも大文字と小文字は全く別の変数になります。
例えばbookとBOOKは全く違う変数になります。

5つ目は予約語を使うことができません。
予約語とはすでにJavaScriptの仕様で機能が定義されている単語のことです。11 また、変数名には入れるデータに関連した名前にして、誰が見てもわかりやすくしましょう。
入れるデータが本に関連しているのならbookというように。

次に「変数宣言」のもう1つの書き方について説明します。
複数の変数の宣言は次の通り、まとめて行なうことが出来ます。
先ほどの3つの変数はまとめて1 と宣言することが出来ます。
その場合は「,」で1つずつ区切り、varは先頭のみ付けます。

次は変数宣言を終えた変数にデータを入れる方法について説明します。
データを入れているのが以下の箇所です。1 変数名の右側にある「=」は数学にあるイコールと言う意味ではありません。
1を例に取ると1をbookに入れると言う意味です。
この入れる行為を代入と言います。
また、「=」を代入演算子といいます。

次は変数の宣言とデータの代入を同時に行なう方法について説明します。
変数の宣言と同時にデータを入れることを初期化と言いますが、以下の2と3がその初期化の例です。
1番が通常の宣言と代入の例です。11 変数と変数の間はカンマで区切り、varは先頭のみに付けます。1 1では「var book」と宣言をしてから、1のようにデータを入れていますが、2や3では1 のように変数の宣言と同時にデータを入れています。
どちらの形式でデータを入れてもいいです。
変数で気を付けることは変数は値を1つしか保持できないので、以下のようにbookに1を代入した後で1と再度代入すればbook変数は1に上書きされます。1 次は以下の説明をします(この例では紙面の都合で2行で書いていますが1行で書いてもいいです。)。1 document.writeはカッコの中の文字列などを表示させるための命令文です。
このカッコの中には変数が3つありますが、この変数名自体が表示されるわけではありません。
この中に入っているデータが出力されることになります。
つまり、book であればbook 自体ではなくbookの中に入っている「ダンスダンスダンス」が出力されます。
次はカッコの中にある「+」について説明します。
これは数字同士の計算では足し算の意味がありますが、文字列同士を「+」で繋ぐと両辺を連結してくれます。
例えば1の箇所は「ダンスダンスダンス」と「村上春樹」と「”を”」が連結されて1になります。
「+」は文字列を連結してくれますが、「+」の左右が数値と文字列の場合はどうでしょうか?
例の中の1の部分のnumberは数値であり、1は文字列です。
この場合は数値の部分は文字列に変えられてから連結されます。
つまり数値の2は文字列の1に自動的に変えられてから連結されます。
「+」を挟んだ左右どちらかが文字列の場合はもう片方も文字列に変えられてから連結されるというわけです。
結果は1になります。
この章の最後に補足をします。
「算術演算子について知ろう」では1のように計算式を直接入力していましたが、計算の結果を以下のように変数に入れてから出力しても問題ありません。1

カテゴリー
JavaScript

算術演算子について知ろう

この章では算術演算子について説明します。
算術演算子とは足し算、引き算、掛け算、割り算、割り算の余りを計算する演算子です。1 では例をみてみましょう。11
「document.writeln (…….);」のカッコの中に文字列や数値や計算式などを記述すると、ブラウザにその結果である文字列を出力することが出来ます。
この例ではカッコ中に計算式を入れていますが、これを計算した結果は「6 4 5 2 1」のです。

カテゴリー
JavaScript

JavaScriptの基本を知ろう

この章ではJavaScriptの基本について説明します。
JavaScriptはHTMLに組み込んで使用しますが、HTMLに組み込む場所は以下の場所になります。
① HTMLのヘッダーに記入します。
② HTMLのbody内に記入します。
③外部ファイルにJavaScriptを書いて、
それをHTMLで読み込みます。
④ HTMLのタグの中に埋め込みます。
JavaScript はHTMLのヘッダーやHTMLのbody内に記入する場合は1の間に書きます。
つまり、上記の①と②の場合です。
そして、この1の書き方は2種類あります。
<script>~</script>の書き方1つ目を紹介します。
では例をみてみましょう。11 基本構文は以下の通りです。1 JavaScript に対応していないブラウザが、JavaScriptのコードを出力してしまう可能性があるので、それを防ぐために1と言う形式でコメントアウトしています。
今はほとんどのブラウザがjavascriptに対応しているので、コメントアウトは必ずしも必須ではありません。
この構文はjavascriptを書く時のお決まりの構文なので、覚えてください。
JavaScript に対応していないブラウザで実行した場合には以下のように1の中に、JavaScript に対応していないブラウザに対してのメッセージを記述することも出来ます。1 先ほどのプログラムの中の1はブラウザのアラートボックスにメッセージを表示させる機能を持っています。1 この例の場合は 「Hello」と表示されます。1 ここで4点の補足について説明します。
1windowを省略して1だけでもいいです。

カッコ()に出力したい文字列を書きますが、文字列を出力させたい時には文字列を1もしくは1で囲んで、文の末尾は1を付けてください。
しかし、他の言語のようにセミコロンを入れなくても、エラーになることはありません。
また、出力する時にはシングルクォート、ダブルクォート自体は出力されません。

③プログラムは文字列やコメント以外は全て半角文字で記述します。
例えば<script>などと全角でタグを書いてはいけません。
コメントとはプログラムの意味などを忘れないためなどに書きますが、プログラム上には表示されません。
1行のコメントは「//」から右に書きますが、行末までがコメントになります。
複数行のコメントは1までの間に書きます。1

④javascriptで書かれていることを示すためにmetaタグは以下のように書きます。1

では<script>~</script>の書き方の2つ目を説明します。111 DOCTYPEで「XHTML」を指定する場合はJavaScriptのコードをCDATAで囲み、さらにその全体をコメントアウトします。
これは規則なので、数学の公式のようにそのまま覚えていただいて結構です。1
次はJavaScriptをHTMLに組み込む方法である以下の4について説明します。1 では例をみてみましょう。11 この例ではHTMLのaタグの中にjavaScriptのコードを記述しています。1 HTMLのタグの中にjavaScriptのコードを書けるのはaタグだけではありません。
他のタグでも書くことが出来ます。
この例ではリンクをクリックすると「Hello」と表示されます。1 次は外部ファイルにJavaScriptを書いて、それをHTMLで読み込む例です。
つまり、JavaScriptをHTMLに組み込む方法である以下の3について説明します。1 111この例では「javascript4.js」がjavascriptのファイルです。
外部ファイルを読み込む形式は以下のようになります。
headタグの中に以下の記述を書いてください(スペースの都合で2行で書いていますが1行で書いても結構です)。1 外部ファイルのファイル名の拡張子はjavascript の拡張子である「.js」を指定してください。
例えば1と記述します。
外部ファイルにプログラムを記述すればHTMLのコードがすっきりします。

カテゴリー
JavaScript

テキストエディタをダウンロードしよう

JavaScriptのプログラムを書くためにテキストエディタを使用しますので、以下のいずれかのエディタをインストールしてください。1
プログラムの実行方法は「NotePad++」の場合、「実行の中の自身の使っているのブラウザを選択して、クリックしますと実行結果が表示されます。
ファイルの拡張子は1です。1

カテゴリー
JavaScript

JavaScriptの学習を始めよう

JavaScript はNetscape Communications社の Brendan Eich氏が開発したプログラミング言語です(Java と JavaScriptは名前が似ていますが、違う言語です)。
JavaScriptはインタプリタ型のプログラム言語です。
インタプリタとは解釈者(Interpreter)という意味です。
プログラム言語はそのままではコンピュータには理解できないのです。
そこでコンピュータにも理解できるように解釈してあげる機能がインタプリタです。プログラムを読み込んだら、すぐにそれを解釈、変換して出力します。
つまり、その都度翻訳しながら、そのプログラムを実行するという意味です。
HTMLのなかにJavaScriptを埋め込むことで、サイトに動的な動きを付け加えたり(時間ごとにサイトの一部の色を変えるなど)、HTMLには無い機能を加えることが出来ます。
初めにJavaScriptを学習するにあたって、ブラウザがJavaScriptを使用できる状態になっていなければいけません。
以下にブラウザに対してのJavaScriptの設定方法を説明しますので、自身の設定が正しいかどうか確認してください。
以下がブラウザごとの設定方法です。
Internet Exploreの場合から説明します。
①コントロールパネルの中のインターネットオプションをクリックします。1
②インターネットオプションをクリックした後は以下の「インターネットのプロパティ」という画面が開きますので、その中の「セキュリティ」の中にある「レベルのカスタマイズ」をクリックします。1
③「レベルのカスタマイズ」をクリックすると以下の「セキュリティ設定」という画面が開きますので、その中の「アクティブスクリプト」の「有効にする」に印を付けてください。1
次はGoogle Chromeの場合をみてみましょう。
①画面の右上の以下の赤枠で囲まれている箇所をクリックします。1
②次に以下のメニューが表示されますので、その中から「設定」をクリックします。
1

③次に「設定」の中の「コンテンツの設定」をクリックします。1
④次に「コンテンツの設定」の中の「すべてのサイトで
Javascript の実行を許可する(推奨)」に印を付け、OKをクリックします。1