document object

documentはブラウザがロードしたページを表します.
すべてはドキュメントから始まり、html要素をJavaScriptにインポートすることで変更できます.
ドキュメントをログ出力オブジェクトとして使用するとhtmlタグの内容が表示されます.

出力がdirの場合、オブジェクトのプロパティは階層として出力されます.

searching for elements

getElementsByClassName():複数の要素をインポートするときに書き込み(配列を返す)

getElementsByTagName():タグ名としてインポートします.(arrayに戻る)

getElementById():値を取得します.

querySelector:要素をCSSセレクタで検索できます(ex.h 1:first-schild)
単一の要素を返す
=>helloはclass内部のh 1(id)をインポートできます.
=>最初のelement

のみインポート

条件を満たす3つのすべてを取得する場合は、Selector Allに問い合わせてください.
=>3つのh 1を含むarray

を取得する

querySelector("#hello");getElementById("hello");と同じことをする
ただし、後者はサブエレメントをインポートできません.

event

elementの内部を表示する場合はconsoleを使用します.dir()
デフォルトobjectの要素を表示(すべてjs object)
その前にonを付けたのはイベント

title.addEventListener(「click」):誰かをリスニングしてtitleをクリック→何かする必要がある

documentのbody,head,titleはこれらが重要です
document.body.style~のコマンドは許可されていますがdivなどのコマンドは呼び出せません
その他の要素はquerySelectorまたはgetElementByIdとしてロードする必要があります

title.onclick = handleMouseEnter;
title.addEventListener(“mouseenter” , handleMouseEnter);

위에 두 코드는 동일하나 addEventListener를 선호하는 이유는
removeEventListener을 통해서 event listener을 제거할수있기 때문이다.

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

function handleTitleClick(){
title.style.color = "blue";
}

function handleMouseEnter(){
title.innerText = "mouse is here!";
}

function handleMouseLeave(){
title.innerText = "mouse is gone!";
}

function handleWindowResize(){
document.body.style.backgroundColor = “tomato”;
}
function handleWindowCopy(){
alert(“copier”);
}

title.addEventListener("click",handleTitleClick);
title.addEventListener("mouseenter", handleMouseEnter);
title.addEventListener("mouseleave", handleMouseLeave);

window.addEventListener(“resize”, handleWindowResize);
window.addEventListener(“copy”, handleWindowCopy);

css in javascript

function handleTitleClick(){
//현재 색상을 변수로 지정
const currentColor = h1.style.color;
//변화 후!! 색상을 변수로 지정
let newColor
if(currentColor === 'blue'){
newColor = 'tomato';
} else {
newColor = 'blue';
}
//조건문을 통한 newColor를 색상으로 지정
h1.style.color = newColor;
}

cssファイルで

h1 {
color: cornflowerblue;
}
.clicked {
color: tomato;
}

メモ
jsファイルで

const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick() {
if(h1.className === "clicked") {
h1.className = "";
} else {
h1.className = "clicked";
}
}
h1.addEventListener("click", handleTitleClick);

薄曇り
ここで、JSはHTMLを変更し、CSSはHTMLを表示してstyleを変更します.
これはjsでstyleを直接変更するよりも良いです.

function handleTitleClick() {
//raw value를 그대로 입력하다 오타가 발생할 수 있으므로 변수로 지정
const clickedClass = "clicked";
if(h1.className === clickedClass) {
h1.className = "";
} else {
h1.className = clickedClass;
}
}

以前のクラスが何であれ、classNameはすべてのクラスを置き換えます.
classListでは、クラスをリストとして使用できます.
classListにはいくつかの関数が含まれています.
constainsという名前の関数は、指定したクラスがHTML要素のクラスに含まれているかどうかをチェックします.
removeという名前の関数は、指定したclass nameを削除します.
add関数は指定したclass nameを追加します.

function handleTitleClick() {
const clickedClass = "clicked";
if(h1.classList.contains(clickedClass)) {
h1.classList.remove(clickedClass);
} else {
h1.classList.add(clickedClass);
}
}

