생각 작업실 The atelier of thinking

1. 문서객체모델(DOM, Document Object Model) 자바스크립트 문서객체모델(DOM, Document Object Model)은 웹 페이지의 구조화된 문서를 프로그래밍적으로 접근하고 조작하는 데 사용되는 인터페이스입니다. DOM은 HTML, XML 및 XHTML 문서의 계층 구조를 나타내며, 각 요소는 객체로 표현됩니다. DOM을 사용하여 웹 페이지의 요소를 선택하거나 수정할 수 있습니다. (1) 요소 선택하기(Selecting Elements) document.getElementById( ), document.getElementsByClassName( ), document.getElementsByTagName( ) 등의 메서드를 사용하여 HTML 요소를 선택할 수 있습니다. (2) 요소..

이번 회차에는 객체(Object)라는 개념에 대해서 알아보겠습니다. 객체란 추상적 의미로, 초보자에게는 개념잡기가 쉽지 않습니다. 객체를 한마디로 정의하면 '실제로 존해하는 사물'을 의미하고 이름과 값으로 구성된 속성을 가진 자바스크립트의 데이터 타입이라 말할 수 있습니다. 1. 프로그래밍 언어의 구성 자바스크립트(JavaScript)는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나로, 웹 페이지를 동적으로 만들고 상호 작용할 수 있게 하는 데 사용됩니다. 자바스크립트를 비롯한 거의 모든 프로그래밍 언어는 데이터타입, 제어문, 함수, 변수 등으로 구성되어 있습니다. 만약 프로그래밍을 건물 짓는 것에 비유한다면 다음과 같이 비유할 수 있습니다: 건물을 짓기 위해 사용되는 다양한 재료들은 프로그래..

"토글(Toggle)"은 어떤 상태를 번갈아가며 전환하는 동작을 의미합니다. 주로 UI 요소의 가시성이나 상태를 변경하는 데 사용됩니다. ​ 간단히 말하면, 토글은 한 번 실행될 때마다 상태가 바뀌는 행동을 말합니다. 예를 들어, 버튼을 클릭할 때마다 어떤 요소를 표시하거나 감추는 동작이 토글이라고 할 수 있습니다. ​ 자바스크립트에서 토글을 구현하는 방법은 주로 조건문과 상태 변수를 사용합니다. 클릭 이벤트 또는 다른 트리거를 통해 상태 변수가 변경되고, 해당 상태에 따라 UI 요소의 가시성이 변경됩니다. 앞서 조건문을 사용하여 화면을 나타내기도 하고, 감추기도 하는 것을 알아봤습니다. 2024.03.26 - [웹(Web) 이야기] - 31. 예제 : 토글 Toggle 31. 예제 : 토글 Toggle..

JavaScript에서의 제어문이란 프로그램의 실행 흐름을 제어하는데 사용됩니다. 제어문은 특정 조건에 따라 다른 코드 블록을 실행하거나 반복적으로 코드를 실행할 수 있도록 합니다. 대표적인 제어문에는 앞서 살펴보았던 조건문과 더불어 이번회차에 알아볼 반복문이 있습니다. 반복문은 같은 동작을 여러 번 실행하기 위해 사용하는 문입니다. 반복문을 사용하면 불필요하게 여러 명령을 늘어놓지 않아도 명령을 반복 실행할 수 있습니다. 반복문(Loops)은 특정한 조건이 참인 경우에 코드 블록을 반복적으로 실행하는 방식으로 구성됩니다. JavaScript에서는 주로 while문, for문, for-in문 등이 사용됩니다. while문은 특정 조건이 참인 동안 반복을 제어하는 데 사용되며, for문은 특정 횟수만큼 반..

"토글(Toggle)"은 어떤 상태를 번갈아가며 전환하는 동작을 의미합니다. 주로 UI 요소의 가시성이나 상태를 변경하는 데 사용됩니다. 간단히 말하면, 토글은 한 번 실행될 때마다 상태가 바뀌는 행동을 말합니다. 예를 들어, 버튼을 클릭할 때마다 어떤 요소를 표시하거나 감추는 동작이 토글이라고 할 수 있습니다. 자바스크립트에서 토글을 구현하는 방법은 주로 조건문과 상태 변수를 사용합니다. 클릭 이벤트 또는 다른 트리거를 통해 상태 변수가 변경되고, 해당 상태에 따라 UI 요소의 가시성이 변경됩니다. 1. 조건문 토글을 전환할 때 필요한 것이 조건문입니다. 영어시간에 배웠던 조건문인 if문이 그대로 Java Script에도 같은 의미로 사용됩니다. 즉, 조건문이란 프로그램내에서 표현식의 결과에 따라 별도..

