Nomard) html,css,script 기초(1)

// 변수
const vari = 1;

//배열
const arr = [a , b , c];

arr[1] = g;  // const 지만 배열 내부 값은 변경 가능

배열에 요소를 추가하는 방법
arr.push(값)

// 객체
const objec = {
    name: "me",
    points: 10,
    boolean1 : true
    sayHello: function(){}  // 객체 내부에 함수 선언 방법 
};

// 객체 호출 방법 2가지
console.log(player.name)
console.log(player["name"]);

objec.sayHello();

** const는 수정이 불가능한 타입의 선언이지만
const objec 내부의 정보를 수정하는 것은 가능하다 ( objec 자체를 수정하는 것은 불가능 )

객체의 경우 다음과 같은 형태로 요소를 추가할 수 있다.
objec.lastName = "king";

const title = document.querySelector(" css문법 ");  -> ex) .hello ul li
다음의 명령어는 해당 요소가 여러개라도 첫 번째 요소만 가져온다.

const title = document.querySelectorAll(" css문법 ");
다음은 해당 요소를 모두 불러와서 배열로 저장시킨다.

const title = document.getElementsByClassName(" class명 ")
다음은 해당 요소를 모두 불러와서 배열로 저장시킨다


Event
function 실행시킬 함수 이름 () { }
변수.addEventListener( "Event종류", 실행시킬 함수 );


Css에 .clicked{ } 로 스타일을 선언 한 후
자바 스크립트에서
function handleh1Click(){
    const clickedClass = "clicked"
    if(h1.className === clickedClass){
        h1.className = "";
    } else{
        h1.className = clickedClass;
    }
}
다음과 같은 함수를 작성하면
해당 요소에 clicked 클래스를 부여하고 삭제함으로서 스타일을 변화시킬 수 있다.
다만 이 방법은 기존에 요소가 가지고 있던 클래스를 덮어씌우는 방법이므로
classList를 사용하면 더 좋다

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

위의 코드를 더 간단하게 사용하려면
function handleh1Click(){
    h1.classList.toggle("clicked");
}
변수.classList.toggle(토글 하고싶은 클래스 명);
으로 사용할 수 있다.

input 데이터를 가져와서 유효성 검사를 할 경우
docoument.getElementById 나 document.querySelector로 요소를 가져와서
if 문으로 제어할 수 있지만.

form 태그 속에 input을 위치시키면 maxlenght="10" 이나 required 같은 명령어를 실행시킬 수 있다.

fonm 태그 속에 잇는 일반 버튼 또는 submit 속성을 가진 input을 클릭하면
submit event가 실행되고
이를 통해 함수를 작동시키고 싶으면
add.EventListener("submit", ) 을 이용한다.

기본적으로 form에서 submit을 실행하면 웹페이지가 새로고침 된다.

submit으로 어떤 함수를 작동시킬 때 함수의 첫번째 인수(argument)에는 java스크립트가 제공하는
정보들이 저장된다
ex) function onSubmit(information) 함수가 submit으로 실행될 때 informatino에 submit에 대한 정보가 저장됨

또한 submit 시에 자동으로 새로고침 되는 것을 막으려면
information.preventDefault(); 명령어를 실행시키는 것으로 
브라우저가 기본적으로 발생시키는 이벤트들을 멈출 수 있다

브라우저에는 값을 저장할 수 있는 local storage 가 존재한다.
devtools 의 application - local storage에서 확인할 수 있고

localStorage.setItem("Key", "Value" ) 형태로 저장하고
localStorage.getItem("Key") 형태로 불러올 수 있다. // 없는 정보를 불러오면 null이 온다
localStorage.removeItem("Key") 로 삭제할 수도 있다.

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");

const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";

function onSubmit(tomato){
    tomato.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    localStorage.setItem(USERNAME_KEY,username);
    paintGreetings(username);
}

