HTML, CSS, JS는 모두 웹 브라우저가 해석한다. 즉, 프론트 엔드다.
이들은 차이가 있다. 문서가 정적이거나 동적이다.
정적인 문서 : HTML, CSS. 누가 보던지 간에 같은 화면이다.
동적인 문서 : JS. 어느 상황에 보느냐에 따라 문서의 내용이 바뀐다. 아래의 <script> 부분에 작성하는 내용들을 동적으로 활용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
window.onload = function() {
var tag = document.createElement('h1')
var tagText = document.createTextNode('Bye')
// 여기까지는 h1 태그내에 hello가 들어가있지는 않다.
console.log(tag)
console.log(tagText)
tag.appendChild(tagText)
// 밑에 body 태그와 h1은 연결되어 있지 않은 상태다.
document.body.appendChild(tag);
}
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
자바스크립트 개요
인터프리터 기반이다. 즉, 위에서부터 차례대로 한 줄씩 해석한다. 파이썬과 비슷하다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script >
document.write("Hello<br>"); /* 자바스크립트는 메소드라고 하지 않고, 함수라고 한다. */
</script>
</head>
<body>
안녕하세요<br>
</body>
</html>
기타 참고
https://m.blog.naver.com/start3535/30190419350
'웹 프로그래밍 > JavaScript' 카테고리의 다른 글
| [JS] 백틱(backtick) 사용 예제 (0) | 2020.06.16 |
|---|---|
| [JS] 자바스크립트 디버깅 방법(JS는 에러가 나도 실행이 된다. 화면에 나타나지 않을 뿐! 그럴 땐 console 확인) (0) | 2020.06.16 |
| [JS] 자바스크립트 자료형 특징과 호이스팅 개념(var, let, const) (0) | 2020.06.16 |
| [JS] 출력 함수 document.write(), alert(), confirm(), prompt(), console.log() (0) | 2020.06.16 |
| [JS] 자바스크립트를 위한 태그 <script> (0) | 2020.06.16 |
