Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

GUMI Dev

[JS Tutorial] 자바스크립트 위치 본문

Web/JavaScript

[JS Tutorial] 자바스크립트 위치

GUMI Dev 2021. 11. 22. 09:35

<script> 태그

HTML에서는 <script>및 </script>태그 사이에 JavaScript 코드가 삽입된다. 

 

자바스크립트로만 HTML 문서에 글을 작성해보았다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="hello"></p>
 <script>document.getElementById("hello").innerHTML = "안녕하세요"</script>
</body>
</html>

 

JavaScript 함수 및 이벤트

JavaScript function는 호출될 때 실행할 수 있는 JavaScript 코드 블록이다. 

예를 들어 사용자가 버튼을 클릭할 때와 같이 이벤트가 발생할 때 함수를 호출할 수 있다.

 

<head> 또는 <body>의 JavaScript

스크립트는 <body>, 또는 <head> HTML 페이지의 섹션 또는 둘 다에 배치할 수 있다 .

 

<head>의 자바스크립트

HTML 페이지에서 <head> 섹션에 JavaScript function를 배치해보자.

버튼을 누르면 스크립트가 바뀌는 기능이다. 

여기서는 "완료하기" 버튼을 클릭하면 "자바스크립트 공부하기"가 "자바스크립트 공부 끝"이 된다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function toDo() {
            document.getElementById("list").innerHTML = "자바스크립트 공부 끝";
        }
    </script>
</head>
<body>
    <p id="list">자바스크립트 공부하기</p>
    <button type="button" onclick="toDo()">완료하기</button>
</body>
</html>

 

<body>의 자바스크립트

이번에는 HTML 페이지에서 <body> 섹션에 JavaScript function을 배치해보자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="list">자바스크립트 공부하기</p>
    <button type="button" onclick="toDo()">완료하기</button>
    <script>
    function toDo() {
    document.getElementById("list").innerHTML = "자바스크립트 공부 끝";
    }</script>
</body>
</html>

 

외부 자바스크립트

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="list">자바스크립트 공부하기</p>
    <button type="button" onclick="toDo()">완료하기</button>
    <script src="listCompleted.js"></script>
</body>
</html>
/* listCompleted.js */

function toDo() {
    document.getElementById("list").innerHTML = "자바스크립트 공부 끝";
}

 

'Web > JavaScript' 카테고리의 다른 글

[JS Tutorial] var, let, const  (0) 2021.11.23
[JS Tutorial] 세미콜론  (0) 2021.11.23
[JS Tutorial] 자바스크립트 출력  (0) 2021.11.22
[threejs] Creating a scene  (0) 2021.08.01
[threejs] VSCode에서 three.js npm module 설치하기  (0) 2021.07.18
'Web/JavaScript' Related Articles more