Zenn
Open24

javaScript学習記録

matsu10matsu10

JavaScriptを勉強しよう

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

main.js
console.log("Hello,JvaScript!!");
matsu10matsu10

JavaScriptつみあげトレーニング02_01

javaScript積み上げトレーニングブックより
数値と演算子で計算する

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);

コードを打つと演算子の意味が理解しやすい

matsu10matsu10

JavaScriptつみあげトレーニング02_02

javaScript積み上げトレーニングブックより
変数を代入する

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);

変数は区別がしやすいようわかりやすくする

matsu10matsu10

JavaScriptつみあげトレーニング02_03

javaScript積み上げトレーニングブックより
02よりも高度な代入について

c2_3_1.js
let sum =5;
sum=sum+7;
sum=sum+5;
console.log(sum);
c2_3_2.js
let sum1=5;
sum1 +=7;
sum1 +=5
console.log(sum);
c2_3_3.js
let count =0;
count++;
console.log(count);
++count;
console.log(count);
count--;
console.log(count);
matsu10matsu10

JavaScriptつみあげトレーニング02_04

javaScript積み上げトレーニングブックより
データの方に気を配る

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 num11=4;
let num22=2;
let txt11='2';
console.log(num11+num22);
console.log(num11+txt11);
c2_4_3.js
console.log(4+2);
console.log(4+'2');
c2_4_4.js
let num10=4;
let txt10='2';
console.log(num10+parseInt(txt10));
c2_4_5.js
let fuzzy;
console.log(fuzzy);

状況によって型を使い分けよう

matsu10matsu10

JavaScriptつみあげトレーニング03_01

javaScript積み上げトレーニングブックより
関数とメゾットの呼び出し

c3_1_1.js
let txt ='子';
console.log('２行目の時点では',txt);
txt = '丑';
console.log('4行目時点では',txt);
c3_1_2.js
let txt1=prompt();
console.log(txt);
c3_1_3.js
let price=parseInt(prompt('税抜き価格を数字で入力：'));
let tax=price*0.1;
console.log('消費税額：',tax);
matsu10matsu10

JavaScriptつみあげトレーニング03_02_03

javaScript積み上げトレーニングブックより
条件分岐

Jc3_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);
matsu10matsu10

JavaScriptつみあげトレーニング03_04

javaScript積み上げトレーニングブックより
if文処理分岐

c3_4_1.js
let birthYear4=parseInt(prompt('生年を西暦で入力'));
if(2019<=birthYear4){
    console.log('令和');
}
console.log('判定終了');
c3_4_2.js
let birthYear5=parseInt(prompt('生年を西暦で入力'));
if(2019<=birthYear5){
    console.log('令和');
}
else if(1989<=birthYear5){
    console.log('平成');
}
else{
    console.log('対象外');
}
console.log('判定終了');
c3_4_3.js
let birthYear6=parseInt(prompt('生年を西暦で入力'));
if(2020<=birthYear6){
    console.log('令和');
}
else if(birthYear6===2019){
    let birthMoth=parseInt(prompt('月を入力'));
    if (5<=birthMoth){
        console.log('令和');
    }
    else{
        console.log('平成');
    }
}
else if(1989<=birthYear6){
    console.log('平成');
}
else{
    console.log('対象外');
}
console.log('判定終了');
c3_4_4.js
let text=prompt('文字を入力してください：');
if(!text){
    console.log('入力されていません。');
}
matsu10matsu10

JavaScriptつみあげトレーニング03_05

javaScript積み上げトレーニングブックより
if文以外の処理分岐

3_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 headToLeft = true;
let fish;
if (headToLeft){
   fish = 'ヒラメ';
}
else{
   fish='カレイ';
}
console.log(fish);
matsu10matsu10

JavaScriptつみあげトレーニング04_01

javaScript積み上げトレーニングブックより
複数の値を配列にまとめる

4_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);
console.log(people[0][0]);
c4_1_3.js
let shogun=['家光','家綱'];
shogun.push('吉綱');
console.log(shogun);
shogun.unshift('秀忠');
console.log(shogun);
let matsudaira=['家康','健'];
shogun=shogun.concat(matsudaira);
console.log(shogun);
shogun.splice(5,1);
console.log(shogun);
let shodai=shogun.pop();
console.log(shogun);
console.log(shodai);
shogun.unshift(shodai);
console.log(shogun);
matsu10matsu10

JavaScriptつみあげトレーニング04_02

javaScript積み上げトレーニングブックより
配列を操作する

