KIMUSON BLOG

きむそんの雑記ブログ

【開発日記】フロントエンド技術の総復習#8 「JavaScriptの文法まとめ」

この記事をシェアする

やったこと

本日はひたすらJavaScriptの文法を勉強しました。

もともとJavaをやっていたので、取り組みやすかったおかげで1日で文法の理解は完了しました。

ちなみに今回はドットインストールは使わずに以下のサイトで勉強しています。

JavaScript入門
http://www.pori2.net/js/

上記のもので勉強した理由は、単純に動画よりも早く効率的に学べると思ったから。

Javaと書き方が似ているので動画でゆっくり学ぶ必要はありませんでした。

いちよう、勉強したアウトプットとしてJavaScriptの基本文法をまとめていく。
※一部のソースは、「JavaScript入門JavaScript入門」を参考にしています。

ソースを書く場所

JavaScriptはhead要素の中のscript要素の中にソースを記述する。

<head>
  <script>
         ~JavaScriptのソース~
       </script>
</head>	

アラートの出し方

alert("アラートテスト");  //文字列の表示
alert(5+6);  //数値や計算式の表示
alert( 9 + "月" );  //数値と文字の結合

document.writeの使い方

document.write("これは<strong>JavaScript</strong>です");

varの使い方

var num = 100;     //数字
var str = "分";  //文字
document.write( "<br>" + num + str );

functionの使い方(ボタン実装)

 function fncTest()
 {
 	var message = "関数を呼び出し";
 	alert( message );
 }

functionの使い方(引数実装)

 var a;
 function fncReturnTest(a)
 {
 	return a;
 }
 alert( fncReturnTest("引数テスト") );

functionの使い方(引数複数実装)

 var b;
 var c;
 function fncReturnTest(b,c)
 {
 	var result = b + c;
 	return result;
 }
 alert( fncReturnTest(1,2) );

IF文の使い方

 var n1 = 3;
var n2 = 6;
var n3 = n1 * n2;

if( n3 <  50 ){
	alert(n3);
}else{
	alert("対象外");
}

switchの使い方

//曜日取得
var today = new Date();
var week  = today.getDay();

//曜日を入れる変数
var str;

//条件分岐
switch (week) {
  case 0: str="日"; break;
  case 1: str="月"; break;
  case 2: str="火"; break;
  case 3: str="水"; break;
  case 4: str="木"; break;
  case 5: str="金"; break;
  default : str="土"; break;
}

document.write("<br>"+"今日は" + str + "曜日です。");

Arrayと配列の使用

//配列を利用
//配列yobiに各曜日の名称を入れる
var yobi = new Array();

yobi[0] = "日曜日";
yobi[1] = "月曜日";
yobi[2] = "火曜日";
yobi[3] = "水曜日";
yobi[4] = "木曜日";
yobi[5] = "金曜日";
yobi[6] = "土曜日";

//今日の日付データを取得し、それから曜日を取得する
var today = new Date();
var week  = today.getDay();

document.write("<br>"+"今日は"+yobi[week]+"です!(配列を利用したバージョン)");

for文

var river = new Array(
"日本の川の長さランキング",
"信濃川",
"利根川",
"石狩川",
"天塩川",
"北上川"
);

document.write("<table>");
for ( var i = 1 ; i <= 5 ; i++ ){
  document.write("<tr><td>" + i + "位</td><td>" + river[i] + "</td></tr>")
}
document.write("</table>");

while文

var num = 0;    //連番を入れる変数
var gokei = 0;  // 連番の合計を入れる変数

//gokeiが5桁(10000)より少ない間繰り返す
while ( gokei < 10000 ){
  num++;
  gokei = gokei + num ;
}

//5桁に達した際の数を書き出す
document.write( "<br>" + num );

まとめ

意外にも基礎文法レベルは勉強できたので、次はもう少し応用を勉強していこうと思います。