본문 바로가기

JavaScript10

[노마드코더] 바닐라 JS로 크롬 앱 만들기 - #3.2 #3.2 Searching For Elements 개념 id가 사용하기 편리하지만, 보통 className을 사용하거나 둘 다 사용함. Grab me! Grab me! Grab me! Grab me! Grab me! const hellos = document.getElemetByClassName("hello"); console.log(hellos); 대부분의 경우에는 class name을 모든 곳에 추가하지는 않음. Grab me! const title = document.getElemetByTagName("h1"); console.log(title); 위의 결과값은 우리가 원하는 것이 아님. title로 무엇인가를 할 수 없기 때문. title이 title object 자체가 아니고 array이기 때문.. 2021. 11. 28.
[노마드코더] 바닐라 JS로 크롬 앱 만들기 - #3.1 #2.15 HTML in Javascript 들어가며 특정한 무언가를 가져와보자. 우린 HTML에서 항목들을 가지고 와서, JavaScript를 통해 항목들을 변경할 것임. 우리가 JavaScript로 정보를 가지고 올 수 있는 방법은 document 객체와 element를 가져오는 수많은 함수들을 이용하는 것임. 이번 강의에서 전부 알아볼 것임. 개념 Grab me! document.getElementById()를 이용하여 h1의 id로 값을 가져올 수 있음. 여기서 우리는 JavaScript에서 위 HTML을 가져오는 것임. JavaScript는 위 HTML의 element를 가지고 오지만, HTML 자체를 보여주지는 않음. consol.dir() const title = document.getEle.. 2021. 11. 27.
[노마드코더] 바닐라 JS로 크롬 앱 만들기 - #3.0 #3.0 The Document Object 들어가며 이번 강의에서는 이제 JavaScript가 브라우저를 어떻게 움직이게 하는지 배우게 될 것 HTML은 접착제 같은 것. 그래서 HTML이 CSS와 JavaScript 를 가져옴. JavaScript를 사용하는 이유는 HTML과 상호작용하기 위해서임. 즉, HTML의 Element들은 JavaScript를 통해 변경하고 읽을 수 있음. console 창에서 document를 입력해보자. 결과값으로 document가 정의되어있는 걸 볼 수 있음. console에 document를 입력하면, 작성한 HTML을 가져올 수 있음. document는 브라우저에 이미 존재하는 Object이기 때문. document는 많은 것들이 들어있는 Object. docume.. 2021. 11. 26.
[노마드코더] 바닐라 JS로 크롬 앱 만들기 - #2.15 #2.15 Conditionals Part 3 개념 코드를 짜다보면 조건이 하나보다 더 많을 때가 있음. 이전 글에서는 조건이 하나인 경우를 배웠지만, 조건이 둘 이상일 경우를 배워보자. if(condition1){ /// condition1 === true } else if (condition2) { /// condition2 === true } else { /// condition1 and conditon 2 === false } 예제 음주가 가능한 나이인지 아닌지 알려주는 코드를 만들어보자 입력받은 age가 number가 아닐 때 실행되는 조건 입력받은 age가 number일 때 실행되는 조건 const age = parseInt(prompt("How old are you?")); if(isNan(.. 2021. 11. 21.