c4_2_1.js
let daysInMonth=[31,28,31,30,31,30,31,30,31,30,31];
console.log(daysInMonth.length);
console.log(daysInMonth.includes(28));
console.log(daysInMonth.includes(29));
c4_2_2.js
let daysInMonth2=[31,28,31,30,31,30,31,30,31,30,31];
console.log(daysInMonth2.indexOf(30));
console.log(daysInMonth2.lastIndexOfindexOf(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 thePowerStaition=duranDuran.slice(2,4);
console.log(duranDuran);
console.log(thePowerStaition);
matsu10matsu10

JavaScriptつみあげトレーニング04_03

javaScript積み上げトレーニングブックより
さまざまな文字列

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
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`);
matsu10matsu10

JavaScriptつみあげトレーニング04_04

javaScript積み上げトレーニングブックより
文字列を操作する

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('兵','闘','者','皆','陣'));
matsu10matsu10

JavaScriptつみあげトレーニング04_05

javaScript積み上げトレーニングブックより
オブジェクトリテラルでデータをまとめる

c4_5_1.js
let scores={
    math:98,
    japanese:70,
    science:89,
};
console.log(scores);
console.log(scores['math'],scores.japanese);
let subject='science';
console.log(scores[subject]);
scores.science='欠席';
scores['english']='A+';
console.log(scores);
console.log('music'in scores);
matsu10matsu10

JavaScriptつみあげトレーニング05_01

javaScript積み上げトレーニングブックより
for分による繰り返し

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 target of targets2){
    console.log(`${target}に手裏剣を投げた`);
}
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}`);
    }
}
matsu10matsu10

JavaScriptつみあげトレーニング05_02

javaScript積み上げトレーニングブックより
Wile文を使った繰り返し処理

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);
}

最後の問題は繰り返しが何度も続くので使わない

matsu10matsu10

JavaScriptつみあげトレーニング6_01

javaScript積み上げトレーニングブックより
関数の定義を理解しよう

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

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


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)=>{
    let 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));
matsu10matsu10

JavaScriptつみあげトレーニング6_02

javaScript積み上げトレーニングブックより
さまざまな引数

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('犬','猿','キジ');
matsu10matsu10

JavaScriptつみあげトレーニング7_02

javaScript積み上げトレーニングブックより
標準組み込みオブジェクトを利用する

c7_2_1.js
let yesterday=new Date(2021,11,9);
let today=new Date(2021,11,10);
let tomorrow=new Date(2021,11,11);

console.log(yesterday);
console.log(today);
console.log(tomorrow);
c7_2_2.js
let day1=new Date(1970,0,1,0,0,0);
let day2=new Date();
day2.setTime(0);

console.log(day1);
console.log(day1.getTime()/1000/60/60);
console.log(day2);
console.log(day2.getTime()/1000/60/60);
matsu10matsu10

JavaScriptつみあげトレーニング7_03

javaScript積み上げトレーニングブックより
プロパティとメゾットを追加する

c7_3_1.js
let obj={};
obj.firstname='taro';
obj.lastname='yamada';
console.log(obj);
let obj2={};
obj2.firstname='taro';
obj2.lastname='yamada';
obj2.getFullname=function() {
    return `${this.firstname} ${this.lastname}`;
};

console.log(obj2);
console.log(obj2.getFullname());
c7_3_3.js
let obj3={
    firstname: 'taro',
    lastname: 'yamada',
    getFullname: function(){
        return `${this.firstname} ${this.lastname}`;
    }
};

console.log(obj3);
console.log(obj3.getFullname());
c7_3_4.js
let obj4= {
    firstname: 'taro',
    lastname: 'yamada',
    getFullname() {
        return `${this.firstname} ${this.lastname}`;
    }
};

console.log(obj4);
console.log(obj4.getFullname());
matsu10matsu10

JavaScriptつみあげトレーニング7_04

javaScript積み上げトレーニングブックより
変数のスコープを知る

c7_4_1.js
let assingn_tool=()=>{
    let tool='手裏剣'
}


assingn_tool()
console.log(tool)
matsu10matsu10

JavaScriptつみあげトレーニング8_01

javaScript積み上げトレーニングブックより
ＤＯＭについて知る

c8_1_1.js
window.console.log('にんにん');
console.log('にんにん');
matsu10matsu10

JavaScriptつみあげトレーニング8_02

javaScript積み上げトレーニングブックより
要素を選択する

c8_2_1.js
let elemnt = document.getElementById('text');
elemnt.innerText = '変更してやったり';
c8_2_2.js
let element =document.querySelector('.chapter_name');
element.hidden=true;
c8_2_3.js
let elementList=document.querySelectorAll('p');
for (element of elementList){
    let replaced=element.innerText.replace('です','でござる')
    element.innerText=replaced;
}
matsu10matsu10

JavaScriptつみあげトレーニング8_03

javaScript積み上げトレーニングブックより
要素を追加・削除する

c8_3_1.js
let newElement=document.createElement('p');
newElement.innerText='新たな要素';
document.body.appendChild(newElement);
c8_3_2.js
let input=document.querySelector('input');

let newElement2=document.createElement('p');
newElement2.innerText='新たな要素';
document.body.insertBefore(newElement,input);
c8_3_3.js
let target=document.querySelector('div');
let parent=target.parentElement;
parent.removeChild(target);