김숭늉 마음대로

안녕하세요 김숭늉 입니다 :) 그럼 바로 알아보겠습니다! 먼저 첫번째로는 dom을 사용하여 button 요소중 [0]번째를 가지고온후 이벤트 리스너를 추가해줍니다. 이벤트 리스너는 click시 alert가 노출되는 function을 추가하였습니다 :) document.getElementsByTagName("button")[0].addEventListener("click", function(){ /// 0번째의 버튼에 적용 alert("클릭하셨네요? You got clicked!"); }) 위 코드를 실행하면 아래와 같이 button의 0번째의 버튼을 클릭하면 아래와 같은 alert 창이 생성 됩니다. 그다음은 방금 작성한 문장을 for 루프로 넣어서 버튼의 갯수만큼 루프가 돌아갈수 있도록 설정합니다! :..

DOM과 자바스크립트를 활용하여 2인 랜덤 주사위 굴리는 페이지 만들어 보겠습니다. 플레이어1과 플레이어2가 각각 랜덤주사위를 굴려 누가 승자인지 페이지에 노출시켜주면 되는 과제 입니다. 위 페이지는 랜덤주사위를 굴리기 첫 시작 페이지입니다. 상단에 으로 문구가 작성되어있고, Player 1과 Player 2의 주사위가 각각 h1문구 하단에 위치해 있습니다. 지금 위 상태는 js파일과 아래의 주사위 이미지 파일이 html 문서에 연결되어있지 않은 상태입니다. (아무런 액션을 취하지 않은 상태의 페이지에서는 각 주사위는 6이 고정으로 보이도록 합니다.) 먼저, dicee.html에 미리 만들어둔 자바스크립트 문서(index.js)와 이미지소스를 html 문서에 연결 시키는 간단한 작업부터 시작합니다. Re..

DOM이란 ? DOM은 문서 객체 모델(The Document Object Model)의 줄임말로, HTML문서를 브라우저가 이해하게끔 만든 Tree 자료구조입니다. 즉 더 쉽게 말하면 HTML의 태그 하나하나를 모두 객체화 한것 입니다. DOM객체의 속성(Property) DOM 객체의 속성은 객체에 관한걸 묘사하는것입니다. 예를들어 자동차로 비유를 해서 설명 해본다면 DOM 객체의 속성은 자동차의 시트수, 문의 객수, 자동차의 색깔을 표현(묘사)에 관한 것입니다. 예) car.color = "red" 기본적인 프로퍼티로는 style, innerHTML, firstChildd와 같은 프로퍼티가 있습니다. 프로퍼티(property) DOM객체의 매서드(Method) DOM객체의 매서드의 경우는 객체가 무..