221031 JavaScript - prompt()함수, 지역변수, 전역변수, 조건문 if-else if문, 데이터타입, 배열

오늘 내가 배운 것

1. 함수 prompt

2. 지역변수와 전역 변수

3. 조건문 if-else if- else 문

4. 데이터 타입

5. 배열

 

 

 

프로그래밍의 기본은 input / output…

X라는 값을 입력했을 때 Y를 출력하겠다.

 

 

1. 함수 prompt

prompt("값을 입력하세요”) : 팝업창이 뜨고 그 창이 꺼질 때까지 그 밑에 있는 코드가 실행되지 않음

(함수를 배우고 나서 다시 배울 예정)

let input = prompt(“값을 입력하세요.”)

팝업창에 데이터를 입력할 수 있는 박스가 생성되고 그 박스안에 적은 데이터가 input 변수에 대입된다.

/* 인풋박스가 생기고 그 입력창에 내용을 적으면 그 내용이 prompt 의 결과 값이 됨.  */
let input = prompt("값을 입력해주세요.")
console.log(input)

 

	// 두 번의 팝업창이 나타나고, 그 안에 적은 값이 각각 input1 과 input2 에 대입된다.
    let input1 = prompt('첫 번째 숫자를 입력해주세요.') //10
    let input2 = prompt('두 번째 숫자를 입력해주세요.') //20
    
    console.log(input1)         //처음 입력한 값이 나옴
    console.log(input2)         //두 번째 입력한 값이 나옴

    //입력을 받았을 때 컴퓨터는 글자인지 숫자인지 모르기 때문에 input으로 넣은 값은 문자열로 인식을 하고 결과가 나온다. 
    // 데이터 타입의 중요성!!
    
    console.log(input1 + input2) // 1020

    //형변환 string -> number 로 바꿔주면 숫자로 인식해 바꿔준다.
    //Number or paraseInt
    console.log(Number(input1) + Number(input2))  // 대소문자 중요 //30
    console.log(parseInt(input1) + parseInt(input2))		//30

 

형변환 : 자바스크립트에서 코드를 작성할 때 간단한 부분은 자동으로 형을 바꿔주어 내가 원하는 값이 나올 수 있지만 자동으로 형변환이 되어 내가 원하지 않는 값이 나올 수 있다. 그렇기 때문에 형변환이 필요한 곳을 잘 파악하고 원하는 형태의 타입으로 바꿔 줄  수 있어야 한다.

 

알고리즘 공부 tip.

// 알고리즘 공부할 때 (내가 입력 받고 싶은게 string 인지 number 인지 파악)
// 1. 입력받기 (input)
// 2. 로직구현(문제해결)
// 3. 출력 (output)

 

 

2. 지역변수와 전역 변수

지역변수 

codeblock 안에서 선언된 변수
중괄호 안에 선언된 변수는 중괄호 안에서만 사용 가능

 

전역변수

codeblock 밖에서 선언된 변수 

 

{
    let a = 0           
}
console.log(a)      //error : 선언을 안해서 생기는 에러코드 

// 코드블럭 내부에 할당한 변수는 코드블럭 밖에서 호출이 되지 않는다.

에러가 발생을 막을 수 있는 변수사용 기 법 !!

//기법 //전역변수로 선언만하고 코드블럭 내부에서 변수 값을 할당해서 쓴다.
let b
{
    b=0
}
console.log(b)

 

 

3. 조건문 if-else if- else 문

prompt 를 사용해서 값을 대입하기

/*
각각 숫자를 받는 Input 을 만든다.
입력받는 값을 변수 a, b에 담는다.
a > b 일 때는 a가 큽니다. // 출력
a < b 일 때는 b가 큽니다. // 출력


그러면 a = b 일 경우는?  // 이때 if-else if를 사용한다.

*/

//prompt 를 사용하여 input을 받는다. 초기엔 x 와 y 는 string 타입이다.
let x = prompt("첫 번째 숫자를 입력해주세요.")
let y = prompt("두 번째 숫자를 입력해주세요.")

//재할당 -> a, b 에 데이터 타입을 number 타입으로 형변환을 한다. (비교연산자(조건식)에 사용하기 위해)
x = parseInt (x)
y = parseInt (y)

if(x > y){
    console.log("x가 큽니다.")			//x가 크지않으면
}else{
    if(x < y) {
    console.log('y가 큽니다')			//y도 크지않으면 
    }else{
    console.log('x와 y가 같습다다')		// 같음.
    }
}

//이런 과정을 if - else if- else 를 사용하여,

if (x > y){
    console.log('X는 ' + x + ' Y는 ' + y + "으로 " + "X가 큽니다.")
}else if ( x < y){
    console.log('X는 ' + x + ' Y는 ' + y + '으로 ' + "Y가 큽니다.")
}else {
    console.log("X는 " + x + " Y는 " + y + '으로 ' + "X랑 Y가 같습니다.")
}


//로 작성이 가능하다.

if- else if 을 사용하면 else 안에 if 문을 다시 작성하면서 가독성이 떨어지는 문제를 방지해줄 수 있다.

 

 

4. 데이터 타입

데이터 타입

    원시 타입

        -숫자 (number)
        -문자 (string)
        -불리언 (boolean)
        -undefined
        -null
        -symbol ( es 6 타입 - 나중에 다시 배우겠음..)
    

    객체 타입

        -배열
        -객체
        -함수
        .....

 

undefined vs null
둘 다 예약어이다. ; 변수명으로 사용할 수 없다는 뜻!

 

차이점 : 변수를 선언하는 순간 undefined가 기본값이다.
선언하고 할당을 하지 않았을 때 출력되는 값이 undefined이다. (undefined은 선언 후 암묵적으로 할당되는 것)
null은 의도적으로 값이 없다는 것을 명시할 때 뜨는 값.

 

 

5. 배열

 

 배열, 객체

-같은 성향의 변수를 한 곳에 몰아 놓고 필요한 데이터를 쓰는 게 코드에 좋다.

-배열의 index는 0부터 시작한다.

let a = 10
let b = "hello" 

// a 변수와 b 변수를 한 줄로 쓰려면

let c = [10, "hello"]

// 예약어 변수명 = []    대괄호로 사용한다.

console.log(b+a) // hello10
console.log(c[0])  // 10 //c배열 안에 0번째 인덱스 값을 출력해라.
console.log(c[1])  // hello // c배열 안에 1번째 인덱스 값을 출력해라.

console.log(c[1] + c[0]); // hello10
console.log(c.length) //2

배열을 호출할 때 

        " 변수명[인덱스 번호] " 로 호출한다.

배열의 길이를 알고 싶을 때 (배열 안에 들어있는 변수의 개수)

배열변수명.length 로 알 수 있다. length를 사용하면 유동적인 배열(변화가 있을 경우)에도 대처가 쉽다.

 

 

let arr = [1,2,3,4,5,6,7,8,9]

//arr 있는 변수를 하나씩 다 출력하세요


    // console.log(arr[0])
    // console.log(arr[1])
    // console.log(arr[2])
    // console.log(arr[3])
    // console.log(arr[4])
    // console.log(arr[5])
    // console.log(arr[6])
    // console.log(arr[7])
    // console.log(arr[8])   // 접근은 가능, undefined
    // console.log(arr[9])   // 접근은 가능, undefined

        //직접 하나씩 쓸 경우 ,, 비효율적이고, 총 갯수를 알아야함..
        //반복문과 length 를 이용하여 간단하게 사용 할 수 있다.
        
        
        
for(i = 0; i < arr.length; i++){
    console.log(arr[i])
}

같은 배열을 이용해서 구구단 만들기

for( i = 1 ; i < arr.length ; i++){
	console.log(i + "단")
    for(j=0; j < arr.length ; j++){
        console.log( arr[i] + " X " +  arr[j]  + " = " + arr[i]*arr[j] )
    }
}

---

2~5단까지만 가져왔다.

---

//menu1
//  submenu1-1
//  submenu1-2
//  submenu1-3
//  submenu1-4
//menu2
//  submenu2-1
//  submenu2-2
//  submenu2-3
//  submenu2-4
//menu3
//  submenu3-1
//  submenu3-2
//  submenu3-3
//  submenu3-4
//menu4
//  submenu4-1
//  submenu4-2
//  submenu4-3
//  submenu4-4          를 출력하고 싶다.


for (let a= 1 ; a < 5 ; a++) {
    console.log("menu" + a)
    for(let b = 1; b < 5 ; b ++){
        console.log("   submenu" + a + "-" +b)
    }
}

---

---

 

오늘의 에러

Error1 : 

외부 파일로 js을 연결할 때 html에서 css처럼 link 엘리먼트를 사용해서 js가 console에 출력이 안되었음.

Solution1: 

<link>가 아닌 <script>를 사용해야 하고 </script>까지 사용해야 한다.  내부에 src 속성을 써야 한다. href가 아님!!!

 

Error2 :

 if - else if - else 문을 사용하는 과정에서 

 " Uncaught SyntaxError: Unexpected token '{'  " 에러 발생

Solution2: 

if - else if - else 에서 마지막 else 에는 위에 조건들이 아닌 나머지들 이기 때문에 else 뒤에 '()' 조건식이 없어야한다.

그래서 else 부분에 () 조건식으로 나머지 범위까지 적어준 코드에서 에러가 발생했던 것이다.

컴퓨터는 친절하게 전체코드를 분석해서 () 부분이 없어야한다라고 문법을 봐주는게 아닌 내가 쓴 코드를 읽다가 안되는 부분에서 멈춰서 멈춘 부분이 문제야 정도이기 때문에 파악하기 힘들었다.

 

결론은 if 와 else if 는 조건식이 필요하지만 마지막 else 에서는 나머지(false)를 뜻하기 때문에 조건식이 없어야한다.