자바스크립트 기초 강좌 ①

https://codepen.io 

CodePen

---

변수 

name = "Mike"; 

문자는 항상 따옴표로 감싸준다.

age = 30;

---

alert 

경고창을 띄운다.

console.log()

로그를 띄우는 함수

---

자바스크립트에서 변수를 선언할 때는, 변하지 않는 값은 const, 변할 수 있는 값은 let으로 선언하세요.

let name = "Mike";

let 생략가능하다. 최초 선언시, let 선언하면 다른개발자가 이걸 사용하고 있구나 하고 에러를 통해 알수있다.

const 

절대로 바뀌지 않는 상수 ,대문자로 적는게 좋다

const PI = 3.14;

const SPEED_LIMIT = 50;

const BIRTH_DAY = '2020-01-01';

---

1. 변수는 문자와 숫자, $와 _ 만 사용

2. 첫글자는 숫자가 될수없다.

3. 예약어는 사용할수 없다.

4. 가급적 상수는 대문자로 알려주세요

5. 변수명은 읽기 쉽고 이해할 수 있게 선언

---

\' 은 '을 특수문자로 인식한다.

---

const name1 = "Mike"

` 은 베틱이라 한다. 베틱은 문자의 내용을 변수로 표현해줄 때 사용하기 편리하다.

const message3 = `My name is ${name}`;

console.log(message3)

이라하면 "My name is Mike" 라 표현된다.

const message4 = `My age is ${30+1}`;

console.log(message4) 

이라하면 "My age is 31" 라 표현된다.

---

const age = 30;

const PI = 3.14;

console.log(1+2); // 더하기 3이라 출력된다.

console.log(10 - 3); // 빼기 , 7이라 출력된다.

console.log(3*2); // 곱하기 , 6이 출력된다.

console.log(6/3); // 나누기 , 2 출력

console.log(6%4); // 나머지, 2 출력

---

const x = 1/0; 

console.log(x); // infinity 무한대 출력

const name = "Mike";

const y = name/2;

console.log(y) //Nan = Not a numeber 숫자가 아니다

---

//Boolean

const a = true; // 참

const b = false; // 거짓

const name = "Mike";

const age = 30;

console.log(name=='Mike') // true 출력

console.log(age>40) // false 출력

---

// null 값이 존재 하지 않는다.

// undefined 값이 할당되지 않았다.

let age;

console.log(age); //undefined 출력된다.

let user = null;

//객체형

//심볼형

---

//typeof 연산자는 변수의 자료형을 알아낼 수 있다.

const name = "Mike";

console.log(typeof 3); // numeber 출력

console.log(typeof name); //string 출력

console.log(typeof ture);  //boolean 출력

console.log(typeof "xxx");  //string 출력

console.log(typeof null); //object 출력 , null은 객체가 아니다. 초기 자바스크립트 오류 , 호환성을 위해 유지

console.log(typeof undefined); //undefined 출력

---

팁> ""은 문자열 그대로 출력된다. `는 베틱, 변수사용할때 

const name = "Mike";

const messsage = `My name is ${name}`;

console.log(message) // "My name is Mike"  출력된다.

const message2 = "My name is ${name}";

console.log(message2) // "My name is ${name}" 출력된다.

---

문자열도 더하기 사용 가능하다. 문자열과 숫자형를 더하면 문자열이 된다.

const name = "Mike" ;

const a = "나는 " ;

const b = " 입니다. ";

console.log(a+ name + b); // "나는 Mike 입니다." 

const age = 30; //number

console.log(a + age + "살" + b) // "나는 30살 입니다."

---

대화상자

alert 알려줌, prompt 뭔가를 입력받음, confirm 확인받음

const name = prompt("이름을 입력하세요.");

alert(`안녕하세요, ${name}님, 환영합니다.`); // alert 창으로 안녕하세요 ~님 환영합니다 라고 뜬다.

팁> prompt는 두개의 인수를 받을수 있다.

const name = prompt("예약일을 입력해주세요.", "2020-10-"); // 예약일을 입력해주세요는 메시지고, 2020-10- 는 입력받을 디폴트 값이다.

confrim은 alert와 다른점은 확인과 취소버튼이 함께 있다.

const isAdult = confirm("당신은 성인 입니까?");

console.log(isAdult) // 확인을 누르면 true, 취소를 누르면 false가 뜬다.

---

alert는 메시지를 보여주고 확인버튼 누르면 닫힌다.

prompt는 사용자에게 메시지를 보여주고, 어떤 값을 입력받을 수 있는 필드를 제공한다. 취소를 누르면 null을 반환 

두번째 인수를 넣어주면 default 값을 넣어줄수 있다.

confirm은 사용자에게 확인을 받는 용도로 사용한다. 확인을 누르면 true, 취소를 누르면 false가 반환된다.

대화상자의 단점

1. 스크립트 일시 정지

2. 스타일링 x

---

String() 

문자형으로 변환

Number() 

숫자형으로 변환

Boolean() 

불린형으로 변환

---

ex> 형변환은 왜 필요한가?

const mathScore = prompt("수학 몇점?"); //수학은 90점을 입력한다.

const engScore = prompt("영어 몇점?"); // 영어는 80점을 입력한다.

const result = (mathScore + engScore) / 2 ;

console.log(result) // 결과는 4540 .. 왜?? 문자열 "90" 과 문자열 "80"을 더하면 "9080"인데 2를 나누면 자동형변환이 되어 숫자형 4540이 된다.

promt 입력받은 값은 무조건 문자형이다.

"6" / "2" = 3 자동형변환

---

명시적 형변환하는 방법

String()

console.log(

String(3),

String(true),

String(false),

String(null),

String(undefined)

) // "3" "true" "false" "null" "undefined" 출력된다.

---

