-
Javascript Text 누름 이벤트(onClick event)
* html 기본 구조: http://infos.tistory.com/1591
* CSS 기본 구조: http://infos.tistory.com/1592;
* Html script (java script) 기본구조: http://infos.tistory.com/1810html 내부에서 script 영역 선언
Ex1
<script> document.write(“hellow world!”); console.log("hellow world2"); </script>Ex2
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> </head> <body> <h1 id="heading1">자바스크립트</h1> <p id="text1"> 위 글자를 누르면 변한다 </p> <script> var heading = document.querySelector('#heading1'); heading.onclick = function() { heading.style.color = "red"; } </script> </body> </html>자바스크립트
위 글자를 누르면 변한다
html 외부의 script파일 사용 선언
t1.js파일
var heading = document.querySelector('#heading1'); heading.onclick = function() { heading.style.color = "red"; }html파일
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> </head> <body> <h1 id="heading1">자바스크립트</h1> <p id="text1"> 위 글자를 누르면 변한다 </p> <script src="t1.js"></script> <!-- <script> var heading = document.querySelector('#heading1'); heading.onclick = function() { heading.style.color = "red"; } </script> --> </body> </html>'Html Css JavaScript' 카테고리의 다른 글
Javascript 창 닫기 window.close() (0) 2022.11.16 Javascript Event, 이벤트 처리기 (0) 2022.11.16 Javascript 함수 표현식 (0) 2022.11.16 Javascript 선택자(querySelector) (0) 2022.11.16 그리드 레이아웃(grid layout) (0) 2022.11.16 css 미디어쿼리(media queries) (0) 2022.11.16 css display block, inline (0) 2022.11.16 css position (0) 2022.11.16