lshjju 님의 블로그

데이터를 가공하고 논리를 판단하는 도구인 **연산자(Operators)**에 대해 알아보겠습니다.연산자는 변수에 담긴 자료들을 계산하거나 비교하여 새로운 값을 만들어내는 역할을 합니다.1. 산술 연산자 (Arithmetic Operators)숫자 데이터를 가지고 기본적인 수학 계산을 수행합니다.+ (더하기), - (빼기), * (곱하기), / (나누기)% (나머지): 나눗셈 후 남은 값을 구합니다. (홀수/짝수 판별 시 자주 사용)** (거듭제곱): 숫자를 제곱합니다. (예: 2 ** 3은 8)2. 대입 연산자 (Assignment Operators)변수에 값을 저장하거나, 기존 값에 계산된 결과를 다시 저장할 때 사용합니다.=: 오른쪽 값을 왼쪽 변수에 대입합니다.+=, -=, *=, /=: 산술 연산..

프로그램에 '판단력'을 부여하는 **조건문(Conditional Statements)**에 대해 알아보겠습니다.조건문은 주어진 조건이 참(true)인지 거짓(false)인지에 따라 서로 다른 코드를 실행하도록 흐름을 제어하는 도구입니다.1. if 문 (기본 조건문)가장 대표적인 조건문으로, "만약 ~라면"이라는 의미를 가집니다.if: 조건이 참일 때 실행됩니다.else if: 앞선 조건이 거짓일 때, 새로운 조건을 검사합니다.else: 제시한 모든 조건이 거짓일 때 마지막으로 실행됩니다.JavaScript let score = 85;if (score >= 90) { console.log("A학점입니다.");} else if (score >= 80) { console.log("B학점입니다.");..

프로그래밍의 마법이자 효율성의 끝판왕인 **반복문(Loops)**에 대해 알아보겠습니다.반복문은 똑같거나 비슷한 동작을 우리가 원하는 횟수만큼, 혹은 특정 조건이 만족될 때까지 자동으로 되풀이하는 도구입니다.1. for 문 (가장 많이 쓰이는 반복문)정해진 횟수만큼 반복할 때 주로 사용합니다. 세 가지 설정값이 필요합니다.초기화식: 반복을 시작할 변수를 만듭니다. (예: let i = 0)조건식: 이 조건이 참(true)인 동안 계속 반복합니다.증감식: 한 번 반복이 끝날 때마다 변수를 어떻게 변화시킬지 정합니다. (예: i++)JavaScript // "안녕하세요"를 5번 출력하기for (let i = 1; i 2. while 문 (조건 중심 반복문)조건이 참인 동안 무한히 반복합니다. 횟수가 정해져 ..

흐름을 즉시 중단시키고 탈출하는 명령인 break 문에 대해 알아보겠습니다.break는 반복문이나 switch 문 안에서 실행되며, 엔진이 이 키워드를 만나는 순간 가장 가까운 코드 블록을 즉시 빠져나오게 만듭니다. 이미지 출처 - '오뉴(ONEW)' 작가1. 반복문에서의 break (탈출)반복문의 조건식이 아직 참(true)일지라도, 특정 상황이 발생했을 때 반복을 강제로 멈추고 싶을 때 사용합니다.동작: break를 만나면 그 아래의 코드는 무시되고, 반복문 자체가 종료됩니다.JavaScript for (let i = 1; i 2. switch 문에서의 break (방어)switch 문에서 각 케이스(case)를 구분 짓는 아주 중요한 역할을 합니다.주의: 만약 break를 생략하면, 일치하는 케이스..

이벤트가 발생했을 때 그 동작을 실행시키는 장치인 이벤트 처리기에 대해 알아보겠습니다.이벤트를 처리하는 방법은 크게 두 가지 방식이 있으며, 각각의 특징을 이해하는 것이 중요합니다.1. 이벤트 핸들러 (Event Handler)이벤트 핸들러는 HTML 요소의 속성이나 자바스크립트 객체의 프로퍼티에 직접 함수를 연결하는 방식입니다.특징: 가장 고전적인 방식이며, 구현이 매우 단순합니다.단점: 하나의 이벤트에 오직 하나의 함수만 연결할 수 있습니다. 새로운 함수를 할당하면 기존의 함수는 덮어씌워져 사라집니다.① HTML 속성에 지정 (인라인 방식)HTML 태그 안에 직접 이벤트 속성을 적어주는 방식입니다.HTML 버튼② DOM 프로퍼티에 지정자바스크립트 코드 내에서 요소의 프로퍼티로 접근하여 할당하는 방식입..

사용자의 모든 움직임을 포착하는 이벤트(Event)의 종류에 대해 알아보겠습니다.웹 페이지에서 발생하는 이벤트는 매우 다양하며, 이를 적절히 활용하면 생동감 넘치는 웹 사이트를 만들 수 있습니다.1. 마우스 이벤트 (Mouse Events)사용자가 마우스를 움직이거나 클릭할 때 발생하는 이벤트입니다. 가장 흔하게 사용되는 이벤트들입니다.click: 요소를 클릭했을 때 발생합니다.dbclick: 요소를 더블 클릭했을 때 발생합니다.mouseenter / mouseleave: 마우스 포인터가 요소 안으로 들어오거나 나갈 때 발생합니다. (Hover 효과 구현 시 사용)mousemove: 마우스가 요소 위에서 움직이는 동안 계속 발생합니다.2. 키보드 이벤트 (Keyboard Events)사용자가 키보드의 키..

함수의 최종 결과물을 전달하는 **return(반환)**에 대해 알아보겠습니다.함수가 특정 작업을 수행한 뒤, 그 결과를 함수 밖으로 꺼내어 다시 사용할 수 있게 해주는 아주 중요한 문법입니다.1. return의 개념 (자판기 비유)함수를 하나의 자판기라고 생각하면 이해하기 쉽습니다.입력(Argument): 동전과 메뉴 선택 (함수로 전달하는 값)함수 내부 로직: 기계 안에서 음료수를 컵에 담는 과정반환(return): 배출구로 나온 음료수자판기 안에서 아무리 맛있는 음료를 만들어도, 배출구(return)를 통해 밖으로 내보내 주지 않으면 우리는 그 음료를 마실 수 없습니다.2. return의 두 가지 주요 역할① 결과값 반환함수 내부에서 계산되거나 생성된 값을 함수를 호출한 곳으로 돌려줍니다. 이 값을..

함수가 외부와 데이터를 주고받는 통로인 **파라미터(Parameter)**와 **아규먼트(Argument)**에 대해 알아보겠습니다.두 용어는 혼용해서 쓰는 경우가 많지만, 엄밀히 말하면 함수의 '설계' 단계와 '실행' 단계에서 그 명칭이 달라집니다.1. 파라미터 (Parameter, 매개변수)파라미터는 함수를 정의(설계)할 때 괄호 ( ) 안에 선언하는 변수를 의미합니다.역할: 함수 내부로 들어올 값을 담기 위한 '이름표'이자 '공간'입니다.특징: 함수가 호출되기 전까지는 실제 값이 들어있지 않은 상태입니다.2. 아규먼트 (Argument, 인수)아규먼트는 함수를 호출(실행)할 때 함수로 전달하는 실제 값을 의미합니다.역할: 설계된 파라미터 자리에 실제로 채워지는 데이터입니다.특징: 숫자, 문자열, 객..

함수를 만드는 또 다른 세련된 방법인 **함수 표현식(Function Expression)**에 대해 알아보겠습니다.자바스크립트에서는 함수를 마치 변수에 담긴 데이터처럼 취급할 수 있습니다.1. 익명 함수 (Anonymous Function)익명 함수란 이름이 없는 함수를 말합니다.이름이 없기 때문에 단독으로 존재할 수 없고, 보통 변수에 할당하여 사용합니다.특징: 이름을 지어줄 필요가 없어 간단한 기능을 구현할 때 편리하며, 변수 이름으로 함수를 호출합니다.호이스팅 주의: 변수에 할당하는 방식이므로, 함수 선언문과 달리 선언하기 전에는 호출할 수 없습니다.JavaScript // 변수 'sum'에 이름 없는 함수를 할당합니다.const sum = function(a, b) { return a + ..

프로그램의 재사용성을 높여주는 핵심 단위인 **함수(Function)**에 대해 알아보겠습니다.함수는 특정 작업을 수행하기 위해 설계된 코드의 묶음입니다. 마치 재료를 넣으면 정해진 과정을 거쳐 결과물을 만들어내는 '요술 상자'와 같습니다.1. 함수의 선언 (Declaration)함수를 만드는 과정입니다. 어떤 이름으로 부를지, 어떤 재료(매개변수)를 받을지, 어떤 일을 할지 미리 정의해둡니다.함수 이름: 함수를 구별하는 고유한 이름입니다.매개변수(Parameter): 함수 외부에서 내부로 전달받는 데이터의 통로입니다.실행 코드: 중괄호 { } 안에 작성하며, 함수가 호출될 때 실행될 내용입니다.JavaScript // 'sayHello'라는 이름의 함수를 선언합니다.function sayHello(na..