Number() 

괄호안 타입을 숫자로 바꿔준다. 보통 사용자로 입력받은 값이 문자형일 때, 자주 사용된다.

console.log(

Number("1234"), // 숫자 1234 출력

Number("1234sadfadf"), // NaN

Number(true),  // 1출력

Number(false) // 0 출력

)

---

Boolean() 

Boolean으로 바꿔준다.

console.log(

Boolean(0), //false 출력

Boolean(""), //false 출력

Boolean(null), //false 출력

Boolean(undefined), //false 출력

Boolean(NaN) //false 출력

)

나머지는 true를 출력한다.

---

String() 

문자형으로 변환

Number()

숫자형으로 변환 , Number("문자") // NaN

Boolean()

불린형으로 변환, 0, ", null, undefined, NaN 은 false

---

주의사항

Number(null) // 0

Number(undefined) //NaN

Number(0) //false

Number('0') //true

Number('') //false

Number(' ') //true

---

거듭제곱

const num = 2**3;

console.log(num); //8

---

let num = 10;

//num = num + 5;

num += 5;

num -= 5;

num *= 5;

num %= 5;

console.log(num);

---

//증가연산자, 감소연산자

let num = 10;

let result = num ++; //10 출력

let result = ++num; //11 출력

console.log(num) 

---

비교 연산자

console.log(10>5) ; // true 출력

console.log(10 == 5) ;  //false 출력

console.log(10 != 5) ; //true 출력

---

const a = 1;

const b = "1" ;

console.log(a == b ) ; //동등연산자 , true 출력

console.log(a === b) ; //일치연산자, false 출력 , 일치연산자를 쓰는게 좋다.

---

조건문

// if, else, else if

const age = 30;

if(age>19){

console.log('환영 합니다.');

}

if(age <= 19){

console.log('안녕히 가세요.');

}

console.log('-------------------------------')

---

const age = 30;

if(age>19){

console.log('환영 합니다.');

} else{

console.log('안녕히 가세요.');

}

console.log('-------------------------------')

---

// 추가요구사향 :

// 19살이면 수능 잘치세요 라는 문구를 보여주세요

// age === 19

const age = 30;

if(age>19){

console.log('환영 합니다.');

} else if(age===19){

console.log('수능 잘치세요.');

} else{

console.log('안녕히 가세요.');

}

console.log('-------------------------------')

---

논리연산자 

|| (OR)

여러개 중 하나라도 ture 면 true, 즉 모든 값이 false 일때만 false 를 반환

&& (AND) 

모든 값이 ture 면 true, 즉 하나라도 false 면 false를 반환

! (NOT)

ture 면 false, false면 true

---

//or

//이름이 TOM 이거나, 성인이면 통과

const name = "Mike" ;

const age = 30;

if(name==='TOM' || age > 19){

console.log('통과');

} else{

console.log('돌아가')

}

---

//AND

//이름이 Mike 이거나, 성인이면 통과

const name = "Tom" ;

const age = 30;

if(name===''Mike'  &&  age > 19){

console.log('통과');

} else{

console.log('돌아가')

}

---

//NOT

//나이를 입력받아 성인 아니면 돌아가라고..

const age  = pormpt('나이가..?);

const isAdult = age > 19;

if(!isAdult){

console.log('돌아가..')

}

---

//우선순위 , && 가 || 보다 높아서 먼저 실행된다.

// 남자이고, 이름이 Mike 이거나 성인이면 통과

const gender = 'M' ;

const name = 'Jane' ;

const isAdult = true;

//if(gender === 'M' && name === 'Mike' || isAdult){

if(gender === 'M' && (name === 'Mike' || isAdult)){

console.log('통과')

} else{

console.log('돌아가')

} 

통과 출력

---

반복문 loop

for( let i = 0; i <10; i++ ){

//반복할 코드

}

---

for문

for( let i = 0; i <10; i++ ){

console.log(i+1)

} // 1부터 10까지 찍힌다.

---

while문

let i = 0;

while ( i<10) {

//코드

i++;

}

---

let i = 0;

while ( i<10) {

console.log(i);

i++;

}

---

do.. while문

let i = 0;

do{

//코드, 적어도 한번은 실행 , 코드를 실행하고 조건을 본다.

i++;

} while(i<10)

---

break

멈추고 빠져나옴

continue

멈추고 다음반복으로 진행

---

while(ture){ //무한반복된다. break 만날때까지

let answer = confirm('계속 할까요?'); // 확인을 누르면 true가 되어 계속 반복, 취소를 누르면 false가 되어 빠져나감

if(!answer){

break;

}

}

---

//continue

//짝수만

for(let i = 0; i < 10; i ++){

if(i%2){

continue;

}

console.log(i)

}

// 0 2 4 6 8 출력된다.

 

---

명확한 횟수가 정해져 있으면 for문, 횟수가 없으면 while 사용한다.

---

switch문

switch(평가) {

case A : 

//A일때 코드

case B :

//B일때 코드

...

} 

는 아래 if문과 같다.

if(평가 == A){

//A일때 코드

} else if(평가 == B){

//B일때 코드

}

---

//사과 : 100원

//바나나 : 200 원

// 키위 : 300원

// 멜론 : 500원

// 수박 : 500원

// 사고 싶은 과일을 물어보고 가격 알려주기

const fruit = prompt('무슨 과일을 사고 싶나요?');

switch(fruit){

case '사과' :

console.log('100원 입니다.');

break;

case '바나나' :

console.log('200원 입니다.');

break;

case '키위' :

console.log('300원 입니다.');

break;

case '멜론' :  // 멜론과 가격이 같을 때는 요렇게 써준다. 

case '수박' :

console.log('500원 입니다.');

break;

default :

console.log('그런 과일은 없습니다.');

}

---