-HTML
웹페이지를 만들고 표현하기 위해서는 HTML을 사용한다.
HTML은 정적이다. 즉 입력하면 입력된 그대로의 모습을 보여준다. 딱 거기까지이다. 물론 HTML하나로 웹페이지를 만들 수 있다. 하지만 개인적으로 재미가 없었다. 이 웹페이지를 좀 더 활용하고 싶어 JavaScript라는 걸 알아봤다.
-JavaScript
JavaScript는 HTML 위에서 동작하는 언어이다. 즉 HTML에서 사용이 가능하다는 것인데 공부했을 당시 너무 기대됐다. 아무런 생명이 없는 물체에 생명을 불어넣어 주는 것 같은 느낌이 들었다.
이제 이 HTML에 생명을 불어넣어 주려면 어떻게 해야 하는가에 대해 알아보았다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
document.write('hello world');
</script>
</body>
</html>body태그 안에 script태그를 사용하므로 웹브라우저에게 JavaScript를 사용하겠다고 인식을 해준다. 웹브라우저가 인식할 수 있는 이유는 script태그 안에는 JavaScript가 와야 한다는 약속이 있기 때문이다.
우리가 항상 개발 언어를 배우면 시초가 되었던 "Hello World"를 출력해보았다.
이처럼 script태그 안에 document.wirte('hello world');를 입력하게 되면 웹브라우저에 hello world라고 나타날 것이다. 여기서 의문이 드는 건 그냥 body 태그 안에 hello world라고 입력하는 것과 무슨 차이가 있냐는 것이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
hello world
</body>
</html>
이렇게 실행해도 같은 결과가 나온다.
HTML과 JavaScript의 차이는 위에서 말했듯이 정적과 동적이라는 차이점이다. 그 차이점을 제대로 알아보려면 연산을 해보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
document.write('1+1');
</script>
1+1
</body>
</html>이처럼 연산을 해본 경우 웹브라우저에서는 다르게 표현이 된다.
script 태그 안에서의 JavaScript의 1+1은 연산이 되어 2라는 결과가 나오고, body태그의 1+1은 하나의 텍스트로 인식을 하여 1+1 그대로 표현되는 결과가 나온다.
이로 인해 HTML과 JavaScript의 차이점과 활용에 대해서 알아볼 수 있었다.
블로그를 개설하고 처음 작성해본 글입니다. 제 블로그에서 쓰일 공부 내용들은 모두 (생활코딩)에서 보고 배운 것이며 미흡한 점이 있다면 댓글 달아주시면 감사하겠습니다. 감사합니다.
'TIL > Javascript' 카테고리의 다른 글
| /JavaScript/웹 브라우저 제어 (0) | 2021.12.19 |
|---|---|
| /JavaScript/변수,대입 연산자 (0) | 2021.12.18 |
| /JavaScript/Data Type (0) | 2021.12.17 |
| /JavaScript/Console (0) | 2021.12.17 |
| /JavaScript/JavaScript event (0) | 2021.12.17 |
