☆HTML☆
JavaScript Basics
☆JavaScript☆
'use strict'
/*--文字列の表現、基礎--*/
console.log('Hello Would from main js!')
console.log("it's me!")
console.log('it\'s me!')//文字列の表現は''または""で行う。文字列の中で'を使う場合は、""で囲む方法と使用したい'の直前に\を使う方法がある。
console.log('Hello\n \tWorld')// \nは改行、\tはtabという意味を持つ。
console.log('Hello'+'world')//+を使用すると文字列をつなげることが出来る。
/*--数値計算、定数、変数--*/
console.log(10 + 3)//足し算
console.log(10 - 3)//引き算
console.log(10 * 3)//掛け算
console.log(10 / 3)//割り算
console.log(10 % 3)//余り
console.log(10 ** 3)//べき乗
console.log(2+3*10)//掛け算を優先して計算される。
console.log((2+3)*10)//足し算を優先して計算される。
const teisu = 150; //定数の宣言。constを使用する。constで宣言された数値は再代入が出来ない特性を持つ。（例えば、この宣言以降のプログラムでprice=170;と値を代入してもしてもエラーになってしまう。）
console.log(teisu * 160);
console.log(teisu * 100);
let hensu = 150;//変数の宣言。letを使用する。letはconstと違い、値の再代入が可能。
console.log(hensu * 160);
hensu = 100;
console.log(hensu * 160);
let price = 100;
price = price + 1;
price += 1;
price++;//全て意味は同じ、1を足している。
/*--データの型--*/
//typeofは演算子であり、型を調べる事が出来る。
console.log(typeof 'hello');//文字列(String)
console.log(typeof 5);//数値(Number)
console.log(typeof true);//真偽値(Boolean)
console.log(typeof undefined);//Undefined
console.log(typeof null);//Null バグでobjectと表示される。
console.log('5' - 3);//文字列の宣言を自動的に数値に変換してくれるので計算が出来る。
console.log('5' + 3);//+は文字列を繋げるという意味を持つため、53と表記される。
console.log(parseInt('5',10) + 3);//parseInt('5',10)で5を10新数の整数値に変換することが出来、数値同士の計算が可能になる。
console.log(parseInt('Hellow',10));//数値に変換できない文字列では、Not a Numberの略でNaNと表記され、数字型の値の一種となる。
const Bool = 1300;
console.log(Bool > 1000)//>などの比較演算子を用いると真偽値が表示される。
console.log(Bool >= 1000)//左辺は右辺より等しいもしくは大きいか
console.log(Bool === 1000)//二つの値が等しいか
console.log(Bool !== 1000)//二つの値が異なるか
//falseとして評価される値->0,null,undefined.'',false
//trueとして評価される値->上記以外
console.log(Boolean(null))//falseとして評価
console.log(Boolean('hello'))//trueとして評価
/*--条件式（if,条件演算子,論理演算子,switch)--*/
const score = 40;
if(score>=80){
console.log('Great!');
}else if(score>=60){
console.log('Good!');
}else{
console.log('Bad!');
}//{}で囲った部分をブロックと呼ぶ。命令の終わりは;を付けるというルールがあるが、ブロックで終わる場合は付けない。
const ten = 30;
ten >= 80 ? console.log('Great!') : console.log('Bad!')//条件演算子を使用した条件分岐文の書き方。if文と比べ、短く書けるが、慣れていないと少し読みづらいという特徴を持つ。
const score2 = 70;
const name = 'wada';
if(score2>=50 && name==='wada'){
console.log('Good job!');
}//論理演算子を使用した条件式 &&はANDの論理演算子、||はORの論理演算子、!はNOTの論理演算子
const singo ='yellow';
switch(singo){
case 'red':
console.log('Stop!');
break;
case 'yellow':
console.log('Caution!');
break;
case 'blue':
case 'green':
console.log('Go!');
break;
default:
console.log('Wrong signal!')
}//greenとblueは続けて書く事でどちらに当てはまってもGo!と表記されるように命令している。
/*--ループ処理(for,while,do~while)--*/
for(let i=1;i<=10;i++){
//console.log('hello');//helloを10回表示
//console.log('hello' + 1);helloの後にカウンターの値(i)を表示
console.log(`hello ${i}`);//テンプレートリテラルを使用したカウンター値の表示、文字列に変数を埋め込む記法。${}のブロック内の値や計算式を文字列に変換する。``(バッククォート Shift+@)を使用して書く点に注意
}//iは1ずつ増やしながら再代入するため、constでは無くletを使用。
let hp = 10;
while(hp>0){
console.log(`${hp} HP left!`);
hp -= 15;
}
hp = -50;
do{
console.log(`${hp} HP left!`);
hp -= 15;
}while(hp>0)//while文は条件式の評価->処理の流れ、do~while文は処理->条件式の評価の流れ、従ってdo~while文では、始めから条件を満たしていない処理の場合でも、条件式の評価がブロック内の処理の後に行われる為、hpの値が必ず一度は表示される。
for(let i=1;i<=10;i++){
if(i%3===0){
continue;//continueはループをスキップする為の命令、この式はiが3の倍数の時、処理をスキップしている。
}
if(i===8){
break;//breakはループを終了させる為の命令
}
console.log(i);
}
/*--関数、引数--*/
function showAd(){
console.log('---ad---');
}//functionは関数の宣言を行うキーワード、ブロック内にその関数の処理を入力する。
showAd();//関数の呼び出し。()を付けるのを忘れないよう注意
console.log('wada is great!');
console.log('wada is great!');
console.log('wada is great!');
showAd();
function showAd(message='Ad'){//Adは関数を定義する値（仮引数）と呼ぶ。
console.log(`---${message}---`);
}//変数messageを宣言、これは以下の文でshowAd関数が呼び出され、引数(ここではHeader Ad,Footer Ad)を渡された際の受け皿の役割を持つ。
showAd('Header ad');//Header adは関数を呼び出されるときに渡される値（実引数）と呼ぶ。
console.log('wada is great!');
console.log('wada is great!');
showAd();//引数が何も渡されない為、messageに設定したデフォルト値であるAdが使用される。
console.log('wada is great!');
showAd('Footer ad');
function sum(a,b,c){
console.log(a+b+c);
return a+b+c;//return a+b+c で処理結果を値として返している。(返り値)またこの宣言をすることで、関数を式にそのまま入れて計算が出来るようになる。(ここではtotalの計算を指す。)また、returnを関数内に書くと、その時点で値が戻され、その後の処理(ここではconsole.log(a-b-c))は実行されないので注意が必要である。
console.log(a-b-c);
}//関数宣言での表記方法
sum(1,2,3);
sum(4,5,6);
const total = sum(1,2,3) + sum(4,5,6);
console.log(total);
const kei = function(a,b,c){
return a+b+c;
};//関数式(関数を定数や変数に値として導入)での表記方法,この表記方法ではブロックの後に;を付ける必要がある。
const total2 = kei(1,2,3) + kei(4,5,6);
console.log(total2);
const kei2 = (a,b,c) => a+b+c;//アロー関数での表記方法,処理の中身がreturnするだけの場合このように矢印でreturn先の値を書くだけで、処理が成立する。
const total3 = kei2(1,2,3) + kei2(4,5,6);
console.log(total3);
const double = a => a*2//aを渡すとaを2倍にして返すという式
console.log(double(4));
function f(){
const x = 1;//ブロック内で宣言された定数や変数はそのブロック内でのみ有効である。(例えば、このブロック外でconsole.log(x);と書いてもエラー表記になる)
console.log(x);
}//f()という関数を作成
f();//f()という関数を呼び出す。
const x = 2;//ブロック外で宣言した定数なので、全ての範囲で有効となる。（グローバルスコープと呼ぶ） 同じ名前だが、ブロック内のxとは違う値を持つ別の定数となる。また、ブロック内で同名の宣言がある場合、そのブロック内ではそちらが優先される為、2つのconsole.log(x);はそれぞれ1,2と表記される。
console.log(x);