Javascript 기초 정리

moaoh 2021. 9. 11. 14:42

JS는 이렇게 써야 한다. 개념 정리

js 사용방법

js 내용을 불러올 경우에는 html을 통해서 불러와야 한다
css를 불러오는 것과 같은 맥락
통상적으로 js파일을 불러오는 것은 body에 맨 아래에 적는다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    **<script src="app.js"></script>**
</body>
</html>

js에 크기가 크다면 불러오는데 시간이 소요될 수 있는데
js를 불러오는 위치가 상단에 위치하게 되면 기본적인 웹페이지를 불러오는 시간이 오래 걸릴 수 있게 된다.
그러므로 js를 불러오는 위치를 하단으로 배치를 하는 것이 효율적

js 변수 이름 (camelcase)

const my_name = "jun"; ❌ python / sanke_case
const myName = "jun" ; ⭕ js / camelcase

js에 경우 변수에 이름을 지을 때 공백이 있는 경우에는 공백 뒤에 문자를 대문자로 하는 형식으로 한다
python과는 다른 방식.

코드 작성 방법

// CSS

.active {
    color: cornflowerblue;
}

// JS

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

function handTitleClick() {
    const clickedClass = "clicked"
    if (h1.className === "clicked") {
        h1.className = "";
    }
    else {
        h1.className = "clicked";
    }
}

h1.addEventListener("click", handTitleClick);

// ====================================================

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

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

h1.addEventListener("click", handTitleClick);

// ====================================================

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

function handTitleClick() {
    const clickedClass = "clicked"
    h1.classList.toggle(clickedClass);
}

h1.addEventListener("click", handTitleClick);

// ====================================================

위에 코드에 경우 모두 같은 동작을 하지만 코드를 적는 방법이 모두 다르다.
style과 관련된 내용들은 JS에서 선언을 하는것이 아니라 CSS에서 선언을 하고 JS에서 CSS 내용을
불러오는 것이 깔끔하고 가장 보기 좋다.

HTML과 JS

const loginForm = document.querySelector(".login-form");
const loginInput = loginForm.querySelector("input");
const loginButton = loginForm.querySelector("button");

function onLoginBthClick() {
    const username = loginInput.value;
    if (username === "") {
        alert("Please write your name");
    }
    else if (username.length > 15) {
        alert("Your name is too long.");
    }
    else {

    }
    console.log("click!!");
}

loginButton.addEventListener("click", onLoginBthClick);

<form class="login-form">
        <input required maxlength="15" type="text" placeholder="what is your name?"/>
        <input type="submit" value="Log In">
    </form>

js만 사용해서 value가 있는지 확인한다던지 length길이를 확인한다던지 기능들을 구현할 수 있지만
html 내부에 이미 만들어진 옵션 값들이 존재하기 때문에 존재하는 경우 그냥 사용하는 편이 좋고 없다면
js를 통해서 만드는 것이 좋다.

JS 문법 정리

변수 선언 방법

var, let, const

const
let

const a = "hello"
const b = 3

let a1 = "hello"
let b1 = 3
let myName = "jun"

myName = "junmo"

var에 경우 너무 구식이고 변수 선언한 곳을 봤을 때 어떤 용도로 만들어진 변수인지,
값이 변하더라도 변했는지 안 변했는지 확인할 수가 없다. 그래서 사용을 안 한다.
const에 경우는 값을 변경할 수 없지만
let에 경우에는 변경 가능한 변수를 선언할 수 있다.
기본적으로 const를 많이 사용하고 바뀔 일이 있을 때에만 let을 사용한다.

list

const me = "jun"
const day = [1, 2, false, true, null, undefined, "text", me];

배열 안에 어떠한 형식이든 넣을 수 있다.
다른 형식과 섞여도 상관 ❌

object 생성

const player = {
    name: "jun",
    points: 42,
    fat: true,
}

console.log(player)
console.log(player.name)

player.fat = false;

