[JS-중급편-DOM] 3. DOM 요소 수정하기

이번 강좌에서는 지금까지 배운 지식을 바탕으로 JavaScript를 사용하여 DOM 요소에 액세스하고 수정하는 기본적인 방법에 대해 알아볼 예정입니다. 이 시점에서 여러분은 DOM이 무엇인지 알 것입니다. querySelector 및 querySelectorAll을 사용하여 요소를 찾는 방법도 살펴 보았습니다. 다음은 찾은 DOM 요소를 수정하는 방법을 배우는 것입니다. 앞으로는 JavaScript를 사용하여 일부 요소의 텍스트를 변경하거나, 이미지를 다른 것으로 교체하거나, 문서의 한 부분에서 다른 부분으로 요소를 이동하거나, 인라인 스타일을 설정하거나 등의 DOM 수정에 대해 배우겠습니다. DOM 요소는 객체입니다 JavaScript를 사용하여 브라우저에 표시되는 내용을 수정하는 기능은 하나의 주요 ..

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

[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] 9.빌트인 객체 확장

우리가 지금까지 알고 있듯이 JavaScript는 빌트인 객체가 잘 제공되는 언어입니다. 이러한 빌트인 객체는 텍스트, 숫자, 데이터, 날짜 등으로 작업할 때 많은 핵심 기능을 제공해 줍니다. 자바 스크립트에 익숙해지면 점점 더 빌트인 객체에 대해 더 완벽하게 이해하고 싶어할 겁니다. 배열을 셔플(shuffle)할 수 있는 다음 코드를 예로 들어 알아 보겠습니다. function shuffle(input) { for (let i = input.length - 1; i >= 0; i--) { let randomIndex = Math.floor(Math.random() * (i + 1)); let itemAtIndex = input[randomIndex]; input[randomIndex] = input[i..

• format_list_bulleted 코딩/Javascript
• · 2020. 12. 27.
• 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-기초편] 9.클로저(Closures)

지금 쯤이면 함수와 함수의 기능에 대해 많이 알고 계실 거라고 생각합니다. JavaScript의 함수 관련에서 가장 중요한 부분은 아마 클로저라고 생각합니다. 클로저는 함수(function)와 변수 유효 범위(variable scope)가 교차하는 교집합이라고 볼 수 있습니다. 이제는 클로저에 대해 말로만 할게 아니라 이제는 코드를 보면서 설명하겠습니다. 클로저가 무엇인지 설명하기 위해 여기서 더 얘기한들 더 혼란스러울 뿐입니다. 다음 섹션에서는 익숙한 영역에서 시작해서 클로저랑 관계있는 좀더 어려운 영역으로 진행하면서 설명해 보겠습니다. 함수 내 함수 첫 번째로 할 일은 함수 내에 함수가 있고 내부 함수가 반환될 때 어떤 일이 발생하는지 자세히 살펴 보는 것입니다. 일단 먼저 함수의 역할을 다시 한번 ..

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

[JS-기초편] 8.변수 유효 범위(variable scope)

변수와 관련된 것을 다시 살펴보겠습니다. 우리가 선언하는 변수에는 실제로 언제 사용할 수 있는지 결정하는 어떤 레벨의 가시성이 있습니다. 사람이 이해할 수 있는 뜻으로 바꿔 말하면 우리가 변수를 선언한다고 해서 코드의 아무 곳에서나 액세스 할 수 있다는 의미는 아닙니다. 우리가 이해해야 할 몇 가지 기본 사항이 있으며, 이는 변수 유효 범위(variable scope)라는 주제에 속합니다. 이번 튜토리얼에서는 이미 기존에 본 적이 있는 사례를 살펴봄으로써 변수 유효 범위(variable scope)를 설명 할 것입니다. 변수 유효 범위는 매우 어려운 내용이지만, 일단 여기서는 수박 겉핧기 식으로 간단히 살펴볼 예정입니다. Global Scope (전역) 글로벌 스코프(global scope)를 먼저 알아..

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