Code Playground

< h1 > Code Playground </ h1 >

오늘은 DOM에서 이벤트를 처리하는 방법에 대해서 포스팅해보려고 한다. 1. HTML 태그 안에서 이벤트 처리기 연결 (Inline Event Handlers) 이 방법은 이벤트를 발생시킬 HTML 태그 안에 직접 이벤트 핸들러를 추가하는 방법이다. 이 방법을 사용하면 HTML 태그와 자바스크립트 소스가 섞이기 때문에 중간에 이벤트 수정하거나 연결 함수를 바꾸려면 HTML 코드를 수정해야 한다. function logMessage (msg) { alert(msg || 'logging'); } 1번 2번 3번 4번 5번 태그에 직접 연결해야하기 때문에 이벤트 함수가 전역 공간에 미리 선언되어 있어야 한다. 이 방법은 요즘엔 거의 사용하지 않는 방법이고, HTML 코드와 JS 코드가 뒤섞이기 때문에 사용을 ..

오늘은 자바스크립트로 DOM을 동적 생성하는 방법에 대해서 정리해보려고 한다. 정리를 위해서 간단한(...간단하지만 나름 깔끔하게 만들려고 오랜 시간 고군분투했다.히히) 영화 정보를 출력하는 웹 페이지를 만들어보기로 했다. 영화 정보를 가져오기 위해서 인터넷을 뒤져서 146개의 영화 정보를 담고 있는 JSON 파일을 다운 받았다. JSON 파일을 연결하는 방법은 아직 모르니까 일단은 js 파일에 MOVIES라는 이름의 객체로 만들어 html파일에 연결시켜주었다. const MOVIES = [{ "id": 1, "title": "Beetlejuice", "year": "1988", "runtime": "92", "genres": [ "Comedy", "Fantasy" ], "director": "Tim B..

1번 2번 3번 만약에 위 HTML코드에서 태그를 자바스크립트를 이용하여 동적으로 제어하기 위해 돔을 가져온다고 해보자. 여러 가지 방법이 있겠지만 가장 흔하게 사용되는 방법은 아래와 같다. const $li = document.querySelectorAll('.list li'); 콘솔 창에 출력해보면 원하던대로 li 요소들을 잘 가져오는 것을 확인할 수 있다. 또한 querySelectorAll()을 이용하여 가져 온 li 요소들은 NodeList라는 이름의 객체로 반환된다. const $li = document.querySelector('.list').children; 이번에는 다른 방법으로 li 요소에 접근했는 데, 부모 요소인 ul의 children 속성을 사용하여 탐색하였다. 이 경우에도 아까와..

https://im-developer.tistory.com/100 [JS/DOM] 자바스크립트, 문서 객체 모델(Document Object Model)에 대하여 문서 객체 모델은 영어로 "Document Object Model"이라고 하고 줄여서 DOM(돔)이라고 부른다. DOM이란 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용하여 문서를 해석하는 방법을.. im-developer.tistory.com 지난번 글에서 DOM이 무엇인지에 대해서 다루었다. 오늘은 DOM에 어떻게 접근하고 탐색하는 지 본격적으로 다뤄보려고 한다. HTML Element에 접근하기 지난 번 글에서 우리는 Element(요소)가 HTML 문서 상의 태그를 객체화시킨 것이라는 것을 알았다. 이제 그..

문서 객체 모델은 영어로 "Document Object Model"이라고 하고 줄여서 DOM(돔)이라고 부른다. DOM이란 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용하여 문서를 해석하는 방법을 말한다. 이게 무슨 말인가 하면 우리가 텍스트 에디터로 웹 문서를 작성하여 브라우저로 실행시키면 이 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 적재해야 한다. 즉, 웹 문서의 모든 Element와 Attribute, Text들을 브라우저가 이해할 수 있도록 각각 객체로 만들고 이 객체들의 관계를 트리 구조로 구성한 것이 DOM이다. 웹 문서 자체를 가리키는 DOM 요소 중 하나인 document를 한 번 콘솔 창에 입력해보자. 콘솔에 출력되는 값을 펼쳐보면 웹 문서의 구..

무한 루프 슬라이드 오늘은 자바스크립트로 구현해 본 무한루프 슬라이드를 정리해보려고 한다. 예전에 제이쿼리를 사용해서 슬라이드를 구현해본 적은 있지만 마지막 슬라이드에서 첫번째 슬라이드로 자연스럽게 옆으로 넘기는 이벤트는 구현하지 못했었다. 이번엔 제이쿼리 사용없이 순수하게 바닐라 자바스크립트로 무한루프 기능과 페이지네이션 기능까지 만들어보려고 한다. 1 2 3 4 5 Prev Next 먼저 HTML코드는 이렇다. div.slide_content 안에는 원하는 img태그를 추가하면 되는데, 이미지 추가하기가 귀찮아서 슬라이드 각각의 배경색만 다르게 하여 만들 생각이다. 페이지네이션은 일단 동적으로 추가할 예정이라서 ul 태그만 만들어두었다. 이제 css를 작성해야 하는 데, 일단 슬라이드가 움직이는 원리..

# 나이 계산기 input박스에 태어난 연도를 입력하고 버튼을 클릭하면 아래에 나이가 출력된다. 입력하지 않고 버튼을 클릭했을 경우 "태어난 연도를 입력하세요" 문구 출력하고 input박스가 focus된다. dom, 연산자 연습 HTML: SUBMIT 당신의 나이는: SCRIPT: document.querySelector('#testAgeBtn').addEventListener('click', function() { var birthYear = document.querySelector('#testUserYear').value; if(! birthYear) { alert('태어난 연도를 입력하세요'); document.querySelector('#testUserYear').focus(); } else { ..

만드는데 거의 3일 정도 걸렸던 스톱워치이다.. 휴.. 처음 간단하게 시작 / 스톱 버튼을 만들었을 때는 그렇게 어렵지 않았다. 문제는 재시작, 기록, 리셋 등등의 기능을 넣으면서부터 꼬이기 시작하고 시간이 뒤죽박죽 난리가 나고..;; 일단 HTML태그는 다음과 같다. 00 : 00 . 00 START STOP 내가 최초로 생각한 방법은 자바스크립트의 Timestamp값을 이용하는 것이었다. 내가 생각한 스톱워치 알고리즘을 적어보면 다음과 같다. 시작 버튼을 누르는 순간에 변수A에 현재시간을 불러오고 그 시간을 timestamp값으로 저장한다. 그리고 시작 시점부터 1ms 마다 계속해서 현재시간의 timestamp값을 새로 불러와 B에 저장한다. B에서 A를 뺀 timestamp값을 분, 초, 밀리초로 ..

오늘은 간단하게 자바스크립트를 이용하여 시계를 만들어보려고 한다. 먼저 HTML과 CSS 코드는 다음과 같다. : . . . * { box-sizing: border-box; } .clock { width: 300px; height: 300px; margin: auto; padding-top: 75px; background: #000; text-align: center; } .clock .time_box { width: 100%; padding-left: 10px; } .clock span { color: #fff; } .txt_lg { font-size: 75px; } .txt_sm { font-size: 20px; } .date_box { font-size: 15px; } #day { display:..

1번 탭 2번 탭 3번 탭 Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american a..