1. 자료형 (Data Type)이란 프로그래밍 언어는 자료를 쉽게 다룰 수 있도록 자료 형태에 따라 구분하여 관리합니다. 이러한 자료의 종류를 자료형 혹은 영어로 데이터타입(Data Type)이라 부릅니다. 프로그래밍 언어에서 자료형을 구분하는 이유는 다음과 같습니다: (1) 데이터 처리와 관리 각각의 데이터 유형은 특정한 형태와 속성을 가지고 있습니다. 이를 통해 프로그램은 데이터를 올바르게 처리하고 관리할 수 있습니다. 예를 들어, 숫자 데이터를 산술 연산에 사용하고 문자열 데이터를 텍스트 처리에 사용할 수 있습니다. (2) 메모리 할당과 최적화 다양한 데이터 유형에 대해 메모리 할당과 최적화를 다르게 수행할 수 있습니다. 각각의 자료형은 메모리에서 차지하는 공간과 저장 방법이 다르기 때문에, 프로..

지난 회차에 함수를 사용하여 코드를 구조화하였습니다. 이번 회차에는 이 함수를 여러 이미지에 재사용해 보겠습니다. 앞서 적용된 코드는 하나의 이미지에만 사용할 수 있어, 이를 여러 개의 이미지에 적용하기 위해서는 배열이라는 개념이 필요합니다. 먼저, 배열(Array)에 대해서 알아보겠습니다. 1. 배열이란 배열이란 한마디로 여러 자료를 묶어서 활용할 수 있는 특수한 자료입니다. 배열은 하나의 변수에 여러 값을 저장할 수 있으며, 이러한 값들은 순서대로 나열되어 있습니다. 각각의 값은 인덱스(index)라고 불리는 숫자로 식별됩니다. 배열은 다음과 같은 특징을 가지고 있습니다. (1) 순서가 있는 집합 배열은 각 요소의 순서가 있으며, 이 순서는 0부터 시작하는 인덱스로 접근할 수 있습니다. 따라서 배열의..

앞서 JavaScript의 변수에 대해서 알아봤습니다. 이번 회차에는 JavaScript 함수에 대해 알아보겠습니다. 1. 함수(Function)란 ? 함수란 특정 작업을 수행하도록 설계된 코드블록을 말합니다. 이러한 함수는 필요한 작업에서 호출할 때 실행됩니다. 함수는 우리가 수학에서 만나봤을 겁니다. "함수는 입력값에 따라 출력값을 만들어 내는 블랙박스와 같다." 이 말은 JavaScript 함수에도 똑같이 적용됩니다. 그뿐아니라, 거의 모든 프로그래밍 언어에 함수라는 도구를 사용합니다. 자바스크립트에서 함수는 코드를 재사용하고 구조화하기 위한 핵심적인 구성 요소입니다. 함수는 일련의 작업을 수행하는 코드 블록이며, 이를 호출하여 코드를 실행할 수 있습니다. 함수는 매개변수(parameter)를 받아..

1. 모달의 부분 2024.03.05 - [웹(Web) 이야기] - 24. 예제 - 모달 Modal 24. 예제 - 모달 Modal 지금까지 HTML, CSS에 이어 JavaScript를 HTML에 연결시키는 방법에 대해 알아봤습니다. 처음 JavaScript를 접했을 때 제일 어려웠던 부분이 변수, 객체, 배열, 반복문, 조건문 등등 생소한 용어들인데다 thinking-atelier.tistory.com 위 코드의 핵심은 모달 부분의 CSS display 속성을 클릭때마다 "block"과 "none"으로 바꿔서 요소를 나타내고 사라지게 하는 것입니다. JavaScript의 기본 문법과 구문을 통하여 알아보겠습니다. 2. JavaScript Inline JavaScript inline 은 JavaScri..

1. 모달의 부분 2024.03.05 - [웹(Web) 이야기] - 24. 예제 - 모달 Modal 24. 예제 - 모달 Modal 지금까지 HTML, CSS에 이어 JavaScript를 HTML에 연결시키는 방법에 대해 알아봤습니다. 처음 JavaScript를 접했을 때 제일 어려웠던 부분이 변수, 객체, 배열, 반복문, 조건문 등등 생소한 용어들인데다 thinking-atelier.tistory.com 앞서 소개했던 JavaScript 예제로 소개한 모달에서 CSS부문만 따로 떼어내서 보면 아래와 같습니다. 2. CSS display 속성 모달이 작동하는 원리 중 하나는 CSS의 `display` 속성을 이용하여 모달을 보이게 하거나 감추는 것입니다. `display` 속성은 요소의 표시 여부를 결정..