超入門 JavaScript ①

JavaScriptの超入門記事、第一弾です。

但し書きとしては、
HTMLやCSSの知識は前提とさせて頂き、記事内での解説は省略します。
掲載プログラムについてコメントで質問を頂いた場合には、HTML、CSSに関する内容であってもできる限り回答していければと思います。

では早速やっていきましょう。
JavaScriptに限らずプログラミングで入門と言えば?

そうです。Hello Worldですよね。
今回作るものは以下のとおりです。

【仕様】
ブラウザでプログラムを開くと、「Hello World」とポップアップが表示される

そして入力するJavaScriptコードは以下のとおりです。

alert('Hello World!');

はい、これだけです。

コードの解説は後ほどしていきますが、まずは自分の手で打ち込んで、プログラムを動かしてみましょう。

読んで理解すること、大事。
書いて動かすこと、もっと大事。

実際に動かせるよう、HTMLも含めた全コードを掲載しておきます。
HTMLファイル内にJavaScriptをプログラムするためには、<script>タグと</script>タグの間に入力する必要があります。

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script>
 alert('Hello World!');
</script>
</head>

<body></body>
</html>

入力し終わったら、ファイル名の拡張子を「.html」にして保存しましょう。
例えば、「sample1.html」のような感じでファイル名をつけます。
完成したファイルをダブルクリックすれば、標準設定されているブラウザが起動してプログラムが動作するはずです。
ブラウザが開かない場合は、ファイルを右クリックして、ポップアップメニューから「プログラムから開く」を選択し、ブラウザを選んでみてください。

画像1

上手のとおり表示されれば完成です!


さて、続いてはコードの解説です。
今回の解説対象コードは以下の1行です。

alert('Hello World!');

先頭の「alert」 は、JavaScript側で用意されている「関数」というものです。
関数」とは、ある機能を実現するための処理命令をまとめて書いておき、呼び出すことで再利用可能にできる単位です。
いまはこのレベルの理解でじゅうぶんです。
関数」はJavaScriptにおいては一番と言って良いほど重要な存在なので、別の投稿でさらに詳しく説明する機会を設けます。

ルールや使い方の説明を続けます。
JavaScriptの関数は、使う(「呼び出す」とも言う)時に丸カッコをつけるルールになっています。

丸カッコの中には、関数が処理するために必要なデータを渡してあげます。
これを「引数」(ひきすう)と言います。
今回の場合は、「Hello World」を表示してもらうため、alert関数に渡しています。

丸カッコ内の「Hello World」を囲んでいる「'」は、シングルクォーテーションです。
データが文字列の場合、このようにシングルクォーテーション(またはダブルクォーテーションでも可)で囲んであげるのがルールです。
「文字列の場合」と言いましたが、プログラミング言語のデータには、文字列以外にも数値や真偽値などそれぞれデータ型があるのです。
データの型については、別の投稿で詳しく説明していきます。

文の最後にある「;」はセミコロンです。
多くのプログラミング言語では、このセミコロンによって文の終わりを判断します。

プログラムの解説は以上です。
たった1行のプログラムですが、文章で解説するとルールや意味がいろいろあって難しく感じた人もいるかもしれません。

しかし、どんな大きなシステムも習得が難しい言語も、この1行のHello Worldから始まります。
ここをしっかり理解して、何も見ないで書けるようにしてしまいましょう。

また、重要な専門用語は記事内で太字強調しています。
趣味でプログラムを覚えたい人にとっては、専門用語を覚える優先順位は低いと思います。
プロを目指そうとしている人は、その都度覚えていくようにしてみてください。
理由は、調べものをするときに単語の意味をイチイチしらべなければならなくなりますし、仕事仲間同士での会話が成立しづらくなってしまうからです。

最後までお付き合いいただきありがとうございましたm(__)m

このまま次へ進まれる方は こちら へどうぞ。

それでは良いプログラミング・ライフを!

この記事が気に入ったらサポートをしてみませんか?