javascript 7

[JavaScript] 자바스크립트 이벤트 버블링 이해하기

이벤트란이벤트는 사용자의 행동이나 브라우저의 상태 변화를 의미합니다. 버튼 클릭, 마우스 이동, 키보드 입력 등이 대표적인 이벤트입니다. 자바스크립트에서는 이러한 이벤트를 감지하고 처리하기 위해 이벤트 리스너를 활용합니다. 이벤트 전파란이벤트 전파는 이벤트가 DOM 트리에서 전달되는 방식을 말합니다.크게 두 가지 단계로 나눌 수 있습니다: 캡처링 단계 (Capturing Phase): 이벤트가 최상위 요소에서 아래 요소로 내려갑니다. 버블링 단계 (Bubbling Phase): 이벤트가 아래 요소에서 최상위 요소로 올라갑니다. 주로 우리가 다루는 것은 버블링 단계입니다. 이벤트 버블링이란이벤트 버블링은 특정 요소에서 발생한 이벤트가 부모 요소로 차례대로 전파되는 현상입니다. 예를들어, 버튼을 클..

Javscript 2025.03.18

[JavaScript] 자바스크립트 대문자 소문자 변환

오늘은 간단하게 코딩할 때 유용한 기술을 소개해보겠습니다. 문자열을 다룰 때 대문자로 된 단어를 소문자로, 소문자로 된 단어를 대문자로 변경하고 싶을 때가 있는데 이럴 때 문자열에 대소문자를 다루는 방법입니다. 대문자 변환 string.toUpperCase() let str="abcd EFGH"; str.toUpperCase(); // 'ABCD EFGH' 모든 소문자를 대문자로 바꿔줍니다! 소문자 변환 string.toLowerCase() let str="abcd EFGH"; str.toLowerCase(); // 'abcd efgh' 모든 대문자를 소문자로 바꿔줍니다!

Javscript 2023.01.15

[JavaScript] 자바스크립트 단축평가 (&& , ||)

단축 평가 "논리합(||) , 논리곱(&&) 연산자는 연산 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환합니다. 논리곱(&&) 연산자 논리곱 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환합니다. 첫 번째 "a" && "b" 코드에 경우 "a"가 Truthy 값이므로 true로 평가됩니다. 이때 &&연산자는 두 개의 피연산자가 모두 true로 평가되어야 하므로 두 번째 피연산자를 평가하기 전까지 결과를 알 수 없습니다. 이때 논리곱 연산자는 논리 연산의 결과를 결정하는 두 번째 피연산자("b")를 그대로 반환합니다. 논리합(||) 연산자 논리합 연산자는 두 개의 피연산자 중 하나만 true로 평가되면 true를 반환합니다. 첫 번째 줄을 보면 첫 번째 피연산자 "a"가..

Javscript 2023.01.14

[JavaScript] 자바스크립트 타입 변환 (type conversion)

오늘은 타입변환에 대해서 알아보겠습니다. 타입변환에는 크게 개발자가 의도적으로 변환하는 명시적 타입 변환(explicit type conversion)과 개발자의 의도와 상관없이 자바스크립트 엔진에 의해 변환되는 암묵적 타입 변환(implicit type conversion)이 있습니다. 타입 변환  명시적 타입변환이나 암묵적 타입변환은 기존의 변수를 직접 변경하는 것이 아닌 기존 값을 사용해 다른 타입의 새로운 값을 생성하는 것이다. a 와 b를 숫자에서 문자열로 타입변환하여 각각 str, str2에 할당했지만 a 와 b에 타입은 변하지 않았습니다.. 암묵적 타입 변환 암묵적 타입 변환이 발생하면 문자열, 숫자, 불리언과 같은 원시 타입 중 하나로 변환됩니다. 첫 줄에서 + 연산자는 피연사자 중 하나..

Javscript 2023.01.13

[JavaScript] 자바스크립트 레이블 문 (label statement)

오늘은 레이블 문에 대해서 알아보겠습니다. 레이블 문이란 식별자가 붙은 문을 말하고 문법은 다음과 같습니다. label : statement // foo라는 레이블 식별자가 붙은 레이블 문 ex) foo : console.log("foo"); 레이블 문은 프로그램의 실행 순서를 제어하는 데 사용됩니다. 반복문에 레이블을 붙이고 break , continue 구문을 사용해 반복문이 작업을 멈추고 다시 실행하는지를 지정할 수 있습니다. 이중 for 문의 내부 for 문에서 break를 실행하면 내부 for 문을 멈추고 외부 for 문으로 돌아가게 됩니다. 레이블 문을 사용하면 내부 for 문에서도 외부 for 문을 컨트롤할 수 있게 됩니다. 그렇다면 레이블 문을 사용한 것과 안한 것은 어떤 차이가 있을까요 ..

Javscript 2023.01.12

[JavaScript] 자바스크립트 연산자(operator)

이번에는 자바스크립트 연산자에 대해 알아보겠습니다. 그중 산술, 할당, 문자열, 비교, 논리 연산자에 대해서만 알아보겠습니다. 산술 연산자 사칙연산에 사용되는 덧셈(+),뺄셈(-),곱셈(*),나눗셈(/) 그리고 나머지를 계산하는 %가 있습니다. 이때, 위와 같이 문자열로 표현된 숫자 역시 계산이 되지만 + 에 경우 계산이 안 되는 것을 볼 수 있습니다. + 연산자에 경우 문자열과 사용될 경우 문자열을 연결해 주는 역할을 하게 됩니다. 문자열 연산자 + 연산자는 피연사자 중 하나 이상이 문자열일 경우 문자열 연결 연산자로 동작합니다. 첫 번째 연산(let a = 1 + "1")과 같이 + 연산자가 문자열과 함께 사용될 경우에는 숫자 1 을 문자열로 인식하여 연결해주는 동작을 합니다. 증감 연산자 증가연산자..

Javscript 2023.01.11

[JavaScript] 자바스크립트 데이터 타입

데이터 타입 자바스크립트(ES6)는 6개의 원시타입과 1개의 객체 타입, 총 7개의 데이터 타입을 갖고 있다. 원시 타입 숫자(Number) 문자열(String) 불리언(Boolean) undefined null 심벌(symbol) 객체 타입 숫자(Number) 정수와 실수가 구분 없이 하나의 숫자 타입만 존재한다. 표기법에 따라 2진수, 8진수, 16진수로 표현이 가능하다. 문자열(String) 문자열을 선언하는 방법은 ""(큰 따옴표) , ''(작은따옴표) , ``(백틱)으로 감싸는 방법이 있다. 불리언(boolean) 불리언 타입은 참, 거짓을 나타내는 true, false만 존재한다. undefined/null 자바스크립트 엔진은 변수가 선언될 때 값을 할당하지 않으면 undefined로 초기화 ..

Javscript 2023.01.09