본문 바로가기

JS/JavaScript 강의67

30. Handling Keydown Events 안녕하세요. 박기린 입니다. 이전에 이벤트 핸들러에 대해서 설명을 드렸습니다. (해당 글 : https://arnopark.tistory.com/508) 마우스 클릭으로 이루어진 이벤트 핸들러(리스너)에 대해 중점으로 설명을 드렸습니다. 이번엔 자바스크립트 웹사이트에서 특정 키보드 입력이 생기면, 이에 맞춰서 특정 동작이 작동하게 하는 방법에 대해 알아보겠습니다. Action Type - keydown document.addEventListener('keydown', function(e) { console.log(e); }); addEventListener()는 첫 번째 인수로 action type을 받습니다. 키보드 입력을 받고 싶으면 'keydown'을 지정해주시면 됩니다. 그러면 handler(li.. 2022. 10. 31.
29. 자바스크립트로 HTML class를 추가/삭제하기 안녕하세요. 박기린 입니다. 이전에 DOM을 이용하여 HTML Elements를 조작하는 방법에 대해 알아보았습니다. (해당 글 : https://arnopark.tistory.com/506) 그 중에서 class attribute를 수정하는 방법에 대해 알아보겠습니다. HTML의 class를 추가/제거 위와 같은 HTML div 태그가 있다고 봅시다. div에는 'modal'과 'hidden'이라는 두 개의 클래스가 있습니다. class가 여러 개로 이루어져 list를 형성할 경우에는 classList property와 메소드를 이용해서 list 안의 class를 추가하거나 제거할 수 있습니다. const modal = document.querySelector('.modal'); const openMo.. 2022. 10. 30.
28. 자바스크립트로 CSS style 조작하기 안녕하세요. 박기린 입니다. 이전에 JS를 이용해서 HTML DOM을 조작하는 방법에 대해 알아봤습니다. (https://arnopark.tistory.com/506) 이 글에 덧붙여서 CSS style 까지 조작하는 방법을 알아보겠습니다. HTML의 style Attribute HTML과 CSS파일을 별도로 관리하지만, HTML의 style attribute를 이용해서 CSS Style을 적용할 수 있습니다. 바로 이 style attribute를 이용해서 JS로 DOM의 style에 접근할 수 있습니다. style property와 할당 연산자(=)로 DOM Style 조작하기 임의로 'test' 클래스를 부여한 후, 조작을 가해보겠습니다. document.querySelector()를 이용해서 조작.. 2022. 10. 26.
27. Handling Click Events - 이벤트 핸들러 안녕하세요. 박기린 입니다. 홈페이지를 보면 수 많은 버튼들이 존재합니다. 버튼을 클릭하면, 그 버튼의 역할에 걸맞은 일이 나타납니다. 예를 들어 블로그의 카테고리 버튼을 클릭하면, 해당하는 카테고리의 글 목록이 담긴 페이지를 볼 수 있습니다. 이처럼 버튼에 어떠한 기능을 부여할 때, 그 기능에 대해서 'Event Handler'라고 부릅니다. 이벤트 핸들러(Event Handler) 이벤트 핸들러는 '어떠한 사건에 대한 동작을 다룬다'라는 의미를 가집니다. 위의 예시 또한 이벤트 핸들러입니다. 버튼을 누르면(사건) 어떠한 동작이 발생하므로, 이 모든 경우를 이벤트 핸들러라고 볼 수 있습니다. "마우스로 카테고리 버튼을 클릭했다" - 사건 "카테고리 버튼을 클릭하면 카테고리 글 목록이 보인다." - 사건.. 2022. 10. 25.
26. DOM을 이용하여 HTML Elements를 조작해보기 안녕하세요. 박기린입니다. 저번 글에서 DOM에 대해 설명을 드렸습니다. (DOM 설명글: https://arnopark.tistory.com/504) 이번에는 DOM을 JS를 이용해서 접근하는 방법에 대해 알아보겠습니다. HTML Elements를 선택하고 조작하기 직관적인 설명을 드리기 위해 제 블로그 사이트를 이용해보겠습니다. 구글 크롬의 개발자모드(F12)에 들어가면 이런 창이 뜹니다. PC화면 기준으로, 글의 제목 바로 위를 보면 '글의 카테고리'가 적혀있습니다. class는 category로 되어있습니다. JS로 DOM (HTML Elemnts)에 접근하기 위해선 'document' object(객체)를 사용해야 합니다. document객체는 따로 JS 모듈을 설치할 필요가 없습니다. 그런데 .. 2022. 10. 23.
25. DOM (문서 객체 모델, Document Object Model) 안녕하세요. 박기린입니다. HTML과 JS는 서로 밀접한 관계를 맺고 있습니다. 웹 프로그래밍 - 웹사이트를 제작함에 있어서 특히 그러한데요, 이때 중요하게 사용되는 개념 중 하나로 'DOM'이 있습니다. 지금부터 DOM에 대해 알아보겠습니다. DOM DOM은 Document Object Model (문서 객체 모델)의 줄임말입니다. DOM은 HTML, XML document의 구조화된 표현(structured representation)을 제공하며, 프로그래밍 언어(JS 등등)가 DOM 구조에 접근할 수 있게 해줍니다. 이때, document는 웹페이지라고 보셔도 됩니다. 웹페이지가 html로 작성된 문서의 일종입니다. 태그 단위, 태그 단위 등등 의 태그들을 객체(object)로 묶은 후, 자바스크립.. 2022. 10. 21.
24. 반복문 - for Loop 안녕하세요. 박기린입니다. 지금부터 for 반복문에 대해 알아보겠습니다. for문 for 반복문은 (괄호)안의 조건이 true인 경우에 계속 {중괄호} 안의 코드가 작동하는 Loop문입니다. for (counter; logical condition; update the counter) (괄호) 안의 조건은 이런 형태로 구성되어 있습니다. counter : 카운터로 사용할 식 또는 변수를 선언합니다. 주로 let 키워드를 이용해서 새로운 카운터 변수를 선언합니다. logical condition : 반복문이 실행될 때마다, logical condition 식도 같이 평가가 됩니다. 평가 결과가 참이라면 반복문이 계속 실행됩니다. 거짓이라면 반복문이 종료 됩니다. update the counter : cou.. 2022. 10. 20.
23. Object 메소드 안녕하세요. 박기린입니다. 저번 object(객체) 소개글에 이어서, 이번엔 object에 내장된 기본 method(메소드)들에 대해 알아보겠습니다. Method const giraffe = { firstName: 'giraffe', lastName: 'park', birthYear: 2000, job: 'teacher', friends: ['Michael', 'Peter'], hasDriverLicense: true, calcAge: function(birthYear) { // 2022. 10. 19.
22. Object 소개 안녕하세요. 박기린 입니다. Array에 이어서 이번엔 Object(객체)에 대해 설명을 드리겠습니다. Array의 한계 한 변수에 다양한 value를 저장하는 방법으로 Array(배열)가 이미 존재합니다. 하지만 Array에는 아쉬운 점이 하나 있습니다. const giraffeArray = [ 'giraffe', 'park', 2022-2000, 'teacher', ['Michael', 'Peter'], ]; 위와 같은 배열은 각 요소에 이름을 붙일 수 없고, 오로지 index만 붙일 수 있습니다. 각 요소에 이름을 붙이기 위해서 object를 사용합니다. Object const parkGiraffe = { firstName: 'giraffe', lastName: 'park', age: 2022 - .. 2022. 10. 18.

티스토리툴바