JS9 바닐라 자바스크립트 - CSS와 JavaScript 분리하기 더보기 출처 및 참고 : - 노마드 코더 챌린지(바닐라 JS로 크롬 앱 만들기) : https://nomadcoders.co/ # CSS in JavaScript 우리는 자바 스크립트 내에서 CSS를 변경시켰다. 하지만 이는 무언가 좋지 않아보인다. 각각의 일들을 독립시켜줄 필요가 있다. 자바스크립트는 HTML을 변경할 것이고 CSS는 HTML을 바라보고 있는 구조가 된다. JavaScript는 상호작용으로 이용하는걸 선호한다. 1. element를 찾기 2. event listen 하기 3. 해당 event에 반응하기(어떤것을 보여주거나, 감추거나 색을 바꾸거나 등등) JavaScript : 애니메이션 작업 CSS : Style 작업 // CSS body { background-color: beige;.. 2021. 9. 23. 바닐라 자바스크립트 - Event listen하기 더보기 출처 및 참고 : - 노마드 코더 챌린지(바닐라 JS로 크롬 앱 만들기) : https://nomadcoders.co/ - # Event Listen event란 "내가 마우스로 웹 내에 무언가를 click한다" "h1 태그 위로 마우스를 올린다." - 인풋박스에 타이핑을 끝내거나, 글을 쓰거나, enter 누르는 것 또한 event에 속한다. - 또 Wifi의 접속이 해제되는 경우도 event가 될 수 있다. 위에 말한 모든 event들을 JavaScript는 listen 할 수 있다, 오늘은 click event를 알아보자 지금까지 배운 내용으로는 HTML Element를 JavaScript로 가져오는 방법을 배웠다. // 실습 기초 js 코드 const title = document.quer.. 2021. 9. 23. 바닐라 자바스크립트 시작(3) 더보기 출처 및 참고 : - 노마드 코더 챌린지 바닐라 자바스크립트로 크롬 앱 만들기 : https://nomadcoders.co/ - HTML Document Reference : https://developer.mozilla.org/ko/ 복습 차원 * 꼭 이해해야 할 거 : 우리가 하고 있는 app.js가 있기 때문에 javascript를 통해 HTML의 내용을 가져올 수 있는 것이다 * 좀더 구체적인 엘리먼트를 선택 : querySelector , querySelectorAll - getElement ~~ 보다 구체적으로 element를 지정 가능하다. * 포인트 : document가 HTML이 app.js를 load하기 때문에 존재하는 것임. 그 다음에 브라우저에서 우리가 document에 접근.. 2021. 9. 23. 바닐라 자바스크립트 시작 (2) 더보기 본 글은 노마드 코더 챌린지 하기 전 기본내용에 대한 자료를 바탕으로 썼습니다. 출처 및 참고 : https://nomadcoders.co/vanillajs-challenge 조건문 (Conditional) 조건문(conditional)은 true인지 false인지 알려주기 때문에 아주 중요하다 무언가를 확인해야할 때 거의 대부분 사용한다. - 사용자가 로그인되어 있으면 무언가를 보여준다던가 - 사용자가 무언가를 할 때 반응하는 것을 보여준다던가 prompt() : 사용자에게 창을 띄울 수 있게 해준다. - 조건문을 사용한 함수라고 보면 된다. * prompt 함수가 실행되면 자바스크립트 전체가 일시적으로 정지된다고 한다. Document에 대해 - console.dir(document) 로 do.. 2021. 9. 8. 이전 1 2 3 다음
