//3강
//if문 조건문 ~만약에 ~한다면 ~해라
/*
var a = 20;
var b = 40;
var c = 60;
if(a < b) {
console.log("a는 b보다 작다");
} // (조건)이 참이여야지 {}가 실행이된다.
if( true ) {
console.log("a는 b보다 작다"); // 이렇게 해도 무방함. 결과적으로 ()는 참 거짓만 인식을 함.
}
if(a > b) {
console.log("a는 b보다 작다");
} // 거짓 - 출력이 안된다. 논리구문을 만들때 사용하는 if문
// 보안. 거짓 상태에도 사용자에게 알리는 에러 메세지를 만들어야함 . 담당 also문
//else 문
if( a > b) {
console.log("a는 b 보다 크다");
} else {
console.log("a는 b보다 작다");
}
//else는 거짓에서만 실행이 되는 구문
//else,if 문 -여러가지 조건을 설정하고자 할때 사용하는 변수문 -if부터 시작을 해야함
if( a> b) {
console.log("a는 b보다 크다"); // 거짓
} else if (b > c) {
console.log("a는 b보다 크다"); // 거짓
} else if (a < c) {
console.log("a는 c보다 작다"); // 참
} else if(b < c) {
console.log("b는 c보다 작다"); // 참 < 이것도 출력?
} else {
console.log(" 모든 조건을 만족하지 않는다.")
}
// 여러개의 참이 존재한다면 가장 먼저 나오는 참만 실행을 시킨다. 그 이후의 조건으 보지않고 실행이 정지가 된다.
// 중첩 if문
//a=b 일때 버그가 발생할 수 있다. 그래서 조건문을 상세하게 작성할 필요가 있다. if문안에 if문을 넣는 구조
if (a !== b) {
if(a > b) {
console.log("a는 b보다 크다");
}else {
console.log("a는 b보다 작다");
}
} else {
console.log("a와 b는 같다");
}
//탄탄한 논리구조 중첩 if문으로 실행가능
*/
//거짓이 되는 상황 >>> 실무에서 많이 사용하기 때문에 반드시 !!!
//false, 빈문자열("",'') , 숫자 0 , null, undefined등 다른것을 입력했는데 값이 참이여도 거짓이
/*
if(false) {
console.log("참!!!!");
} else {
console.log("거짓!!!!");
}
if('00') {
console.log("참!!!!");
} else {
console.log("거짓!!!!");
} // 빈문자열이면 거짓/ 내용이 있으면 참으로 인식. ex)로그인 입력안하면>빈문자열 아이디 기입하시오.
if(0) {
console.log("참!!!!");
} else {
console.log("거짓!!!!");
} //0 보다 큰 경우에는 참으로 인식이 된다. 0은 거짓 , -숫자를 넣으면 참. >> 0보다 크거나 작으면 전부다 참으로 인식
if(null) {
console.log("참!!!!");
} else {
console.log("거짓!!!!");
}
var test;// 아무런 값을 넣지 아니면 언디파인드로 인식
//var tese = ""; 이면 언디 파이드가 아니라서, 참으로 인식이 된다.
if(undefined) {
console.log("참!!!!");
} else {
console.log("거짓!!!!");
}
// 삼항 연산자 조건문과 비슷하게 작동
var age = 15;
if(age >= 18) {
console.log("성인");
}else{
console.log("어린이");
} // 이렇게 단순한 경우 삼항연산자를 사용을 한다.
var result = (age >= 18) ? "성인" : "어린이";
// if else 같은 구조를 만들때 사용ㅇ, 조건을 만듬 참이면?안에 문구가 나오고 거싯이면 ;앞의 문구가 나온다.
// 참이면 성인. 거짓이면 어린이란 값을 할당시켜라는 저건을 단ㅁ
console.log(result);
// 가독성이 더 좋음 삼항 연사자를 더 사용. 2줄이상의 연산이 사용하면 if
*/
// 이상 조건문의 기본적인 내용 끝
// 조건문 응용
//prompt
/*
var userId = prompt("아이디를 입력해 주세요");
var usePw = prompt("비밀번호를 입력해 주세요");
//console.log(userId);
//console.log(usePw); // 값을 입력하면 값이 변수에 각각 할당이 된다.
// 사용자에게 어떠한 값을 전달 받을 때 사용하는 팝업을 뜨는 메서드
//팝업 디자인은 브라우저마다 css가 다르기 때문에 다르지만 prompt의 기능은 동일한다.
if (userId === "gundam" && usePw === "seed") {
alert("로그인이 되었습니다.");
} else {
alert("아이디 또는 비밀번호가 틀렸습니다.");
}
//&& 하나라도 거짓이면 거짓
// 주의점 데이터 타입 > 문자/숫자 입력은 같은 숫자라라도 데이터타입이기 다름 typeof
//prompt로 받은 건 모두 스피링(문자열)로 인식이 된다. > 애초에 데이터 타입이 다르게 나온다.
//문자를 전달로 데이터를 숫자데이터 타입으로 변환 > parseInt 사용 (정수로 바꾼다.)
if (userId === "gundam" && usePw === 1234) {
alert("로그인이 되었습니다.");
} else {
alert("아이디 또는 비밀번호가 틀렸습니다.");
}
if (userId === "gundam" && parseInt(usePw) === 1234) { //문자 데이터 타입을 > 숫자 데이터 타입으로 변환 정ㅅ
alert("로그인이 되었습니다.");
} else {
alert("아이디 또는 비밀번호가 틀렸습니다.");
}
*/
// 전역변수, 지역변수 (이후에 나오는 개념들과 연결이 됨 연속성을 지니고 있음.) 기초~중급
/// 전역변수 : 모든 범위에 영향력을 행사할수 있는 변수 . 현실세계 지구자체를 전역변수
// 함수 안 밖에 모든 영향력을 발휘할 수 가 있임
// 지역변수 : 지구내 나라별의 법체계 지역내 한정해서 영향력을 적용. 특정 국가에만 적용되는 법.
// 함수안에서 발휘 가능 .
// 구분하는 기준 : 함수 > 과거의 js의 기준
/*
var globalV ="전역변수"
function func(){
var localV = "지역변수";
console.log(globalV);
console.log(localV);}
//func();
// 함수밖에 출력시
console.log(globalV); // 출력
console.log(localV); // 존재하지 않는다라고 인식
*/
// >최근 js기준 변수를 만들때 var가 아닌 let, const로 변수로 만듬. 이때 전역과 지역변수의 기준점이 달라짐.
// 지금에 배우면 개념이 혼돈이 된다.
//지금은 var로 변수로 작성 옛날 js 기반./
// 변수 만들때의 주의점
/*
var gv ="전역변수";
function func() {
//var gv = "지역변수";
gv = "지역변수"; //var gv 를 생략하면 모두 지역변수로 출력 / 위의 전역변수를 지역변수로 내용을 바꾼것으로 봄var를 사용하지 않아서
console.log(gv);
} //전역변수와 지역변수의 변수명이 돟일함 이런 경우는 거의 없음.
// gv변수 함수안의 지역변수 출력
func();
console.log(gv);
// 함수 안에 접근할 수 없어서 함수 밖의 전역변수를 불려서 출력된것.
// 전역변수 값자체가 지역변수로 변경이 되었기 때문
// 새로운 변수를 만들때는 무조건 var를 사용해야 한다. 아니면 단순 값수정으로 보기 때문에 오류의 원인이 될 수 가 있다.
var gv = "전역변수";
if(true){
var lv ="지역변수???";
//console.log(gv);
//console.log(lv);}
console.log(gv);
console.log(lv); // 구분하는 것은 {}가 아니라 function 기준!!!1
/
// 전역변수를 간편하게 확인하고 싶은 경우
//콘셉탭안에서 작성도 가능하고 클린도 가능함. 코딩한걸 콘솔탭에서 바로 출력이 가능
//var gv ="전역변수"
/
function a() {
console.log("a");
}
콘솔탭에서 a(); 으로 함수를 바로 활용해서 출력할 수 있음.
*/
//모든 전역변수는 window라는 객체에 r기본프로펄티 로 활당이 됨. 키로 들어가 있음 window.gv
//var aaa ="aaa";
//스코스 : 변수가 영향력을 발휘 할 수 있는 영향권
// 전역 스코프 : gv- 모든영역에 영향력을 발휘 할 수 있는 것을 전역 스코프
/*var gv = "전역변수"
function func() {
console.log(gv);
}
func();
console.log(gv); */
// 지역 스코프 : 함수 안에서만 영향력을 발휘 할 수 있는 스코프
/*
function func() {
var lv ="지역변수";
console.log(lv); // 출럭 lv의 영향역은 함수내부
}
func();
console.log(lv); // 출력이 안됨 */
// 스코프에서 주의 해야되는 주요 개념
// 함수는 서로의 스코프에 접근할 수 없다!!!!!!!!!!!!( 중요!!!!!)
/*
function a(){
var apple ="사과";
} // 함수가 만들어 지는 순간 apple영향은 딱 여기까지
function b(){
a(); // 호출은 될 수 있어도 apple의 영향이 여기로 넘어오지는 않는다. var apple ="사과"가 들어간것이 아니다.
console.log(apple);
}
b();
// apple이 정의 되지 않음. 함수 호출과 전혀 상관이 없다. apple이 영향력을 발휘 할 수 있는 거량 호출은 다른것
// 함수를 만드는 경우 , 각가가 독립적은 영역이기 때문에 서로 영향을 줄 수 가 없다. 함수안에 생긴 변수는 다른 함수안에서 영향력을 발휘할 수 업삳.
*/
//스코프 체인
/*
var a = 10;
// 함수 명을 지를 때 변수명을 지를땨의 규칙를 따른다.
function fun1(){
var b = 20;
function fun2(){
var c = 30;
console.log(a+b+c);
}
fun2();}
fun1(); //값은 60 a,b,c 모두를 접근했다는 뜻 a는 안에서 밖에서 찾음. fun2>fun1>전역
//b fun2안에는 없음 fun1 안에서 밖에서 찾음. c는 fun2내에서 찾음
// 이거 자체를 스코프 체인. a는 전역 스코프= 모든 영역에 영향력 .
// 전역 > fun1(지역) > fun2(지역) 스코프들이 각가가 겹치기 되는게 이걸 스코프체인 . 안쪽에서 밖쪽을 탐색하는 것.
//젼역 변수/스코프를 설명할때도 사용했던 개념
// 밖에서는 안쪽을 탐색은 정의되지 않은 애러가 발생이 됨.
// 함수는 서로의 서코프에 접근할 수 없다. > 독립적인 별개의 함수 관계의 경우
// 지금 처럼 함수내부에 다른 함수가 있는 경우는 겹쳐저 있기 때문에 가능한 것.
*/
//레시컬 스코핑 - 함수는 서로의 스코프에 접근 할 수 없다.
/*
var name ="MJ";
function func1(){
console.log(name); // 전역변수의 name를 가지고 온것
}
function func2(){
///name = "seed"; //var를 사용하지 않음 . 전역값을 변경한 것.
var name = "seed" // 이 줄의 영향은 fun2내 영향.
func1(); // var 사용시 consloe.log(name) 이 아님
}
func2();
*/
//호이스팅 : 끌어올린다/
// 변수 호이스팅
//console.log(a); //에러는 안일어나고 undefined가 나옴. js는 위에서 순차적으로 읽는데, 아래줄에 변수를 정의했슴에도 에러가 일어나지 않음
//var a;
//a = "나는 건담무이디."
//var a = "나는 a다." // 동시에 했지만, 단계는 선언과 초기화 가 분리된 상태에서 진행이 됨으로
// 변수 선언한 상태에서 이미 호이스팅이 되어서 undefinde로 출력이 된다.
//console.log(a); // 문구가 출력
// 전역변수는 어떠한 위치에서든 다 접근이 가능하다. 아래에서 윗쪽으로 끌어올려진것으로 봄. 호이스팅
// 끌어올리는 기능 초기화에서는 발생되지 않는다. 즉 아래의 변수 수정은 적용되지 않는다.
// 변수를 선언한 상태에서만 호이스팅이 발생 , 수정한 값은 끌어올려지지는 않는다.
//함수 호이스팅
/*
func1();
function func1(){
console.log("func1는 함수다.");
}
//func1();
// 함수를 먼저 호출을 하고, 함수를 만들 수도 있다. 함수가 강제로 최상위로 끌어올려져서 함수호출된ㅁ
// 호이스팅 개념이 눈에 보이지 않는 거라 꼭 주의해야 한다.
// 호이스팅 주의점
func2();
var func2 = function(){
console.log("func2는 함수다")
} // 구조는 다르지만 실행은 정상적으로 된다. 변수자체를 함수를 만들 수 있음.
//func2();
// 이때 주의점
// 변수 호이스팅과 관련 var2부분에 선언한 상태에 이미 상위에 var func2 = undefined가 정의 된 상태
//이미 변수에 언데파인드가 들어 있는데 함수를 호출하니 함수가 아니라는 에러가 나옴
// 이러한 상태가 왜 일어나는지 알기 위해서는 변수 호이스팅을 정확히 알아야 헌더.
// 변수 호이스팅의 규칙때문에 함수 호이스티이 일어나지 않느다.
*/
//js에서 자주 사용하는 객체와 메서드 알아보자
//Math라는 객체
//console.log(Math); // 자세하게 알고 싶은 경우 구글링으로'mdn javqscript math' math객체 설명 .속성과 메서드 설명
/*
var num1 = Math.abs(-3);
//절대값 반환
console.log(num1);
var num2 = Math.ceil(0.23);
//무조건 올림처림
console.log(num2);
var num3 = Math.floor(10.9);
// 무조건 내림처리
console.log(num3);
var num4 = Math.random();
//0~1미만으로 무작위로
console.log(num4);
*/
//parseInt() : 정수로 변경, ParseFloat() : 실수로 변경
/*
var str1 = "20.6";
var str2 = "3.14"; // 문자열 숫자를 숫자열데이터로 바꾸 싶다.
var num1 = parseInt(str1);
var num2 = parseFloat(str2);
console.log(num1);
console.log(num2);
*/
