流れ
今回は以下の流れで進めていきます。
- JavaScriptとは
- JavaScriptの使い方
- JavaScriptの作成と実行
JavaScriptとは
主にブラウザ上で動作するプログラミング言語です。ブラウザでWebページを開いたときに実行され、画面上に「動き」を加えることができます。
例えばクリックで文章の色が変わったり、送信ボタンのクリックで送信確認ダイアログが表示されたり、入力にエラーがある場合にエラーがありますと表示したりできます。
主にHTMLと一緒に使い、HTMLで作成した画面に動きを持たせるのに使います。
最近のWebページはアップルのサイトなど動きを付けることが当たり前となってきているので、JavaScriptはWebサイトを作成するには必須となってきています。
なお、Javaと付きますがJava言語とは全く異なる言語です。
JavaScriptの使い方
まず前提として開発環境の用意と、HTMLの基本的な書き方・実行方法を以下の記事を参考にしてください。
JavaScriptの書き方は2パターンあります。
HTMLファイルに書き込む
1つ目はHTMLファイルに書き込む方法です。
以下のようなHTMLファイルを作成したとします。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>タイトル</title>
</head>
<body>
こんにちは
</body>
</html>
このファイルに直接JavaScriptを書くと以下のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>タイトル</title>
<script>
//ここにJavaScriptを書く
</script>
</head>
<body>
こんにちは
</body>
</html>
このように<script>タグで囲むとJavaScriptを書けるようになります。<script>タグは<head>タグの中に書きます。
JavaScriptファイルを別に作成し読み込む
2つ目はJavaScriptファイルを作成し、HTMLファイルで読み込みます。この場合は<src>タグを使用して読み込みます。
例えばsample.htmlが保存してあるフォルダと同じところにsample.jsを作成し保存します。その場合の読み込み方法は以下になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>タイトル</title>
<script type="text/javascript" src="sample.js"></script>
<head>
<body>
こんにちは
</body>
</html>
JavaScriptの作成と実行
では実際にJavaScriptを書きます。JavaScriptの書き方は1つ目のHTMLファイルに書き込む方法を使います。
以下のコードでsample.htmlを作成してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>タイトル</title>
<script>
alert('Hello World!');
</script>
</head>
<body>
</body>
</html>
sample.htmlを作成したらブラウザで開きます。
Hello World!とアラートが表示されれば成功です。
![](https://masa-enjoy.com/wp-content/uploads/2020/04/image-15-1024x655.png)
今回<script>タグで囲んでいるこのalert()はコロンで囲んだ文字列を画面上に表示する構文です。
alert('Hello World!');
まとめ
今回のまとめを書きます。
- JavaScriptとは
ブラウザで動作するプログラミング言語 - JavaScriptの使い方
使い方は2パターンある
・HTMLファイルに書き込む
・JavaScriptファイルを別に作成し読み込む - JavaScriptの作成と実行
作成と実行はHTMLのときと同じである