뚝딱햄 탈출기

[JavaScript] event 본문

Programming language/JavaScript

[JavaScript] event

hyrmzz1 2023. 8. 16. 10:37

html은 정적 resource(; 자원)이므로 변경할 수 없는 상태이다.
interactive하게 상황에 따라 변경가능하도록 하는 것은 JS.

 

JS는 html의 요소를 때에 따라 표시 및 변경해 준다.

-> JS가 html을 가져오려면 연동해야 한다!

2023.08.07 - [Programming language/JavaScript] - [JavaScript] 자바스크립트 사용(연동) 방법

 

[JavaScript] 자바스크립트 사용(연동) 방법

html 파일에서 태그 맨 아래에 작성. JS는 웹사이트의 콘솔창에서 확인할 수 있다. HTML 파일에서 CSS와 JS 모두를 가져온다. => css 는 에서 link:css 입력해서 가져오기. // 의 단축어 => javascript는 맨 아

hyrmzz1.tistory.com

 

어떤 tag에 대해, 어떤 event가 발생할 때 실행시킬 함수 작성.

function hey() {
	alert('알림!');
}

function hello(){
	console.log("here is console");
}
<!doctype html>
<html lang="en">
    <head>
    	<!-- ... -->
    </head>
    <body>
        <!-- ... -->
        <a onclick="hello()" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
        <button onclick="hey()" type="button" class="btn btn-primary">기사 저장</button>
         <!-- ... -->
    </body>
</html>

위의 HTML에서, <a> tag에 onclick이라는 event가 발생하면 hello()가 실행되고, <button> tag에 onclick이라는 event가 발생하면 hey()가 실행된다.

저작자표시 비영리 변경금지

'Programming language > JavaScript' 카테고리의 다른 글

[기술면접대비][JS] 호이스팅의 발생 원인 : 선언자, 스코프  (0) 2024.03.13
[JavaScript] for 반복문  (2) 2023.10.08
[JavaScript] sort(), ASCII(아스키) 코드 : 배열 객체 정렬 오름차순 내림차순, 문자열 정렬, 문자 비교  (0) 2023.08.08
[JavaScript] 템플릿 리터럴 : 문자열 내에 변수 삽입, 백틱(`)  (0) 2023.08.08
[JavaScript] 산술 연산자, 비교 연산자 : 몫과 나머지, '==='와 '=='의 차이  (0) 2023.08.07
'Programming language/JavaScript' Related Articles more
Comments