JavaScript(JS)とは
Web開発等で用いられるフロントエンド言語
JSのライブラリには以下がある
-jQuery:効果やアニメーションの実装が可能なライブラリ
-React：Facebookが開発したUIに特化したライブラリ
-Node.js：サーバサイドでJSを実行するためのライブラリ
基本的コマンド
コンソール（画面への文字出力）
console.log("○○")
()内は""でも''でも可
文末のセミコロンを忘れずに
入力例
console.log("あいうえお");
出力例
あいうえお
変数の代入
プログラムの中では多くの値を用いるため、間違えないように、そして値の変更を容易にするために、変数を用いる。
変数のイメージとしては、変数という箱の中に、文字列や数字などの値が入っている感じ
書き方
let 変数名 = 値（文字列なら"○○"）
入力例
let food = "ラーメン";
console.log(food);
console.log("food");
出力例
ラーメン
food
変数の更新
プログラムは上から順に実行されるため、後から代入された値で変数の中身が更新される
書き方
変数 = 更新結果;
入力例
let number = 1;
console.log(number);
number = number + 8;
console.log(number);
出力例
1
9
定数
定数は変数と異なり更新不可
書き方
const 定数名 = 値
入力例
const food = "soba";
console.log(food);
出力例
soba
出力文字の連結
方法は2つある
1. 出力したい異なる種類の値を+で連結
console.log("文字列"+変数+"文字列");
2. テンプレートリテラルを用いる
console.log('文字列${変数名or定数名}文字列');
入力例
let food = "ラーメン";
//1．の方法
console.log("好きな食べ物は"+food+"です");
//2.の方法
console.log.('好きな食べ物は${food}です');
出力例
好きな食べ物はラーメンです
好きな食べ物はラーメンです
条件分岐①
if(条件式){処理}
文末セミコロンは不要
入力例
const number = 12;
if(number>=10){
console.log("numberは10より大きい");
}
出力例
numberは10より大きい
条件分岐②
ある値によって処理を分岐する場合に利用
switch(条件の値){ case 値1: 処理; break; default: 処理: break; }
breakは忘れない
breakが出るまで処理が続きます
:と;の使い分け注意
: 文中
; 文末({}の外には不要)
defaultは値を指定せずにそれ以外の意
入力例
const color="黒";
switch(color){
case "赤":
console.log("止まってください"):
break;
case "青":
console.log("渡っていいですよ"):
break;
case "黄":
console.log("注意して渡っていいけど無理して渡らないで"):
break;
default:
console.log("それは信号じゃない");
break;
}
出力例
それは信号じゃない
繰り返し処理①
条件式が成り立つ間、処理が繰り返される
while(条件式){処理}
入力例
let number = 1;
while(number<=3){
console.log(number);
number ++
}
出力例
1
2
3
繰り返し処理②
①の初期値、条件式、変数更新をまとめて記述し、条件が成り立つ間、処理が繰り返される
for(変数の初期値;条件式;変数の更新){条件式}
()内の区切りは ;
入力例
for (let i=1;i<=3;i++){
console.log(i);
}
出力例
1
2
3
繰り返し処理③
配列に対する繰り返し処理
配列名.forEach(function(任意の配列の要素の名前){処理内容});
入力例
const numbers =[1,2,3];
numbers.forEach(function(number){
console.log(number);
});
出力例
1
2
3