1.JavaScriptの雛形とconsole.log() 【新入エンジニア向けJavaScript講座】

Print Friendly, PDF & Email

ここでは、IT系企業の新入社員向けにJavaScriptを解説しています。

フロントエンドエンジニアになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、そんなあなたのためのページです。

1. JavaScriptの雛形を作成する

JavaScriptは、主としてWebページの動作を担当する言語です。

まずは、後々まで使えるようなHTMLとCSSの雛形を作成しましょう。

先に実行例をブラウザで見てみます。

<アウトプットイメージ>

ブラウザで見てみる

ブラウザに真っ白な画面が表示されました。

そこで、ウィンドウズであれば『F12』キーを押して「Console」タブを表示させてみてください。

Hello World!

と表示されていればOKです。

 

<雛形>
<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Training</title>
        <meta charset="UTF-8">
    </head>
    <body>

        <script>
            //JavaScriptのコードはここに書きます
            console.log("Hello World!");
        </script>
    </body>
</html>

上記のソースコードを入力(またはコピー&ペースト)してください。

コンソールログ関数を使ってブラウザのコンソール画面(黒い画面)にメッセージを出力しました。

JavaScriptでプログラムを組む時の表現は基本的に

オブジェクト名.メソッド名()

となります。

consoleオブジェクトのlog()というメソッドを使ったわけですね。

()の中には引数を入れることができます。

今回の"Hello World!"が引数です。

文字列なので""(ダブルクオーテーション)で囲っています。

 

今回は「JavaScriptの雛形」を作成しました。

 

次回は、「変数」を学びます。

 

新人エンジニア向けJavaScript講座の一覧に戻る