2020年4月29日
暫くTwitterで交流。
・掃除
・Compasの広告を貼る
・クレジットカード申し込み
・筋トレ3種
・Javascript講座履修
・未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
10:12
Javascript講座
【JavaScript入門 #3】オブジェクト・プロパティ・メソッドについて理解しよう【ヤフー出身エンジニアの初心者向けプログラミング講座】
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("キャンセルしました");
});
function confiremed(fn) {
const input = window.prompt("実行しますか?");
fn(input);
}
confiremed(function(input)
{
if(input === "実行"){
console.log("リポジトリを削除");
}
});
//実行と入力すると削除
foreach
【JavaScript入門 #8】WebAPIを叩いてみよう!async await構文を使うと簡単!【ヤフー出身エンジニアの入門プログラミング講座】
バックエンドエンジニア 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);
});
});
リファクタリング:集約・分解