pogun 코딩 공부 저장소

1. JavaScript에서 버튼 클릭 이벤트 처리 방법 1-1. onclick 속성 사용 (ES5 방식)document.getElementById("btn").onclick = function() { console.log("버튼 클릭");};: document.getElementById("btn")을 사용해 버튼 요소를 가져온 후, onclick 속성을 통해 클릭 이벤트를 설정: 함수 내부에서 console.log()를 이용해 "버튼 클릭"이라는 메시지를 출력1-2. 별도 함수 정의 후 onclick에 할당document.getElementById("btn").onclick = btnClick;function btnClick() { console.log("button 클릭!");}: btnC..

: JavaScript의 Date 객체를 사용하여 현재 날짜 및 시간 출력, 특정 날짜 설정, 개별 날짜 요소 추출하는 방법 1. HTML 기본 구조 지금시간 : 현재 시간을 표시 : 클릭하면 현재 시간을 출력하는 함수를 실행 : 특정 날짜를 설정하고, 그 정보를 표시2. 현재 시간 표시 (setInterval 활용) displayDate() 함수: 현재 시간을 가져와서 화면에 출력 function displayDate(){ document.getElementById("demo").innerHTML = Date();}: Date()를 호출하면 현재 날짜 및 시간이 문자열 형태로 반환 : document.getElementById("demo").innerHTML = Date();     ..

1. HTML 기본 구조 설정태그 작성: : 사용자가 클릭하면 makeElement() 함수를 실행하여 태그를 생성 : : 줄 바꿈 역할 : : 새로운 요소들을 추가할 영역2. makeElement() 함수: 새로운 HTML 요소 생성기능설명 document.createElement("태그명") 새로운 HTML 요소 생성 element.innerHTML = "내용" 요소 안에 텍스트 삽입 document.body.appendChild(요소) 에 요소 추가 document.getElementById("id").appendChild(요소) 특정 id를 가진 요소에 추가 element.setAttribute("속성", "값") 속성 설정 (input의 type, placeholder 등) a..

1. var (과거 방식, 사용 지양) 함수 스코프(Function Scope)- var로 선언된 변수는 함수 내부에서만 유효하고, 블록({}) 내부에서는 제한되지 않음 재선언 가능- 같은 변수명을 여러 번 선언해도 오류가 발생하지 않음 호이스팅(Hoisting) 발생- 선언된 변수가 코드 최상단으로 끌어올려짐 - 하지만 undefined로 초기화되므로 예측하지 못한 오류가 발생할 수 있음function example() { if (true) { var x = 10; } console.log(x); // 10 (블록 범위 무시)}var a = 1;var a = 2; // 가능 (재선언 허용)console.log(b); // undefined (Hoisting 발생)va..

문제 1. 이미지 클릭 이벤트 예제 - alert 창 출력 문제 2. 사용자 입력 확인 - 한국에서 가장 높은 산 맞히기 한국에서 제일 높은 산은? 답: 확인 문제 3. 버튼 클릭으로 연산 수행 - 사칙연산 및 나머지 연산 구현 변수의 연산 a, b에 대해서 변수 a와 b의 계산 결과를 표시합니다. 덧셈 뺼셈 곱셈 나눗셈 나머지 = 문제 4. 체크박스로 추가 요금 계산 - 체육관 이용료 자동 합산: 기본 체육관 이용료(4,800원)를 기준으로 사용자가 추가 옵션을 선택할 때마다 총 금액이 자동으로 변경되..

1. 버튼 클릭 이벤트 처리 (onclick): 버튼 클릭 시 입력한 값을 가져와서 태그에 표시하는 방법 HTML 코드:p tag완료 JavaScript 코드: function buttonClick() { // 입력된 값을 가져옴 let message = document.getElementById('msg').value; // 가져온 값을 태그에 표시 document.getElementById('demo').innerText = message;}설명:1. 사용자가 태그에 값을 입력 2. [완료] 버튼을 클릭하면 buttonClick() 함수 실행 3. document.getElementById('msg').value → 입력한 값을 가져옴 4. document.getEl..

1. 변수(Variable) 선언: JavaScript에서는 변수를 선언할 때 var, let, const를 사용: 그러나 ES6 이후에는 let과 const를 주로 사용var number = 1;var name = "홍길동";let height = 182.2;let clear = true;: JavaScript는 데이터 타입을 명시하지 않고도 변수를 선언할 수 있음: var를 사용하면 변수 재선언이 가능하지만, ES6에서는 let과 const를 권장 JavaScript) 변수 정리 : var, let, const1. var (과거 방식, 사용 지양) 함수 스코프(Function Scope)- var로 선언된 변수는 함수 내부에서만 유효하고, 블록({}) 내부에서는 제한되지 않음 재선언 가능- 같은 변수..

JavaScript란?: 웹 브라우저에서 실행되는 클라이언트 측 스크립트 언어 : HTML 및 CSS와 함께 웹 페이지의 동작을 담당한다. 특징:: 웹 브라우저에서 실행되는 프론트엔드 언어 : HTML 태그를 조작하여 동적인 웹 페이지 구현 가능 : 컴파일 없이 실행되므로 빠르고 가벼움 : 변수를 선언할 때 자료형을 명확하게 지정하지 않아도 됨 (동적 타입) : ES6(ECMAScript 2015) 이후의 문법이 많이 사용됨   JavaScript 발전 과정 단계설명 JavaScript 기본적인 HTML 제어 기능 제공 jQuery 간결한 문법을 활용한 라이브러리 Angular SPA(Single Page Application) 프레임워크 Node.js 서버 측에서 실행되는 JavaScrip..