player.lastName = "mo"

딕셔너리 형태로 선언 및 사용 가능
내부에 있는 값들은 변경 가능
내부에 값을 추가할 경우 그냥 추가 가능

const player = {
    name: "jun",
    sayHello: function() {
        console.log("hello!")
    }
}

console.log(player.name)
player.sayHello()

class처럼 내부에 함수를 넣는 것도 가능하다

function

function sayHello(nameOFPerson) {
    console.log("hello my name is" + nameOFPerson);
}

sayHello("jun")

const age = 23
console.log(isNaN(age))

명령어 찾기

document.dir()

위와 같은 형식을 사용해서 지금 사용할 수 있는 함수가 무엇이 있는지 찾을 수 있다.

HTML 내용 가져오기

const title = document.getElementsByClassName();

const title = document.getElementById();

const title = document.querySelector();

const title = document.querySelectorAll();

위와 같이 크게 3가지 방법이 존재한다.
getElementById(); 에 경우는 id값을 가져오므로 중복이 될 수 없으니 1개만 가져온다.
getElementsByClassName(); 에 경우 중첩되는 내용이 있을 수 있으니 리스트 형식으로 가져온다
document.querySelector(); : 가장 먼저 발견된 1개만 가져온다.
document.querySelectorAll(); : 모두 가져온다.

const title = document.getElementById("title");
console.log(title)
title.innerText = "Got you!"
console.log(title)

console.dir(title)
console.log(title.className)
console.log(title.id)

위와 같은 형식을 사용해서 id="title"에 해당하는 것을 불러올 수 있고
해당 내용도 변경이 가능하다.
즉 어떤 HTML element이든지 간에 가져올 수 있고 변경할 수 있다.

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

// ==================================================

const title = document.querySelector("div h1");
console.log(title);

위와 같은 방식처럼 CSS형식으로 가져오는 것도 가능하다.
가장 알아보기 쉽고 위와 같은 방법이면 모두 찾을 수 있어서 가장 많이 사용된다.

const title = document.querySelectorAll(".hello h1");
console.log(title);

// ==================================================

const title = document.querySelectorAll(".hello h1:last-child");
console.log(title);

이러한 형식으로 모두 가져오거나 지정해서 가져오는 것이 가능해진다

addEventListener

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

function handTitleClick() {
    h1.style.color = "blue";
}
h1.addEventListener("click", handTitleClick);
h1.onclick = handleMouseLeave;

h1을 클릭했을 경우 이벤트를 주는 것도 JS에서 가능하다

h1.addEventListener("click", handTitleClick);
h1.onclick = handTitleClick;

위에 2가지 모두 가능한 방법이지만 전자에 방법이 조금 더 효율과 범위성이 좋아서 많이 사용된다

console.div()

.
.
.
onanimationend: null
onanimationiteration: null
onanimationstart: null
onauxclick: null
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onbeforexrselect: null
.
.
.

on이 앞에 붙은 것들이 이벤트에 해당되는 내용들이다

function handleWindowResize() {
    document.body.style.backgroundColor = "tomato";
}

window.addEventListener("resize", handleWindowResize);

document.body 형식처럼 가지고 올 수 있는 애들은 한정되어있다.
body, head, title 이 정도가 다라서 div 같은 애들을 가져오고 싶으면 querySelector처럼 끌어와야 한다

preventDefault

function onLoginSubmit(event) {
    event.preventDefault();
    console.log(event);
}

loginForm.addEventListener("submit", onLoginSubmit);

기본적으로 함수가 있으면 그 함수를 지나친 후 실행이 되기 때문에 함수 도중에
preventDefault이라는 값을 두게 되면 모든 행동들을 하지 않는다.

localStorage

