반응형 프로그래밍/[javascript] 자바스크립트56 [JavaScript] 자바스크립트 setInterval()과 clearInterval() 함수 목 차1. setInterval과 clearInterval 함수란?2. setInterval() 함수2-1. 문법2-2. 사용 예제3. clearInterval() 함수3-1. 문법3-2. 사용 예제4. 주요 특징4-1. 비동기 작업5. 활용 예제5-1. 박스 이동 애니메이션 예제5-2. 타이머 만들기 예제6. 주의사항 1. setInterval과 clearInterval 함수란? setInterval과 clearInterval은 JavaScript에서 특정 작업을 일정한 시간 간격으로 반복 실행하거나, 반복 작업을 중단할 때 사용됩니다. 2. setInterval() 함수2-1. 문법const intervalId = setInterval(callback, delay, ...args);callback:.. 2024. 12. 30. [JavaScript] 자바스크립트 innerText 사용법 목 차1. innerText 설명2. innerText 특징3. 사용 예제3-1. HTML 요소 내용 읽기3-2. HTML 요소 내용 쓰기3-3. CSS로 숨겨진 문자열 텍스트 확인4. innerText 장점과 단점 1. innerText 설명innerText는 JavaScript에서 DOM(Document Object Model) 요소의 텍스트 콘텐츠를 가져오거나 수정하는 데 사용되는 속성입니다.innerText는 사용자에게 실제로 보이는 텍스트를 기반으로 작동하며, 요소의 스타일과 렌더링 상태에 영향을 받습니다. 2. innerText 특징렌더링된 텍스트 기반:요소가 화면에 보이는 경우에만 값을 반환하거나 설정합니다.CSS 스타일에 따라 숨겨진 텍스트(display: none 또는 visibilit.. 2024. 12. 16. [JavaScript] 자바스크립트 textContent 사용법과 주의사항 목 차1. textContent 설명2. textContent 특징3. 사용 예제3-1. HTML 요소의 텍스트 읽기3-2. HTML 요소의 텍스트 쓰기3-3. 텍스트 수정하기3-4. 사용자 입력 값 표시4. 주의 사항4-1. 하위 요소의 텍스트도 포함4-2. 화이트스페이스 유지4-3. 기존 내용 덮어쓰기5. textContent의 장점 1. textContent 설명textContent는 JavaScript에서 DOM(Document Object Model) 요소의 텍스트 콘텐츠를 가져오거나 설정할 수 있는 속성입니다. 이 속성은 특정 HTML 요소 내부의 텍스트를 조작하는 데 사용되며, HTML 태그를 무시하고 순수한 텍스트만 다룹니다. 2. textContent 특징HTML 태그를 무시:읽을 때,.. 2024. 12. 15. [JavaScript] 자바스크립트 innerHtml 사용법과 주의사항 목 차1. innerHtml 설명2. innerHtml의 특징3. 사용 예제3-1. HTML 요소 내용 읽기3-2. HTML 요소 내용 쓰기3-3. 동적 컨텐츠 업데이트 (시계 만들기)4. 주의 사항4-1. 기존 콘텐츠 덮어쓰기4-2. 스크립트 실행 문제4-3. XSS(크로스 사이트 스크립팅) 공격 위험5. 대안6. innerHtml 장점과 단점 1. innerHtml 설명innerHTML은 JavaScript에서 DOM(Document Object Model) 요소의 HTML 콘텐츠를 가져오거나 수정하는 데 사용되는 속성입니다. 이 속성을 사용하면 특정 HTML 요소의 내부 내용을 동적으로 변경할 수 있습니다. 2. innerHtml의 특징 HTML 포함 콘텐츠 조작: 단순 텍스트뿐 아니라 HTML .. 2024. 12. 14. [JavaScript] 자바스크립트 name으로 값 가져오기 자바스크립트 name으로 값 가져오기name 속성은 폼 요소에서 자주 사용됩니다. 같은 이름을 가진 여러 요소를 그룹화할 때 유용합니다. 사용 예제 Male Female Get Selected Value document.getElementsByName('name'): name 속성값이 동일한 모든 요소 선택(NodeList 반환). .checked: 라디오 버튼, 체크박스 등 선택 여부 확인. .value: 선택된 요소의 값을 가져옴. 관련글[JavaScript] 자바스크립트 class로 값 가져오기[JavaScript] 자바스크립트 id로 값 가져오기[JavaScript] 키보드 이벤트 총정리 (keypress, keyup, keydown) 2024. 12. 11. [JavaScript] 자바스크립트 class로 값 가져오기 자바스크립트 class로 값 가져오기class는 여러 요소에 동일하게 적용될 수 있습니다. 이를 통해 여러 요소를 한꺼번에 선택하고 처리할 수 있습니다. 사용 예제 Get All Valuesdocument.getElementsByClassName('className'): 지정된 클래스 이름을 가진 모든 요소 선택(HTMLCollection 반환).elements[i]: HTMLCollection에서 특정 요소에 접근..value: 각 요소의 값을 가져옴. 관련글[JavaScript] 자바스크립트 id로 값 가져오기[JavaScript] 키보드 이벤트 총정리 (keypress, keyup, keydown)[JavaScript] 자바스크립트 페이지 로드 이벤트 총정리 2024. 12. 10. 이전 1 2 3 4 5 ··· 10 다음 반응형