[JS-중급편-DOM] 2. querySelector로 DOM 항목 찾기

이전 강좌에서 봤듯이 DOM은 HTML 문서에 존재하는 모든 요소로 구성된 트리와 같은 구조 일뿐입니다. 세부 사항은 중요하지 않습니다. 중요한 것은 데이터에 액세스하고 데이터를 읽거나 수정하려는 모든 HTML 요소가 주변에 떠 있다는 것입니다. HTML 요소를 찾는 방법에는 여러 가지가 있습니다. 단순한 방법은 바로 나무와 같은 구조로 배열되어 있어 간단히 말해 위아래로 움직여 무언가를 찾는 방법입니다. 이번 강좌에서는 모든 DOM 검색 요구의 95 %를 충족시키는 querySelector 와 querySelectorAll이라는 두 가지 내장 함수를 사용하는 방법을 배우게됩니다. querySelector 맛보기 querySelector 및 querySelectorAll의 기능을 설명하려면 다음 HTML..

• format_list_bulleted 코딩/Javascript
• · 2021. 1. 18.
• textsms

[JS-중급편-OOP] 14. Set 알아보기

이번 시간에는 세트(Set)에 대해 알아 보겠습니다. 여러 데이터를 저장할 때 아마 배열이 가장 먼저 떠오를 것입니다. 배열은 꽤 오랫동안 사용되어져 왔고 또한 매우 유연하며 사용하기 쉽게 만드는 많은 특성이 있습니다. 지난 몇 년 동안 JavaScript는 데이터 모음을 저장하는 또 다른 방법을 얻었습니다. 그 방법은 세트(Set)로 알려진 배열 모양의 방법을 통하는 것입니다. 표면적으로 배열과 세트는 매우 비슷해 보입니다. 그러나 세트는 배열과 다르게 보이는 많은 특성을 가지고 있습니다. 가장 큰 특징은 중복 값의 저장 허용 여부입니다. 세트에는 유니크한 아이템만 저장할 수 있습니다. 우리가 원하는 것을 저장하기 위해 세트를 사용할 수 있습니다. 그러나 배열과는 달리 우리는 그 항목을 한 번만 저장할..

• format_list_bulleted 코딩/Javascript
• · 2021. 1. 4.
• textsms

[JS-중급편-OOP] 13. JSON 완전 분석

데이터 저장, 검색 또는 전송과 관련하여 사용할 수 있는 파일 형식과 데이터 구조가 많이 있습니다. 처리하는 다양한 종류의 데이터를 처리하기 위해 텍스트 파일, Word 문서, Excel 스프레드 시트, zip 파일 등을 사용했을 것입니다. 웹 세계에는 다른 모든 것보다 우위를 차지하는 하나의 형식이 있습니다. 이 형식은 JSON (JavaScript Object Notation의 약자)으로 알려져 있습니다. 이번 편에서는 JSON 객체를 만드는 모든 방법에 대해 알아볼 것입니다. 우리는 그 안에 무엇이 들어가는지, 그리고 값을 읽는 방법에 대해 자세히 살펴볼 예정입니다. JSON 이란? JavaScript에서는 "객체 리터럴 문법"을 사용하여 객체를 정의하는 방법이 있습니다. let funnyGuy =..

• format_list_bulleted 코딩/Javascript
• · 2021. 1. 3.
• textsms

[JS-중급편-OOP] 6.숫자(Numbers)

JavaScript로 코드를 짤 때 우리는 대부분의 시간을 숫자를 다루는 데 소비 할 겁니다. 숫자로 직접 작업하지 않더라도 무언가의 수를 유지하거나 배열로 작업하는 것과 같은 가장 기본적인 작업을 수행할 때 숫자를 간접적으로 만나게 됩니다. 이 튜토리얼에서는 일반적인 작업을 수행하는 데 쓸 수 있는 방법을 살펴봄으로써 JavaScript의 숫자에 대해 알아보겠습니다. 그 과정에서, 숫자 관련하여 좀 더 깊게 들어가기도 할 겁니다. 숫자 사용하기 숫자를 사용하려면 우리가 해야 할 일은 단지 사용하는 것뿐입니다. 다음은 숫자 3으로 초기화된 stooges라는 변수를 선언하는 간단한 예입니다. let stooges = 3; 이게 다입니다. 그냥 사용하면 됩니다. 만약 소수점이 있는 숫자를 사용한다면 그냥 정..

• format_list_bulleted 코딩/Javascript
• · 2020. 12. 24.
• textsms

[JS-중급편-OOP] 3.문자열(String)

인간으로서 살아가면서 가장 중요한 게 아마 말, 글 아닐까요? 말과 글이 없다면 의사소통이 전혀 되지 않아 그것을 생각하면 아마 원시시대를 떠올리게 됩니다. 그래서 문득 떠오를 수 있는건 컴퓨터 세계, 더 나아가 자바스크립트 세계에서도 중요한건 말이겠죠? 오늘 주제는 그 말, 즉 문자열에 대해 좀 더 깊숙히 공부해 볼 예정입니다. 기초 말과 글을 이용해 작업할려면 단순히 코드에서 문자열을 사용하면 됩니다. 다음은 몇 가지 예입니다. let text = "this is some text"; let moreText = 'I am in single quotes!'; alert("this is some more text"); 문자열을 나열하는 것 외에도 종종 두 개의 문자열을 함께 결합할 수 있습니다. + 연산..

• format_list_bulleted 코딩/Javascript
• · 2020. 12. 22.
• textsms

[JS-기초편] 7.타이머(Timers)

기본적으로 코드는 동기적으로 실행됩니다. 동기적이라는 뜻은 명령문을 실행해야 할 때 즉시 실행한다는 뜻입니다. 실행을 지연시키거나 작업을 나중으로 지연시키는 개념은 JavaScript의 기본 동작이 아니며 자바스크립트 루프 편 공부할 때 잠깐 겪었을 겁니다. 루프는 각 사이클을 지연 없이 번개처럼 빠른 속도로 실행합니다. 이는 빠른 계산에 적합하지만 우리가 어떤 경우 좀 더 느린 속도로 무언가를 업데이트하려는 경우에는 좋지 않습니다. 즉시 실행되고 있는 작업을 중지 할 수 있는 기능이 존재하지 않는다는 것은 아닙니다. 그에 해당하는 기능은 setTimeout, setInterval 그리고 requestAnimationFrame의 세 가지가 있습니다. 이 기능에 대해 좀 더 알아봅시다. setTimeout..

• format_list_bulleted 코딩/Javascript
• · 2020. 12. 15.
• textsms