220510 Javascript 5

1. 배열

프로그램에서 이야기 하는 변수를 그룹으로 묶은 형태의 한 종류로써, 사물함 같은 형태를 갖고 있다.
Javascript에서는 데이터형의 선언을 별도로 하지 않기 때문에 데이터 형에 대한 제약은 없다. (단, 배열 안에는 한 종류의 값들만 저장하는 것이 바람직하다.)

 

1-1. 배열 만드는 방법

• 크기가 정해진 배열

let myarray = new Array(값1, 값2, ... , 값n);
let myarray = [값1, 값2, ... , 값n];

생성된 배열은 사물함과 같이 각각의 칸에 값이 저장되고, 각각의 칸은 0부터 일련번호가 지정된다.

(일련번호 = 배열의 인덱스)

 

• 빈 배열 : 아무런 값이 저장되어 있지 않은 형태로 만든 후 하나씩 값을 채워나가는 방법 

// 빈 배열 생성
let myarray = new Array();
let myarray = [];

// 빈 배열에 값 할당
myarray[0] = 'java';
myarray[1] = 'spring';

// myarray 길이는 현재 2

 

 

 

1-2. 배열 데이터의 접근

생성된 배열의 값에는 "배열이름[일련번호]" 형식으로 접근할 수 있다.

// 변수에 myarray 0열 값 할당
let lang = myarray[0];

// myarray 2열에 "html" 할당(재할당)
myarray[2] = "html";

 

 

 

1-3. 예제 1

// 배열 생성
// 방법1
let myarray = new Array("html", "javascript", "jsp");
// 방법2
// let myarray = ["html", "javascript", "jsp"];

// 값 읽기
document.write('<h1>' + myarray[0] + '</h1>');	// html
document.write('<h1>' + myarray[1] + '</h1>');	// javascript
document.write('<h1>' + myarray[2] + '</h1>');	// jsp

// 배열에 값 재할당
myarray[0] = 'java';
myarray[1] = 'spring';
myarray[2] = 'spring boot';

// 값 읽기
document.write('<h1>' + myarray[0] + '</h1>');	// java
document.write('<h1>' + myarray[1] + '</h1>');	// spring
document.write('<h1>' + myarray[2] + '</h1>');	// spring boot

 

 

 

1-4. 예제 2

let myarray = new Array();

// 반복문을 통해서 값을 저장
for (let i = 0; i < 10; i++) {
    myarray[i] = i;
}

// 배열 길이 출력
document.write("배열의 길이 : " + myarray.length);

// 배열 안 값 출력
for (let i = 0; i < myarray.length; i++) {
    document.write("<p>" + myarray[i] + "</p>");
}

 

[출력 결과]

 

 

---

 

 

2. 2차 배열

2-1. 2차 배열 생성 방법

let myarry = new Array(
    new Array(값1, 값2, ... , 값n),
    new Array(값1, 값2, ... , 값n)
);

let myarray = [
    [값1, 값2, ... , 값n],
    [값1, 값2, ... , 값n]
];

 

 

 

2-2. 2차 배열 사용

생성된 배열의 값에는 "배열이름[행][열]" 형식으로 접근할 수 있다. 행, 열의 인덱스 값 시작은 0부터 시작

 

• 값 읽기

// 변수 lang에 myarray 0행 0열 값 할당
let lang = myarray[0][0];

 

• 값 대입

// myarray 1행 2열에 "통신" 값 할당
myarray[1][2] = "통신";

 

• 크기 조회

// 행의 크기
배열객체이름.length;

// n번째 행에 대한 "열"의 크기를 조회
배열객체이름[n].length;

 

 

 

2-3. 예제

		let myarray = new Array(
			new Array('웹표준', 'HTML5/CSS3', '반응형 웹'),
			new Array('javascript', 'jQuery', 'Ajax')
		)
		
		// 2차 배열 값 출력
		for (let i = 0; i < myarray.length; i++) {
			for (let j = 0; j < myarray[i].length; j++) {
				document.write('<h1>' + myarray[i][j] + '</h1>');
			}
		}

 

[출력 결과]

 

 

 

---

 

 

3. 주요 내장 함수

3-1. alert(문자열)

주어진 문자열을 확인 대화창으로 화면에 표시

alert("alert창 입니다.");

 

 

 

3-2. confirm(문자열)

주어진 문자열이 표시되는 확인/취소 대화창을 화면에 표시

function test() {
    if (confirm("comfirm창 입니다. 확인 또는 취소를 눌러주세요.")) {
        alert("확인을 누르셨습니다.");
    } else {
        alert("취소를 누르셨습니다.");
    }
}

test();

확인 버튼을 누르면 '확인을 누르셨습니다.' / 취소 버튼을 누르면 '취소를 누르셨습니다.' alert 창으로 이어진다

 

 

 

3-3. prompt(문자열)

주어진 문자열이 제목으로 표시되는 값을 입력받기 위한 대화창

prompt("prompt창 입니다.")

사용자에게 입력받은 값을 저장하거나 if문을 돌려 새로운 반응을 도출할 수 있다.

 

 

 

3-4. eval(문자열)

주어진 문자열을 수식으로 변환하여 리턴

let a = "1+1";
let b = 1 + 1;
let c = eval("1+1");