より良い機能があります.スイッチ関数はclass nameが存在するかどうかを確認します.
class nameが存在する場合、スイッチはclass nameを削除し、class nameが存在しない場合、スイッチはclass nameを追加します.

function handleTitleClick() {
h1.classList.toggle("clicked");
}

スイッチは開いたままで閉まっているボタンです

function onLoginSubmit(event){
// 브라우저가 기본 동작을 실행하지 못하게 막기 
// event object는 preventDefault함수를 기본적으로 갖고 있음
event.preventDefault();
console.log(event);
}

// submit 이벤트가 발생한다면, onLoginSubmit함수를 실행시킨다는 의미 
// JS는 onLoginSubmit함수 호출시 인자를 담아서 호출함. 해당 인자는 event object를 담은 정보들
loginForm.addEventListener("submit", onLoginSubmit); 

フォームをコミットすると、ブラウザはデフォルトでページをリフレッシュします.<<私たちが望んでいるものではありません.

innerTextは差異innerHTML

どちらも使用できますが、ブラウザで実行されるHTMLを含むにはinnerHTMLを使用する必要があります.

localstorageへの保存方法

localStorage.setItem("鍵名"、"値");//ちょぞう
localStorage.getItem("KEY名");//取得

setInterval,setTimeout,date

const clock = document.querySelector('#clock');

function getClock() {
  //호출하는 당시의 현재날짜랑 시간을 알려줌.
  const date = new Date();
  clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}
// 바로 실행(setTimeout,setInterval은 바로 실행 안하므로 getClock 함수 작성)
getClock();
// 1초 기다렸다 한번만 실행
//setTimeout(getClock, 1000);
// 1초 마다 실행.
setInterval(getClock, 1000);

dateの前にnewの理由を書きます.
//概要:newは新しいオブジェクトの作成に使用(新しい日付オブジェクトのみ作成)
コンソールにDateを入力します.入力するとfunctionとしてプロンプトが表示されます.
JavaScriptにはコンストラクション関数があります.
newを先頭にコンストラクション関数を呼び出すとinstance objectが返されます.
コンストラクション関数を使用してオブジェクトを作成するときに約束された規則(構文)です.
コンストラクション関数はパラメータを受信できます...
constdate=new Date();入力してdate変数を宣言します.
typeof date; 入力すると、objectが返されます.
このように生成されたdateオブジェクトは、前回の授業で学んだようにobjectです.propertyと同じフォーマットを使用できます.

padStart

現在の文字列の先頭に別の文字列を入力し、指定した長さを満たす新しい文字列を返します.入力は、ターゲット文字列の先頭(左側)から適用されます.

//padStart는 앞에 붙고 padEnd는 뒤에 붙음.
// 첫번째 인자는 만족해야할 자릿수, 두번째 인자는 자릿수를 채우지 못하면 사용되어지는 인자
"1".padStart(2,'0');

const clock = document.querySelector('#clock');

function getClock() {
  const date = new Date();
  const housrs = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  clock.innerText = `${housrs}:${minutes}:${seconds}`;
}
getClock();
setInterval(getClock, 1000);

math

const quotes = [
  {
    quote: 'Anyone who has ever made anything of importance was disciplined.',
    author: 'Andrew Hendrixson',
  },
  {
    quote:
      'Don’t spend time beating on a wall, hoping to transform it into a door.',
    author: 'Coco Chanel',
  },
  {
    quote: 'Creativity is intelligence having fun.',
    author: 'Albert Einstein',
  },
  {
    quote:
      'Optimism is the one quality more associated with success and happiness than any other.',
    author: 'Brian Tracy',
  },
  {
    quote:
      'Always keep your eyes open. Keep watching. Because whatever you see can inspire you.',
    author: 'Grace Coddington',
  },
  {
    quote:
      'What you get by achieving your goals is not as important as what you become by achieving your goals.',
    author: 'Henry David Thoreau',
  },
  {
    quote: 'If the plan doesn’t work, change the plan, but never the goal.',
    author: 'Author Unknown',
  },
  {
    quote: 'I destroy my enemies when I make them my friends.',
    author: 'Abraham Lincoln',
  },
  {
    quote: 'Don’t live the same year 75 times and call it a life.',
    author: 'Robin Sharma',
  },
  {
    quote: 'You cannot save people, you can just love them.',
    author: 'Anaïs Nin',
  },
];

