보부상

자바스크립트를 사용하여 HTML 및 CSS를 수정하는 것은 동적인 웹 페이지를 만들고 상호작용성을 추가하는 데 매우 유용합니다. 아래에서는 자바스크립트를 사용하여 HTML 요소를 조작하고 CSS 스타일을 변경하는 방법에 대해 설명하겠습니다. 1. HTML 요소 선택하기 : 자바스크립트로 HTML 요소를 수정하기 전에 해당 요소를 선택해야 합니다. 일반적으로 document.querySelector() 또는 document.getElementById()와 같은 DOM 메서드를 사용하여 선택할 수 있습니다. 예를 들어, 아이디가 "myElement"인 요소를 선택하는 방법은 다음과 같습니다. - const element = document.getElementById("myElement"); 2. HTML 내..

⭐️ 반복문 ? 반복문이란 말 그대로 반복, 중복되는 코드의 양을 굉장히 효과적으로 줄일 수 있다. 자바스크립트에는 다양한 종류의 반복문이 있습니다. 각각의 반복문은 특정한 조건을 만족할 때까지 코드 블록을 반복적으로 실행합니다. 이를 통해 코드를 단순화하고 반복 작업을 자동화할 수 있습니다. 💫 반복문의 종류 1. for 반복문 : for 반복문은 초기화식, 조건식, 증감식을 포함한 세 가지 부분으로 구성됩니다. 초기화식은 반복문의 시작 시점에서 한 번만 실행되며, 조건식은 반복문의 각 반복마다 평가되고 참일 경우 계속하고 거짓일 경우 반복을 종료합니다. 코드 블록 내의 실행문들이 실행된 후에는 증감식이 실행되어 반복문의 제어 흐름을 결정합니다. 2. while 반복문 : while 반복문은 조건식이 ..

⭐️ 논리 연산자 && , || 조건문에 추가적으로 많이 사용되는 것이 논리 연산자이다. 자바스크립트에서는 논리 연산자를 사용하여 여러 개의 조건을 결합하고, 조건문이나 논리적인 판단을 수행할 수 있습니다. 주요한 세 가지 논리 연산자는 다음과 같습니다: 1. 논리곱 (AND) 연산자 (&&) : 논리곱 연산자는 두 개의 조건이 모두 참일 때 전체 식을 참으로 평가합니다. Ex1) if (조건1 && 조건2) { // 조건1과 조건2가 모두 참인 경우 실행되는 코드 } Ex2) if(a===3 && b===2) {}, a가 3이고 b가 2인 경우에만 코드 실행 2. 논리곱 (OR) 연산자 (||) : 논리합 연산자는 두 개의 조건 중 하나 이상이 참일 때 전체 식을 참으로 평가합니다. Ex1) if (조..

⭐️ 비교 연산자 자바스크립트에서는 다양한 비교 연산자를 사용하여 값 또는 표현식을 비교할 수 있습니다. 비교 연산자를 어떤 상황에서 많이 사용하느냐, 함수를 사용할 때 특정 조건에서만 호출되어 기능을 제공해줘야 하는 상황이 많이 있습니다. 그런 상황에서 특정 조건을 설정할 때 비교 연산자를 많이 사용합니다. 예를 들어, 달력을 통해 DB에서 데이터들을 가져오는 함수를 만든다고 가정했을 때 사용자가 입력한 날짜가 시스템 시간보다 더 미래의 날짜라면 DB에는 해당하는 데이터가 없으므로 잘못된 입력을 했다는 알림창을 띄우는 경우가 있습니다. 이렇게 조건문을 통해 비교 연산자 사용 예시를 알아봤습니다. 💫 비교 연산자에는 어떤 것들이 있을까요? 1. 동등 비교 (==) : 동등 비교 연산자 ==는 두 개의 값..

⭐️ 함수란? 함수는 코드 블록을 정의하고 재사용 가능한 기능 단위로 사용하는 데 사용됩니다. 함수는 특정 작업을 수행하고 값을 반환할 수 있습니다. 함수는 프로그래밍에서 중요한 개념 중 하나이며, 다양한 방식으로 정의하고 호출할 수 있습니다. 중복되는 기능을 하나의 메서드로 사용자 정의하여 호출하며 사용이 가능하다는 것 함수의 기본 형태는 여러 가지가 있습니다. 이 외에도 화살표 함수, 메서드 방식, 즉시 실행 함수 등 여러 형태가 있지만 주로 사용하는 것들을 예시로 들어봤습니다. 자바스크립트는 동적인 기능들을 만들다보니 특정 버튼을 누르면 이벤트가 일어나는 onclick이나 mouseover, onload 같은 이벤트 핸들러들을 많이 사용하게 됩니다. 클릭 이벤트가 발생했을 시 특정 함수를 호출하여 ..

⭐️ 객체 ( Object ) - 자바스크립트에서 객체는 속성과 메서드를 포함하는 데이터 구조입니다. 객체는 관련된 데이터와 해당 데이터를 조작하는 메서드를 논리적으로 그룹화할 수 있도록 해줍니다. 객체는 다른 데이터 유형을 포함하고 복합적인 동작을 수행할 수 있으며, 자바스크립트의 핵심 개념 중 하나입니다. 객체는 중괄호( {} )로 정의되며, 객체의 속성과 메서드는 이름과 값을 가집니다. 속성은 객체의 특징이나 상태를 나타내는 변수이고, 메서드는 객체가 수행할 수 있는 동작을 정의하는 함수입니다. 이러한 속성과 메서드는 객체 내에서 접근할 수 있는 특정 이름(키)를 가지고 있습니다. 💫 객체의 구조 name : key , car1 : value key와 value의 한 쌍으로 이루어집니다. 💫 객체에..

4️⃣ Method ( 메서드 ) ⭐️ Method란? 자바스크립트는 다양한 내장 메서드를 제공하여 데이터 처리, 문자열 조작, 배열 조작 등 다얀한 작업을 수행할 수 있습니다. 아래는 자주 사용되는 몇 가지 자바스크립트 메서드의 예시입니다. 1 ) 문자열 메서드 - length() : 문자열의 길이를 반환합니다. - toUpperCase() : 문자열을 모두 대문자로 변환합니다. - toLowerCase() : 문자열을 모두 소문자로 변환합니다. - indexOf() : 특정 문자열 또는 문자의 인덱스를 반환합니다. - substring() : 지정한 인덱스 범위 내의 문자열을 추출합니다. 2) 배열 메서드 - length : 배열의 길이를 반환합니다. - push() : 배열의 끝에 하나 이상의 요소..

