creamymood의 개발 공부 발자취 💭

✅ 이벤트(Event)란?이벤트는 웹 페이지에서 발생하는 모든 행동이나 변화를 의미해.예를 들면:버튼을 클릭했을 때 (click 이벤트)키보드를 눌렀을 때 (keydown 이벤트)마우스를 올려놓았을 때 (mouseover 이벤트)입력 창에 글자를 입력했을 때 (input 이벤트)이런 것들이 전부 "이벤트"야.✅ 이벤트 핸들러(Event Handler)란?이벤트 핸들러는 이벤트가 발생했을 때 실행되는 함수야.즉, "이벤트가 발생하면 이 코드를 실행해!"라고 지정하는 역할을 해.📌 예제 (이벤트 vs. 이벤트 핸들러)// 이벤트: 'click' (클릭하는 행위)// 이벤트 핸들러: 클릭했을 때 실행할 함수document.querySelector("button").addEventListener("click"..

문자열 함수는 문자열을 다룰 때 사용하는 함수나 메소드들을 의미합니다.문자열은 텍스트 데이터를 표현하는 데 사용되며, 이러한 문자열을 다룰 때 자주 쓰이는 함수들이 여러 가지 있습니다.예를 들어, 문자열을 자르거나, 결합하거나, 변환하거나, 특정 문자나 패턴을 찾을 수 있는 다양한 함수들이 존재합니다. 문자열 함수 예시: str.함수📝length: 문자열의 길이를 반환합니다.let str = "hello";console.log(str.length); // 5 📝charAt(): 특정 인덱스에 위치한 문자를 반환합니다.let str = "hello";console.log(str.charAt(1)); // "e" 📝substring(): 문자열의 일부를 잘라내는 함수입니다.let str = "hel..

1. 함수란?함수는 어떤 일을 대신 해주는 로봇이라고 생각하면 돼!예를 들어, **"계산기"**가 있다고 해보자. 계산기에 숫자를 넣으면 더하거나 빼주지?자바스크립트에서도 특정한 일을 하는 코드 묶음을 **"함수"**라고 해.2. 함수 만드는 방법 🍕 피자 가게 이야기로 쉽게 이해하기!🍽 함수 선언식 (Function Declaration) : "미리 준비된 레시피"피자 가게에서 레시피를 미리 공책에 적어두면 언제든 피자를 만들 수 있어요!function makePizza() { console.log("🍕 피자를 만들었어요!"); } makePizza(); // 결과: 🍕 피자를 만들었어요!레시피(함수)를 미리 선언하면 가게(코드) 어디서든 사용할 수 있어요!함수를 위에서 선언하지 않아..

연산자 (Operators):연산자는 변수나 값에 대해 특정 작업을 수행하는 기호예를 들어, 산술 연산자(+, -, *, /), 비교 연산자(==, !=, 등), 논리 연산자(&&, ||, !) 등 비교 연산자는 연산자 중 하나로, 두 값을 비교하여 true 또는 false를 반환자바스크립트에서 사용되는 주요 비교 연산자== (같다)값이 같은지 비교합니다. 형 변환을 허용합니다.예: 5 == '5'는 true를 반환=== (엄격한 같음)값과 자료형이 모두 같은지 비교합니다. 형 변환을 하지 않음.예: 5 === '5'는 false를 반환합니다.!= (같지 않다)값이 다른지 비교합니다. 형 변환을 허용합니다.예: 5 != '5'는 false를 반환합니다.!== (엄격한 같지 않음)값과 자료형이 다르면 t..

오늘도 화이팅 ~ 익숙해지기비교연산 비교연산은 언제나 boolean 데이터로 반환 한다 !데이터가 언제나 참 또는 거짓 * 등호 (=)은 대입연산자 이므로 기호 갯수를 잘 확인 해야 한다* 같다(==) / 완전히 같다 (===) 👉🏻완전히 같다는 자료형 까지 일치 ~(!= 같지 않다, !== 완전히 같지 않다) * 문자열도 비교 연산 가능( 문자가 같은지)조건문조건문이란 주어진 조건의 참/거짓에 여부에 따라 프로그램 흐름을 결정할 수 있는 구문 if (result) {alert("사용자가 확인을 눌렀습니다.");}else { alert("사용자가 취소를 눌렀습니다.");}즉, true일 때 if가 실행되고, false일 때 else가 실행되는 구조 !!정리하면:if는 첫 번째 조건을 확인하고,else..

브라우저의 기본 제공 기능인 **대화 상자(Dialog box)**을 알아보자자바스크립트에서는 사용자와 상호작용을 위해 여러 가지 대화 상자를 사용할 수 있다.이들은 Window 객체의 메서드로 분류 Q. 그러니까 이런 대화 상자 안에 document.querySelector의 변수 같은 걸 넣을 수 있다는거지 ?A. 네. document.querySelector를 사용해서 웹 페이지에서 특정 요소를 선택한 후, 그 값을 alert, prompt, confirm 등의 대화 상자에 넣을 수 있습니다.1. Alert 대화 상자 alert()사용자에게 정보를 알리는 창을 띄우는 메서드.사용자에게 하나의 버튼(확인)을 제공alert("이것은 알림 창입니다!");   2. Confirm 대화 상자 (confirm..

디버깅이 뭐야?디버깅(Debugging)은 프로그램에서 **틀린 부분(버그)**을 찾아서 고치는 과정이야.🔍 디버깅을 쉽게 설명하면?📌 초등학생 숙제 검사랑 비슷해!숙제를 다 했어. (코드를 작성했어)맞았는지 확인해. (실행해 봐)틀린 부분이 나오면 고쳐! (에러를 찾고 수정해)

아이고 끙끙 어렵다 어려워한 발자국이 험난한 개발자로의 길..  자바스크립트에서 DOM (Document Object Model)은 웹 페이지의 구조를 다루는 방법이야.간단하게 말하자면, DOM은 웹 페이지를 자바스크립트로 제어하고 수정할 수 있게 해주는 창구 같은 거야. HTML 문서가 있으면, DOM은 그 문서의 각 요소(제목, 단락, 버튼 등)를 객체로 변환하고,자바스크립트는 이 객체를 조작해서 페이지의 내용이나 스타일을 변경할 수 있어.💡자바스크립트에서 선택자를 사용할 때, 괄호 안에 작은 따옴표(' ')나 큰 따옴표(" ")는 꼭 써야 한다.   두 가지 모두 괜찮고, 중요한 건 선택자 문자열을 감싸야 한다는 점 !    즉, 아이디나 클래스를 선택할 때는 다음처럼 사용합니다:getElemen..

뭔가 이름부터 부담스러운 자바스크립트 공부 시작 너무나 새로운 언어라,, 익숙해지려면 조금 시간이 걸리겠지만 시작이 반이다 자꾸 쓰다보면 언젠간 익숙해지겠지 .. ?  챗지피티에게 물어본 쉬운 자바스크립트 설명자바스크립트(JavaScript)를 쉽게 설명해줄게!1. 자바스크립트는 무엇인가?자바스크립트는 웹사이트를 더 똑똑하게 만드는 언어야. 버튼을 클릭하면 팝업 창이 뜨게 하거나,입력한 값이 맞는지 실시간으로 확인하는 기능을 추가할 수 있어.웹사이트에서 단순한 글자와 사진만 있는 게 아니라, 움직이거나 반응하는 기능을 만드는 게 바로 자바스크립트야!2. 기본 개념을 쉽게 이해하기자바스크립트는 명령어를 이용해서 웹페이지에 변화를 주는 거야.아래는 가장 기본적인 예제야. console.log("안녕, 자바스..