const quote = document.querySelector('#quote span:first-child');
const author = document.querySelector('#quote span:last-child');

const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];
quote.innerText = todaysQuote.quote;
author.innerText = todaysQuote.author;

Math.flower:小数点
Math.Ceil:小数点を上へ移動
Math.round:小数点を四捨五入する.

createElement

const images = ['0.jpeg', '1.jpeg', '2.jpeg'];

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

const bgImage = document.createElement('img');

bgImage.src = `img/${chosenImage}`;

document.body.appendChild(bgImage);

to do list

const toDoForm = document.getElementById('todo-form');
const toDoInput = document.querySelector('#todo-form input');
const toDoList = document.getElementById('todo-list');

const TODOS_KEY = 'todos';
let toDos = [];

function saveToDos() {
// JSON.stringify: object나 array나 어떤 것이든 string으로 바꿔줌
// JSON.parse: string을 원래 상태로 바꿈
// localstorage에서는 string만 저장할 수 있기 때문에
// stringify로 Array 자체를 문자열로 만들고 
// 나중에 localstorage에서 가지고 온 다음 parse로 문자열을 Array로 만들어서 불러들임.
// db는 누구나 볼수 있는 것이고 LocalStorage는 오직 당신의 브라우저를 위해서.
  localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}

function deleteToDo(event) {
  const li = event.target.parentElement;
  li.remove();
  // filter는 기본 array를 변경하지 않고 새로운 array를 반환.
  toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));
  saveToDos();
}

function paintToDo(newTodo) {
  const li = document.createElement('li');
  li.id = newTodo.id;
  const span = document.createElement('span');
  const button = document.createElement('button');
  span.innerText = newTodo.text;
  button.innerText = '❌';
  button.addEventListener('click', deleteToDo);
  li.appendChild(span);
  li.appendChild(button);
  toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
  event.preventDefault();
  const newTodo = toDoInput.value;
  toDoInput.value = '';
  // newTodoObj를 만든이유는 newtoDo에서는 localStorage에서는 어떤 것을 지워야 할 지 모름. 
 // deletetodo는 html에서 어떤 요소를 지워야 하는지 알지만 
 // newTodo의 array는 예를 들어 a가 두개 있다면 어느 a인지 알수 없음.
 // 그렇기 때문에 newTodoObj를 만들어서 id를추가한 객체를 만들어서 배열에 넣음.
  const newTodoObj = {
    text: newTodo,
    id: Date.now(),
  };
  toDos.push(newTodoObj);
  paintToDo(newTodoObj);
  saveToDos();
}

toDoForm.addEventListener('submit', handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY);

if (savedToDos !== null) {
  const parsedToDos = JSON.parse(savedToDos);
  toDos = parsedToDos;
  // array.foreach는 받아온 array를 for 반복문 없이 item 하나씩 function에 넣을 수 있음.
  parsedToDos.forEach(paintToDo);
}

geolocation

const API_KEY = 'apikey';

function onGeoOk(position) {
  const lat = position.coords.latitude;
  const lon = position.coords.longitude;
  const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`;
  fetch(url)
    .then((response) => response.json())
    .then((data) => {
      const weather = document.querySelector('#weather span:first-child');
      const city = document.querySelector('#weather span:last-child');
      city.innerText = data.name;
      weather.innerText = `${data.weather[0].main} / ${data.main.temp}`;
    });
}
function onGeoError() {
  alert("Can't find you. No weather for you.");
}
navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);