苦学楽学塾 ホームページ
最終更新日：2024年11月17日
まず最初に、JavaScriptのプログラムをどうやって動かすのか、Windowsを想定して説明します。エディタ(WORDでもメモ帳でもよいです)で以下の内容でHTMLのファイル、jtest1.html(クリックすると、ブラウザに表示されてしまいますが、Google Chromeで表示させて[F12]で開発ツールを起動しソース表示させてください)を作ってみてください。
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScriptのテスト</title>
<style>
p{color:black;font-size:medium}
</style>
</head>
<body style="background-color:white">
<p>JavaScriptのテストをします。</p>
<script>
alert("こんにちは。");
</script>
</body>
</html>
入力が完了したら、エクスプローラを動かして、jtest1.htmlを作成したフォルダーを開き、jtest1.htmlとファイル名が書かれているところでマウスをダブル・クリックしてください。ブラウザが起動し、ダイアログが開いて、「こんにちは。」と表示されていたら、無事にJavaScriptが起動しています。OKボタンをクリックすると、ダイアログが消え、画面に「JavaScriptのテストをします。」と表示されているはずです。
もし、何も起こらず、何も表示されない場合は、ファイル名のピリオドのうしろが"html"になっているか確認してください。ブラウザは、かなりミスの多いファイルでも何とか解釈して表示してしまうので、ダイアログが出ない場合は、ブラウザが起動し画面に何か表示されていれば、元のHTMLファイルの内容をよく確認してください。
例えば、<script>をスペルミスして<scrept>などとしてしまうと画面には、
JavaScriptのテストをします。
alert("こんにちは。");
と表示されますが、これではJavaScriptは動いていません。alertというJavaScriptの命令が動いていれば、ダイアログが出るはずです。
また、エクスプローラ上で、jtest1.htmlと書かれている場所をダブル・クリックすると、通常はブラウザが起動してしまうので、エディタで編集したい場合には、jtest1.htmlと書かれている場所を右クリックして「プログラムから開く」をクリック、そこで表示されたツールの中で、WORDかメモ帳かエディタを選択してください。
無事にダイアログが開けば、JavaScriptのalert命令が動作しているので、JavaScriptの起動に成功した、ということです。ブラウザがGoogle Chromeなら、ブラウザ画面で[F12]キーを押して、開発ツールを起動し、メニューで[ソース]を選び、jtest1.htmlと書かれているところをクリックすると、上記のHTMLコード(HTMLはプログラムではないので、「コード」と呼ぶことにします)が表示されます。
HTMLファイルは、基本的に、<html><head>～</head><body>～</body></html>という形をしています。jtest1.htmlの最初の<html lang="ja">は、このウェブサイトが日本語のサイトであることをブラウザに伝えています。<head>～</head>(この部分をヘッダと言います)にこのサイトの性格のようなものを記述します。<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">は、この行が"Content-type"の記述であることを示し、UTF-8という文字コードで記述されたHTMLファイルであることを示しています。
次の<title>JavaScriptのテスト</title>は、このHTML文書のタイトルが「JavaScriptのテスト」であることを示しています。タイトルはブラウザのタブのところに表示されます。次の<style>はCSSの記述であることを示し、p{color:black;font-size:medium}は、<p>というタグの表示が、文字色：黒、文字サイズ標準であることを指定しています。</style>でCSSの記述の終了を、</head>でヘッダの終了を表します。
<body>以降に表示内容の本体が来ます。bodyの後の、style="background-color:white"は、画面背景色が白ということを指定します。<p>JavaScriptのテストをします。</p>で、画面に「JavaScriptのテストをします。」と表示します。その次の<style>から</style>までが、JavaScriptのプログラムです。alert("こんにちは。");では、画面上に「こんにちは。」と書かれたダイアログを表示します。ダイアログ上の[OK]ボタンをクリックすると、ダイアログが閉じます。</body>で本体記述の終了、</html>でHTMLファイルの終了を表します。このように、JavaScriptのプログラムは、HTMLファイルの中に、<script>と</script>で挟んで記述します。
JavaScriptでは、データ型は、基本的に、文字列型、数値型、論理型の3種類です。JavaScriptはオブジェクト指向言語なので、他に「オブジェクト」があります。Pythonと同様に、JavaScriptのオブジェクトもメソッドとプロパティを持ちます。文字列型のデータはsingle quoteまたは、double quoteで囲みます。"おはよう。"とか、"日本"とか、"123.45"が文字列です。数値型は、1234.567などです。JavaScriptでは整数型と実数型の区別はありません。表示としては2であっても、内部的には倍精度浮動小数点数で、2.00000000001だったりします。論理型には、true(真)とfalse(偽)があります。
他に、0同士の除算で出てくるNaN，初期化しただけでデータが入っていない変数・配列で出てくるundefined，返り値が存在しない場合にnullを返すメソッドもあります。また、1を0で割ると、Infinityになります。1をInfinityで割ると0になります。対数関数でMath.log(0)とすると、－Infinityになります。
JavaScriptのプログラムでは、大文字と小文字は区別されることに注意が必要です。stringとStringは同じものとして扱われません。また、単語と単語の間に空白を入れる、入れない、空白をいくつ入れるかは自由です。JavaScriptの文は原則としてセミコロン';'で区切られますが(解釈可能であれば、省略しても動いてしまいますが、なるべくきちんと';'で区切るクセをつけましょう)、1つの文の途中で改行しても、1行の中に、';'で区切って複数の文を置くことも可能です。
【広告】 ここから広告です。ご覧の皆さまのご支援ご理解を賜りたく、よろしくお願いいたします。
【広告】 広告はここまでです。