본문 바로가기

자바스크립트99

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.
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.
21. Array 기본 메소드 part.1 (Basic Array Operations-Methods) Array 내장메소드 part 1. https://arnopark.tistory.com/549 part 2. https://arnopark.tistory.com/499 안녕하세요. 박기린입니다. 자바스크립트의 배열은 다양한 메소드(Array.prototype.method())를 지원합니다. 지금부터 대표적인 배열 메소드들에 대해 알아보겠습니다. Add elements arrayName.push() : push() 메소드는 ()안에 있는 인수를 배열의 맨 뒤에 요소로 삽입합니다. push() 메소드 자체는 배열에 요소를 삽입한 후, 그 array의 length(길이)를 return 합니다. const friends = ['Michael', 'Steven', 'Peter']; const newLength =.. 2022. 10. 17.
20. Array 소개 안녕하세요. 박기린입니다. 변수에는 다양한 데이터 타입의 value들을 담을 수 있습니다. 하지만 여러 개의 변수를 한 곳에 저장하고 싶은 상황이 생길 수 있습니다. 예를 들면, 전화번호부 같이 여러 개의 전화번호를 각각 변수를 지정해서 저장하기 보다는, 하나의 변수에 몰아서 담아주고 싶을 때가 생깁니다. 그럴 때를 위해 Array(배열)이 존재합니다. Array를 선언하는 방법 Array를 선언하는 방법에는 두 가지가 있습니다. 1. Array Literal Syntax const friends = ['Michael', 'Steven']; [대괄호]와 ', 콤마'를 이용해서 배열을 선언합니다. 2. Array Function const years = new Array(1991, 2004, 2000); .. 2022. 10. 14.

티스토리툴바