ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • JavaScript_day1
      WEB/JavaScript 2020. 1. 8. 23:11

      #1 ~ #2

      아래 강의 중 '바닐라 JS로 크롬 앱 만들기'를 보고 배운 것과 모르는 것을 찾아 정리한 내용입니다.

      https://academy.nomadcoders.co/courses

       

      Academy

      우버 백엔드 + 프런트엔드 + 배포 [고급]Typescript, NodeJS, GraphQL, React, Apollo % Complete

      academy.nomadcoders.co

       

      1. Vanilla-JS

      바닐라 자바스크립트란 라이브러리와 프레임워크를 사용하지 않고 날것의 자바스크립트의 언어로 짜여진 프로그램을 말한다. 

       

      2. JS 파일의 위치

      CSS 파일이 HTML의 head안에 위치하는 것과 달리(5행),

      JS 파일은 HTML의 body의 가장 밑에 있어야 한다(9행).

      <!DOCTYPE html>
<html>
    <head>
        <title>JavaScript</title>
        <link rel="stylesheet" href="index.css"/>
    </head>
    <body>
        <h1 id = "title" class = "btn">Hello World</h1>
        <script src="index.js"></script>
    </body>
</html>

       

      3. 변수(let/ const/ var)

      처음 자바스크립트를 접할 때는 var만 알고있었는데 오늘 let과 const라는 변수 선언 방식을 배웠다. var은 scope가 함수단위이며, let과 const은 scope가 블록 단위이다. let은 초기화 이후 값을 변환할 수 있고, const(상수취급)는 초기화 이후 값을 변환할 수 없다.

       

      ES5이전에는 var만 존재했지만 이후 let, const가 추가되면서 변수 선언의 구분이 필요하다.

      let과 const는 왜 등장했을까? var은 재선언에 있어 에러가 나지 않기 때문에 불편한 점이 있었다.

      따라서 var과 달리 변수 재선언이 불가능한 let과 const가 등장했다. ES6 이후 var은 잘 쓰이지 않는다.

       

       

      4. 배열과 객체

      데이터를 정렬하는 방법 두 가지

      //Array example
const daysOfWeek = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];

//Object example
const info = {
    name: "yeom",
    age: 23,
    isStudent: true
    }

       

      5. 함수

      자바스크립트를 배우면서 가장 처음에 접하게 되는 console.log()도 함수의 일종이다. console이 객체, log가 이 객체에 내장된 함수(built-in function)이다. 

      //일반적인 함수 선언
function sayHello(){
    console.log("Hello");
}

//객체 안에서 함수 선언
const cal = {
    plus: function(a, b) {
        return a + b;
    }
    mul: function(a, b) {
    	return a * b;
    }
}

       

      *백틱(` `)의 사용

      변수를 문자열과 함께 사용할 때 유용한 방법을 알게 되었다. ` 를 사용하면 , 와 + 를 사용하지 않고 한 줄에 변수와 문자열을 나타낼 수 있다. 아래 세 가지의 콘솔 출력은 모두 같은 결과를 나타내지만 가장 마지막 방법에 주목할 필요가 있다. 문자열 표현에 있어 " 혹은 ' 를 사용하지 않고 변수와 함께 나타낼 수 있다.

      const name = "yeom";
const age = 23;

console.log("Hello", name, "you are", age);

console.log("Hello " + name + " you are " + age);

console.log(`Hello ${name} you are ${age}`);

       

      6. DOM(Document Object Module)

      DOM 함수는 브라우저에서 제공하는 함수로 자바스크립트를 사용하면서 많이 사용할 것이다. HTML 문서에 있는 태그를 가져다가 객체로 만들 수 있는 기능으로 이는 자바스크립트로 html 파일을 수정할 수 있다는 뜻이다. 

      ex) documenet.getElementById("~");

       

      #Reference

      https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/%EC%86%8C%EA%B0%9C

       

      DOM 소개

      이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한 참조 정보와 예제들을 제공한다.

      developer.mozilla.org

       

      7. Event

      이벤트는 웹 사이트에서 발생하는 모든 것을 말한다. 즉, 이벤트의 종류는 무수히 많고 종류에 대응하는 사용법도 많기 때문에 필요할 때마다 MDN 사이트에서 찾아보는 것을 추천한다. 

      한 가지 주의해야 할 것은,

      ex)

      window.addEventListener("resize", handleResize()); //지금 바로 함수를 실행하라는 의미

      window.addEventListener("resize", handleResize); //이벤트가 발생하면 함수를 실행하라는 의미

      두 의미가 다르므로 이벤트에 대응하는 함수를 실행할 때는 반드시 아래 방법을 사용해야 한다. 

       

      8. 기타

      *문서의 분리

      html 파일, css 파일, js 파일의 역할을 각각 분리하여, 각 파일이 그 역할에 맞는 기능만 하도록 노력해야 한다.

       

      *classList

      위의 원칙을 지키기 위해 js파일에서 html 파일의 속성을 바꿀 때 class 이름을 가지고 와서 변화를 준다. 이때 기존에 있는 클래스의 이름이 회손되는 것을 막기 위해 classList를 사용해 add, remove 함수를 통해 클래스명을 관리한다. 

       

      index.html

      <!DOCTYPE html>
<html>
    <head>
        <title>Something</title>
        <link rel="stylesheet" href="index.css"/>
    </head>
    <body>
        <h1 id = "title" class = "btn">This works!</h1>
        <script src="index.js"></script>
    </body>
</html>

      index.css

      body{
    background-color:peru;
}

h1{
    color:white;
}

.clicked {
    color: blue;
}

      index.js

      const title = document.querySelector("#title");

//css 속성을 js 파일에서 해결한 경우
// const BASE_COLOR = "white";
// const OTHER_COLOR = "blue";
// function handleClick(){
//     const currentColor = title.style.color;
//     if(currentColor === BASE_COLOR){
//         title.style.color = OTHER_COLOR;
//     } else{
//         title.style.color = BASE_COLOR;
//     }
// }

const CLICKED_CLASS = "clicked";

function handleClick() {
    const hasClass = title.classList.contains(CLICKED_CLASS);
    if(!hasClass) {
        title.classList.add(CLICKED_CLASS);
    } else {
        title.classList.remove(CLICKED_CLASS);
    }
}

//위의 기능과 동일
// function handleClick(){
//     title.classList.toggle(CLICKED_CLASS);
// }

function init(){
    title.addEventListener("click", handleClick);   
}

init();

       

      'WEB > JavaScript' 카테고리의 다른 글

      JavaScript_day3  (0) 2020.01.11
      JavaScript_day2  (0) 2020.01.10

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바