JavaScriptの学習

概要｜HTMLの学習｜CSSの学習｜ JavaScriptの学習｜JavaScript(canvas)の学習｜ JavaScript(レベルアップ編)の学習｜サイトマップ｜ホーム




モード：パソコン／スマホ

JavaScriptは、Webブラウザー上で実行されるプログラミング言語です。
プログラミングにより、ユーザーのアクションに応じた動的なコンテンツ （文書・音声・映像・グラフィック・アニメーション・ゲームなど）の作成が出来ます。

ここでは、プログラミングの基本的な、文法、演算子、数値・文字列、構文、オブジェクトなどの使い方を学びます。 参考でJavaScriptの書き方一覧を掲載しておりますので、ご覧ください。

Step1 基本形

HTMLドキュメントの基本形です。

  • <!DOCTYPE html>このドキュメントの始まりです。
  • HTMLの定義（<html>～</html>）をします。
  • その中にヘッダー部（<head>～</head>）と
    ボディ部（<body>～</body>を書きます。
  • 表示する内容・プログラムはボディ部の中に記述します。

上記のソースコードはそのままの記述します。（おまじないです。）下記に、そのソースを示します。
実行ボタンを押すと、その内容が表示されます。
※プログラミングの行儀（立ち居振る舞い）は割愛（省略）しております。

HTML　ソース　

Step2 JavaScriptを書いてみる

JavaScriptのdocument.write/Dateオブジェクトを使って、
本日の日付と時間を表示してみましょう。

  • JavaScriptのプログラムは<script>～</script>タグの中に書きます。
  • ドキュメントの書込み：document.write(HTMLドキュメントに書き込む内容)
    書き込んだ内容が表示されます。
  • 日付けの取得（表示形式）；new Date()
HTML　ソース　

練習問題１

  1. 文字を書いてみましょう。"文字"はダブルクォーテーションマークで囲みます。
  2. 演算結果を表示してみましょう。「123 + 456 」「 123 * 456 」「 1 / 3 」など。

Step3 JavaScriptのプログラミング

１．基本文法

  • 変数：値を代入して保持すします。例）ans=1+2。
  • 文：処理単位、文の最後はセミコロン「；」を付けます。
  • 予約語：JavaScriptのキーワード（構文、オブジェクト利用ワード）は
    変数名や関数名としては使用出来ません。

２．演算子

  • 代入演算子：代入(=)
  • 算術演算子：加算(+）、減算（-）、乗算（*）、除算（/）、除算余り（%）, など
  • 比較演算子：等しい（==）、等しくない（ !=）、
    小なり（<）、小なりイコール（<=）、大なり（>）、大なりイコール（>=）、など
  • 論理演算子：論理積（&&）、論理和（||）、否定（!)、など

３．数値・文字列

  • 数値：10進数は「123456789」、実数は「 1.23」ピリオド「.｣を付けて書きます。
  • 文字列：文字の集まりで、ダブルクォート「"」または
    シングルクォート「'」で囲みます。例）"あいうえお"

４．構文

  • 条件分岐(if)：if ( 比較演算 ） ｛ 真の場合の処理 ｝ else ｛ 偽の場合の処理 }
  • 繰り返し(while)：wile ( 比較演算子 ) ｛ 真の場合の繰返し処理 ｝
  • 繰り返し(for)：for ( 初期処理 ; 比較演算 ; 繰返し処理 ) { 真の場合の繰返し処理 }

５．オブジェクト

  • 数値操作：数値変換、数値判定、表示変換、など
  • 文字列操作：文字列の分割・連結・置換・検索・コード変換、など
  • 数学関数：繰り上げ・繰り下げ・絶対値、乱数、三角関数、乗、平方根、対数、など
  • 日付：日付時間の取得・文字・数値変換、など
  • 関数：サブルーチン定義・引数・戻り値
  • フォーム：ボタン、テキストボックス、セレクトボックス、ラジオボタン、チェックボックス、など
  • その他：メッセージ出力、タイマー操作、ドキュメント書込み、など

