Zenn
Open18

JavaScriptつみあげトレーニングブック

あおいあおい

JavaScript つみトレ　２−１　数値と演算子で計算する

コンソールに文字を出力するコード

main.js
// c2_1_1.js
console.log(3,25);
console.log("Hello");

// c2_1_2.js
console.log(5+2);
console.log(5-2);
console.log(5*2);
console.log(5/2);
console.log(5%2);
console.log(5**2);

// c2_1_3.js
console.log(2+3*4);
console.log(3*4+2);
console.log(2*3+4/5);
console.log(1+2*3-4*5);

// c2_1_4.js.
console.log((2+3)*4);
console.log(3*(4+2));
console.log(2*(3+4)/5);
console.log(1+(2-3+4)*5);
あおいあおい

JavaScript つみトレ　２−２　変数に値を記憶させる

main.js
// c2_2_1.js
let text ='abc' ;
let num = 100;
console.log(text,num);

// c2_2_2.js
let bird = 'ひよこ' ;
bird = 'ニワトリ';
console.log(bird);

// c2_2_3.js
const months =12;

// c2_2_4.js
let a = 1000;
let b = 100;
let c = a-b;
console.log(c);

// c2_2_5.js
let normalPrice = 1000;
let discount = 100 ;
let sellingprice = normalPrice - discount;
console.log(sellingprice);
あおいあおい

JavaScript つみトレ　２−３　少し高度な代入

main.js
// c2_3_1.js
let sum =5;
sum = sum + 7;
sum = sum + 5;
console.log(sum);

// c2_3_2.js
let sum2 = 5;
sum2 += 7;
sum2 += 5;
console.log(sum2);

// c2_3_3.js
let count = 0;
count++;
console.log(count);
++count;
console.log(count);
count--;
console.log(count);
あおいあおい

JavaScript つみトレ　２−４　データの種類に気を配る

main.js
// c2_4_1.js
let num1=4;
let num2=2;
let txt1 ='阿';
let txt2 ='吽';
console.log(num1 + num2);
console.log (txt1 + txt2);

// c2_4_2.js
let num3 =4;
let num4 =2;
let txt ='2';
console.log(num3 + num4);
console.log(num3 + txt);


// c2_4_3.js
console.log(4+2);
console.log(4+'2');

// c2_4_4.js
let num5 =4;
let txt3 = '2';
console.log(num5 +parseInt(txt3));
あおいあおい

JavaScript つみトレ　３−１　関数のメソッドを呼び出す

main.js
// c3_1_1.js
let txt ='子';
console.log('二行目の時点では',txt);
txt='丑';
console.log('四行目の時点では',txt);

// c3_1_2.js
let txt2 =prompt();
console.log(txt2);

// c3_1_3.js
let price =parseInt(prompt('税抜き価格を数字で入力:'));
let tax =price *0.1;
console.log('消費税額:',tax);
あおいあおい

JavaScript つみトレ　３−３　条件を満たすかを判断する

main.js
// c3_3_1.js
let birthYear = parseInt(prompt('生年月日を入力:'));
console.log(birthYear >=2019);

// c3_3_2.js
let birthYear2 =parseInt(prompt('生年を入力:' ));
console.log(1989 <=birthYear2 && birthYear2 <= 2019);

// c3_3_3.js
let birthYear3 =parseInt(prompt('生年を入力'));
let currentYear =2021;
console.log(birthYear3 <0 || currentYear <birthYear3);
あおいあおい

JavaScript つみトレ　３−４　if文で処理を分岐する

main.js
// c3_4_1.js
let birthYear =parseInt(prompt('生年を西暦で入力:'));
if (2019 <= birthYear) {
    console.log('令和');
}
console.log('判定終了');

// c3_4_2.js
let birthYear2 =parseInt(prompt('せいねんを西暦で入力：'));
if (2019 <= birthYear2) {
    console.log('令和');
}
else if (1989 <= birthYear2) {
    console.log('平成');
}
else {
    console.log('対象外');
}
console.log('判定終了');
// c3_4_3.js
let birthYear3 =parseInt(prompt('生年を西暦で入力：'));
if (2020 <= birthYear3) {
    console.log('令和');
}
else if (birthYear3 === 2019) {
    let birthMonth = parseInt(prompt('月を入力：'));
    if (5 <= birthMonth) {
        console.log('令和');
    }
    else {
        console.log('平成');
    }
}
else if(1989 <= birthYear3) {
    console.log('平成');
}
else{
    console.log('対象外');
}
console.log('判定終了')

