東京都で開催する初心者向けのJavaScriptとjQueryを使ってホームページ制作の1日集中セミナーです。 JavaScript・jQueryの入門講座なら、神田ITスクール!

3.4 変数の値の変更

変数の値の変更

3.4 変数の値の変更

 既に値が代入された変数に別の値を代入することで値を自由に変更することができます。

書式:変数へ再度代入

 ※一度変数を宣言した後にその変数を使う場合は「var」を付けません。

凡例:変数へ再度代入

3.4.1 初期化した変数の値を変更するプログラム

 初期化した変数の値を別の値に変更して、変数の値が変化することを確認してみましょう。

ファイル名      :change_value1.html

➢ change_value1.html

<html>
	<head>
		<title>初期化した変数の値を変更するプログラム</title>
	</head>
	<body>
		<h1>初期化した変数の値を変更するプログラム</h1>
		<script type="text/javascript">

			// 変数yearを1964で初期化
			var year = 1964;

			document.write("東京オリンピックは");
			document.write(year);
			document.write("年に、1回目が開催されました。");
                 document.write("<br>");
  
			// 変数に別の値を代入
			year = 2020;

			document.write("2回目は");
			document.write(year);
			document.write("年に、開催が決定しました!");

		</script>
	</body>
</html>

実行結果

解説

 10行目で変数yearを宣言すると同時に値1964に初期化しています。この時のイメージは図 3.4.1のようになります。

   10: var year = 1964;

図 3.4.1 : 変数の宣言と初期化

 そして12~14行目で、document.writeメソッドを使って文字列と変数yearの値を表示させます。ここまでは、今まで学習した内容と同じです。

   12: document.write("東京オリンピックは");
   13: document.write(year);
   14: document.write("年に、1回目が開催されました。<br>");

 その後、18行目で変数yearにはもう一度別の値「2020」を代入します。図 3.4.2をみてイメージして下さい。

    18: year = 2020;

図 3.4.2 : 変数の値の上書き

 変数yearには最初に「1964」が入っていましたが、18行目で「2020」を代入したことで、変数yearの値が変更されました。20~22行目で、別の値が代入された変数yearをdocument.writeメソッドを使って表示させます。実行結果から変数yearの値が「2020」に変更されたことが確認できます。

    20: document.write("2回目は");
   21: document.write(year);
   22: document.write("年に、開催が決定しました!");

NEXT>> 3.5 変数に別の変数を代入

セミナー一覧

法人向けプログラミング研修

Java、PHPの社員研修|新人研修

chromeデベロッパーツール

他のJavaScript講座・スクールのご紹介

ホームページ制作・保守

ホームページ制作・保守

HTML&CSSセミナーも人気!

HTML&CSSセミナーも人気!

まずはHTMLとCSSの知識が必要な方は、こちらのセミナーがおすすめです。
HTML&CSSセミナーはこちら

当JavaScript講座を受講前に受講するHTML講座

ホームページ制作・保守

ホームページ制作・保守

セミナー講師

セミナー講師

主席インストラクター&管理人

PAGETOP
Copyright © 株式会社FusionOne 神田ITスクール All Rights Reserved.
Powered by WordPress & BizVektor Theme by Vektor,Inc. technology.