자바스크립트 (8) - 리턴과 조건문

if (condition) {
console.log(“please write a number”)
}
else
{

}​

if (condition) {
console.log(“please write a number”)
}
else
{

}

콘솔로그를 너무 남용하면 안된다. 

콘솔로그란 무엇인가? 콘솔에 무언가를 로그하는 것이다( 기록하여 보여줌) 

 

콘솔로그는 콘솔에 결과 표시는 해주는데, 

 

값을 리턴해준다거나, 무언가를 변경한다거나 데이터를 반환해주는 건 아니다. 

 

사용자가 투두리스트에 입력을한다면 배열에 넣어주는 일. 

 

즉 데이터를 얻어서 데이터로 무언가를해 반환해주는 일을 하고 싶은데, 콘솔로그 만으로는 안된다.

 

 

div : function (a,b) {
console.log(a/b)

}

 

콘솔로그는 콘솔 에 출력이 됐고 브라우저에서 얼러트가 떴고 그게 전부다. 

div 함수가 출력을해도, 실제 반환하는 값은 undefined 이다.

 

const age = 96;
function calculateKrAge(ageOfForeigner){
return ageOfForeigner +2;
}

 

const krAge = calculateKrAge(age);

console.(krAge); 

98

 

함수는 단순히 어떤 기능을 수행하는 것을 넘어

어떤 일을 수행하고 리턴을 돌려주는 역할을 한다.

 

리턴 키워드 뒤에 값을 적어 

함수실행값으로 초기화시 실제 값이 전달된 걸 확인할 수 있다. 

이 return 이 함수가 함수외부와 소통하는 방식이다. 

 

만약 사용자의 위치를 받아 날씨정보를 리턴해주고 싶다면, 단순히 콘솔에 출력하진 않을거다.

css등을 멋지게 적용해서 화면에 출력할 것이다.

 

이때 필요한게 return이다.

 

자스의 규칙인데 리턴문 이하에 적힌 것은 더는 실행되지 않는다. 

function calculateKrAge(ageOfForeigner){
return ageOfForeigner +2;
console.log(“hello”)
}

리턴 밑의 콘솔로그 는 실행 안된다.

 

=== 조건문

 

true인지 false인지 상태에 따라 동작한다.

 

예를들어 사용자가 로그인 상태라면 뭘 할지,

아니면 사용자가 무언가를 할때 반응하는 것을 만들때. 필요하다.

 

const age = prompt(“how old r u”)

console.log(age)

 

prompt()는 사용자가 창을 띄울 수 있게 해준다.

 

실행해보면 사이트는 계속 로딩하는 것으로 브라우저 파비콘에 나온다.

이 페이지는 자스를 일시정지 시키고 있는 것이다.

 

여기서 콘솔로그는 실행도 안됐고 age 변수에 prompt 를 넣어주려는 구문 그 순간에 멈춘 것이다.

 

이게 프롬프트를 더이상 안쓰는 이유임. 메시지가 안 예쁘고, 어떤 css 도 적용시킬 수 없다. 

 

어떤 브라우저는 이런 팝업을 제한 하기도 한다. 매우 오래된 함수임.

 

요즘에는 html css 로만든 자신만의 폼을 사용해 사용자가 값을 작성할 수 잇음.

 

어쨌든 프롬프트가 브라우저를 활용하는 가장 직접적인 방법.

간단하게 쓸 수 있고, 답을 물음, 취소할 수도 있는데  취소한다면 이때는 null값이 입력으로 들어온다.

 

자바스크립트는 뭘 입력하든 입력값으로 가져갈 거임.

 

입력값을 typeof 하면, 프롬프트에서 숫자를 입력했더라도  string 자료형. 뭘 입력하든 스트링 자료형으로 받는다.

 

이때 필요한 것이  parseInt()함수이다. 이렇게 바꾸는 이유는 정수형이여야만 조건문을 활용한 대소비교가 가능하기 때문이다.

 

jahfkasdhfkahdf을 parseint 하면 NaN 오류 나온다. ( not a number)

“123”이런 것만 정상적으로 인수 변환이 가능하다.

isNaN() 함수는 인자값이 nan인지 아닌지 불리안으로 반환해주는 함수이다.

 

조건문

if (condition) {
console.log(“please write a number”)
}
else
{

}

 

else if 사용시 조건문 하나 더 사용 가능. 

 

if (condition) {
console.log(“please write a number”)
}
else if ()
{

} else {
}

 

조건문 1이 false이면 밑으로 다음 조건문 체크. 그것도 false면 else 문 실행.

 

|| 는 or임. and는 &&. 조건 연산자.

 

const age = parseInt(prompt(“How old are you?”)

if (isNaN(age) || age< 0) {
console.log(“Please write a real positive number”)
} else if (age < 18) {
console.log(“you are too young”)
} else if (age >= 18 && age<=50) {
console.log(“you are too young”)
} else if (age >= 50 && age<= 80) {
console.log(“you are too young”)
} else if (age > 80) {
console.log(“you are too young”)
}

 

만약

 

 else if (age > 80) {
console.log(“you are too young”)
} else if (age=== 100) {
console.log(“you are wise”)
}

를 추가한다고 하면  age === 100 수행문은 실행이 안된다.

 

false여야 다음 조건문으로 넘어가는데, age>80 조건에서 true값을 받아 수행문을 실행시키기 때문이다.

 

 

else if (age=== 100) {
console.log(“you are wise”)
}
 else if (age > 80) {
console.log(“you are too young”)
}

이렇게 순서를 바꾸면 된다.

 

이제 html 과 반응형을 공부해보자. 사용자와 상호작용하는 법.

 

사용자 마우스가 머하는가 . 이벤트, 클릭등을 감지 (listen)하는 법을 배운다