변수의 개념
자바스크립트에서 변수란 변하는 값을 저 정할 때 사용하는 임의의 지정 값이다.
변수 선언의 규칙
변수에는 컴퓨터가 구별할 수 있도록 이름을 붙여 줘야 한다. 이를 "변수를 선언한다"라고 표현한다.
변수의 선언 시 규칙은 다음과 같다.
1. 변수의 이름은 변수의 기능과 연관되게 짓는다.
2. 여러 단어를 연결한 이름을 낙타 모양으로 만들어 준다.
3. 선언할 수 없는 이름을 기억한다.
이러한 변수의 개념은 다른 프로그래밍 언어에서의 설명과 동일하다.
변수의 설명 과정에서 다음의 완성된 프로그램을 이용하도록 한다. 해당 프로그램은 다음 포스팅에서 작성과 설명을 추가적으로 포스팅하도록 하겠다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>나이 계산하기</title>
<link rel="stylesheet" href="css/age.css">
</head>
<body>
<button class="btn" onclick="calc()">나이 계산하기</button>
<div id="result" class="show">(결과 값 표시)</div>
<script>
function calc() {
var currentYear = 2021;
var birthYear = prompt("태어난 연도를 입력하세요.","YYYY");;
var age;
age = currentYear - birthYear + 1;
document.querySelector("#result").innerHTML = "당신의 나이는 " + age + "세입니다.";
}
</script>
</body>
</html>코드 해석하기: <head>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>나이 계산하기</title>
<link rel="stylesheet" href="css/age.css">
</head><meta> 태그의 charset 속성
<meta charset="UTF-8"><meta> 태그의 charset 속성은 해당 HTML 문서의 문자 인코딩 방식을 명시한다.
각각의 HTML 요소의 lang 속성을 사용하면, <meta> 요소의 charset 속성으로 명시한 문자 인코딩 방식을 재정의할 수 있다.
<meta charset="문자셋">
속성 값
| 문자셋 | TML 문서의 문자 인코딩 방식을 명시함. 유니코드(Unicode)를 위한 문자셋인 UTF-8이 가장 많이 사용됨. |
<meta> 태그의 name 속성
<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta> 태그의 name 속성은 메타데 이터를 위한 이름을 명시한다.
만약 name 속성이 명시되었다면, 반드시 content 속성도 함께 명시되어야만 한다.
HTML5에서는 <meta> 요소를 통해 웹 페이지에서 사용자가 볼 수 있는 영역인 뷰포트(viewport)를 제어할 수 있도록 name 속성에 viewport 속성 값을 제공하고 있다.
<meta name="애플리케이션 이름|author|description|generator|keywords|viewport">
속성값
| viewport | 웹 페이지에서 사용자가 볼 수 있는 영역인 뷰포트(viewport)를 제어한다. <meta> 요소의 viewport는 브라우저에게 해당 페이지의 면적과 비율 등을 어떻게 제어할 지에 대한 지침을 제공한다. "width=device-width" 부분은 기기에 따라 달라지는 장치의 화면 너비에 맞게 웹 페이지의 너비를 설정 "initial-scale=1.0" 부분은 브라우저에 의해 웹 페이지가 처음으로 로드될 때 초기 확대/축소 레벨을 설정합니다. |
부가적 속성값
| 애플리케이션 이름 | 웹 페이지가 나타내는 웹 애플리케이션의 이름을 명시함. | |
| author | 문서의 저자를 명시함. ex) <meta name="author" content="TCPSchool"> |
|
| description | 웹 페이지에 대한 설명을 명시함. 검색엔진은 검색 결과에 이러한 설명을 함께 표시할 수 있습니다. ex) <meta name="description" content="HTML meta tag page"> |
|
| generator | 문서를 생성하는데 사용되는 소프트웨어 패키지(software package) 중 하나를 명시함. (수동으로 생성된 페이지에는 사용하지 않음) ex) <meta name="generator" content="Frontweaver 8.2"> |
|
| keywords | 검색 엔진을 위해 웹 페이지와 관련된 콤마(,)로 구분한 키워드 목록을 명시함. ex) <meta name="keyword" content="HTML, meta, tag, element, reference"> |
|
<meta> 태그의 http-equiv 속성
<meta http-equiv="X-UA-Compatible" content="ie=edge"><meta> 태그의 http-equiv 속성은 content 속성에 명시된 값에 대한 HTTP 헤더를 제공한다.
http-equiv 속성은 HTTP 응답 헤더를 시뮬레이션할 때 사용할 수 있다.
만약 http-equiv 속성이 명시되어 있다면, 반드시 content 속성도 함께 명시되어야만 한다.
<meta http-equiv="content-type|default-style|refresh">
속성값
| content-type | 해당 문서의 문자 인코딩 방식을 명시함. ex) <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
|
| default-type | 우선적으로 적용할 스타일시트를 명시함. content 속성값은 동일한 문서에 존재하는 link 요소의 title 속성값과 일치하거나, 동일한 문서에 존재하는 style 요소의 title 속성값과 일치해야만 합니다. ex) <meta http-equiv="default-style" content="preferred stylesheet"> |
|
| refresh | 해당 문서를 새로고침(refresh)할 시간 간격을 명시함. refresh 속성값은 사용자로부터 페이지에 대한 제어를 빼앗아오기 때문에 주의를 기울여 사용해야 합니다. ex) <meta http-equiv="refresh" content="30"> |
|
<meta> 태그의 link rel 속성
<link rel="stylesheet" href="css/age.css"><link> 태그의 rel 속성은 현재 문서와 외부 리소스 사이의 연관 관계를 명시합니다.
rel 속성은 <link> 요소에 반드시 명시되어야 하는 필수 속성입니다.
<link rel="속성 값">
속성 값
| alternate | 프린트 페이지나 번역된 페이지와 같이 해당 문서의 대체 버전에 대한 링크를 제공함. | |
| author | 해당 문서의 저자에 대한 링크를 제공함. | |
| dns-prefetch | 브라우저가 대상 리소스의 원본에 대해 DNS 확인(DNS resolution) 작업을 미리 수행하도록 명시함. | |
| help | 도움말 문서에 대한 링크를 제공함. | |
| icon | 사용자 인터페이스에서 해당 문서를 나타낼 리소스(일반적으로 아이콘)를 불러옴. | |
| license | 해당 문서의 저작권 정보에 대한 링크를 제공함. | |
| next | 연관된 문서들의 모음 중 다음 문서에 대한 링크를 제공함. | |
| pingback | 현재 문서에 대한 핑백(pingback)을 처리하는 핑백 서버의 주소를 제공함. | |
| preconnect | 브라우저가 대상 리소스의 원본에 미리 연결하도록 명시함. | |
| prefetch | 사용자가 요청할 가능성이 있으므로, 브라우저가 대상 리소스를 미리 가져와 캐시(cache)하도록 명시함. | |
| preload | 브라우저가 as 속성과 해당 대상과 관련된 우선순위에 따라 현재 탐색에 사용할 대상 리소스를 미리 가져와 캐시하도록 명시함. | |
| prev | 연관된 문서들의 모음 중 이전 문서에 대한 링크를 제공함. | |
| search | 현재 문서 및 관련 페이지를 검색하는데 사용할 수 있는 리소스에 대한 링크를 제공함. | |
| stylesheet | 스타일 시트(stylesheet)로 사용할 외부 리소스를 불러옴. | |
코드 해석하기: <body>
<body>
<button class="btn" onclick="calc()">나이 계산하기</button>
<div id="result" class="show">(결과 값 표시)</div>
<script>
function calc() {
var currentYear = 2021;
var birthYear = prompt("태어난 연도를 입력하세요.","YYYY");;
var age;
age = currentYear - birthYear + 1;
document.querySelector("#result").innerHTML = "당신의 나이는 " + age + "세입니다.";
}
</script>
</body>
<button> 요소
<button class="btn" onclick="calc()">나이 계산하기</button>HTML <button> 요소는 클릭 가능한 버튼을 나타낸다. 이때 , class 속성 정의를 이용하여 btn이라는 클래스를 선언하고 해당 클래스를 클릭하게 되면 <script> 태그의 calc 함수가 실행된다. 이는 추후 포스팅에서 다룬다.
버튼은 양식 내부는 물론 간단한 표준 버튼 기능이 필요한 곳이라면 문서 어디에나 배치할 수 있다. 기본값의 HTML 버튼은 사용자 에이전트의 호스트 플랫폼과 비슷한 디자인을 따라가지만, 외형은 CSS로 변경할 수 있다.
이때 calc()는 괄호 안의 식을 계산한 결과를 속성 값으로 사용하게 해주는 함수이며, <script> 태그에서 값을 계산한다.
<script>
function calc() {
var currentYear = 2021;
var birthYear = prompt("태어난 연도를 입력하세요.","YYYY");;
var age;
age = currentYear - birthYear + 1;
document.querySelector("#result").innerHTML = "당신의 나이는 " + age + "세입니다.";
}
</script>코드의 해석에서 각 함수와 지정자의 설명은 다음 링크의 포스팅을 참조했다.
'JavaScript > [theory]' 카테고리의 다른 글
| [변수와 자료형] #2-2. 변수를 사용한 예제(2) (0) | 2022.09.25 |
|---|---|
| [변수와 자료형] #2-1. 변수를 사용한 예제(1) (0) | 2022.09.25 |
| [자바스크립트의 기본 문법] #4-2. 자바스크립트의 구조 복습 (1) | 2022.09.20 |
| [자바스크립트의 기본 문법] #4-1. 자바스크립트의 입출력 (0) | 2022.09.20 |
| [자바스크립트의 기본 문법] #3. 자바스크립트 소스 작성 (2) | 2022.09.19 |
