본문 바로가기

Javascript90

32. Object Destructuring (객체 구조분해 할당, 비구조화) 안녕하세요. 박기린 입니다. 저번 Array Destructuring 소개에 이어서, 이번엔 Object를 Destructuring 하는 방법에 대해 알아보겠습니다. (Array Destructuring 방식을 미리 숙지한 후 이 글을 보시는 것을 추천드립니다.) 전제 Object Destructuring을 소개하기에 앞서, 설명에 사용될 object를 하나 선언해둔다고 가정을 하겠습니다. const restaurant = { name: 'Classico Italiano', location: 'Via Angelo Tavanti 23, Firenze, Italy', categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'], starterMenu: ['Fo.. 2022. 11. 2.
31. Array Destructuring (구조 분해 할당, 비구조화) 안녕하세요. 박기린 입니다. 이번에는 배열 구조를 뜯어서 각 배열 요소를 다른 변수에 저장하는 방식인 'Destructuring'에 대해 알아보겟습니다. Array Destructuring Destructuring은 ES6에 추가된 기능입니다. Array(배열)이나 Object(객체)에서 별도의 변수로 값을 푸는 방식을 말합니다. 그 중 배열을 Destructuring 하는 방법에 대해 알아보겠습니다. 1. 일반적인 배열 요소 접근 방식 const arr = [2, 3, 4]; const a = arr[0]; // 2 const b = arr[1]; // 3 const c = arr[2]; // 4 일반적으로는 배열에 [대괄호]를 붙인 후 index 넘버를 사용해서 배열 요소에 접근합니다. 그래서 각 요.. 2022. 11. 1.
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.

티스토리툴바