function paintGreetings(username){
    greeting.innerText = `Hello ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);

}

const savedUsername = localStorage.getItem(USERNAME_KEY);

if (savedUsername === null){
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit",onSubmit);
} else{
    paintGreetings(username);
}

clock 만들기

interval 이란?
setInterval(명령어 , ms)
ms마다 명령어를 실행시킨다

timeout(명령어 , ms)
ms 뒤에 명령어를 실행시킨다

출력값이 항상 2자리가 나오게 하고싶을 때  ex) 시간의 초 00 01 04 14 55
"문자열".padStart(2,"0")   ->  String의 길이가 2, 아니라면 앞에 0을 추가한다.
"문자열".padEnd(2,"0")     ->  String의 길이가 2, 아니라면 뒤에 0을 추가한다.

숫자를 문자열로 바꾸는 방법
new Date().getHours();  -> 숫자
String(new Date().getHours())  -> 문자

시간, 분, 초를 Date()로 불러내서 원하는 방식으로 변경한 다음 innerText해준다.
clock.innerText = `${hours}:${minutes}:${seconds}`;

getClock();
setInterval(getClock, 1000);

Math.random();  -> 0 ~ 1사이의 숫자를 랜덤으로 출력한다
Math.round();  -> 소수점을 반올림한다.
Math.ceil();  -> 올림한다
Math.floor();  -> 내림한다

html 태그에 요소 추가하는 방법

const 변수 = document.createElement("태그명");	특정 태그를 생성해서 변수에 저장
const 변수2 = document.createElement("태그명2");	특정 태그를 생성해서 변수2에 저장

변수.appendChild(변수2);  -> 생성된 변수 태그 내부에 변수2 태그를 추가한다.
변수2.innerText = 값;  -> 변수2 태그 내부에 text값을 추가한다.

넣고싶은위치(HTML 내부에 있는 태그).appendChild(변수)   -> html에 변수 태그를 추가한다
(가장 마지막 부분에 추가됨)


To Do List 작성 처럼
사용자가 입력한 정보를 바탕으로 요소를 작성하고 해당요소를 제어하고 싶을 때
function을 여러개 생성할 수 없다.
다만 function의 첫번째 매개변수에 담겨있는 정보를 바탕으로 요소들을 제어할 수 있다.

ex) 사람들이 글쓰기를 누르면 게시글이 생성되는 게시판을 만들 경우
리스트를 생성하는 방법은 createElement와 appendChild 로 자유롭게 가능하다.
게시글 삭제 버튼을 만드는 경우 어떤 버튼이 어떤 리스트를 삭제하게 만들수 있는지
파악하기가 어려운데,
이때 버튼의 이벤트 함수를 function delete(event){ } 로 만들었다면.
우리는 event argument를 통해 부모요소를 찾으므로서 버튼과 리스트를 특정할 수 있다.

to do list에 생성된 버튼을 눌러 해당 버튼이 있는 li를 제거하고 싶다면
const li = event.target.parentElement;	// li 변수에 해당 버튼의 부모요소를 저장시키고
li.remove();							// 삭제시킨다

localStorage.setItem("Key", 값) 으로 값에 key를 붙여서 localStorage에 저장할 수
있다는 것을 배웠다.
또한 array.push(값)을 통해 값을 배열에 저장할 수 있는 것도 배웠다.

하지만
localStorage.setItem("Key", array) 로 배열을 localStorage에 저장하면
문자 형태로 저장되는데, 이는 값을 저장하고, 빼와서 사용하는데 불편함이 발생한다.

그래서 localStorage에 배열을 저장할 때는
localStorage.setItem("Key", JSON.stringify(array)) 를 활용해서
array 내부에 있는 값들이 각각 문자열로 저장되도록 만들어 줘야한다
ex) array = ["a", "b", "c"]; 인 경우
localStorage.setItem("Key", array) -> a,b,c 로 저장됨
localStorage.setItem("Key", JSON.stringify(array)) -> ["a", "b", "c"] 로 저장됨

JSON.stringify([1,2,3,4]) -> "[1,2,3,4]" 배열을 string으로 저장하고 싶을 때 사용하자
JSON.parse("[1,2,3,4]") -> [1,2,3,4] 로 string을 배열로 전환한다.

const parsedToDos = JSON.parse(KEY) 에 저장된 값들은
parsedToDos.forEach(함수명);

function 함수명(item){ } 의 첫 번째 매개변수인 item에 각 값들을 특정하게 만들어준다
따라서 함수를 호출 할 때
함수명(값){ } 으로 호출하고싶은 값을 넣으면 배열에 저장된 값들 중 특정한 값을 불러
올 수 있게 도와준다

이런 함수를 짧게 쓰려면
parsedToDos.forEach((item) => 실행문); 의 형태로 쓸 수 있다.

ex)
function sayHello(item){
console(item);
}
parsedToDos.forEach(sayHello);

대신
parsedToDos.forEach((item) => console.log(item));

배열에 저장된 값을 새로고침 해도 잃지 않으려면
local.Storage에 저장된 값을 배열에 넣어주는 작업을 해야한다.
const parsedToDos = JSON.parse(savedToDos);
toDos = parsedToDos;

배열을 저장할 때 각 값에 id를 부여해서 값들을 구분하고 싶다면
객체를 생성해서 자동으로 id를 부여할 수 있도록 만들어야한다.
const newTodoObj = {
        text:newTodo,
        id: Date.now();
    }
해당 객체에서 text나 id만 꺼내서 쓰고싶으면
newToDoObj.text / newToDoObj.id 로 불러올 수 있다.

localStorage에 저장되있는 값을 제거할 때는 실제로 array에 있는 값을 제거하는 것이 아니라
제거하고자 하는 값이 제외된 array를 생성해서 저장하는 방식을 사용한다.
이 때 배열.filter(함수명) 명령어를 실행하는데
배열.filter() 는 배열에 있는 값들을 차례로 함수에 집어넣고
함수에서 리턴 된 값을 다시 받아온다. 만약 return 값이 없다면 해당 값을 제거할수 있게 된다.

toDos = toDos.filter(toDo => toDo.id != parseInt(li.id));
다음과 같이 선언한다면 toDo의 요소들 중 toDo의 id와 li의 id가 같은 것만 빼고
새롭게 배열을 만들어서 toDos에 저장한다.

날씨
navigator.geolocation.getCurrentPosition()
-> 인수가 2개 필요하다 ( 잘 됐을 때 실행할 함수 , 잘 안 됐을 때 실행할 함수 );

해당 명령어를 실행하면 위치 추적 동의 알람이 뜨고
동의 할 시 현재 나의 위치를 알 수 있다.