JavaScript
-
[DOM]JavaScript로 실시간 시계 만들기JavaScript 2023. 10. 26. 11:11
주제 실시간 시계를 웹 페이지에 추가하는 것은 많은 웹 개발자들이 관심을 가지는 주제 중 하나입니다. 이 글에서는 JavaScript를 사용하여 실시간 시계를 만드는 예제를 소개하겠습니다 시계 요소 선택 먼저, 시계를 표시할 HTML 요소를 선택해야 합니다. 아래의 코드는 #clock ID 시계를 표시할 요소를 선택합니다. let clock = document.querySelector("#clock"); 시간 업데이트 JavaScript의 setInterval 함수를 사용하면 일정한 간격으로 코드를 반복 실행할 수 있습니다, 아래의 코드는 1초마다 현재시간을 가져와서 #clock 요소에 표시합니다. setInterval(function () { let now = new Date(); clock.inner..
-
[DOM] JavaScript를 사용하여 도형 조작하기JavaScript 2023. 10. 26. 11:06
도형 요소 선택 도형을 조작하기 위해 먼저 해당 도형 요소를 선택해야 합니다. 아래코드는 #rect ID로 도형 요소를 선택합니다. let myRect = document.querySelector("#rect"); 마우스 이벤트로 도형 모양 변경 이제 JavaScript를 사용하여 마우스 이벤트를 적용하여 도형 모양을 변경할 수 있습니다. 아래 코드는 mouseover 이벤트와 mouseout 이벤트를 사용하여 도형의 배경색과 모양을 변경 합니다. myRect.addEventListener("mouseover", function () { // 마우스가 위로 올라가면 실행되는 함수 myRect.style.backgroundColor = "green"; // 배경색을 녹색으로 myRect.style.bord..
-
[DOM]JavaScript로 이미지 조작하기JavaScript 2023. 10. 26. 11:03
이미지 태그 선택 먼저, JavaScript를 사용하여 HTML 이미지 태그를 조작하려면 해당 이미지 태그를 선택해야 합니다. 아래의 코드는 이미지 태그를 #Image ID로 선택합니다. let image = document.querySelector("#Image"); 이미지 속성 변경 선택한 이미지 태그의 속성을 변경할 수 있습니다. 아래의 코드는 이미지의 src,width,height 속성을 변경하여 이미지를 빈이미지로 설정하고 크기를 조정합니다. image.src = "http://placehold.it/300x200"; // 빈 이미지 image.width = "300"; image.height = "200"; 이러한 방식으로 JavaScript를 사용하여 이미지를 동적으로 변경할 수 있으며, 웹..
-
[DOM]JavaScript로 클릭 및 마우스 이벤트 사용하기JavaScript 2023. 10. 26. 10:46
클릭 이벤트로 텍스트 변경하기 JavaScript함수 changeText는 클릭 이벤트를 통해 텍스트를 변경하는 역할을 합니다. 클릭하면 "클릭해 보세요" 텍스트가 "클릭하셨네요!"로 변경됩니다. function changeText(event) { event.target.innerHTML = "클릭하셨네요!"; } 마우스 이벤트로 배경색 변경하기 마우스 이벤트 함수 'mouseOver'와 'mouseOut'는 마우스가 요소 위로 올라갔을 때와 나갔을 때 배경색을 변경하는 역할을 합니다. function mouseOver(event) { event.target.style.backgroundColor = "orange"; } function mouseOut(event) { event.target.style...
-
[DOM] JavaScript를 사용하여 글자를 클릭하면 배경색 변경하기JavaScript 2023. 10. 26. 10:40
클릭 이벤트 함수 정의 먼저, 글자를 클릭할 때 실행될 클릭 이벤트 함수를 정의합니다. 아래의 'changeBg'함수는 'color' 매개변수를 받아서 해당 색상으로 배경색을 변경합니다 function changeBg(color) { // id="result" 위치에 배경색을 변경 let result = document.querySelector("#result"); // 배경색 변경 result.style.backgroundColor = color; } 글자 클릭 이벤트 설정 다음으로, 원하는 글자를 클릭하면 'changeBg' 함수가 호출되도록 설정합니다. 아래의 HTML 코드는 세 가지 글자로 이루어진 링크를 제공하면 각 글자를 클릭하면 배경색이 변경됩니다. Green Orange Purple 이 코..
-
[DOM] JavaScript를 사용하여 버튼 클릭 시 팝업 창 숨기JavaScript 2023. 10. 26. 10:32
팝업 창 숨기기 먼저 팝업 창을 닫는 버튼을 선택합니다. 이렇게 선택한 버튼에 클릭 이벤트를 추가하여 버튼을 클릭할 때 실행할 함수를 정의합니다. let closeBtn = document.querySelector(".popup > button"); closeBtn.addEventListener("click", function () { // 클릭 시 실행될 부분 // 2) .popup 태그를 안보이게 함 document.querySelector(".popup").style.display = "none"; // 팝업 창 숨김 }); 위 코드에서 .popup > button 선택자로 버튼을 선택하고, 해당 버튼을 클리하면 팝업창을 숨기도록 설정 됩니다. 팝업창을 숨기는 css 스타일을 준비합니다. 팝업창이 ..
-
[DOM] HTML DOM을 활용한 여러 개의 요소 선택 및 조작JavaScript 2023. 10. 26. 10:24
DOM에서 여러개의 요소 선택하기 DOM에서 여러 개의 요소를 선택하여면 qeurySelectorAll 함수를 사용합니다. 이함수는 CSS선택자를 사용하여 원하는 요소를 선택하고 NodeList라는 객체로 반환합니다. 예를 들어,다음 코드는 모든 '' 태그를 선택하여 NodeList로 저장합니다. let elements = document.querySelectorAll("ul li"); 선택한 요소 조작하기 선택한 요소를 조작하려면 반복문을 사용하여 NodeList의 각 요소를 순회합니다. 이 예제에서는 for 반복문을 사용하여 각 요소을 내용을 출력하고 줄 바꿈을 추가합니다. // HTML HTML5 CSS Javascript Springboot // JavaScript for (let i = 0; i..
-
[DOM]"HTML DOM과 웹 페이지 동작 원리"JavaScript 2023. 10. 26. 10:14
웹 개발에서 DOM은 핵심 개념중 하나입니다. DOM은 웹브라우저가 HTML 문서를 읽어들이고 그 구조를 메모리에 표현하는 방식을 설명합니다. 이글에서는 웹 브라우저의 동작 원리와 DOM의 개념을 살펴보겠습니다. 웹 페이지 동작 원리 컴퓨터 웹 브라우저는 HTML 문서를 읽어 들입니다. 이 과정은 파싱(문법 해석)이라고도 합니다. 파싱된 문서는 메모리에 트리구조로 저장됩니다, 이 트리구조는 DOM 이라고 불립니다. DOM 구조 예시 예를 들어 DOM 구조는 다음과 같이 나타낼수 있습니다. window(최상위 부모객체: html문서, 주소창, 메뉴, 상태바등) | document(객체,html 문서) | html(태그) | ---------------------------------- | | head(태그..