JS_使ってみよう

03使ってみよう!

3-1使ってみよう(alert)

・JavaScriptファイルを作成して書き込む

HTMLの時は○○.html CSSの時は○○.css という風に拡張子を設定していたと思います。それと同様に○○.js と拡張子をつけてファイルを作成することでJavaScript用の環境を作成することができます。

・HTMLファイルの中で読み込む

JavaScriptの記述量が少ない場合や小規模な開発の場合HTMLファイルに記述する場合があります。以下のコードにあるようにbodyの閉じタグの直前に<script></script>を埋め込みそのタグの中にJavaScriptを記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    
<script>
	// ここにJavaScriptを書く
</script>
</body>
</html>

それでは実際にコードを書いていきましょう。
まずはalert操作についてです。
「Lesson5_JavaScript」というディレクトリを作成し、その中に「start」というフォルダを作成してください。
「start」フォルダが作成できたらその中身にindex.html と main.js という２つのファイルを作成しましょう。

index.html のひな型

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
</head>
<body>
    <script src="./main.js"></script>
</body>
</html>

下の写真のようになっていれば大丈夫です！

・簡単なHTMLファイルの説明

今回は主にVSCodeを用いますが、他にもPhpStormやCursorといったエディタがあります。またCodeSandboxのようなWeb上で無料で利用できるエディタもあります。
【VSCodeを使っている方は、右下にGo Liveというタブがあるはずなのでクリックしましょう。自動でブラウザに表示してくれるはずです。】

・VSCodeとは

Microsoftが作成しているエディタのことで無料で使うことができます。
今後開発現場でも用いられることがあると思うのでダウンロードすることをお勧めします。
ダウンロードは以下から。

Visual Studio Code – コードエディター | Microsoft Azure

ダウンロードした後の手順は以下を参考に
①　上にあるメニューの中にある view→Extensions をクリックし出現した検索窓に「japanese」と入力し、
一番上に出てきたJapanese Language Pack for Visual Studio CodeをインストールしVSCodeを再起動しましょう。
日本語になっているはずです。
②　①同様に拡張機能検索窓に「live Server」と入力しLive Serverをインストールしましょう。

インストール後VSCodeを再び再起動する。

試しに簡単なJavaScriptを作成してみましょう。

以下のコードを作成したmain.jsに書き込み、index.htmlをブラウザで読み込みましょう。
【もしもVSCodeを使っている方がいたら、右下にGo Liveというタブがあるはずなのでクリックしましょう。自動でブラウザに表示してくれるはずです。】

main.js

alert('hello JavaScript');

上の画像が表示されればOKです。OKを押した後でも画面を読み込めば何度でも表示させることができます。
今回使用したalert()は()の中に書き込んだ内容がウィンドウに表示されます。このウィンドウのことをダイアログといいます。
実務内でもちょくちょく出てくる言葉なので覚えておきましょう。
またalertでは文字列だけでなく数値や算術演算子(+. -. %)なども用いることができます。
試しに実行してみましょう。

main.js

alert(200 * 3);

上記の様に表示されましたか？されていれば問題ありません。

もし200 * 3で表示されたらシングルクォーテーション(’’)もし

03使ってみよう!

3-1使ってみよう(alert)

コメント

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル