728x90
반응형
Javascript 적용
웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있음
html에 javascript를 삽입하는 방법
- 인라인 : script 요소 내부에 직접 스크립트를 작성 (head, body)
- 외부 스크립트 : src 속성을 통해 외부파일 참조
우선순위
head → body → 외부 파일
<head>
<script>
// id가 load1인 요소의 내용을 change1으로 변경
document.getElementById("load1").innerHTML="change1";
</script>
</head>
<body>
<h2>javascript 예시</h2>
<p id="load1">js 로드 순서1</p>
<p id="load2">js 로드 순서2</p>
<script>
document.getElementById("load2").innerHTML="change2";
</script>
</body>
head의 스크립트가 우선 실행되고 body를 불러오기 때문에 oad1의 내용은 변경되지 않는다.
→ load2의 내용을 불러온 후 스크립트가 실행되기 때문에 load2의 내용은 변경된다.
onclick
클릭 시 실행
<head>
<script>
// 함수 정의
function updateDemo1() {
document.getElementById("func").innerHTML="변경된 p태그 내용"
}
</script>
</head>
<body>
<p id="func">변경될 p태그 내용</p>
<!-- onclick으로 함수 호출 -->
<button onclick="updateDemo1()">내용 변경</button>
</body>
외부 스크립트
// ./js/my_js.js
function updateDemo2() {
document.getElementById("demo2").innerHTML="외부 스크립트 실행됨"
}외부 js파일 작성 후 불러오기
<body>
<p id="demo2">demo2 내용</p>
<button onclick="updateDemo2()">내용 변경</button>
<!-- 외부 스크립트 불러오기 - 주로 body 하단에 삽입 -->
<script src="./js/my_js.js"></script>
</body>
..
728x90
반응형
'HTML⁄CSS' 카테고리의 다른 글
| [CSS] 선택자 (0) | 2024.01.15 |
|---|---|
| [CSS] 적용 방법 (0) | 2024.01.12 |
| [HTML] 구조 태그 (0) | 2024.01.08 |
| [HTML] form 태그 (1) | 2024.01.05 |
| [HTML] 기본 태그 (0) | 2024.01.04 |