js 基本構文と Maven プロジェクト構成チュートリアルケース

1. jsステートメント

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<title>テスト js ステートメント</title>
		<!-- HTML に js コードを埋め込む -->
		<スクリプト>
			// 2. ループ構造 // 演習 3: 結果をコンソールに出力します。1 億円を毎日半分ずつ使う場合、何日かかるかを出力します。f12 を使って確認します。var f = 0; //日数を記録します。var g = 100000000; //金額を記録します。while( g > 1){
					g = g/2; // お金の変更 f++; // 統計日++
				}
				コンソールログ(f);
				//演習1: 結果をコンソールに出力します。f12を使用して1から10を出力します。for(var i = 1;i < 11;i++){
					コンソールにログ出力します。
				}
				//演習2: 結果をコンソールに出力し、1から10までの合計を出力します。f12を参照してください。var e = 0; //合計を記録します。for(var i = 1;i < 11;i++){
					// e = e+ i;
					e += i;
				}
				コンソールログ(e);
			// 1. 分岐構造 //演習 4: ユーザーが入力した数字に基づいて曜日をポップアップ表示 //var d = prompt("曜日を入力してください:") ;//デフォルトは文字列型です var d = parseInt( prompt("曜日を入力してください:") ) ;//string->number
				スイッチ(d){
					case '1' : console.log("Today is Sunday 1"); // コンソールに結果を出力し、f12 を使用して表示します。 case 2 : alert("Today is Sunday 2"); break;
					ケース 3 : alert("今日は日曜日 3"); break;
					ケース4: alert("今日は木曜日です"); break;
					ケース5: alert("今日は金曜日です"); break;
					ケース6: alert("今日は土曜日です"); break;
					ケース 7 : alert("今日は日曜日 7 です"); break;
				}
				//演習 3: 平年が閏年かどうかを判定する (4 で割り切れるが 100 で割り切れない | 400 で割り切れる) 
				var c = prompt("年を入力してください:");
				c%4==0 && c%100!=0 || c%400==0 の場合{
					alert("うるう年");
				}それ以外{
					alert("平年");
				}
				//演習 2: ユーザーが入力したスコアを受け取り、そのスコアが属するグレードを決定します。var b = prompt("スコアを入力してください:");
				b>=80 && b<=100 の場合
					alert("素晴らしい");
				そうでない場合(b>=60 && b<80)
					アラート("中");
				そうでない場合(b>=0 && b<60)
					アラート("失敗しました");
				それ以外
					alert("入力エラー");
				//演習 1: a>10 の場合は 1 をプレイし、それ以外の場合は 0 をプレイします
				var a = prompt("整数を入力してください");
				もし(a > 10){
					警告(1);
				}それ以外{
					警告(0);
				}
		</スクリプト>
	</head>
	<本文>
	</本文>
</html>

2番目、js配列

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<title>js 配列をテストする</title>
		<!-- js の配列、Java の配列の特徴: 長さを変更できない、単一のデータ型 -->
		<スクリプト>
			//1. js は配列を定義します。機能: 可変長、豊富なデータ型 var a = new Array(); //空の配列 a = new Array(10,1.1,'hello',true,null,10,1.1); //a の長さを変更します console.log(a); //配列のデータを表示します console.log(a.length); //a の長さを取得します a[99] = 0;  
				console.log(a); //配列内のデータを表示する console.log(a.length); //aの長さを取得する、100
				var b = [ ] ; // 空の配列 b = [1,2,3,"jack",1.1];// 代入 for(var i = 0 ; i < b.length ;i++){// トラバーサル console.log(b[i]);// 添え字に従ってデータを出力 }
				//演習 1: 配列内の偶数の合計を求める var c = [1,2,3,4,5,6,7,8];
				//Java の foreach,,,,for...in と同等
				for(変数 i in c){
					コンソールにログ出力します。
				}
				var d = 0 ; // 記録し、for(var i=0 ;i < c.length ;i++){
					c[i] % 2 == 0の場合{
						d+=c[i]; // 合計 }
				}
				コンソールにログ出力します。
		</スクリプト>
	</head>
	<本文>
	</本文>
</html>

3. js関数

ここに画像の説明を挿入

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<title>js 関数のテスト</title>
		<スクリプト>
			// 1. 関数の書き方1: 特定の関数を含むコードブロック // 関数の宣言: 関数 関数名 (パラメータリスト) {関数本体}
				関数a(){
					var b=[1,2,2,3,4];//配列を定義 for(var i in b){//配列を走査 console.log(b[i]);//データを印刷 }
				}
				// 関数 a() を呼び出します。
			// 2. 関数の記述2: 特定の関数を持つコードブロック	
				//関数を宣言: var function name = function(パラメータリスト){関数本体}
				var b = 関数(){
					コンソールログ(100);
				}
				//呼び出し: 関数名 (パラメータ リスト); -- 呼び出される関数が存在している必要があります。 ！
				関数b();
			//3. パラメータを持つ関数を定義して呼び出す function c(a,b){ //パラメータを持つ関数を定義する console.log(a+b);
				}
				c("hello",1); //パラメータ付き関数の呼び出し var d = function(a,b){
					コンソールログ(a+b);
				}
				d(1.1,2.6) より
			//4. パラメータと戻り値を持つ関数を定義して呼び出す function e(a,b){
					return a+b; // 結果を呼び出し元に返す }
				var f = e(1,2);
				コンソールログ(f);
				var g = 関数(){
					return "hello js" ; // 結果を呼び出し元に返す }
				var h = g();
				コンソールログ(h);
			//演習: 文字列中に文字 a が出現する回数を数える function cishu(str,chara){
					var count = 0 ;// 回数を記録する for(var j = 0 ; j < str.length ;j++){// 文字列を走査する var data = str.charAt(j);// 各文字を取得する // 文字 a と比較する if(data == chara){
							//文字の場合は++
							カウント++; 
						}
					}
					return count; //呼び出し元に戻る }
				//cishu 関数を呼び出して、文字列 abcaaaaa に文字 a が出現する回数をカウントします。var count = cishu("abcaaaaa",'a');
				console.log("文字列 a が出現する回数は: "+count);
		</スクリプト>
	</head>
	<本文>
	</本文>
</html>