이전 포스팅의 코드 블록을 재복습한다.
해당 포스팅은 필자가 복습하기 위해 포스팅한 내용의 중복이 포함될 수 있다.
[자바스크립트의 기본 문법] #4-1. 자바스크립트의 입출력
이전 포스팅의 복습 이전 포스팅에서는 자바스크립트의 태그 사용법과 함께 소스를 HTML 문서 안에 작성하거나 외부 스크립트 파일을 이용하여 각각의 파일을 하나의 객체로서 사용하는 방법을
udangtangtang-cording-oldcast1e.tistory.com
<!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>
<style>
body {
font-size:1.3em;
text-align: center;
}
</style>
</head>
<body>
<h1>환영합니다.</h1>
<script>
var name = prompt("이름을 입력하세요.");
document.write("<b>" + name + "</b>님 환영합니다.");
</script>
</body>
</html>먼저 자바스크립트에서 가장 조심할 점은 <head> 태그와 <body> 태그를 구분하는 것이다.
<head> 태그는 웹 문서에서 보이지 않는 부분을 담당하므로, 문서의 폰트와 위치를 담당하는 코드는 <head> 태그에 속한다.
<body> 태그는 웹 브라우저에서 보이는 부분을 담당하므로, 실제 브라우저에서 작동하는 입출력에 관한 스크립트와 출력 문구 코드를 해당 위치에서 확인할 수 있다.
변수 할당
코드 19번째 줄을 보면 name이라는 변수를 할당하는 코드를 볼 수 있다.
이때 name이라는 변수를 설정하고 prompt() 함수를 통해 입력받은 값을 name 변수에 할당한다.
추가적으로, prompt() 함수의 괄호 안에는 따옴표를 활용하여 출력 창에 표시할 문장을 작성할 수 있음에 주목한다.\
문장 출력
코드 20번째 줄을 보면 document.write() 함수를 이용하여 브라우저에 문장을 출력한다.
이때 <h1> 태그와 다른 점은 헤드 문구가 아닌 일반적인 문구라는 것이다. document.write() 함수 또한 코드를 확인하면 다른 태그와 함께 혼용이 가능하며 이때 태그는 따옴표 처리함에 주의한다.
document.write() 함수안에 사용한 태그는 <b> (볼드체) 태그로 글자를 굵게 하는 태그이다. 문장을 출력하는 함수의 인자로서 사용되므로 따옴표안에 처리하며, 이때 변수는 따옴표 처리가 아닌 변수의 이름을 그대로 사용하되, 다른 태그와 연결을 위해 + 기호로 연결한다.
'JavaScript > [theory]' 카테고리의 다른 글
| [변수와 자료형] #3. 자료형 (0) | 2022.09.25 |
|---|---|
| [변수와 자료형] #2-2. 변수를 사용한 예제(2) (0) | 2022.09.25 |
| [변수와 자료형] #1. 변수와 <meta> 태그 (1) | 2022.09.21 |
| [자바스크립트의 기본 문법] #4-2. 자바스크립트의 구조 복습 (1) | 2022.09.20 |
| [자바스크립트의 기본 문법] #4-1. 자바스크립트의 입출력 (0) | 2022.09.20 |
