본문 바로가기
  • Coding & Book

전체 글223

DOM_4 1. 키보드 이벤트 키보드를 누르고 땔때 마다 이벤트를 발생시킬수 있다. -html click me! -js const input = document.querySelector('input'); input.addEventListener('keydown',function(){ console.log("DOWN") }) input.addEventListener('keyup',function(){ console.log("UP") }) 추가로 키보드를 길게 누르는것도 반응 할수 있다. 2. key 와 code 키보드에서의 실제 위치를 알 수 있다. const input = document.querySelector('input'); input.addEventListener('keydown',function(w){ c.. 2023. 3. 6.
1장 Hello, HTML + CSS + 자바스크립트 (~44p) 1. 홈페이지에서 코드 에디터를 설치한다. (Visual Studio Code 사용) https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 2. 설치 후 자기가 사용 하고 싶은 확장프로그램을 설치한다... 2023. 3. 6.
DOM_3 1. 계층이동 parentElement 한단계 위로 올라가서 부모 요소가 나오는 대신에 밑으로 내려가서 자녀요소를 출력하는 것이다. -모든요소에게 그 요소를 포함하고 있는 직속 부모 요소는 단 한개이다.(자식요소는 여러개일 수 있다.) 2. 새 DOM 요소 만들기 appendChild() 한 특정 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막에 삽입하는것이다. append() 한번에 한개 이상을 삽입할수 있고 최근에 나왔다. 그래서인지 익스플로어에서는 실행이 불가하다. prepend() 특정 요소의 앞에 무언가를 삽입할때 사용한다. 3. 제거하기 -removeChild 먼저 제거하려는 부모요소를 부르면 되는데 parentElement 로 불러주고 removeChild(제거할 요소)를 입력하면 제거.. 2023. 3. 1.
DOM_2 1. 속성 (id 바꾸기) - id가 banner인 이미지가 있다고 하면 아래와 같이 된다. Silkie Chickens 위 id를 변경해서 완전히 다른 id를 부여할수 있다.(예시로 loui3을 id로 해본다.) 그러면 아래와 같이 loui3이 id인 이미지가 있다라는것을 알 수 있다. 2. getAttribute, setAttribute getAttribute은 HTML 자체에서 직접 가져오게 한다.(해당요소에 지정된 값) -제목,id,class등을 갖고 오게 할 수 있다 setAttribute은 선택한 요소에 선택한 값을 넣는것이다. -type을 바꿀수 있다. 3. 스타일 변경하기 마크업을 직접 변경하지 않고 자바스크립트를 통해 스타일을 변경할수 있다. I ♥ Trees 위그림을 html 파일을 건.. 2023. 2. 26.
DOM 1. DOM이란? - DOM은 바로 문서 객체 모델을 뜻한다. - 쉽게 말해 웹페이지를 구성하는 자바스크립트 객체들의 집합이다. 2. DOCUMENT - 새로운 페이지를 열때마다 해당페이지의 콘텐츠를 이용한 문서 객체 모델이 생성되는데 DOCUMENT는 페이지의 콘텐츠를 나타내는 객체의 모음집과 같다. - CSS 스타일을 바꾸거나 요소를 숨기거나 할 수 있다. 3. getElementByID() - 이 메서드에 문자열을 전달하면 일치하는 ID를 가진 요소를 찾아 나타낸다. - id가 일치하는 요소를 찾으면 해당값이 나타나고 없으면 null로 나타낸다. - id로 선택할때만 작동하며 클래스 이름으로는 작용하지 않는다. ID가 name인 경우 4. getElementByTagName() -이 메서드에 문자열.. 2023. 2. 22.
05-02. 콜백과 배열 1. forEach 기본적으로 forEach는 배열 안의 아이템 각각에 대해 함수와 코드를 한 번씩 실행한다. 그래서 어떤 함수를 넣든 상관없이 함수가 아이템별로 한 번씩 호출되고 각각의 아이템이 함수에 자동으로 전달된다. 예시) const numbers = [1,2,3,4,5,6,7,8,9] numbers.forEach(function (el) { console.log(el) }) ++ 여러번 말했듯이 최근에는 for of가 더 간단해 많이들 사용하고 있다. 2. MAP 배열을 다른 상태로 매핑하는 것이다. 예를 들어 데이터의 일부만 가져오거나 그걸 두배로 늘릴때 사용한다. const fullNames = [{first: 'A', last: 'b'}, {first: 'c', last: 'd'}, {fi.. 2023. 2. 13.