自分のブログ名

sheephumanのブログ

ひつじ好きな人間のブログ。

あんまり進んでない

2020年4月29日


暫くTwitterで交流。

 

 

・掃除
・Compasの広告を貼る
・クレジットカード申し込み
・筋トレ3種
Javascript講座履修
・未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース

 

10:12

Javascript講座
JavaScript入門 #3】オブジェクト・プロパティ・メソッドについて理解しよう【ヤフー出身エンジニアの初心者向けプログラミング講座】

www.youtube.com

 

CamelCase fooWidth
snake Case foo_width


PlayGrond (フロントエンドの環境)
┗JSFiddle
https://jsbin.com/?html,css,output


const 再代入・再定義出来ない
let 再代入出来る・再定義できない


メソッドの短縮記法
 const foo = {

 alert() {}
//通常記法
 alert: function(){}
 }
 通常記法は、foo.としたときにプロパティとして扱われる
 
 
 関数式
  const isTweetable = function(text){
  return text.length <= 140;
  };
  
  JavaScript入門 #7】匿名関数、高階関数、コールバック関数を攻略せよ!【ヤフー出身エンジニアの入門プログラミング講座】
  https://www.youtube.com/watch?v=B624WCMhLfA
  コールバック関数:引数に関数
  
  function 高階関数(){
コールバック関数();
  }
  
  
 function cut(food){
  if(//手洗いを終えたら)
  //食材を切ってもらう処理
  
  }
  const unFollow = function(){
console.log("フォローを外しました");
};


function cancellTweet(){
console.log("ツイートをキャンセルしました");
};

function confirmed(fn){
if (window.confirm("実行しますか?"));
fn();
};

confirmed(function(){
console.log("キャンセルしました");

});

 


匿名関数を使ったコールバック関数の例:よく使われる
const unFollow = function(){
console.log("フォローを外しました");
};


function cancellTweet(){
console.log("ツイートをキャンセルしました");
};

function confirmed(fn){
if (window.confirm("実行しますか?"));
fn();
};

confirmed(function(){
console.log("キャンセルしました");

});


gitHubリポジトリ削除を実装する


function confiremed(fn) {
const input = window.prompt("実行しますか?");
 fn(input);
}


confiremed(function(input)
{
 if(input === "実行"){
  console.log("リポジトリを削除");
}
});

//実行と入力すると削除


foreach

JavaScript入門 #8】WebAPIを叩いてみよう!async await構文を使うと簡単!【ヤフー出身エンジニアの入門プログラミング講座】

www.youtube.com

バックエンドエンジニア APIを作る
フロントエンド UIを構築する


async await 非同期 主流

他の書き方

Fetchを使わない書き方
fetch(USERS_API)
.then(function(res){
return res.json();
})
.then(function (users)
{
console.log(users);
});

return res.json();

}

};

そのほかの書き方
 const xhr = new XMLHttpRequest();
 ファイルアップロードの進捗などで使う 
  あまり使われない
  
  function callAPI(){
const xhr = new XMLHttpRequest();
xhr.open("GET", USERS_API);
xhr.responseType = "json";
xhr.send();
xhr.onload = function(){
console.log(xhr.response);
};
}
  
  
  
  
  


Loadの際に読み込む
window.addEventListener("load", async function()
{

const res = await fetch(USERS_API);
const users = await res.json();

users.forEach(function(user)
{
const list = document.createElement("li");
// console.log(user);
list.innerText = user.name;
lists.appendChild(list);


});
});

 


リファクタリング:集約・分解