내부 자바스크립트 코드
script
script 태그를 사용해 HTML문서 안에 삽입한다.
<html>
<body>
<h2>JavaScript in Body<h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innetHTML = "My First JavaScript";
</script>
</body>
</html>실행시키면 아래와 같은 화면이 나온다.
- 빈칸이던 demo라는 문단에 "My First JavaScript"를 가져와서 script 태그를 이용해 삽입했다.
*script는 body와 head에 모두 배치 가능.
head란?
head의 내용은 웹 브라우저에 표시되진 않지만, 메타데이터란 HTML문서에 대한 정보이다.
-
이러한 메타데이터는 아래 태그들을 이용하여 표현할 수 있습니다.
<title> : HTML 문서의 제목(title)을 정의하며, 다음과 같은 용도로 사용됩니다. 웹 브라우저의 툴바(toolbar)에 표시됩니다. 웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목이 됩니다. 검색 엔진의 결과 페이지에 제목으로 표시됩니다. <body> : 웹 브라우저를 통해 보이는 내용(content) 부분입니다. <h1> ~ <h6> : 제목(heading)을 나타냅니다. <p> : 단락(paragraph)을 나타냅니다.
출처: http://tcpschool.com/html/html_intro_basicStructure
function의 배치
head
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
이 화면에서 Try it버튼을 누르면 아래와 같이 나온다.
- myFunction은 함수의 이름이고, ()안은 매개변수이며 쉼표로 구분된다.
- { }로 둘러싸인 곳은 자바스크립트 실행문이다.
- 변수가 없기 때문에 ( )자리는 비어있고, onclick시 함수의 실행문을 수행한다.
함수는 이후에 더 자세히 공부하기로 한다.
body
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>이렇게 작성해도 head에 작성했을 때와 실행화면이 같다.
*위와 다르게 작성한 부분: head에 있던 script로 둘러싸인 부분이 body의 뒷부분으로 왔다.
2021.11.22 ~ 국비지원과정 수강ing