Chapter 3-21. Value 속성 이해하기 (javascript)
·
JavaScript
📌 자바스크립트에서 입력 요소의 값 읽어들이기웹 페이지에서 사용자로부터 입력을 받을 때, 다양한 **입력 요소(input, select)**를 사용합니다. 자바스크립트는 이러한 입력 요소에서 사용자가 입력한 값을 쉽게 읽어들이고, 이를 활용하여 웹 페이지를 동적으로 제어할 수 있습니다.  📋 입력 요소의 value 속성입력 요소에서 사용자가 직접 입력한 값에 접근하려면, value 속성을 사용해야 합니다.🔹 value 속성 사용 예시: 텍스트, 비밀번호, 이메일 입력 필드 등에서 입력값을 가져옵니다.: 드롭다운 목록에서 선택한 값을 가져옵니다.✅ 예시 1: 요소에서 값 읽..
Chapter 3-20. 이벤트 핸들링(javascript)
·
JavaScript
자바스크립트 이벤트와 이벤트 핸들링이번 포스트에서는 웹 프로그래밍에서의 이벤트와 이벤트 핸들링에 대해 자세히 설명합니다. 자바스크립트에서 발생하는 다양한 이벤트를 처리하고, 이를 통해 사용자와의 상호작용을 어떻게 구현하는지에 대해 알아보겠습니다.  SPAN STRONG MARK 📌 이벤트란?이벤트란, 웹 페이지에서 사용자와의 상호작용을 나타내는 동작을 의미합니다. 예를 들어, 사용자가 버튼을 클릭하거나, 키보드를 눌렀을 때 발생하는 다양한 행동들을 이벤트라고 합니다.🔹 웹에서 발생할 수 있는 이벤트 예시클릭 이벤트: 사용자가 버튼을 클릭할 때키 다운 이벤트: 사용자가 키보드를 눌렀을 때폼 제출 이벤트: 사용자가 폼을 제출할 때그 외 다양한 상호작용 이벤트들이 있습니다.📋..
Chapter 3-19. 인수와 반환(javascript)
·
JavaScript
📌 자바스크립트 함수에서 인수와 반환값 이해하기함수는 코드의 반복을 줄이고, 재사용성을 높이기 위한 중요한 도구입니다. 함수에 인수를 전달하고, 함수에서 반환값을 받는 과정은 함수의 핵심 개념 중 하나입니다. 이번 포스팅에서는 인수와 반환값의 개념을 명확히 하고, 이를 자바스크립트 함수에 어떻게 적용하는지 알아보겠습니다.  🎯 1. 함수에서 인수(Argument)란?인수는 함수를 호출할 때 함수에게 전달하는 데이터를 의미합니다. 즉, 함수가 수행할 작업에 필요한 **"재료"**를 전달하는 것입니다.🔹 함수 정의에서 매개변수(Parameter)함수를 정의할 때는 이 인수를 받을 수 있도록 매개변수를 사용합니다. 매개변수는 함수 내부에서만 사용되는 변수이며, 인수는 외부에서 ..
Chapter 3-18. 함수 정의하고 호출하기(javascript)
·
JavaScript
📌 함수 정의와 호출 (자바스크립트 기초)함수는 코드 조각을 정의하여 반복적인 작업을 처리하거나, 특정 기능을 수행할 때 유용하게 사용됩니다. 함수는 일종의 **"명령어 묶음"**으로, 한 번 정의해두면 여러 번 호출하여 재사용할 수 있습니다.  🎯 1. 함수란?함수는 불러서 쓸 수 있는 코드 조각입니다. 변수처럼 데이터를 대입하고 그 이름을 대체할 수 있듯이, 함수를 정의하고 이름을 부여한 후에는 그 이름을 사용하여 함수를 호출할 수 있습니다.🔹 함수의 특징코드 조각을 미리 정의하고, 반복해서 호출하여 사용할 수 있습니다.매개변수를 사용하여 입력값을 전달받고, 반환값을 리턴할 수 있습니다.🎯 2. 함수 정의하는 방법자바스크립트에서 함수는 두 가지 방법으로 정의할 수 있..
Chapter 2-16. createElement & appendChild(javascript)
·
JavaScript
document.createElement() 메소드는 HTML에서 새로운 요소를 동적으로 생성하는 데 사용됩니다. 이 메소드를 활용하면 JavaScript로 동적으로 HTML 요소를 만들고, 생성된 요소를 웹 페이지에 추가할 수 있습니다. 그러나 createElement() 메소드로 요소를 생성한 후에는, **appendChild()**와 같은 메소드를 사용하여 실제로 웹 페이지에 표시해야 합니다.  📌 document.createElement() 메소드**document.createElement()**는 새 HTML 요소를 생성하여 반환하는 메소드입니다.🔹 기본 사용법let newElement = document.createElement('div');이 코드는 di..
Chapter 2-15. 반복문 while(javascript)
·
JavaScript
📌 JavaScript while Loop: 반복문 사용법반복문은 같은 작업을 여러 번 반복해서 수행할 수 있는 중요한 문법입니다. while문은 그 중 조건이 참인 동안 계속해서 실행되는 반복문입니다.  📋 while문 기본 구조while문은 주어진 조건이 참일 동안에 코드를 반복 실행하는 구조입니다. while문은 조건이 불리언 값을 반환하거나 불리언으로 해석될 수 있는 표현식이어야 합니다.🔹 기본 형식while (조건) { // 반복할 코드}조건이 참인 동안, 중괄호 {} 안의 코드가 반복해서 실행됩니다.📋 while문 사용 예시🔹 사용자 입력 받기prompt() 메소드를 이용해 사용자로부터 입력을 받고, 입력값이 0이 아닐 때까지 반복합니다.✅ 예시 코드let userInput..
Chapter 2-11. DOM 메소드 및 속성(javascript)
·
JavaScript
📌 DOM 메소드 사용법 완벽 가이드DOM 메소드는 자바스크립트를 통해 HTML 요소와 상호작용하는 데 사용됩니다. 이 메소드를 활용하면 웹 페이지의 동적 변화를 쉽게 구현할 수 있습니다. 이번 포스트에서는 DOM 메소드와 속성에 대해 알아보고, 실제 사용 예시를 통해 쉽게 이해할 수 있도록 설명합니다.  다시 만날까 봐 인스타로 몰래 보는 너의 하루들 누가 봐도 헤어진 티를 내 팔로우 다 끊고서 좋아요는 왜 눌렀니 (ㅋㅋ) 📋 1. 주요 DOM 메소드🔹 document.querySelector(x)역할: CSS 선택자 x를 기반으로 첫 번째 요소를 선택합니다.예시:let element = document.querySelector('...
Chapter 2-14. 반복문 for(javascript)
·
JavaScript
📌 자바스크립트 반복문 (for 문)반복문은 동일한 작업을 여러 번 반복하여 수행할 때 유용합니다. 특히 for문은 반복횟수와 조건을 한 줄에 정의할 수 있어 직관적입니다.  for문 기본 구조:for (초기식; 반복조건; 증감식) { // 반복할 작업}초기식: 반복을 시작할 때 한 번만 실행되는 부분입니다. 보통 반복에 사용할 변수 초기화를 합니다.반복조건: 이 조건이 true일 때만 반복을 계속합니다.증감식: 각 반복이 끝날 때마다 실행되어 반복할 때마다 변수를 증가 또는 감소시킵니다.for문 사용 예시:for (let i = 1; i  위 코드는 **i**가 1부터 5까지 증가하면서 각 값을 콘솔에 출력합니다. for문을 사용하면 반복할 횟수를 명확히 설정할 수 있습니다.✅ 마무리반복문..