DocumentオブジェクトとHTML要素の多くの関数をインポートすることで、JavaScriptからHTMLプロジェクトをインポートおよび使用できます.

console.log()
HTMLのようなツリーに要素を表示します.

console.dir()
JSONと同じツリーに要素を表示します.

Document

ブラウザは、大量のHTML情報を含むドキュメントと呼ばれるオブジェクトを渡します.

HTMLドキュメントを展開

.location

現在のドキュメントのURIを返します.

Method

.getElementById()

指定されたIDを持つ要素の参照を返します.

const title = document.getElementById("title");
console.dir(title);

.getElementsByName()

.getElementsByClassName()

.getElementsByTagName()

getElements-は配列形式で値を取得します.

.createElement()

const li = document.createElement("li");
const span = document.createElement("span");
span.innerText = "안녕";
li.appendChild(span);

.appendChild(a)

aをオブジェクトに属するサブアイテムから

.querySelector()

文書内の指定された選択者を満たす最初のElementを返す.".hello:first-child h1"class helloを持つdiv内部のfirst-schild h 1を検索

.querySelectorAll()

セレクタ内の条件を満たすすべての要素のNodeListを返します.

Element

.innerText

インポートされたテキストに含まれるタグも、テキスト表示として認識されます.

const title = document.querySelector(".hello h1");
title.innerText = "hi";

.innerHTML

インポートテキストに含まれるタグを認識し、タグを適用してテキストを表示します.

innerText vs innerHTML<div style='color:black'>A</div> , A

document.body.appendChild()

bodyにhtmlを追加します.

EventTarget

.addEventListener()

const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick(){
	console.log("title was clicked");
}

title.addEventListener("click", handleTitleClick); 
//클릭 이벤트를 감지하는 방법 1

title.onclick = handleTitleClick;
//클릭 이벤트를 감지하는 방법 2

titleという名前のelementをHTMLから見つけたらeventListenerを追加してevent를 listenをクリックし、clickイベントが発生した場合はhandleTitleClickという名前の함수를 동작をクリックします.
HandleTitleClick()じゃない!代わりにJavaScriptを実行してほしい!

Event Handler

使用可能なイベントはelementのconsoleです.dirで確認できます.属性の前にonを付けると、イベントリスナーになります.방법 1のように使用する場合、onを除いて"click"に示す.

.onkeydown

keydownイベントが発生したときに呼び出すコードを示します

.onkeypress

keypress(en-US)イベントが発生したときに呼び出すコードを示します

.onkeyup

keyup(en-US)イベントが発生したときに呼び出すコードを示します

.onmouseenter

.onmouseleave

Window

.resize

function handleWindowResize(){
	document.body.style.backgroundColor = "yellow";
}
window.addEventListener("resize", handleWindowResize);

.copy

役に立つGrammar

JSON

.stringify()
objectやarrayなどのどの値でもstringが生成されます.

.parse()
文字列

Array

.forEach
arrayの各itemに対して関数を実行します.

function sayHello(item){
	console.log(`this is ${item}`);
}
myArray.forEach(sayHello); //방법1

myArray.forEach(item=>{
        console.log(`this is turn of ${item}`);
    }) //방법2. function을 짧게 쓰는 방법!

.filter
削除する項目を除いて、新しい配列を作成します.
itemを削除するのではなく、itemを除外するので、以前の配列は依然として存在します.
filterがfalseを返すと、アイテムは新しい配列に含まれません.

function sexyFilter(item){return item!== 3}
// 3이 아니면 true를 반환

parseInt()

stringをnumberに変換します.

String()

numberをstringに変換します.String(date.getHours()).padStart(2, "0")

Date()

date.now()の乱数を指定します.date.getHours()時間を提供します.

isNaN()

return typeはbooleanであり、Not a numberはtrueを返します.

padStart(,)

1番目のパラメータは増加する長さで、2番目のパラメータはpadding文字です.
stringしか使用できません.
長さ1の文字にpadding「0」を付けて2にします.padstart(2, "0")

setInterval(,)

間隔実行関数.
1番目のパラメータは実行する関数で、2番目のパラメータはms単位の間隔です.

Math()

const chosenImage = images[Math.floor(Math.random() * images.length)];

round丸め0から10

階下階0~9

? アップロード1～10

Button

選択したボタンの情報を取得します.

function deleteToDo(event){
    console.dir(event.target.parentNode.innerText);
    console.log(event.target.parentElement);
}

ボタンをクリックすると、最初のパラメータには、発生したばかりのイベントに関する情報が含まれます.
eventはtargetを与え、targetはクリックしたHTML要素であり、ボタンである.
HTML要素には1つ以上の属性があり、parentElementはクリックされた要素の親要素です.
つまり、ボタンの親に近づくことができます.ここで、ボタンの親はliでli.removeを作れば項目を削除できます.

天気API

Geolocationnavigator.geolaocation.getCurrentPosition(,)ブラウザはwifi、位置、GPSなどを提供しています.
1番目のパラメータに対して実行する関数で、2番目のパラメータはエラー処理関数

です.

function onGeoOk(position){
    const lat = position.coords.latitude;
    const lng = position.coords.longitude;

}  
function onGeoError(){
    alert("Can't find you. No weather for you.");
}

navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);

fetch
JavaScript呼び出しURL.fetch(링크)を実行し、開発者ツールNetwork-AL-Previewで応答結果を確認します.
サーバの応答を待つには、「≪後|Next|emdw≫」を使用して応答を受信する必要があります.

fetch(url).then(response=> response.json()).then(data =>{
        console.log(data);
        console.log(data.name);
    });```