// c3_4_4.js
let text = prompt('文字を入力してください：');
if (!text) {
    console.log('入力されていません');
}
あおいあおい

JavaScript つみトレ　３−５　if文以外の分岐

main.js
// c3_5_1.js
let season = prompt('好きな季節は？：');
switch (season) {
    case '春':
        console.log('あなたは心清き人です');
        break;
    case '夏':
        console.log('あなたは心強き人です');
        break;
    case '秋':
       console.log('あなたは心深き人です');
        break;
    case '冬':
        console.log('あなたは心広き人です');
        break;
    default:
        console.log('そんな季節はありません');            
}

// c3_5_2.js
const headToleft =true;
let fish =headToleft ?'ヒラメ' : 'カレイ';
console.log(fish);

// c3_5_3.js
const headToleft2 =true
let fish2;
if (headToleft2) {
    fish2 ='ヒラメ';
}
else {
    fish2 ='カレイ'
}
console.log(fish);
あおいあおい

JavaScript つみトレ　４−１　配列に複数の値をまとめる

main.js

 c4_1_1.js
let walks = ['抜き足' , '差し足' , '忍び足'];
console.log(walks);
walks[1] = '駆け足';
console.log(walks);

// c4_1_2.js
let ninja =['佐助','才蔵','六郎'];
let samurai =['信長','秀吉','家康'];
let people = [ninja,samurai];
console.log(people);

// c4_1_3.js
let shogun =['家光','家綱'];
shogun.push('綱吉');
console.log(shogun);
あおいあおい

JavaScript つみトレ　４−２　配列を操作する

main.js

// c4_2_1.js
let daysInMonth = [31,28,31,30,31,30,31,31,30,31,30,31];
console.log(daysInMonth.length)

// c4_2_2.js
let daysInMonth2=[31,28,31,30,31,30,31,31,30,31,30,31];
console.log(daysInMonth2.indexOf(30));

// c4_2_3.js
let week1=['月','火','水','木','金'].fill('祝');
let week2=['月','火','水','木','金'].fill('祝',2);
let week3=['月','火','水','木','金'].fill('祝',2,3);
console.log(week1);
console.log(week2);
console.log(week3);

// c4_2_4.js
let music =['Aメロ','サビ'];
console.log(music);
music.splice(1,0,'Bメロ');
console.log(music)

// c4_2_5.js
let duranDuran =['Simon','Nick','Andy','John','Roger'];
let thePowerStation = duranDuran.slice(2,4);
console.log(duranDuran);
console.log(thePowerStation);
あおいあおい

JavaScript つみトレ　４−３　さまざまな文字列

main.js

// c4_3_1.js
let word = 'JavaScript';
console.log(word[0], word[4]);

// c4_3_2.js
let atsumori = '下天の内を比ぶれば\nゆめ幻の如くなり';
console.log(atsumori)

// c4_3_3.js
console.log('\tabc');
console.log('a\tbc');
console.log('ab\tc');

// c4_3_4.js
console.log('you say \'goodbye\'');
console.log("and I say \"hello\"");

// c4_3_5.js
let mailText = `お館様

お世話になっております
服部です。

今週のシフトをお送りします。
月曜　　服部
火曜　　川村`;
console.log(mailText);

// c4_3_6.js
let animal ='鶴';
let longevity = 1000;
console.log(`${animal}は${longevity}年`);

// c4_3_7.js
console.log(String.raw`\Users\libroworks\Documents\note..txt`);
あおいあおい

JavaScript つみトレ　４−４　文字列を操作する

main.js

// c4_4_1.js
let text = 'ninja';
console.log(text.includes('j'));

// c4_4_2.js
let url = 'https://libroworks.co.jp';
console.log(url.startsWith('https://'));
console.log(url.endsWith('.com'));

// c4_4_3.js
let message = '忍者です。伊賀市出身です。';
console.log(message.replace('です', 'でござる'));
console.log(message.replaceAll('です', 'でござる'));
// c4_4_4.js
let toName = '  服部　様\n';
console.log(toName.trim());

