게으른 나에게

[JavaScript] 기본문법 본문

My Study/JavaScript

[JavaScript] 기본문법

handbefore 2024. 10. 3. 23:16

html 파일 안에 내용을 조작하는 방법.
<script> 태그 안에  자바스크립트 코드 작성.
 
[기본 문법]
셀렉터 : .getElementById()
메소드(함수): .innerHTML / .style / .color ..
 
document.셀렉터(' ').메소드(함수) = ' ';
 
<button onclick="document.getElementById(' ').style = '';">버튼</button>
 
getElementsByClassName('클래스명')[순서]
순서 반드시 작성 필요.
getElementsByTagName -> 태그명으로 찾아줌
getElementsByName -> name 속성으로 찾아줌
 
document.getElementsByClassName(' ')[0].style = ' ';
 
[function 문법]
긴 코드를 축약하고 싶을 때 사용
funcion 작명( ) {
 실행할 코드
}
 
<button onclick="작명( )">버튼</button>
 
[function 파라미터]
funcion 작명( 내용 ) {
document.getElementById(' ').style = 내용;
}
 
작명('내용')
 
내용: 사용할 기능 적기
 
[이벤트 리스너]
document.getElementsById(' ')[0].addEventListener = ('기능', function( ) { 실행할 코드 });
 
이벤트 종류
https://developer.mozilla.org/en-US/docs/Web/Events

Event reference | MDN

Events are fired to notify code of "interesting changes" that may affect code execution. These can arise from user interactions such as using a mouse or resizing a window, changes in the state of the underlying environment (e.g. low battery or media events

developer.mozilla.org

 

'My Study > JavaScript' 카테고리의 다른 글

[JavaScript] - 문자 검사 (include, test)  (1) 2024.10.09
[JavaScript] - setTimeout, setInterval  (0) 2024.10.07
[JavaScript] - 변수  (2) 2024.10.04
[JavaScript] - form, 조건문  (0) 2024.10.03
[JavaScript] Array.prototype.map()  (0) 2024.09.11