JavaScript / 전역변수(Global Variable)와 지역변수(Local Variable)
전역변수와 지역변수
변수는 유효범위에 따라 전역변수(Global Variable)와 지역변수(Local Variable)로 구분할 수 있습니다.
- 전역변수는 함수 외부에서 선언된 변수로, 프로그램 전체에서 접근할 수 있는 변수입니다.
- 지역변수는 함수 내부에서 선언된 변수로, 함수가 실행되면 만들어지고 함수가 종료되면 소멸하는 변수입니다. 함수 외부에서는 접근할 수 없습니다.
예제 1
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<script>
var jbVar = 'Lorem';
function jbFunc() {
var jbVar = 'Ipsum';
}
document.write( jbVar );
</script>
</body>
</html>
변수 jbVar의 값을 함수 외부에서는 Lorem으로, 함수 내부에서는 Ipsum으로 정했습니다. 함수 외부에서 jbVar를 불러왔으므로 전역변수의 값
Lorem
이 출력됩니다.
예제 2
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<script>
var jbVar = 'Lorem';
function jbFunc() {
var jbVar = 'Ipsum';
document.write( jbVar );
}
jbFunc();
</script>
</body>
</html>
함수 내부에서 jbVar의 값을 불러왔으므로 지역변수의 값
Ipsum
이 출력됩니다.
예제 3
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<script>
var jbVar = 'Lorem';
function jbFunc() {
jbVar = 'Ipsum';
document.write( jbVar );
}
jbFunc();
document.write( jbVar );
</script>
</body>
</html>
함수 내부에서 var를 사용하지 않고 변수의 값을 정하면 전역변수의 값을 변경합니다. 따라서
IpsumIpsum
을 출력합니다.
객체 생성 방법 1 var jb = { 'a':100, 'b':200, 'c':300 }; 객체 생성 방법 2 var jb = {}; jb = 100; jb = 200; jb = 300; 객체 생성 방법 3 var jb = new Object(); jb = 100; jb = 200; jb = 300; 객체 생성 방법 4 var jb = new Object(); jb.a = 100; jb.b = 200; jb.c = 300;
JavaScript / 다음(카카오) 우편번호 검색 서비스 사용하는 방법
다음(카카오)에서 우편번호 검색 서비스를 무료로 제공한다. 팝업 창에 Powerd by kakao가 표시되고, 기본 모양이 투박하다는 단점이 있지만, 빠르게 주소 검색 서비스를 구현해주는 고마운 서비스임에는 틀림이 없다. 자세한 사용법은 아래 링크에 있다. https://postcode.map.daum.net/guide 너무 상세한 설명이라 이해가 어렵다면, 최소한의 코드로 만들고, 필요한 것을 하나씩 추가하는 게 좋다. 기본 예제와 작동 방식 아래는 최소한의 코드로 작성한 것이다. ...
JavaScript / Object / Array.concat() / 기존 배열에 원소 또는 배열을 추가하여 새 배열 만들기
.concat() .concat() 속성을 이용하여 기존 배열에 원소 또는 배열을 추가하여 새 배열을 만들 수 있습니다. 문법 var jbAry2 = jbAry1.concat( 'abc' ); jbAry1 배열에 문자열 abc를 추가하여 jbAry2 배열을 만듭니다. var jbAry3 = jbAry1.concat( jbAry2 ); 두 배열 jbAry1과 jbAry2를 합하여 새로운 배열 jbAry3을 만듭니다. 예제 다음의 두 예제는 같은 결과를 만듭니다. <!doctype html> <html lang="ko"> <head> ...
JavaScript / Object / Math.random() / 난수(랜덤 숫자) 만드는 속성
Math.random() Math.random()는 난수(랜덤 숫자)를 만듭니다. 문법 Math.random() 0.673172894273546와 같은 0 이상 1 미만의 난수를 만듭니다. 예제 1 - 난수 만들기 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; ...
JavaScript / Object / String.includes() / 특정 문자열을 포함하는지 확인하는 메서드
.includes() .includes()는 문자열이 특정 문자열을 포함하는지 확인하는 메서드이다. IE는 Edge부터 지원한다. 문법 string.includes( searchString, length ) searchString : 검색할 문자열로 필수 요소이다. 대소문자를 구분한다. length : 검색을 시작할 위치이다. 선택 요소로, 값이 없으면 전체 문자열을 대상으로 한다. 예제 abzcd가 z를 포함하는지 검사한다. z를 포함하므로 true를 반환한다. 'abzcd'.includes( 'z' ) zcd가 z를 포함하는지 검사한다. z를 포함하므로 true를 반환한다. 'abzcd'.includes( 'z', 2 ...
JavaScript / 반복문 / while, do - while, for
자바스크립트 반복문에는 while, do - while, for 세가지가 있습니다. while 문법 var i = 0; while ( i < 10 ) { // do something i++; } i의 값이 0부터 9일 때까지 실행되고 i의 값이 10이면 실행되지 않고 다음으로 넘어갑니다. i의 값을 증가시키는 i++을 꼭 넣어야 한다는 것에 주의해야 합니다. 만약 i++이 없으면 i의 값이 ...
JavaScript / Object / String.concat() / 문자열을 이어 붙이는 메서드
.concat() .concat()은 문자열을 이어 붙이는 메서드입니다. 문법 string1.concat( ) string1은 필수 요소, string2 등은 선택 요소입니다. 인수가 문자열이 아닌 경우 먼저 문자열로 변환한 다음 string1에 연결합니다. 예를 들어 'ab'.concat( 'cd', 'ef' ) 는 abcdef입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> ...
JavaScript / 구문(Statement) 넣는 방법
자바스크립트는 줄바꿈을 하면 구문(Statement)이 종료된 것으로 봅니다. var jb1 = 'Lorem' var jb2 = 'Ipsum' 하지만, 구문이 완성되지 않았다면 다음 줄까지 해석합니다. 즉 var jb1 = 'Lorem' 과 var jb1 = 'Lorem' 은 같습니다. 구문이 종료되었음을 명확히 표시할 때는 세미콜론(;)을 사용합니다. var jb1 = 'Lorem'; var jb2 = 'Ipsum'; 세미콜론 사용은 선택사항이지만, 한 줄에 여러 구문을 쓸 때는 구문과 구문 사이에 꼭 ...
JavaScript / 대화상자 / Alert, Confirm, Prompt
자바스크립트에서 대화상자는 세가지가 있습니다. Alert, Confirm, Prompt로, 새 창을 띄운다는 점은 같으나 역할이 다릅니다. Alert Alert는 단순히 메시지를 전달하는 역할만 합니다. 반환하는 값이 없습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript | alert</title> <script> alert( 'Lorem ipsum dolor' ); ...
JavaScript / 함수 / encodeURI(), encodeURIComponent(), decodeURI(), decodeURIComponent()
encodeURI(), encodeURIComponent(), decodeURI(), decodeURIComponent() encodeURI() : 인터넷 주소에서 사용하는 :, ;, /, =, ?, & 등을 제외하고 인코딩하는 함수입니다. encodeURIComponent() : 모든 문자를 인코딩하는 함수입니다. decodeURI() : encodeURI()로 인코딩한 문자열을 디코딩하는 함수입니다. decodeURIComponent() : encodeURIComponent()로 인코딩한 문자열을 디코딩하는 함수입니다. 문법 encodeURI( uri ) encodeURIComponent( uri ) decodeURI( uri ) decodeURIComponent( uri ) uri : 인코딩하려는 인터넷 주소를 입력합니다. 예제 특수문자와 한글을 포함한 URI를 인코팅, ...