생각 작업실 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)는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나로, 웹 페이지를 동적으로 만들고 상호 작용할 수 있게 하는 데 사용됩니다. 자바스크립트를 비롯한 거의 모든 프로그래밍 언어는 데이터타입, 제어문, 함수, 변수 등으로 구성되어 있습니다. 만약 프로그래밍을 건물 짓는 것에 비유한다면 다음과 같이 비유할 수 있습니다: 건물을 짓기 위해 사용되는 다양한 재료들은 프로그래..

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

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

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

앞서 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..

지금까지 HTML, CSS에 이어 JavaScript를 HTML에 연결시키는 방법에 대해 알아봤습니다. 처음 JavaScript를 접했을 때 제일 어려웠던 부분이 변수, 객체, 배열, 반복문, 조건문 등등 생소한 용어들인데다 이것이 어떤 원리로 웹페이지에 작동하는 지에 대해 모르는 상태에서 코드를 혼자 만들어 보려하니 막막하기만 하고 한 줄 작성하기 힘들었던 것이었습니다. 도움이 되었던 것은 이미 만들어진 코드를 보면서 하나씩 어떻게 연결되는 지 어떤 원리로 작동하는 지 찾아보는 것이었습니다. 처음부터 JavaScript의 모든 문법 및 구문을 다 배우고 난 후에 코드를 작성하는 것은 너무나 어려운 일 입니다. 이미 만들어진 코드를 보면서 그것에 대한 문법과 구문을 이해하는 것이 더 효율적이라 생각합니다..

1. HTML과 JavaScript 연결 HTML 파일 내에서 이 예시에서 onclick 속성은 사용자가 버튼을 클릭했을 때 실행될 JavaScript 함수인 myFunction()을 호출합니다. 사용자가 버튼을 클릭하면 해당 함수가 실행되어 경고창이 표시됩니다. 이와 같이 이벤트 속성을 사용하여 특정 동작에 대응하여 JavaScript를 실행할 수 있습니다. 특정 동작 또는 상황을 만드는 JavaScript 코드를 HTML에서 실행하기 위해서 트리거 역할을 하는 태그 중에 하나가 input 태그 입니다. 특히 onclick 속성값으로는 JavaScript 가 와야합니다. 2. HTML - 태그 태그는 웹 페이지에서 사용자로부터 정보를 입력받기 위한 요소로 매우 중요하며 다양한 종류의 입력을 처리할 수 ..

기본적으로 JavaScript는 HTML 위에서 작동하는 언어이기 때문에 이 둘을 연결하는 것은 가장 기초적이고 중요한 작업입니다. CSS는 태그를 이용하여 연결하였다면, JavaScript는 태그를 이용하여 연결합니다. 또한, style 태그 안에서는 CSS를 사용한 것 처럼 script 태그 안에서는 JavaScript를 사용해야합니다. HTML 파일과 JavaScript를 연결하는 방법은 여러 가지가 있습니다. 1. HTML 파일 안에서 직접 코드 작성하여 연결 HTML 파일 내에서 - 외부 파일을 네트워크로 연결 JavaScript 코드를 별도의 외부 파일로 분리하고 HTML에서 이 파일을 로드할 수 있습니다. 이는 코드의 재사용성을 높이고 유지보수를 용이하게 만듭니다. ▶ myscript.js ..