자바스크립트 이벤트(event)는 웹페이지에서 사용자가 어떤 행동을 할 때 발생하는 신호라고 생각하면 됩니다. 예를들어, 버튼을 클릭하거나 키보드 키를 누르거나, 화면을 스크롤 하는 등의 이벤트가 발생할 수 있습니다.이때 자바스크립트는 이러한 이벤트를 감지 할 수 있습니다이벤트를 등록하는 3가지 방법인라인 (Inline) HTML 속성에 직접 등록하기 onclick, onmouseover 와 같은 속성클릭이 방법은 간단하지만, HTML과 자바스크립트 코드가 섞여 복잡성이 증가할 수 있어 권장되지 않습니다Property Listener 자바스크립트 코드로 등록하기 element.onclick   const button = document.getElementById("myButton");button.oncl..

시작하기 앞서.HTML5에서 도입된 데이터 속성(data-)은 HTML 요소에 추가적인 정보를 저장할 수 있게 해주는 속성입니다이 속성은 렌더링 과정에서 무시되지만, JavaScript를 통해 동적으로 데이터를 처리하는 데 매우 유용합니다데이터 속성의 특징.렌더링에 영향을 미치지 않는다:data-로 시작하는 속성은 HTML 문서가 렌더링될 때 화면에 표시되지 않습니다. 즉, 이 속성 자체는 웹 페이지의 UI에 영향을 주지 않지만, JavaScript에서 이를 참조하여 다양한 기능을 구현할 수 있습니다.HTML 요소에 추가적인 정보를 저장:data-* 속성은 개발자가 특정 HTML 요소에 임의로 데이터를 저장하고, JavaScript를 통해 그 데이터를 사용할 수 있게 해줍니다.구현할 내용.호랑이사자펭귄#..

.textContent & .innerHTMLh2.textContent = "Feedback"h2.innerHTML = "Feedback"textContent : Feedback 요소가 화면에 노출이 됩니다innerHTML : 태그안에 텍스트만 반환되게 됩니다.setAttribute & .removeAttributeh2.setAttribute('class', "red");h2.removeAttribute("class"); removeAttribute("class") : ("삭제할 속성")setAttribute('class', 'item') : ("부여해줄 속성", "속성 이름")HTML 요소 스타일링h2.style.color = "red"h2.classList.add('red');// css.red { ..

자바 스크립트  사용법첫번째 방법은 HTML 파일 외부에 작성되어 있는 JS 파일을 가져온다는 의미입니다두번재 방법은 HTML 파일 내부에서 직접 script 코드를 작성하는 것 입니다어떤 방법이 더 낫다라고는 할 수 없고, 코드의 복잡도를 줄이기 위해선 첫번째 방법을 많이 사용합니다콘솔과 경고console.log('Hello world')alert('Hello world')콘솔로그 함수는 콘솔 화면에 메세지를 출력하는 용도로 사용되고, 보통 코드 중간중간 사용하여 디버깅하는 용도로 사용됩니다alert 함수는 브라우저에서 경고창을 띄우게 됩니다변수let i = 5;const j = "string";...let i = 10; //가능const j = "string 2" //불가능let 변수 할당은 이후에 ..