임시 기억 장소 temp
데이터 값을 서로 바꿔주기 위해서는 temp임시 기억 장소 변수를 선언해서 값을 변경해야함.
ex)
var a = 1;
var b = 2; a,b의 값을 서로 바꿔주기 위해서는 temp임시 기억 장소 변수를 선언해서 값을 변경해야함.
a = b;
b = a;
결과 a = 2, b = 2;
temp = a;
a = b;
b = temp; 이런식으로 값을 변경해줘야함.
결과 a = 2, b = 1;break
반복문 멈추게 하는건 첫번째로 for, while, do-while 문의 조건식이 일치하지 않을때 멈추고, 두번째로는
break문으로 멈추게 할수 있습니다.
설명
break를 만나면 현재 실행중인 반복을 중단하고, 반복루프를 빠져나간다.
예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var msg=""; //0 14T
// 10T 13 i=3
// 6T 9 i=2
// 1 2T 5 i=1
for(var i = 0 ; i < 10; i++){
// 3 check(false) 7 false 11 false 15 true
if(i==3){
break; // i==3 이면 break문을 만나 반복루프를 빠져나감
} //16
msg += i +"<br>";//풀어쓰면(msg = msg + i + "<br>");
//4 8 12
}
document.write(msg);//반복문이 끝나면 msg값을 불러와서 실행 17
</script>
</head>
<body>
</body>
</html>결과 :
0
1
2
break문 설명
continue
설명
continue를 만나면 현재 실행중인 반복문을 생략하고, 진행중이던 반복을 이어서 다시 시작한다.
예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var msg="";
for(var i = 0 ; i < 10; i++){
if(i==3){
continue;
//i==3 i가 3이면 continue문을 만나서 현재 반복문을 생략함.
}
msg += i +"<br>";
}
document.write(msg);
</script>
</head>
<body>
</body>
</html>배열(array)
설명 : 일반적인 변수로는 값을 하나밖에 저장못함.
하지만 배열을 사용하면 여러값을 저장하여 차례대로 접근하여 처리 할 수도 있음.
index : 배열의 몇번째에 있는지 구분시켜주기 위해서 존재, 배열의 index는 정수의 0부터 시작
/ ex) [0],[1],[2]
※ 변수와 배열 차이 ※
변수 선언 배열 선언
var a = 10; var a = [10,20,30];
var b = 20;
var c = 30;
변수 호출 배열 호출
a; 10값을 가져온다 a[0]; 10값을 가져온다
b; 20값을 가져온다 a[1]; 20값을 가져온다
c; 30값을 가져온다 a[2]; 30값을 가져온다
Array 객체로 배열 생성
var fruits = new Array();
var 배열의 이름 = new Array(); //비어있는 배열을 생성한다.
배열의 이름[0] ="배열안에 들어갈 값";
예제)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var fruits = new Array();
fruits[0] ="Apple";
fruits[1] ="Banana";
fruits[2] ="Peach";
document.write(fruits[0]+"<br>");
document.write(fruits[1]+"<br>");
document.write(fruits[2]+"<br>");
</script>
</head>
<body>
</body>
</html>
리터럴로 배열 생성
예제)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var fruits = ["apple","banana","peach"];
//Array 객체로 배열 생성한걸 리터럴로 사용하면 이렇게 줄일수 있음.
document.write(fruits[0]+"<br>");
document.write(fruits[1]+"<br>");
document.write(fruits[2]+"<br>");
</script>
</head>
<body>
</body>
</html>
배열(array)의 길이
가장 많이 사용되는 속성으로, 배열명.length 로 배열의 길이를 알수있다.
예제)
var fruits = ["apple","banana","peach","melon","watermelon","pineapple"];
// fruits.length : 6
for(var i=0; i<fruits.length; i++){
document.write(fruits[i]+"<br>");
}자바스크립트 배열의 특징
자바스크립트에서는 하나의 배열에 여러가지 종류의 객체를 혼합해서 저장할 수 있다.
ex ) var comp = ["Apple", new Date(), 3.14]; // 문자열, 객체, 정수연관 배열
자바스크립트는 인덱스 대신에 키(key)를 이용해 저장하고, 다시 추출할 수 있다.
배열 연습문제
학생 3명의 성적에 대한 총점과 평균을 구하는 프로그램을 작성해보자.
조건
1. student배열에 각 학생의 점수 75,63,88점을 저장
2. for문을 활용하여 각 학생의 점수에 대한 총점을 구해보자
3. 2번에서 구한 총점을 이용하여 평균을 구해보자
4. 아래와 같이 출력해보자.
3 학생의 총점은 226점이고, 평균은 75.333333 점 입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
var student = [75,63,88];
var sum = 0;
for(i=0; i<student.length; i++){
sum+= student[i];
}
var avg = sum/student.length;
document.write("학생의 총점은 "+sum+"점이고, 평균은 "+(avg).toFixed(6)+" 점 입니다.");
</script>
</head>
<body>
</body>
</html>소수점 자리 자르기
(자르고싶은값).toFixed(몇번째자리까지 자를지 숫자)
ex) (avg).toFixed(6)
정수 반올림
Math.round(반올림 하고싶은 값)
ex) Math.round(123.456);
// 123
Math.round(123.678);
// 124
Math.round(123.9191);
// 124요소 추가 제거 메서드
splice : 배열에서 요소 하나만 지우고 싶을때 사용
예제)
// 0 1 2
let arr = ["I", "go", "home"];
arr.splice(1,2); //인덱스 1부터 요소 두개를 제거
alert(arr); //결과 I 출력slice : 기존의 배열을 건들이지 않고 꺼내서 사용할때
// 0 1 2 3
let arr = ["t","e","s","t"];
alert(arr.slice(1,3)); // e, s(인덱스가 1인 요 소부터 3(-1)인요소까지 복사 )
alert(arr.slice(-2)); // s, t(인덱스가 -2인 요소부터 제일 끝 요소까지 복사)concat
기존 배열의 요소를 사용해 새로운 배열을 만들거나 기존 배열에 요소를 추가하고자 할때 사용
let arr = [1,2];
alert(arr.concat([3,4]));
alert(arr.concat([3,4],[5,6]));
//arr의 요소와 [3,4],[5,6]을 추가해서 결과는 1,2,3,4,5,6이 나온다 */지역변수(local variable)와 전역변수(global variable)
- 지역변수와 전역변수는 선언위치에 따라서 구분한다.
지역변수 : 함수 안에서 선언한 것이고, 동작이 끝나고 지역변수가 종료되면 메모리상에서 사라짐
전역변수 : 함수 외부에서 선언된건 전역변수로, 웹 페이지상의 모든 스크립트와 모든 함수는 전역변수를 사용할수 있음.
예제)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>지역변수, 전역변수</title>
<script>
var sum = 0;
for(var i=0;i<5;i++){
var sum = 0;
sum += i;
document.write(i+"<br>");
}document.write(i+"의 합 : "+sum+"<br>");
</script>
</head>
<body>
</body>
</html>let :
변수 선언할때 var대신 사용가능하며, 지역변수와 전역변수 구분에 따라 출력을 할지 선택가능
변수명을 중복으로 선언하면 SyntaxError가 발생한다. 값을 재할당 하는 것은 가능
(Uncaught SyntaxError: Identifier 'a' has already been declared)
-> 지역변수에서 선언한 let변수를 지역변수 밖에서 let으로 선언한 함수호출하면 출력안됨..
(블록 레벨 스코프 : 블록 스코프 변수는 함수 밖에서 선언하면 함수 스코프 변수처럼 전역 접근할 수 있습니다. 블록 안에서 선언하면 자신을 정의한 블록과 하위 블록에서만 접근이 가능합니다.)
const :
상수를 선언하는 키워드로, 처음에 한번 선언하고 나면 다른값을 넣을 수 없음.
변수명을 중복으로 선언하면 let과 같이 에러 발생함. 값을 재할당 하는것도 불가능함.
(블록 레벨 스코프)
예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>지역변수, 전역변수</title>
<script>
let sum = 0; //이렇게 함수 밖에서 선언한건 전역변수
for(let i=0;i<5;i++){
// let sum = 0;
sum += i;
document.write(i+"<br>");
}document.write(sum+"<br>");
</script>
</head>
<body>
</body>
</html>자바스크립트 기초 #6 에서 이어서
