初心者でも出来るHTML,JavaScript入門4

7656 ワード
新人プログラマ応援 JavaScript プログラミング初心者 プログラミング教育 HTML5 JavaScript テキストリンク

1.事前知識

事前知識として、上記リンクの内容が必要です。

2.JavaScriptについて

JavaScript とは、Webページで複雑な処理を可能にするプログラミング言語です。
JavaScript には インラインスクリプト , 外部スクリプト , イベントハンドラ という書き方があります。それぞれ以下の通りです。

インラインスクリプト
<script type="text/javascript">
//ここにJavaScriptを書きます。
</script>
外部スクリプト
<script type="text/javascript" src="test.js">//外部ファイルにJavaScriptを書きます。</script>
イベントハンドラ
<input type="button" onclick="ここにJavaScriptを書きます。">

3.記述例

  • インラインスクリプト
test1.html
<!DOCTYPE html>
<html>
    <head>
        <!-- 付加情報 -->

        <!-- タイトル -->
        <title>JavaScriptの説明</title>

        <!-- インラインスクリプトの場合は<head>内に書く -->
        <script type="text/javascript">
            alert('Hello');
        </script>
        
        <!-- 文字コードの指定 -->
        <meta charset="utf-8" />
    </head>

    <body>
        <!-- コンテンツ -->
    </body>
</html>
  • 外部スクリプト
test2.html
<!DOCTYPE html>
<html>
    <head>
        <!-- 付加情報 -->

        <!-- タイトル -->
        <title>JavaScriptの説明</title>

        <!-- 外部スクリプトの場合は<head>内に書く -->
        <script src="test.js"></script>

        <!-- 文字コードの指定 -->
        <meta charset="utf-8" />
    </head>

    <body>
        <!-- コンテンツ -->

    </body>
</html>
test.js
alert("Hello!");
  • イベントハンドラ
test3.html
<!DOCTYPE html>
<html>
    <head>
        <!-- 付加情報 -->

        <!-- タイトル -->
        <title>JavaScriptの説明</title>

        <!-- 文字コードの指定 -->
        <meta charset="utf-8" />
    </head>

    <body>
        <!-- コンテンツ -->
        <!-- イベントハンドラは<input>内に書く -->
        <input type="button" value="JavaScript" onclick="alert('Hello');">
    </body>
</html>

中身の文をコピーして、文字コードは UTF-8 を指定し、ファイル名を test1.html,test2.html,test.js,test3.html でデスクトップに保存するとブラウザではこうなります↓↓

  • test1.html

  • test2.html , test.js

  • test3.html

画像のようになれば成功です。

4.GitHub

GitHubにソースコードを公開しています。

5.関連