본문 바로가기

JavaScript36

Events 무언가를 클릭하면 그것이 event가 되고, 태그 위로 마우스를 올려도 event가 된다. → 다양함 이러한 모든 event들을 Js는 listen할 수 있다. 그렇다면 event를 어떻게 listen할까? : addEventListener 이런 코드를 입력하면, Js는 title을 지켜보다가 누군가가 title을 click하는 것을 listen할것이다. 누군가가 title을 click했을 때 어떤 일이 발생하도록 하기 위해 handleTitleClick이라는 function을 정의했다. 그리고 이 함수를 addEventListener()에 두 번째 argument(인수)로 전달하게 했다. → handleTitleClick(); 으로 함수를 직접 호출하지 않고 누군가가 title을 click할 경우에 J.. 2022. 1. 31.
Searching For Elements 태그 안에 class="hello"를 추가한다. getElementByClassName("hello")를 사용하여 hello라는 class를 가진 태그의 요소를 변수 hellos에 저장했다. console.log로 hellos를 호출하면 console창에 태그의 모든 elements가 나오는 것을 볼 수 있다. div 내부에 h1을 생성해주고 그 안에 Grab me!라고 적은 코드로 바꿔보자. 그리고 모든 태그를 console창에 띄우는 코드를 입력해보면 이렇게 만 하나 들어있는 array가 나왔다. 즉, getElementsByTagName()을 통하여 div, section, button 같은 다양한 태그들을 불러올 수 있다. 가장 현명하게 element를 가져오는 방법은(주관적) querySelct.. 2022. 1. 31.
HTML in Javascript 우리가 Js로 정보를 가져올 수 있는 방법은 document 객체와 element를 가져오는 수많은 함수를 이용하는 것이다. 일단 Grab me! 라는 코드를 한 줄 추가했다. html에서 id를 통해 element를 찾아주는 getElementById()는 String을 전달받는 함수이기 때문에 document.getElementById("title") 처럼 ()안에 id를 넣어보았다. 그런데 아무것도 찾지 못했다.(null : 값이 없음) 왜냐하면 파일은 저장했지만 새로고침을 하지 않아서 그랬다. 새로고침을 하고 나서 다시 시도해보니 Js로 id="title"을 가진 태그를 가져왔다. 이걸 console에서 하지않고 app.js에서 호출해볼건데, title이라는 변수에 title이라는 id를 가진 태.. 2022. 1. 30.
Document Object document라는 object를 통해 브라우저에서 HTML의 정보를 가져올 수 있다. 생각해보면 object에서는 properties(속성)을 가져오거나 바꿀 수 있기 때문에 이점을 이용하면 JS에서 html을 읽어올 뿐만 아니라 무언가를 변경할 수 있다. 이는 Js를 통해 변경된 것이기 때문에 새로 고침을 하면 다시 원래대로 돌아간다. 하지만 이것을 통해 브라우저가 제공하는 document를 이용하여 Js가 html에 이미 연결되어 있다는 것을 알 수 있다. Js는 html에 접근하고 읽을 수 있으며 모든 것들은 document로부터 시작한다. 2022. 1. 30.

티스토리툴바