안녕하세요. 명월입니다.
이 글은 Javascript의 변수 선언, 제어문, 함수 사용법에 대한 글입니다.
웹 서비스에서 Html을 구성하는 것은 html 태그이고 그 태그를 디자인 스타일을 설정하는 것은 css입니다.
그리고 그런 html을 서버가 아닌 브라우저 클라이언트에서 동적으로 값을 설정하거나 태그를 수정하고 스타일을 재설정할 수 있는 프로그래밍 언어가 Javascript입니다.
쉽게 이야기해서 브라우저와 서버와스 요청, 응답없이 클라이언트에서 html를 재설정하는 것을 이야기하는 것입니다.
Javascript의 언어는 꼭 웹 서비스에서만 사용되는 프로그래밍 언어는 아닙니다. 로컬 스크립트 언어로도 사용되고, 최근에는 google의 node.js 플랫폼을 통해 web-service를 구축까지 할 수 있습니다.
그러나 Javascript라고 한다면 보통 웹 클라이언트(브라우저)에서 사용되는 비율이 압도적으로 높기 때문에 Javascript라고 하면 브라우저에서 사용되는 프로그램 언어라고 생각하면 됩니다.
Javascript도 일단은 프로그래밍 언어이니 기본적인 변수 선언과 제어문, 함수 사용법에 대해 설명하겠습니다.
(참고로 Javascript는 함수 지향 언어라서 클래스에 대한 개념이 없습니다.)
Javascript 사용법
<!doctype html>
<html>
<head>
<title>Document</title>
</head>
<body>
<!-- textbox 요소 -->
<input type="text" id="test1">
<br />
<!-- span 요소 -->
<span id="test2"></span>
<!-- Javascript를 사용하는 태그는 script로 시작한다. -->
<!-- html이 위에서 아래로 읽히는 특성이 있기 때문에 css는 head에 선언하면 javascript는 body태그가 닫히는 바로 위에 작성한다. -->
<!-- 반드시 그런건 아니고 사양에 따라 head에 넣을 수도 있다. -->
<script language="javascript">
// id가 test1의 요소의 value값을 hello world로 넣는다.
document.getElementById("test1").value = "hello world";
// id가 test2의 요소의 html를 재설정한다.
document.getElementById("test2").innerHTML ="<b>tag html</b>";
</script>
</body>
</html>
html는 문서의 특징을 가지고 있기 때문에 위에서 아래로 읽혀집니다. 그래서 위 id=test1이 javascript태그 밑에 있으면 document.getElementById로 요소를 탐색할 때, 요소를 찾을 수 없는 버그가 발생합니다.
그래서 javascript를 가능하면 가장 최하단에 작성합니다. 반드시 최하단에 작성하는 건 아니고 사양에 따라 head에 선언하는 경우도 있고, 특정 태그 밑에 작성하는 경우도 있습니다.
변수 선언
<!doctype html>
<html>
<head>
<title>Document</title>
</head>
<body>
<!-- span 요소 -->
<span id="test1"></span><br />
<span id="test2"></span><br />
<span id="test3"></span><br />
<span id="test4"></span><br />
<span id="test5"></span>
<script language="javascript">
// 변수 설정, 자료형(var) 변수명 = 값
var id_name = "test";
// 변수 설정, (자료형 생략) 변수명 = 값
html = "hello world";
// 제어문 : 반복문 - for
// 변수 설정, 자료형(let) 변수명 = 값
for(let i=1; i<=5; i++) {
// test1, test2, test3, test4, test5의 요소에
// hello world 태그를 넣는다.
document.getElementById(id_name + i).innerHTML = "<b>" + html + i +"</b>";
}
</script>
</body>
</html>
javascript에서는 변수 선언 자료형이 var가 있고 let이 있습니다. 혹은 자료형 선언을 생략하고 변수명만으로 사용이 가능합니다.
참고로 생략을 하면 var로 설정이 됩니다.
var와 let의 차이는 stack영역을 변수가 벗어날 수 있느냐 없느냐의 차이입니다.
사실 var 자료형의 버그일 수도 있습니다.
<!doctype html>
<html>
<head>
<title>Document</title>
</head>
<body>
<!-- span 요소 -->
<span id="test1"></span><br />
<span id="test2"></span>
<script language="javascript">
// 변수 선언
var test = true;
if (test) {
// if문 안에서 했습니다.
// 다른 프로그래밍 언어면 if stack영역을 벗어나면 이 둘의 변수는 사라집니다.
var val1 = "hello world";
let val2 = "good morning";
}
// 그러나 var는 stack영역을 벗어나도 val1의 변수가 있습니다.
document.getElementById("test1").innerHTML = val1;
// let는 변수의 값이 사라져 test2 span에 값이 남지 않습니다.
document.getElementById("test2").innerHTML = val2;
</script>
</body>
</html>
그런데 let이 브라우저 버전에 따라 에러가 발생하는 경우가 있습니다.
제어문
Javascript는 if, switch의 선택문과 for, while, do ~ while의 반복문, 그리고 break, continue의 분기문이 있습니다.
<!doctype html>
<html>
<head>
<title>Document</title>
</head>
<body>
<!-- Javascript 시작 -->
<script language="javascript">
// 변수 선언
var test = 5;
// 선택문
// if문의 예제, test가 5이면,
if (test === 5) {
// html 작성
document.write("if true <br />");
}
// if ~ else 예제, test가 4이면,
if (test === 4) {
// html 작성
document.write("if true <br />");
// if의 조건이 맞지 않으면,
} else {
// html 작성
document.write(" else true <br />");
}
// if ~ else if ~ else 예제, test가 4이면
if (test === 4) {
// html 작성
document.write("if true <br />");
// test가 4가 아니고 5이면.
} else if (test === 5) {
// html 작성
document.write(" else if true <br />");
// if와 else if의 조건이 맞지 않으면,
} else {
// html 작성
document.write(" else <br />");
}
// switch문 예제, test의 값이
switch(test) {
// 4이면
case 4:
// html 작성
document.write(" switch 4 <br />");
break;
// 5이면
case 5:
//html 작성
document.write(" switch 5 <br />");
break;
// case의 조건이 맞지 않으면
default:
// html 작성
document.write(" switch default <br />");
}
// 반복문
// for문은 초기값, 조건값, 증가값으로 이루어진다.
// i의 변수에 초기값을 0으로 설정
// i가 test(5)의 값보다 작으면
// stack 영역이 실행되고 i값을 1 증가한다.
for (let i=0; i<test; i++) {
// html 작성
document.write(" for " + i + "<br />");
}
// 변수 선언
var index = 0;
// while은 for문의 조건문만 있는 것과 같다.
// index가 test(5)의 값보다 작으면
while(index<test) {
// html 작성
document.write(" while " + index + "<br />");
// index값을 1 증가한다.
index++;
}
// do ~ while은 조건문을 먼저 검사하는 것이 아니라 stack을 실행하고 조건을 검사한다.
do {
// html 작성
document.write(" do ~ while " + index + "<br />");
// index값을 1 증가한다.
index++;
// index는 6이고 test는 5이기 때문에 반복문을 벗어난다.
} while(index<test)
// 분기문
// for문의 i의 0부터 4까지 반복한다.
for (let i=0; i<test; i++) {
// i가 홀수이면,
if(i%2 == 1) {
// continue는 반복문의 statck을 넘긴다.
// 즉, i가 1이면 아래의 document.write를 실행하지 않고 i++로 이동한다.
continue;
}
// i가 3보다 크면,
if(i>3) {
// 반복문을 벗어난다.
break;
}
// html 작성
document.write(" for break, continue " + i + "<br />");
}
</script>
</body>
</html>
함수 사용법
Javascript에서는 자료형을 따로 선언하지 않는 만큼 함수를 생성할 때도 따로 반환자를 작성하지 않는다.
<!doctype html>
<html>
<head>
<title>Document</title>
</head>
<body>
<!-- Javascript 시작 -->
<script language="javascript">
// 함수 선언
function test() {
// html 작성
document.write(" function test");
}
// 함수 호출
test();
</script>
</body>
</html>
웹에서 Javascript를 사용한다는 건, 정적 html를 만들지 않는 이상에 서버 사이드 프로그래밍 언어(Java, C#, PHP...) 하나를 이미 알고 있다고 생각됩니다.
그래서 자세한 설명보다 변수 선언, 제어문, 함수 선언에 대한 문법적인 설명으로 간단하게 소개했습니다.
여기까지 Javascript의 변수 선언, 제어문, 함수 사용법에 대한 글이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Study > Javascript, Jquery, CSS' 카테고리의 다른 글
| [Javascript] Html 요소(element)의 이벤트(Event)를 추가하는 방법 (0) | 2020.03.24 |
|---|---|
| [Javascript] Html 요소(element)의 속성(attribute)을 추가, 삭제 그리고 수정하는 방법 (0) | 2020.03.23 |
| [Javascript] Html 요소(element)의 생성(CreateElement), 추가(appendChild)하는 방법 (2) | 2020.03.23 |
| [Javascript] Html 요소(element)의 셀렉터(selector - getElementById, getElementByClass, querySelector...) (0) | 2020.03.23 |
| [CSS] 브라우저에서 CSS를 개발하는 방법(브라우저 개발 모드) (0) | 2020.03.13 |
| [CSS] 색 스타일(color style) - 그라데이션(gradient) (2) | 2020.03.10 |
| [CSS] 애니메이션(animation) (0) | 2020.02.28 |
| [CSS] 트랜스폼 (transform) (0) | 2020.02.19 |