JavaScript 基礎 第1回では JavaScript の概要、特徴などを紹介しましたので、
今回はJavaScriptを書くための環境構築と、実際にコードを少し書いてみましょう！
目次
JavaScript を書くための環境構築
JavaScript のプログラムを書くのに適したテキストエディタを準備しましょう。
今回はMicrosoft社のテキストエディタ「Visual Studio Code(VSCode)」を利用します。
インストール方法は、下記の記事を参考にしてください。
SE Media – 現役SEとSEになりたい…
【はじめの一歩 】#01 Visual Studio Code のインストール手順 – SE Media プログラミングを学びたいと思ってるけど何から始めたら良いんだろう、、、と立ち止まっている方はいませんか？ 今回
SE Media – 現役SEとSEになりたい…
【はじめの一歩 】#02 Visual Studio Code の操作方法 – SE Media こちらの記事は、シリーズ記事の第2回目です。初回の記事からご覧になりたい方は 【はじめの一歩 】#01 Vis
プログラムの書き方
JavaScript をHTMLファイルに書く
HTMLのファイル作成方法を思い出したい方は下記の記事を参考にしてください。
今回のHTMLの内容は下記の記事を使います。
SE Media – 現役SEとSEになりたい…
HTML/CSS基礎 第3回 『HTMLの基本構文を学ぼう』 – SE Media SE MediaはIT・プログラミング初学者へ向けたサイトです。 HTML/CSS基礎 はHTMLとCSSの学習を始めたい人に向けたシリーズ記事です。第3回目は「HTMLの基本構文」について解…
■例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MY HOMEPAGE</title>
<meta name = "description" content="私のホームページです">
</head>
<body>
<h1>ここは私のホームページです</h1>
<script>
window.alert('ホームページです!');
</script>
</body>
</html>
保存したHTMLのファイルをダブルクリックして頂くと、上記の画像のようにダイアログが表示できます！JavaScriptで記述したコードについては今後学習していき学んでいきますので、今回はあまり気にせず記述する場所を意識できていれば大丈夫です。
JavaScript ファイルを読み込む
■例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MY HOMEPAGE</title>
<meta name = "description" content="私のホームページです">
</head>
<body>
<h1>ここは私のホームページです</h1>
<script src="homepage.js"></script>
</body>
</html>window.alert('JavaScriptのファイルを読み込んだホームページです!');また、ブラウザで表示すると以下の画像ような表示がされます。
まとめ
今回は環境構築をして、簡単なJavaScriptのコードを書いて頂きました。
JavaScriptのファイルを読み込むために、HTMLのファイルに記述する場所を覚えられればOKです！
(Visited 123 times, 1 visits today)
コメント