Arrayの練習

Array

local, grobal variables
declareing variables inside Javascript function, code can only use the function.

  var "variables name"= "something variables"; grobal

  function myFunction() {
  var carName("variables name") = "Volvo"; this is local variables: code here CAN use carName
}

 //code here can NOT access the carName(local variables)

arrray .length of last index number

declareing: var fruits = ["Banana", "Orange", "Apple", "Mango"]

Array.forEach() calls a function for each array element. That is good, I think.

<button> に.forEach() のmethodを与えようとするが失敗。function でfunction makelist2(value) をcallしたかった。

Adding elements with high index can create undefined "holes" in an array.

 document.getElementById("").innerHTML = points[0];


 var points = new.arrary(40); //typeof undefined

 var points = new.array(40, 100); // return "40"

 var points = [40];  //return "40"

argument 引数（ひきすう）、(書物・詩)要旨,あらすじ

var androids = ["Lolipop", "Marshmallow", "Nougat", "Oreo", "Pie"]
androids.slice(1, 3)
returns "Marshmallow" "Nougat"
slice() method is given two arguments, it selects array elements from the start argument, and up to (but not included) end argument.

slice() method とsplice() method で同じarrayを使用すると、splice()されたものが反映する。
.slice() の場合は新たに arrayが作られる。オリジナルには一切何も加えられない。

.splice() adds new elements to arry(to the original array and remains array), and returns an array with the deleted elements.

splice() と slice() でのnumberとargumentの関係の違いJavaScript Array Methods

var fruits =["Banana", "Orange", "Apple", "Mango"];

sort() and array index[]

The lowest mumber is .

	var cars = [
	{type:"Volvo", year:2016},
	{type:"Fiat", year:2005},
	{type:"BMW", year:2010},
	{type:"Honda", year:2012},
	];

CSS text-transfrom property

reduce()

A function each array elements to a single value. If array elements are number, reduce() method add all numbers in an array.

filter()

filter() method creats a new array with array elements passed the test.

Array.every()

every() method check if all array values pass a test.

Array.indexOf(item, start)

var d = new Date(2016, 6, 24) とすれば、2016年7月24日の曜日が分かる。

two digits years will be interpreted as 19xx:
one digit years will be interpreted as 19xx:

One day(24 hours) is 86 400 000 milliseconds.

.toDateString() method converts a date to a more readable format.

	var d = new Date(2019, 08, 20, 12, 33, 40);
    
	⇕ 同じ結果 double quatationでくくるか、commmaで分けるか。ミスするとinvalid Date となるか空欄になる。

    var d = new Date("2019-08-20T12:33:40Z)

var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
This array has index 0 to 11.

	var d2 = new Date();
    var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    document.getElementById("getmontsI").innerHTML = months[d2.getMonth()];

JavaScript Date Methods

.getFullYear() 4 digit of year
.setFullYear() set the year(2019, 12, 10)

    var today, someday, textC;
    today = new Date();
    someday = new Date();
    someday.setFullYear(2019, 4, 20);

    if (someday > today) {
    	textC = "Today is before May 20, 2019.";
    } else {
    	textC = "Today is after May 20, 2019.";
    }
    document.getElementById("compareday").innerHTML = textC;

Math.pow() Math.pow(9, 2); //returns 81
Math.pow(9, 3); //returns 729

Math.sqrt() Math.sqrt(81); //returns 9 (root9)

Math.ceil() Math.ceil(5.2); //returns 6
Math.floor() Math.floor(5.2); //returns 5

sin cos ほぼ忘れてしまっている

sinθ=b/a
cosθ=c/a
tanθ=b/c =sinθ/cosθ

	Math.sin(90* Math.PI / 180);  returns 1 sine of 90°/90 degrees

	Math.cos(0* Math.PI / 180); //returns 0 cosine of 0°/0 degrees

	Math.tan(30*Math PI / 180); //returns 0.8660254037844387 tangent of 30°/30 degrees

Math.min(); Math.max();
Math.random(); Math.random() returns a number between 0(inclusive) and 1(exclusive).

JavaScript Math Object tutorial
JavaScript Math Reference

Using Math.radom() with Math.ceil() or Math.floor() returns a random integer between 0 and 9(both included).
Math.ceil(Math.random()* 10);
Math.floor(Math.random()*10);

Use (Math.)min and (Math.)max :(min, max) = (1, 50)

 <button onclick="document.getElementById('random-minmax').innerHTML = getandI(1, 50)">1-50</button>
    
    <p id="random-minmax"></p>

    <script>
    function getandI(min, max) {
    	return Math.floor(Math.random()*(max - min + 1)) + min;
    }
    </script>

Boolean()

Anything is true. Number, string, minus number, "Anything(Not a empty one) string is " true. 'Even the string "false" is ' true. 'Any xepression(except zero/0) is true.

var b = 10/"Y";
Boolean(b); //returns false

var b = '10/"Y"';
Boolean(b); //returns true

var b = false;
Boolean(b); //returns false

var b = "" //""(empty string)
Boolean(b); //returns false

var b = 0;
Boolean(b); //returns false

var b =-0; //minus zero
Boolean(b); //returns false

var x = false;  // typeof; numeber
var y = new Boolean(false); //typeof; object

//(x==y) is true, x nad y have the same value

//(x===y) is false, x is number and y is object, they are different types

var x = new Boolean(false);
var y = new Boolean(false);

//(x===y) is false, because objects cannot be compared

Comparing two JavaScript objects will always return false.

JS Comparison のtableが凝っていたのでCSSを調べてみる。

.w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}

