JavaScript 기본 개념 정리 1

심주흔·2022년 11월 30일
0
post-thumbnail

NomardCoders's VanillaJS Chorme 강의를 완강하면서 중요하다고 생각하는 것이나, 기록이 필요하다고 생각하는 내용을 남긴다.
(아주 기초적인 것부터 ~ 이해가 어려웠던 것 까지)

🐼 <.js>, <.css> 파일을 .html 파일로 불러오는 방법

기본적인 형태이니 그냥 반복해서 외우도록 하자!

🐼 유용했던 단축키

alt + ⬆︎ : 줄 한 칸 올리기
alt + ⬇︎ : 줄 한 칸 내리기
cmd + k + f : 줄 자동 정렬
alt + 원하는 줄 클릭 : 클릭한 공간마다 text를 칠 수 있음.
alt + 원하는 태그 더블클릭 : 선택한 태그를 한번에 수정할 수 있음.

Welcome to JavaScript

📍Object 객체

player라는 객체(object)를 만든 것이다.각각의 이름(name), 점수(point), 비만(fat), sayHo함수들을 프로퍼티(property)라고한다.

property의 기본 형태
👉 이름(name) : 값(value)

⭐️객체안에 함수를 정의하는 형태는 살짝 다르다!⭐️

sayHo: function (name) {
        console.log("ho" + name + "nice meet you.");
    },

player객체의 property를 변경 할 수도 있고, 추가할 수도 있다.

위는 비만을 거짓
lastName이라는 property를 새로 생성하고 그 value를 shim으로 설정
기존의 point = 10 인 값에 14를 더해 최종 적으로 24의 값으로 변경했다.

😀 변경 된 값을 console을 통해 확인

📍Conditionals(반복문)

반복문의 형태는 큰 차이가 없다. if - else if - else 전형적인 형태이다.

🥦prompt()

chorme 창에서 사용자에게 값을 문자열의 형태로 받는다.

const age = prompt("how old are you?");

🥦 parseInt()

문자열 자료형을 정수형으로 바꾼다.

parseInt(age);

현재 age값은 prompt()를 통해 사용자로부터 문자형의 값을 받았으며 그 문자형 age를 정수형을 바꾼다.

const age = prompt("How old are you?");
console.log(typeof age, typeof parseInt(age));

if(isNaN(age)){
    console.log("Please write a number");
} else if(age < 18){
    console.log("You are too young.");
} else{
    console.log("You can drink");
}

자료형이 바뀐 것을 볼 수 있다. (string > number)

JavaScript on the browser

📍document

🥦 document.getElementById()

: string의 ID값을 전달받음

EX)

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

html 파일에 있는 ID값이 "title"인 모든 element를 찾는다.

🥦🥦 document.querySelector()

: element를 css 방식으로 검색한다.

EX)

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

hello라는 클래스안에 있는 h1태그를 찾는다.

querySelector는 단 하나의 element만을 나타낸다.(여러개의 hello 클래스의 여러 h1태그를 가진 element가 있다고 하더라도 맨 처음 element를 가져옴.)
만약 모든 element를 가져오고 싶다면?

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

=> div태그 내부의 class hello를 가진 first-child인 h1을 가져오라!

📍 event

: user가 어떤 행위를 하는 것 (마우스 클릭, enter, 드래그 등)

🥦 addEventListener()

: 모든 event는 js가 listen 할 수 있음.

h1.addEventListener("click", handleTitleClick);

h1 태그를 click 했을 때 handleTitleClick 함수가 실행 됨.

개발자는 사용자가 click을 하면 handleTitleClick함수가 실행되길 원함.
그렇기에 함수 뒤에 ()가 빠진 모습
괄호가 있다면 함수가 즉시 실행되기 때문에
함수를 실행 대기 시켜놓고 event가 발생할 때만 함수가 동작하도록 함!

각각의 event와 그에 맞는 함수를 사용하는 모습
다양한 events를 확인하고 싶다면?
html events

Login

<<form id="login-form" class="hidden">
        <input required maxlength="15" type="text" placeholder="What is your name?" />
        <input type="submit" value="LogIn" />
    </form>

값을 받으면 value값(Login) 값이 바뀌게 되고 이 값은 .js 파일에서 LoginInput.value 값으로 불러올 수 있음

form을 사용하는 이유: input 태그의 유효성을 검사하기 위함.
required: form 안의 내용이 비어있으면 안된다.
maxlenght: 최대 글자수를 제한한다.
placeholder: form안에 값이 나오기 전의 text

😚 type="submit": form안에서 input이 더이상 존재하지 않을 때 enter 누르면 자동으로 새로고침(sumbit)됨.
<이 기능으로 우리가 여러 웹에서 로그인을 할 때 로그인 버트를 누르지 않고 enter만 쳐도 동작하는 이유>

🥦 preventDefault()

event.preventDefault()

: 브라우저가 기본 동작을 실행하지 못하게 막기
기본적인 event는 preventDefault()기능이 내제되어 있지만 개발자가 만든 함수는 바로 실행되기 때문에 주로 사용하는 기능이다.

🥦🥦 사용자에게 값 받기 ${ }

    greeting.innerText = `Hello ${username}`;

사용자에게 username 값을 받아서 출력하는 방법인데 이 방법을 익히도록 하자!

🥦 localStorage

: 값을 증발시키지 않고 저장하기 sumbit(새로고침)과정에서 날라가는 값을 저장한다.

Ex)
localStorage.setItem("username", "nico")
localStorage.getItem("username")
localStorage.removeItem("username")

주요 loginCode 설명

const savedUsername = localStorage.getItem("USERNAME_KEY");

if (savedUsername === null) {
    //show the form
    
    //saveedUsername 값이 비어있다면 HIDDEN_CLASSNAME(hidden)을 지운다.
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    
    
    //form이 sumbit되면 onLoginSubmit이 실행된다.
    loginForm.addEventListener("submit", onLoginSubmit);
    
} else {
    //show the greeting
    paintGreetings(savedUsername);
}

function onLoginSubmit(event) {
    event.preventDefault();         
    loginForm.classList.add(HIDDEN_CLASSNAME);
    
    //사용자에게 받은 value 값을 username에 대입
    const username = loginInput.value;
    
    //username값을 key값에 저장
    localStorage.setItem("USERNAME_KEY", username);
    
    paintGreetings(username);
}
profile
이봐... 해보기는 했어?

0개의 댓글