function onLoginSubmit(event) {
    event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    **localStorage.setItem("username", username);**
    greeting.innerText = `Hello ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

웹페이지에서 제공하는 DB들 중 1개이다.
위와 같은 방식으로 username이라는 값을 페이지 DB에 저장하여 사용할 수 있다.

시간대에 따라 진행

일정 시간마다 해당 코드를 실행할 수 있는 기능을 JS에서 지원을 하고 있다.

setInterval()

function sayHello() {
    console.log("HELLO")
}

setInterval(sayHello, 5000);

function setInterval(function, number)
위에 코드는 5초마다 console.log로 HELLO라는 값을 출력해라 라는 뜻이다

setTimeout()

function sayHello() {
    console.log("HELLO")
}

setTimeout(sayHello, 5000);

function setTimeout(function, number)
위와 같은 방법으로 동작하지만 ms가 지난 후부터 실행이 된다.

padStart

**String.padStart(number, string)**

const s = "1".padStart(2, "0");
>> "01"

const s = "10".padStart(2, "0");
>> "10"

String.padStart(number, string)
String의 길이가 number보다 짧다면 String 앞쪽에 string 문자를 붙여 넣는다.
String의 길이가 더 길다면 무시

padEnd

**String.padEnd(number, string)**

const s = "1".padEnd(2, "0");
>> "10"

const s = "10".padEnd(2, "0");
>> "10"

String.padEnd(number, string)
String의 길이가 number보다 짧다면 String 뒤쪽에 string 문자를 붙여 넣는다.
String의 길이가 더 길다면 무시

createElement

document.createElement("img");
>> <img>

JS를 통해서 HTML element를 생성할 수 있다.

JSON

toDos
>> (3) ["a", "b", "c"]

JSON.stringify(toDos)
>> "[\"a\",\"b\",\"c\"]"

JSON.parse(JSON.stringify(toDos))
>> (3) ["a", "b", "c"]

localStorage.setItem

localStorage.setItem("todos", JSON.stringify(toDos));

Storage.setItem(key: string, value: string)
DB에 값을 넣을 수 있다.

localStorage.getItem

localStorage.getItem("todos");
>> "[\"a\",\"b\",\"c\"]"

Storage.getItem(key: string)
key에 해당하는 value 뽑아온다.

JSON.stringify

JSON.stringify(toDos)
>> "[\"a\",\"b\",\"c\"]"

js에 해당하는 값이나 객체를 JSON 문자열로 변환시킨다.

JSON.parse

JSON.parse(localStorage.getItem("todos"));
>> (3) ["a", "b", "c"]

문자열 구문을 해석하여 배열의 형식으로 바꾼다.

Array.prototype.forEach()

function Funstion(item) {

}

array.forEach(Funstion);

array의 각각 요소마다 funstion을 대입하여 실행시킨다.
배열에 요소들을 반복문으로 돌리는 방법?
해당 함수가 실행될 경우 지금 array에 해당하는 요소에 정보를 함수에 넘긴다.

Array.prototype.filter()

function Funstion(item) {

}

newArray = array.filter(Funstion);

forEach와 똑같이 동작하지만 새로운 array를 반환한다.
Funstion에서 true를 반환한 경우에만 해당 내용을 넣고 반환 값이 false라면 해당 내용은 무시한다.

Navigator

Geolocation.getCurrentPosition()

function onGeoOk(position) {
    const lng = position.coords.longitude;
    const lat = position.coords.latitude;
    console.log(lng, lat);
}

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

navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);

navigator.geolocation.getCurrentPosition(success[, error[, [options]])
현재 유저의 다양한 정보들을 받아올 수 있다 위치나 등등
지금은 현재 접속한 유저의 위치에 따른 날씨를 받아오고 싶기 때문에 위도와 경도를 받아왔다.

Members

Enter your email address and we will send you a link to reset your password.

home.openweathermap.org

api를 사용해서 weather정보를 받아올 수 있다.

fetch

fetch(url);

fetch를 사용하여 해당 url에 요청을 보낼 수 있다.
url을 보내서 해당 서버에서 값을 받아와야하기 때문에 시간이 걸리게 된다.