본문 바로가기

Js

6. 변수와 HTML 구조 설정

  변수 선언

1. var/let

변수 선언 키워드에는 var와 let이 있다. var는 중복 선언이 가능하나, let은 중복 선언이 불가능하다. 따라서 let을 주로 쓰는 것이 더 좋다.

=> [키워드] [변수명];

 

2. 상수(Contance)

값을 저장하는 공간이지만, 최초에 한 번 값이 저장되며, 그 값을 변경할 수 없는 공간을 의미한다. 따라서 초기화가 반드시 필요하다. 사용하는 키워드는 'const'이다.

  전역변수와 지역변수

1. 전역변수(Global Variable)

script 어디에서나 사용 가능한 변수를 가리킨다.

 

2. 지역변수(Local Variable)

해당 함수에서만 사용 가능한 변수를 가리킨다.

그 밖이나 다른 함수에서는 사용할 수 없다.

<script>
    var global = 100; // 전역변수

    function localfocus() {
        var local = 200; // 지역변수
        console.log(global);
        console.log(local);
    }
    
    localfocus();
</script>

  참고) HTML 구조 설정해서 사용하기

1. 파일 -> 사용자 코드 조각 구성 -> html.json 선택

2. 다음과 같이 코드 치기

{
	// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// },

	"Print to myHTML" : {
		"prefix": "sse", // 설정하고 싶은 단축 적기
		"body": [
			"<!DOCTYPE html>", 
			"<html lang='ko'>",
			"<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'>",
				"<meta name='author' content='ssesrh'>", // 작성자
				"<meta name='date' content='$1'>", // 작성일자 '$'는 빈 공간.
				"<link rel='shortcut icon' href='favicon.ico'>",
				"<title>$2</title>",
			"</head>",
			"<body>",
			"",	// 공백도 마찬가지로 처리
			"</body>",
			"<script>",
			"",
			"</script>",
			"</html>"
		],
		"description": "myHTML"
	}
}

3. 저장하고 새로운 파일에서 확인해보면 아주 잘 된다.

'Js' 카테고리의 다른 글

8. 이벤트(event)  (0) 2022.08.20
7. 객체(object)  (0) 2022.08.18
5. while문과 continue/break  (0) 2022.08.18
4. for문  (0) 2022.08.17
3. 조건문/Swich문  (0) 2022.08.15