// c4_4_5.js
let poetry = '忍ぶれど　色に出にけり　我が恋は';
console.log(poetry.split(' '));

// c4_4_6.js
console.log('臨'.concat('兵', '闘', '者', '皆', '陣'));
あおいあおい

JavaScript つみトレ　４−５　オブジェクトリテラルでデータをまとめる

main.js

// c4_5_1.js
let scores = {
    math: 98,
    japanese:70,
    science:89,
};
console.log(scores);
あおいあおい

JavaScript つみトレ　５−１　for文による繰り返し

main.js

// c5_1_1.js
for (let i=0; i<=3; i++) {
    console.log('ペテロはイエスを知らないと言う',i);
}
console.log('ニワトリが鳴く');

// c5_1_2.js
let targets = ['マトA', 'マトB', 'マトC'];
for (let i=0; i<3; i++) {
    console.log(`${targets[i]}に手裏剣を投げた`);
}

// c5_1_3.js
let targets2 =['マトA', 'マトB', 'マトC'];
for (let targets of targets2) {
    console.log(`${targets}に手裏剣を投げた`);
}

// c5_1_4.js
let consonants = ['', 'k', 's', 't', 'n'];
let vowels =['a', 'i', 'u', 'e', 'o'];
for (let consonant of consonants) {
    for (let vowel of vowels){
    console.log(`${consonant}${vowel}`);
    }
}
あおいあおい

JavaScript つみトレ　５−２　while文による繰り返し

main.js

// c5_2_1.js
let password = '' ;
while (password !== '川'){
    password = prompt('山?: ');
}
console.log ('入れ');

// c5_2_2.js
do {
    console.log('せめて一度だけでも');
}
while (false)

// c5_2_3.js
let tsumami = 'shiokara';
while (tsumami !== '') {
    console.log ('sake');
    console.log(tsumami);
}
あおいあおい

JavaScript つみトレ　６−１　関数の定義

main.js

// c6_1_1.js

let manufOrder = () => {
    console.log('忍者です。本日手裏剣３個の製造をお願いします。');
}

manufOrder();

// c6_1_2.js

let manufOrder2 = (name) => {
    console.log(`${name}様
        忍者です。本日手裏剣３個の製造お願いします。`);
}

manufOrder2('服部');
manufOrder2('河村');


// c6_1_3.js

let manufOrder3 = (name, order) => {
    console.log(`${name}様
    忍者です。本日、${order}の製造をお願いします。`);
}

manufOrder3('服部','手裏剣3個');
manufOrder3('河村','まきびし4個');
// c6_1_4.js

let getOrder = (shurikenNum, makibishiNum) => {
    orderText = '';
    if (shurikenNum > 0) {
        orderText += `手裏剣${shurikenNum}個`;
    }
    if (makibishiNum > 0) {
        orderText += `まきびし${makibishiNum}個`;
    }
    return orderText;
}

let manufOrder4 = (name, order) => {
    console.log(`${name}様
        忍者です。本日${order}の製造お願いします。`);
}


manufOrder4('服部', getOrder(3, 0));
manufOrder4('河村', getOrder(1, 4));
あおいあおい

JavaScript つみトレ　６−２　さまざまな引数

main.js

// c6_2_1.js

let wokashi = (spring, summer, fall, winter) => {
    console.log(`春は${spring} 夏は${summer} 秋は${fall} 冬は${winter}`);
}

wokashi('あけぼの', '夜', '夕暮れ');

// c6_2_2.js

let wokashi2 = (spring, summer, fall, winter='つとめて') => {
    console.log(`春は${spring} 夏は${summer} 秋は${fall} 冬は${winter}`);
}
wokashi2('あけぼの', '夜', '夕暮れ');

// c6_2_3.js
let introduceFriends = (...friends) => {
    for (friend of friends) {
        console.log(`${friend}は桃太郎の友達。`);
    }
}


introduceFriends();
introduceFriends('犬');
introduceFriends('犬', '猿', 'キジ');
あおいあおい

JavaScript つみトレ　６−３　関数を引数として渡す

main.js

// c6_3_1.js
let words =['beautiful', 'big', 'strong'];
let result =words.filter((word) => word.length > 6);
console.log(result);

// c6_3_2.js
let numbers = [1, 2, 3, 4, 5];
let squared = numbers.map(number => number ** 2);

console.log(squared);