반복문
반복문은 loop 또는 iterate 라고 부른다.
사람이 실수하기 쉬운 반복을 컴퓨터에게 명령하여 실행할 수 있게한다.
while 반복문
while 반복문 예시
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var i =0;
while(i < 10){
document.write("Coding everybody" + i + "<br/>");
i = i + 1;
}
</script>
</body>
</html>for 반복문
for 반복문 예시
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
for(var i = 0;i < 10;i++){
document.write("loopiterate"+i+"<br/>");
}
</script>
</body>
</html>break와 continue의 사용
break와 continue 사용 예시
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
for(var i = 0; i < 10; i++){
if(i === 5){
break;
}
document.write("break code" + i + "<br/>");
}
for(var i = 0; i < 10; i++){
if(i === 5){
continue;
}
document.write("continue code" + i + "<br/>");
}
</script>
</body>
</html>break와 continue 예시 실행 결과
break code0
break code1
break code2
break code3
break code4
continue code0
continue code1
continue code2
continue code3
continue code4
continue code6
continue code7
continue code8
continue code9
break는 그 반복문을 멈추고 나가고, continue는 그 시기를 건너뛰고 다음 반복문을 계속한다.
디버거 실행 방법
코딩을 하다보면 오류가 발생하거나 원하는 값이 나오지 않을 때가 있다. 그 때 코드의 중간 과정을 살펴보면서 코드의 흐름을 이해하고 원하는 방향으로 수정할 수 있다.
크롬
- 크롬에서 [F12]-[source]-중단점을 마우스로 선택-[F5]
- 중단점에서 코딩이 멈추고 그 결과가 출력된다.
- [watch]에 참고할 변수를 입력한다.
- [F10]을 누르면서 한줄씩 코드를 실행하여 변수의 값의 변화를 살펴보며 원하는 방향으로 코드를 수정한다.
함수
함수를 사용하는 이유
1. 코드의 재사용성을 높여준다.
2. 코드 유지보수에 용이하다.
3. 코드의 가독성을 높여준다.
함수의 매개변수(parameter)와 인수(argument)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function get_arguments(arg1, arg2){ //arg1, arg2는 함수의 parameter
return arg1 + arg2;
}
alert(get_arguments(10,20)); //10,20은 함수의 argument
</script>
</body>
</html>함수의 정의 3가지
1. 변수의 선언의 방법과 같이 정의한다.
2. 변수에 함수를 넣어주는 방식으로 정의한다.
3. 익명함수의 개념으로 정의하여 바로 실행시킨다.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//함수의 정의 방법 1번
function numbering1(){
for(var i = 0; i < 5; i++){
document.write("numbering1 "+i+"<br/>");
}
}
//함수의 정의 방법 2번
numbering2 = function(){
for(var i = 0; i < 5; i++){
document.write("numbering2 "+i+"<br/>");
}
}
numbering1(); //numbering1 실행
numbering2(); //numbering2 실행
//함수의 정의 방법 3번
(function (){
for(var i = 0; i < 5; i++){
document.write("numbering3 "+i+"<br/>");
}
})(); //익명함수 바로 실행
</script>
</body>
</html>