2. Front-end

JS - [element에 클래스 추가 제거 - classList / toggle]

0. CSS in JS 브라우저에서 글자를 클릭하면 색이 파란색과 토마토색 사이에서 계속 바뀌게 만들어보자. 아래와 같이 현재 스타일 색상이 blue이면 tomato 색으로, 아니라면 blue로 변경하는 코드를 작성했다. but 위와 같은 코드에서는 뭘 하는지 한눈에 알아보기 어렵고 h1.style.color 코드를 반복해서 사용하고 있어서 좋지 않다. 따라서 아래와 같이 현재 색상을 나타내는 h1.style.color 코드를 currentColor 변수로 생성하고, 바꾸려는 색상을 newColor 변수로 이름을 지어주면 이 코드로 뭘 하려는지 더 쉽게 이해할 수 있다!! 이제 같은 내용을 JS에 직접적으로 스타일을 입히지 않고, css파일에 스타일을 꾸민 후 JS에 해당 내용을 입히는 방법으로 해 보겠..

JS - [element 가져오기 / Event]

0. JAVASCRIPT ON THE BROWSER JS가 브라우저를 어떻게 동작시키는지 알아보자. 브라우저에서 콘솔 창에 document를 입력하면 아래와 같이 HTML 파일을 가져올 수 있다. 즉 document는 우리가 접근할 수 있는 HTML을 가리키는 객체이다. 만약 document.title을 입력하면 내가 HTML에 입력했던 title 태그에 넣어준 값 Momentum 이 출력될 것이다. document.title = "Hi"와 같이 값을 넣어주어 HTLM을 변경할 수도 있다. (물론 콘솔 창에서 변경한 값은 새로고침 하면 원래대로 돌아갈 것이다.) 1. element 가져오기 1) getElementBy~ document.getElementById(" ") 함수를 이용해 해당하는 id 값을..

JS - [Basic / function / conditional]

노마드코더 강의 참조 0. First JS Project 첫 JS 프로젝트 만들어보기! 브라우저에서도 콘솔 창을 통해 JS 코드를 입력해볼 수 있지만 한 줄 씩만 입력 가능하기에 불편하다. 그래서 VS Code를 이용해서 파일을 만들어 보자. 사진과 같이 js 파일을 만들고 알림창을 띄우는 코드를 작성했다. 그런데 브라우저에서 파일을 열어보면 알림 창이 아니라 코드가 그대로 출력된다. 브라우저는 html을 열고, html은 css와 js를 가져오는 방식이다. 그렇기에 css나 js 파일을 열어서는 우리가 원하는 결과를 얻을 수 없고, css와 js 파일을 연결한 html 파일을 브라우저에서 열어야 한다. 참고로 일반적으로 js 파일은 맨 위에서 가져오지 않고 주로 끝에서 한다. 그리고! 앞으로 작업할 때..