본문 바로가기

비개발자의 개발 일지

현장 팀장에서 수출 ERP까지 — AI와 함께 시스템을 만든 기록

시리즈 보기
반응형

javascript60

JavaScript 계산기 · DOM 실습 완전 정리 Web Development · JavaScriptJavaScript 계산기 · DOM 실습계산기, span 스타일 변경, p 개수 세기, 랜덤 배경색 예제를 정리합니다.시작 오늘 분석할 코드이 폴더는 DOM 조작과 이벤트 처리 연습을 모은 장입니다. 작은 예제가 많기 때문에 코드가 어느 요소를 찾고, 어떤 이벤트에서 어떤 스타일이나 값을 바꾸는지 구분하는 것이 핵심입니다.function addInput(b) { let lcd = document.getElementById("lcd"); if (lcd.value == "0") lcd.value = b; else lcd.value += b; } function backward() { let lcd = document.getElementById("lcd");.. 2026. 7. 6.
JavaScript 타이머 산수 · Enter 계산기 완전 정리 Web Development · JavaScriptJavaScript 타이머 산수 · Enter 계산기setTimeout 카운트다운 산수 게임과 Enter 키 계산기 흐름을 정리합니다.시작 오늘 분석할 코드이 폴더의 예제는 이전 산수 게임을 이벤트와 타이머로 확장합니다. 사용자가 직접 버튼을 누르는 흐름뿐 아니라 시간이 지나면 자동으로 채점되는 흐름, 키보드 입력 이벤트, 마우스 이동과 이미지 변경 이벤트를 함께 다룹니다.let timerID = null; let countDown = 11; function startTimer() { document.getElementById("score").innerHTML = 0; let clock = document.getElementById("clock"); co.. 2026. 7. 6.
JavaScript onmousemove · onblur · radio 이미지 완전 정리 Web Development · JavaScriptJavaScript 마우스 커서 · 라디오 이미지포커스 이벤트, 마우스 좌표 추적, 라디오 버튼 이미지 변경을 정리합니다.시작 오늘 분석할 코드이 폴더의 예제는 이전 산수 게임을 이벤트와 타이머로 확장합니다. 사용자가 직접 버튼을 누르는 흐름뿐 아니라 시간이 지나면 자동으로 채점되는 흐름, 키보드 입력 이벤트, 마우스 이동과 이미지 변경 이벤트를 함께 다룹니다.window.onblur = function(e) { document.body.style.backgroundColor = "lightgray"; } window.onfocus = function(e) { document.body.style.backgroundColor = "white"; } docu.. 2026. 7. 6.
JavaScript 산수 게임 완전 정리 Web Development · JavaScriptJavaScript 산수 게임산수 문제 채점, 난수 문제 생성, 해상도 확인 예제를 한 흐름으로 정리합니다.시작 오늘 분석할 코드원본 코드는 고정 산수 문제를 채점하는 버전에서 시작해, 자동으로 문제를 생성하는 버전으로 확장됩니다. 마지막에는 screen 객체로 해상도를 확인하는 보조 예제도 포함됩니다.function calc() { let total = 0; let qArray = document.getElementsByClassName("question"); let aArray = document.getElementsByClassName("answer"); for (let i = 0; i getElementsByClassName같은 class를 가진 .. 2026. 7. 6.
반응형

티스토리툴바