생각 작업실 The atelier of thinking

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` 속성은 요소의 표시 여부를 결정..

1. 모달의 부분 앞서 소개했던 JavsScript 예제로 소개한 모달에서 HTML 부문만 따로 떼어내서 보면 아래와 같습니다. 2024.03.05 - [웹(Web) 이야기] - 24. 예제 - 모달 Modal 24. 예제 - 모달 Modal 지금까지 HTML, CSS에 이어 JavaScript를 HTML에 연결시키는 방법에 대해 알아봤습니다. 처음 JavaScript를 접했을 때 제일 어려웠던 부분이 변수, 객체, 배열, 반복문, 조건문 등등 생소한 용어들인데다 thinking-atelier.tistory.com Image Modal Modal 1. HTML에 이미지와 모달창을 만든다. × 모달이 나타날 부분 모달의 원리는, 부분을 클릭하면, 부분이 큰 창으로 나타나는 것입니다. 그리고 "X" 를 클릭..

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

앞서 HTML과 JavaScript를 연결하는 첫단계로 Script 태그와 HTML 안에서 JavaScript를 실행시킬 연결고리로 input 태그와 event 속성에 대해서 알아봤습니다. 이번 회차에는 JavaScript에서 HTML 문서 내의 특정 요소를 선택하는 방법에 대하여 알아보고자 합니다. CSS 의 선택자는 HTML의 특정 요소에 스타일 적용 시키기 위한 것처럼 JavaScript를 HTML의 특정 요소에 적용시키려면 CSS의 선택자와 같은 역할을 하는 메서드가 있습니다. 1. getElementById getElementById 메서드는 문서 내에서 특정 ID를 가진 요소를 찾아 반환합니다. ID는 문서 전체에서 고유해야 합니다. 반환 값은 해당 ID를 가진 요소이며, 일치하는 요소가 없으..