Atelier BiCute

#1. 자바스크립트 소개 자바스크립트란 무엇인가? 자바스크립트의 역사 자바스크립트의 작동 방식 #2. 기본 자바스크립트 문법 변수(Variables) 데이터 타입(Data Types) 연산자(Operators) 표현식(Expressions) 구문(Statements) 예약어(Keywords) #3. 자바스크립트 함수 함수 만들기 함수 호출 함수의 매개변수(Parameters)와 인수(Arguments) Return 값 익명 함수 고차 함수 #4. 자바스크립트 객체 객체란? 객체 만들기 속성 액세스 속성 추가 및 수정 속성 제거 객체 리터럴 this 키워드 #5. 자바스크립트의 배열과 반복문 배열(Array) 배열의 반복 forEach 메소드 map 메소드 필터 메소드 reduce 메소드 #6. 조건문 및..

# let 및 const를 사용한 코드 구성 및 모듈성 "let" 및 "const"는 자바스크립트에서 변수를 선언하는 데 사용되는 키워드입니다. "let"은 재할당이 가능한 변수를 선언할 때 사용됩니다. 예를 들어: let myVariable = 10; myVariable = 20; // 가능 "const"는 재할당이 불가능한 상수를 선언할 때 사용됩니다. 예를 들어: const myConstant = 10; myConstant = 20; // 불가능 이러한 키워드를 사용하여 코드를 작성할 때, 모듈성을 높일 수 있습니다. 모듈성이란 코드를 작은 논리적 단위로 분리하여 이해하기 쉽고 유지 보수하기 쉽게 만드는 것입니다. 예를 들어, 변수를 전역 범위에서 선언하면 다른 함수에서도 그 변수를 사용할 수 있으..

# DOM (Document Object Model)이란? DOM은 HTML 또는 XML 문서의 구조를 프로그래밍적으로 접근할 수 있는 표준 방법입니다. DOM은 문서의 각 요소를 객체로 만들어서, 객체 구조를 통해 문서의 구조를 표현합니다. DOM은 문서를 객체 트리로 표현하고, 각 객체에 대한 속성과 메소드를 제공하여 프로그래머가 HTML 또는 XML 문서를 동적으로 수정할 수 있도록 합니다. # JavaScript로 HTML 요소 조작 JavaScript를 사용하여 DOM을 통해 HTML 요소를 조작할 수 있습니다. 예를 들어, JavaScript를 사용하여 HTML 요소의 텍스트, 스타일, 내용 등을 동적으로 변경할 수 있습니다. document.getElementById("myHeading")...

# 조건문(if/else) 자바스크립트에서 if/else문은 특정 조건이 참인지 거짓인지 판단하여 코드의 실행 여부를 결정하는 구문입니다. 기본적인 구조는 다음과 같습니다. if (condition) { // condition이 참인 경우 실행되는 코드 } else { // condition이 거짓인 경우 실행되는 코드 } condition은 특정 조건을 나타내는 부울 표현식입니다. 표현식이 참이면 if 블록이 실행되고, 거짓이면 else 블록이 실행됩니다. # Switch 문 Switch 문은 여러 개의 조건을 검사하여 하나의 값에 대한 여러 가지 처리를 제공하는 데 사용됩니다. 기본 구조는 다음과 같습니다. switch (expression) { case value1: // expression이 va..

# 배열(Array) JavaScript에서 배열(Array)은 같은 유형의 여러 개의 값을 가지는 객체입니다. 배열의 각 요소는 인덱스를 기준으로 접근할 수 있습니다. JavaScript에서 배열은 다음과 같이 생성할 수 있습니다. var arr = [1, 2, 3, 4, 5]; # 배열의 반복 JavaScript에서 배열의 각 요소를 처리하는 가장 일반적인 방법은 반복문(loop)을 사용하는 것입니다. 다음은 for 반복문을 사용하여 배열의 각 요소를 출력하는 예제입니다. var arr = [1, 2, 3, 4, 5]; for (var i = 0; i < arr.length; i++) { console.log(arr[i]); } # forEach 메소드 forEach 메소드는 JavaScript에서 ..