.w3-table-all{border:1px solid #ccc}

.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}
.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}

.w3-table-all tr:nth-child(odd){background-color:#fff}
.w3-table-all tr:nth-child(even){background-color:#f1f1f1}

.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc}

.w3-centered tr th,.w3-centered tr td{text-align:center}

.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top}

.w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px}

<td rowspan="2"> </td> となっていて2段や3段になっているだけだった。

JavaScript Comparison

Input your age

    function votingage() {
    	var age, voteable;
    	age =
    	Number(document.getElementById("agevote").value);
    	if (isNaN(age)) {
    		voteable = "Input is not a number";
    	} else {
    		voteable = (age < 18) ? "Too young" : "Old enough";
    	}
    	document.getElementById("vote-result").innerHTML = voteable + " to vote.";
    }

declareing some variables need to input a comma(,) between them. コンマ (,) を入れ忘れる。script 全部停止 :(

The button time-based greeting.

swich statement is strict comparison(===). The values must be of the same type to match. Compare string, number, object,

Switch syntax

switch(expression) {
	case x:  //colon
	//code block to be excuted

	break;  //semicolon

	case y: //colon
	//code block to be excuted

	break; //semicolon

	default:  //colon
}

var text;
document.getElementById("ty1").innerHTML = text;

returns undefined

var text2 = "";
document.getElementById("ty2").innerHTML = text2 + "<br>" + typeof "";

text2 is string but nothing in there. no character.

for loop syntax

for (statement1; statement2; statement3){
	//code block to be excuted
}
If there is no statement2, must provide break; inside the loop.

i1++ :increment があることでindex number の最大値をプラス1超えさせる。loopするはずだがindexに無い数値なので出力されない。ということ？であってるのかな。

JS Do/While loop

var text5 ="";
var i3 =-3;
do {
	text5 += "<br>The number is " + i3;
	i3++;
}
while (i3 < 5);
document.getElementById("dowhile").innerHTML = text5;

	.flexbox1 {
		display: flex;
		flex-flow: row wrap;
		justify-content: start;
	}
	.flexbox1 > div {
		padding: 10px;
	}

visibility property:
visibility: visible|hidden|collapse|initial|inherit;

var abc = ["a", "b", "c", "d", "e", "f", "g"];
var i6 = 0;
var text6 = "";
while (abc[i6]) {
	text6 += abc[i6] + "<br>";
	i6++;
}
document.getElementById("dowhileIndex").innerHTML = text6;

	.containergrid {
		display: grid;
		grid-template-columns: auto auto;
		justify-content: start;
		grid-gap:15px;
			}
	.containergrid > div {
		padding: 10px;
	}

var text7 ="";
var i7;
for (i7 =0; i7 <10; i7++) {
	if (i7 === 4) {break; }  //jump out of a loop
	text7 += "The number is " + i7 + "
";
}
document.getElementById("break1").innerHTML = text7;

var text8 ="";
var i8;
for (i8 = 0; i8 < 9; i8++) {
	if (i8 === 4) {continue; } /*loop will skip the step 
	where i8 = 4. loop will continue */
	text8 += "The number is " + i8 + "<br>";
}
document.getElementById("continue1").innerHTML = text8;

var movies = ["Fight Club", "Panic Room" "Zodiac", "Social Network", "Gone Girl"];
var text9 ="";
/*
list: {
	text9 += movies[0] + "<br>";
	text9 += movies[1] + "<br>";
	text9 += movies[2] + "<br>";
	break list;
	text9 += movies[3] + "<br>";
	text9 += movies[4] + "<br>";
}  */
var i9;
list:{
	for (i9 = 0; i9 < 5; i9++){
		if (i9 ===3) {break list;}
		text9 += movies[i9] + "<br>";
	}
}
document.getElementById("movies1").innerHTML = text9;

CSS transform
CSS text-decoration