手習い日記帳

学習、勉強、スキルアップ、リスキリング

もーとむ

JavaScript で「こんにちは世界」

　今日はプログラミング定番の「HelloWorld」です。

１　画面に文字を表示する

　JavaScript で文字を出力するにはどうしたらよいのでしょうか？

HTML（コード入力）
<!DOCTYPE html>
<html>
<head>
    <title>サンプル</title>
    <meta charset="UTF-8">
</head>
<body>
    <h1>HelloWorld.</h1>
    <p>HelloWorld.</p>
    <script>
        document.write("<p>HelloWorld.</p>");
    </script>
</body>
</html>
ブラウザ（実行結果）
サンプル

HelloWorld.

HelloWorld.

　１行目は <h1>、２行目は <p>、３行目は <script> のタグの内容です。
　２行目と３行目は全く同じ内容ですね。
　なお、title で囲まれた部分は、ブラウザの左上の帯に表示されるものです。

２　オブジェクト指向

　ここで書籍のほうでは「オブジェクト指向」の説明となります。
　プログラムを「もの」として扱い、それには「動作」と「値」がある。
　具体的にはそれぞれ「自動車」、「発進する」「止まる」と「スピード」「走行距離」でたとえられています。
　JavaScript では、それぞれ「オブジェクト」「メソッド」「プロパティ」と呼ばれています。
　そして、そのメソッドが処理を行うために必要なのが「引数」（ひきすう）です。

３　オブジェクト指向（メソッド）

HTML（コード入力）の一部
<script>
    document.write("<p>HelloWorld.</p>");
</script>
ブラウザ（実行結果）
サンプル

　document が オブジェクト、write が メソッド、”<p>HelloWorld.</p>” が引数となります。メソッドは「 ．」の後に記述され、また、引数は（　）で囲まれます。
　なお、この document はあらかじめ用意されたオブジェクトですので、write というメソッドを使って画面に文字「HelloWorld.」を表示させることができました。（ビルト イン オブジェクト といいます。）

４　オブジェクト指向（プロパティ）

　では、プロパティはどのように使うのでしょうか？
　値なので表示することができるはずです。
　次の例では、title タグが「こんにちは」と書かれています。

HTML（コード入力）の一部
<!DOCTYPE html>
<html>
<head>
        <title>こんにちは</title>
        <meta charset="UTF-8">
</head>
<body>
    <p>
    <script>
        document.write(document.title);
    </script>
    </p>
</body>
</html>
ブラウザ（実行結果）
タイトル

こんにちは

　まずかっこ内は、document がオブジェクト、「 . 」を挟んで、title がプロパティです。
　ということは、document.title は、このサイトのタイトル部分を取得するということになり、結果として、(document.title) が (こんにちは) と認識されます。
　その置き換えられた「こんにちは」が、メソッドである write により表示されるというわけですね。
　<p> タグの位置が、前の例と異なる（<script> タグの外側）のが疑問ではありますが。

５　次回

　これでやっとプログラミングらしくなってきましたね。
　さて、次回はいかにもプログラミングらしい要素である「演算」を勉強します。

カテゴリー

更新記事

タグ

break (1) class (3) collection (6) continue (1) CSS (2) DOM (2) for (1) function (3) HTML (8) if (2) JavaScript (28) object (5) pop (1) push (1) shift (1) switch (1) unshift (1) VBA (1) while (2) アンガーマネジメント (1) インソース (1) ココナラ (9) コーチング (1) チーズ (2) ネズミ (2) ノート (2) パーソルホールディングス (1) ブランディング (1) ブランド (1) プログリット (1) ポート (1) メモ (2) リスキリング (1) 変数 (3) 学習 (1) 小人 (2) 怒り (1) 株式 (18) 睡眠 (3) 給水器 (1) 記憶 (3) Ａｏｂａ－ＢＢＴ (9) ＩＧＳ (9) Ｋラーニング (1)


Categories:

Tags:

,