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>
    <!-- style の部分を外部ファイル(main.css)にして呼び込む -->
    <link rel="stylesheet" href="main.css">
</head>
<body>
    サンプルプログラムです。
    <!-- script の部分を外部ファイル(main.js)にして呼び込む -->
    <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);