Step4 簡単なプログラムを作る

数字の１～１０まで加算して、それぞれの加算結果を表示するプログラムを作ります。

  • 繰り返し(for)処理で、初期値１～１０まで、ｉを＋１しながら繰返し処理します。
  • i++ は i= i+ 1 と同じ計算です。
  • rirekiは数値、文字”；”、計算結果、改行タグ<br>を＋で連結します。
  • rirekiの内容を書き込みます。（ドキュメントの書込み：document.write）
HTML　ソース　

練習問題２

  1. 初期値１０～３０まで計算するようにしましょう。
  2. 初期値２、４、６・・・・３０（偶数）まで計算するようにしましょう。

Step5 フォームを理解する

inputフォームの入出力処理及び、ボタン・ラジオボタンの操作処理を理解しましょう。

  • inputタグは<form>～</form>の中に書きます。
  • inputタグの名前は「form名.name名.???」で参照します。
  • inputタグのname名が同じの場合はname名[インデックス（0～n）]で参照します。
    また、radioボタンのグルーピング名は同じname名にします。
  • inputタグのクリック動作は「onclick="サブルーチン名()"」で指定します。
  • サブルーチンは「function サブルーチン名（）｛処理｝」で書きます。
HTML　ソース　

練習問題３

  1. ラジオボタンを選択した場合は出力エリアに、それぞれ"選択１"、"選択２"、"選択３"と
    表示する様にしましょう。
  2. 入力エリアにデータが無い場合は、出力エリアに"データなし"と表示する様にしましょう。

Step6 簡易電卓を作ってみる。

inputタグを使って、値１、値２を入力して、演算子（加算、減算、乗算、除算）を使って、
計算ボタン押下で、小数点第３位まで四捨五入で計算して、値１のエリアに表示します。
またクリアボタンで、入力エリアを初期状態にします。

  • 計算する前に入力データが数値かどうか判定して、数値でなければ、
    エラーメッセージを出して終了します。
    数値の判定はisNaN（Not a Number）オブジェクトで判定します。
    エラーメッセージはalertオブジェクトで出力します。
  • 値１、値２の入力値はparseFloatで数値に変換します。
  • 四捨五入は Math.roundのオブジェクトで計算します。
HTML　ソース　

練習問題４

  1. 合計の四捨五入はしない様にしましょう。
  2. 値１、値２が未入力場合はエラー処理するようにしましょう。
  3. 演算子(%)を追加して、除算の余りを計算出来るようにしましょう。

Step7 カレンダーを作ってみる。

メッセージボックスから年、月を入力して、指定月のカレンダーを作成すします。
出力様式は、年月の見出しを作成して、その月の日、曜日を出力します。

  • メッセージボックスからの入力はwindow.promptオブジェクトを使って、
    年/月の様式で取得します。初期値は任意に設定します。
  • 年、月の設定はsplitオブジェクトで"/"区切り文字で分けて、それぞれ設定します。
  • 年月日、曜日の取得はDate()オブジェクトを使います。
    月は0～11、日は相対日（-1は前月の末日、末日+1は翌月の1日））、曜日は0～６で日～土曜日です。
  • 曜日の表示は、配列で定義した曜日より取得します。
HTML　ソース　

練習問題５

  1. 日～土曜日ごとに改行してみましょう。
  2. 指定の年の１～１２月まで作成してみましょう。
  3. 指定の月の前月、当月、翌月分を作成してみましょう。

Step8 まとめ（総合練習）

万年カレンダーを作成しましょう。
入力した年の１～１２月までのカレンダーを作成します。
作成様式はここをクリックして実行してください。曜日毎に表示して改行してください。
作成したソースは下のテキストボックスに作成して、実行してください。

HTML　ソース　

総合演習問題の解答はここのテキストにあります。 上のテキストボックスに貼り付けて実行してください。

概要｜HTMLの学習｜CSSの学習｜ JavaScriptの学習｜JavaScript(canvas)の学習｜ JavaScript(レベルアップ編)の学習｜サイトマップ｜ホーム