ES2015_001

■JavaScriptのプログラム中にコメントを入れる。

インラインコメント
「//」で始まる文字列は、その行の終わりまでコメントとなる。

ブロックコメント
「/*」から「*/」の間はコメントとして扱われる。

コメント例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>コメントサンプル</title>
</head>
<body>
<script>
/* 変数a と変数b の合計を計算し、
ダイアログボックスで表示する。 */
const a=2; // 値
const b=3; // 値
let total; // 合計
/* 合計を求める計 */
total= a+b;
/* ダイアログボックスを表示 */
alert(a + "+" + b + "= " + total);
</script>
</body>
</thml>

例では、HTMLファイルな中でタグ「<script> ～ </script>」の間に JavaScript を記述しています。

■HTMLの記述でコメントを入れる

「」の間はコメントとして扱われる。

コメント例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>コメントサンプル</title>
    
</head>
<body>
    コメントサンプルの例です。
    
</body>
</thml>

■HTMLの記述でコメントを入れる

「/*」から「*/」の間はコメントとして扱われる。

コメント例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>コメントサンプル</title>
<style>
body { color: red; } /* 文字の色を赤にする。 *
/*
ここはコメントです。
複数行のコメントも記述できる。
*/
</style>
</head>
<body>
    CSSのコメントサンプルの例です。
</body>
</thml>

例では、HTMLファイルな中でタグ「<style> ～ </style>」の間に CSS を記述しています。

■HTMLとCSSとJavaScriptを三つのファイルに分ける。

HTMLファイルにCSSとJavaScriptを含めた例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>サンプルプログラム</title>
<style>
body { color: red; } /* 文字の色を赤にする。 *
</style>
</head>
<body>
    サンプルプログラムです。
<script>
/* 変数a と変数b の合計を計算し、
ダイアログボックスで表示する。 */
const a=2; // 値
const b=3; // 値
let total; // 合計
/* 合計を求める計 */
total= a+b;
/* ダイアログボックスを表示 */
alert(a + "+" + b + "= " + total);
</script>
</body>
</thml>

上のプログラムを三つのファイルに分けます。

HTMLファイル

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>サンプルプログラム</title>
    
    <link rel="stylesheet" href="main.css">
</head>
<body>
    サンプルプログラムです。
    
    <script src="main.js"></script>
<script>
</body>
</thml>

CSSファイル

body { color: red; } /* 文字の色を赤にする。 *

JavaScriptファイル

/* 変数a と変数b の合計を計算し、
ダイアログボックスで表示する。 */
const a=2; // 値
const b=3; // 値
let total; // 合計
/* 合計を求める計 */
total= a+b;
/* ダイアログボックスを表示 */
alert(a + "+" + b + "= " + total);