document.write("<h1>" + a + "</h1>");	// 1+1
document.write("<h1>" + b + "</h1>");	// 2
document.write("<h1>" + c + "</h1>");	// 2

 

 

 

 

3-5. Number와 parseInt

• Number(문자열) : 주어진 문자열의 변수가 숫자 모양일 경우 실제 숫자형으로 변환하여 리턴
• parseInt(문자열) : 주어진 문자열의 변수가 숫자 모양일 경우 실제 숫자형으로 변환하여 리턴
• Number 함수와 parseInt 함수의 차이
  전달되는 파라미터가 정수 형태의 문자열일 경우 두 함수는 동일한 결과를 리턴하지만, 실수 형태를 갖는 문자열을 전달할 경우 두 함수는 서로 다른 결과를 리턴한다.

let value = "100";
let num1 = Number(value);
let num2 = parseInt(value);

let r1 = value + 1;
let r2 = num1 + 1;
let r3 = num2 + 1;

document.write("<h1> r1 = " + r1 + "</h1>");	// 1001
document.write("<h1> r2 = " + r2 + "</h1>");	// 101
document.write("<h1> r3 = " + r3 + "</h1>");	// 101

▶ r1은 문자열 + 숫자이므로 숫자가 문자열로 변환되어 1001이 출력된다.

▶ r2와 r3는 Number와 parseInt를 통해 숫자형으로 변환되어 숫자+숫자로 계산되어 출력된다.

 

let value = "100.6";
let num1 = Number(value);
let num2 = parseInt(value);

let r1 = num1 + 1;
let r2 = num2 + 1;

document.write("<h1> r1 = " + r1 + "</h1>" );	// 101.6
document.write("<h1> r2 = " + r2 + "</h1>" );	// 101

▶ Number는 소수점까지 숫자형으로 변환해주기 때문에 r1은 101.6이 출력된다.

▶ parseInt는 int형으로 변환하기 때문에 소수점을 버리고 100만 숫자로 변환된다. 따라서 r2는 101이 출력된다.

 

 

 

3-6. isNaN(문자열) 

• isNaN 함수는 파라미터로 전달되는 변수의 NaN 여부를 boolean 형태로 리턴한다.
• 주어진 문자열이 숫자형식이 아니면 true, 숫자 형식이면 false를 리턴
• ex. 파라미터가 숫자로 변환할 수 없는 문자열일 경우에는 NaN 형태이므로 true를 리턴
• parseInt 함수나 Number 함수의 정상동작을 보장하기 위해서는 파라미터를 전달하기 전에 해당 값의 NaN 여부를 검사해야한다. 
• isNaN 함수의 결과를 부정하면, 그 값은 숫자값이거나 숫자형으로 변환 가능한 문자열이라는 의미가 된다.

 

[예제 코드 1]

// NaN
let a = Number("a");
document.write("<h1> a = " + a + "</h1>");	// NaN

// NaN + 1
lat a_sum = a + 1;
document.write("<h1> a_sum = " + a_sum + "</h1>");	// NaN

// Nan + str
let a_str = a + "str";
document.write("<h1> a_str = " + a_str + "</h1>");	// NaNstr

▶ Number 함수와 parseInt 함수는 파라미터로 전달된 문자열이 숫자 형태가 아닌 경우 "NaN"이라는 값을 리턴한다.
▶ "NaN" 값과 숫자값과의 연산은 모든 결과가 "NaN"이다.

▶ "NaN"이 문자열이기 때문에 "NaN" + "str"은 "NaNstr"로 출력된다.

 

[예제 코드 2]

let v1 = "가나다라";
let v2 = "12345";

// 숫자일 경우 true 아닐 경우 false로 받기 위해 isNaN 앞에 !를 붙여준다.
let is_num1 = !isNaN(v1);
let is_num2 = !isNaN(v2);

if(is_num1){
    document.write("<h1>" + v1 + "은(는) 숫자 입니다." + "</h1>")
} else {
    document.write("<h1>" + v1 + "은(는) 숫자가 아닙니다." + "</h1>")
}

if(is_num2){
    document.write("<h1>" + v2 + "은(는) 숫자 입니다." + "</h1>")
} else {
    document.write("<h1>" + v2 + "은(는) 숫자가 아닙니다." + "</h1>")
}

 

[출력 결과 2]

 

[예제 코드 3]

function sumInt(x, y){
    let isStrX = !isNaN(x);
    let isStrY = !isNaN(y);

    // x와 y가 숫자로 변환 가능한 문자열이라면 true이므로 if문을 돌릴 때 !를 붙여 false로 만들어준다.
    // 둘 중 하나라도 숫자 모양이 아니라면, 실행을 중단하고 메시지를 리턴한다.
    if(!isStrX || !isStrY){
        return "숫자 형태이거나 숫자값이 전달되어야 합니다.";
    }

    let result = parseInt(x) + parseInt(y);
    return result;
}

let sum1 = sumInt("a", 1);
let sum2 = sumInt("100", 1);
let sum3 = sumInt("-100", 1);

document.write("<h1>" + sum1 + "</h1>");	// 숫자 형태이거나 숫자값이 전달되어야 합니다.
document.write("<h1>" + sum2 + "</h1>");	// 101
document.write("<h1>" + sum3 + "</h1>");	// -99