3️⃣ 데이터 타입 ⭐️ Array ( 배열 ) - 자바스크립트에서 배열은 여러 개의 값을 하나의 변수에 저장하는 데이터 구조입니다. 배열을 사용하면 여러 값을 관리하고 접근할 수 있습니다. 자바스크립트에서 배열은 동적으로 크기를 조정할 수 있으며, 다양한 유용한 메서드와 속성을 제공합니다. - [], 대괄호로 사용 - 배열 각각의 데이터를 요소(Element)라고 부릅니다. - 배열의 각 요소는 index, 인덱스를 가집니다. 0부터 시작하며 1씩 더해져갑니다. ['test1', 'test2', 'test3', 'test4'] index 0 1 2 3 - index를 통해 각 요소에 접근이 가능합니다. Ex) test[0] = test1 , test[1] = test2, test[2] = test3, ..

2️⃣ 데이터 타입 종류 - String, Number, Boolean, undefined, null, symbol, Bigint, Object ⭐️ 문자열 (String) 따옴표로 정의한다. "", '' 숫자, 알파벳 ,공백 등 모두 텍스트화가 가능하다. ⭐️ 숫자 (Number) 사칙연산 ( +, -, *, /)을 산술 연산자라고 한다. 💫 문자열과 숫자의 연산? NaN이란? Not a Number, 숫자가 아니다. 숫자로서의 정상적인 값이 아니다. 라는 뜻입니다.

1️⃣ 변수 - 데이터를 담는 박스 - 변수명은 동사가 아닌 명사로 하는 것이 관례, 의무는 아님 -변수명은 가장 첫 글자 숫자 불가 💫 변수 선원 키워드 - var - let - const 💫 var을 지양해야 하는 이유는 재할당과 재선언에 있다. - 재할당 : 변수에 다른 값을 할당하는 것 - 재선언 : 변수를 동일한 범위 내에서 다시 선언하는 것 🌟 정리 var를 지양하는 이유는 개발 시 단점을 가지고 있기 때문이다. 변수 a가 여러 번 선언 되어도 에러가 발생하지 않는다. 개인이 혼자 진행하는 프로젝트라면 문제는 덜 하겠지만, 협업을 많이 하는 프로젝트라면 변수명이 겹쳤을 때 에러조차 뜨지 않는다면 원하는 결과가 나오지 않는 것은 물론이고 수많은 코드 속에서 에러를 잡아내기는 쉽지 않을 것이다...