# 객체(Object)란? 객체(Object)는 자바스크립트에서 가장 기본적인 데이터 타입 중 하나입니다. 객체는 키-값 쌍의 컬렉션으로 구성되어 있습니다. 키는 문자열 혹은 심볼(Symbol) 타입이 될 수 있고, 값은 어떠한 타입의 값(숫자, 문자열, 불리언, 함수, 다른 객체 등)이 될 수 있습니다. 객체를 생성할 때는 객체 리터럴 방식 또는 객체 생성자 함수를 사용할 수 있습니다. 객체 리터럴은 {}로 감싸지며, 키-값 쌍을 콤마(,)로 구분하여 생성할 수 있습니다. 객체 생성자 함수는 "new Object()"와 같이 사용합니다. 객체는 수학적인 개념인 개체(entity)를 모방한 것으로, 여러 개의 데이터 요소를 하나의 집합체로 관리하는 것이 가능합니다. 예를 들어, 사람을 나타내는 객체가 있..

# 함수를 만드는 방법 함수는 JavaScript 코드 블록을 감싸는 구조로, 일련의 작업을 수행하고 결과를 반환하는데 사용할 수 있습니다. 함수는 다음과 같이 정의할 수 있습니다: function functionName(parameters) { // 실행할 코드 return value; } # 함수 호출 함수를 사용하려면, 함수의 이름을 사용하여 함수를 호출해야 합니다. 함수 호출 시 필요한 인수를 전달할 수 있습니다: 예: functionName(arguments); # 함수 매개변수 및 인수 함수 매개변수는 함수를 호출할 때 전달되는 입력 값을 나타내는 변수입니다. 아래는 함수 매개변수의 예입니다: function add(a, b) { return a + b; } 함수를 호출할 때, 전달되는 입력 ..

# 변수(Variables) JavaScript에서 변수는 값을 저장하는 공간을 의미합니다. 변수는 어떤 값을 할당하여 생성할 수 있습니다. 이 값은 나중에 변경할 수 있습니다. JavaScript에서는 변수를 생성하기 위해 "var" 키워드를 사용할 수 있습니다. 다음은 값 "10"을 갖는 변수 "x"를 정의하는 예입니다. var x = 10; JavaScript에서는 변수의 이름은 알파벳, 숫자, 밑줄, 달러 기호로 구성될 수 있으며, 자바스크립트 스타일 가이드에서는 알파벳으로 시작하는 것을 권장하고 있습니다. ES6에서는 "let"과 "const" 키워드를 사용하여 변수를 생성할 수 있습니다. "let"은 변수 값을 변경할 수 있는 변수를 정의하고, "const"는 값이 한 번 할당되면 변경할 수 ..

# 자바스크립트란 무엇인가? JavaScript는 웹 브라우저에서 동적인 콘텐츠를 생성하고 관리하기 위해 개발된 프로그래밍 언어입니다. 웹 페이지에 동적으로 내용을 추가하거나, 사용자와의 상호작용을 구현하는 등, 웹 페이지를 더욱 생동감 있게 만들 수 있는 기능을 제공합니다. JavaScript는 HTML, CSS와 함께 웹 페이지 개발에 있어서 매우 중요한 역할을 합니다. # 자바스크립트의 역사 JavaScript는 넷스케이프 커뮤니케이션즈에서 Brendan Eich이 1995년에 개발한 스크립팅 언어입니다. 웹 브라우저에서의 동적인 인터랙션과 사용자 인터페이스를 구현하는데 사용되었습니다. 처음에는 브라우저에서의 간단한 스크립트 프로그래밍에 사용되었지만, 지금은 서버사이드, 모바일 앱, 데스크톱 애플리..

form 데이터를 콘솔로그나 화면에 출력해보면 "[object FormData]” 라고만 출력이 됩니다. 이 내용을 확인하는 방법들에 대한 글입니다. # FormData FormData는 양식 데이터의 키-값 쌍을 저장하는 데 사용되는 JavaScript의 개체입니다. get 메소드를 사용하고 검색하려는 값의 키를 전달하여 FormData 객체의 내용에 액세스할 수 있습니다. let formData = new FormData(); formData.append('key1', 'value1'); formData.append('key2', 'value2'); console.log(formData.get('key1')); // 출력 'value1' console.log(formData.get('key2')); ..