자바스크립트 JavaScript는 웹 페이지의 동작을 구현합니다.
html, css로 만든 웹 페이지에 대해 사용자가 취하는 동작에 대해 반응하도록 설계하는 것이 자바스크립트의 역할입니다. 자바 스크립트 예시를 테스트하기 위해 아톰 편집기를 사용하겠습니다. 새 파일을 하나 만들고 html 기본 태그를 작성합니다. 타이틀은 Java로 작성합니다. meta 메타태그로 언어 인코딩 규격 utf-8을 지정하겠습니다.
<! DOCTYPE>
<html>
<head>
<title> Java </title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
자바스크립트를 html 문법에 맞추어 사용하기 위해 스크립트 script 태그를 사용합니다.
웹 브라우저는 <script> </script> 안 쪽에 작성되는 태그를 자바스크립트로 인식합니다. 웹 페이지에 "JavaScript is so useful!" 문장이 출력되도록 자바스크립트를 작성하겠습니다. 본문에 해당되는 문장이므로, body 바디 태그에 작성합니다. 스크립트 script 태그를 열고 이 문서에 ( ) 안에 문장을 출력해달라는 내용을 작성합니다. document.write('출력하고 싶은 문장');로 쓰면 됩니다. 문장은 인용 부호인 아포스트로피(Apostrophe) [ ' ]로 감싸주어야 합니다. 이제 body 바디 태그에 "JavaScript is so useful! 을 직접 작성한 것과 동일한 페이지가 출력됩니다.
<! DOCTYPE>
<html>
<head>
<title> Java </title>
<meta charset="utf-8">
</head>
<body>
<script>
document.write('JavaScript is so useful!');
</script>
</body>
</html>
자바스크립트 document.write를 사용해 수식을 넣으면 사칙연산 등 계산의 결괏값이 출력됩니다.
위 문장 대신 "3+3"을 연산하라고 입력해보겠습니다. document.write(3+3);으로 입력합니다. 이때 문장을 감싸주었던 인용 부호인 아포스트로피(Apostrophe)는 사용하지 않습니다. 3+3의 연산 결과 값인 6이 출력됩니다. body 바디 태그에 3+3을 직접 작성한다면 연산의 결괏값인 6이 출력되는 것이 아니라, 입력했던 문장 3+3이 그대로 출력됩니다.
<! DOCTYPE>
<html>
<head>
<title> Java </title>
<meta charset="utf-8">
</head>
<body>
<script>
document.write(3+3);
</script>
</body>
</html>
자바스크립트는 동적인 언어임을 기억하세요.
'코딩' 카테고리의 다른 글
| 자바스크립트로 웹페이지 버튼 클릭했을 때 배경색, 글자색 바꾸기 (0) | 2020.09.04 |
|---|---|
| 자바스크립트 JavaScript alert 이용해 경고창 만들기 (0) | 2020.09.03 |
| html css 스타일 태그로 적용하는 방법과 link 링크 태그로 css 파일 연결하여 적용하는 방법 (0) | 2020.09.02 |
| css media queries 미디어 쿼리 min-width, max-width 비교하기 (0) | 2020.09.01 |
| CSS Grid 그리드 기초 간단히 익혀보기 (0) | 2020.08.31 |
댓글