연산자
***
연산자는 우선순위가 중요 !
--> () 로 우선순위를 정해서 연산
산술 연산자
--> ++, -- 등등
- a++ 는 a = a + 1 과 같음 !
ex)
let num = 14
let num1 = ++num;--> 15 15 출력 ( 증가시킨 값을 넘겨주고 그 다음을 출력 )
ex)
let num = 14
let num1 = num++;--> 14 15 출력 ( 증가하기 전 값을 넘겨주고 그 다음에 증가 )
비교 연산자
--> >, <, >=, <=, ==, != 등등
--> 결과값은 true 나 false 로 나타남
- == : 값을 비교
- === : type 을 비교
- != : 값을 비교
- !=== : type 을 비교
ex) operator1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//산술 연산자 (++, --)
let num = 10;
num = num + 1;
num = num + 1;
console.log(num);
num++; // num = num + 1; 과 같음
console.log(num);
let num1 = num++;
console.log(num1, num);
console.log("----------------------------------")
//비교 연산자 (>, <, >=, <=, ==, !=,)
num = 10;
num1 = "10";
console.log(num == num1); // type 을 비교하는 것이 아닌 값을 비교
console.log(num === num1); // type 을 비교
console.log(num != num1);
num = 0;
num1 = false;
console.log(num == num1); // 0과 false 는 같은 의미로 사용
console.log("----------------------------------")
</script>
</head>-->
논리 연산자
--> &&, ||, ! 등
- 자바스크립트 내의
숫자에서 0 과 false 는 같고, 0을 제외한 숫자는 true - 자바스크립트 내의
문자에서 ' ' (공백) 은 false 와 같고, 공백을 제외한 문자는 true - 결과가 true 나 false 로 출력되지 X
- &&
- false 일 경우
--> 맨 처음 만난 false 피연산자를 출력 - true 일 경우
--> 비교한 값 중 마지막 피연산자를 출력
- false 일 경우
ex)
console.log(1 && 0); --> true && false 이므로, 처음에 만난 거짓 데이터는 0
console.log(0 && 1); --> flase && true 이므로, 처음에 만난 거짓 데이터는 0
console.log(1 && 2); --> true && true 이므로, 마지막 출력 값은 2
console.log(1 && 2 && 0, 7 && 4 && 5); --> 0 5 출력
- ||
- 좌객체 true
--> 좌객체 return - 좌객체 false
--> 우객체 return
- 좌객체 true
- !
- 1 : true
--> !1 : false - 0 : false
--> !0 : true
- 1 : true
혈당(치환)연산자
--> =, +=, -=, /=
ex) 03_operator2.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//논리 연산자 (&&, || , !)
let a = true;
let b = false;
// 0은 false로 취급되고 0을 제외한 나머지 숫자들은 true값으로 취급된다
// 단, true나 false 로 출력이 아닌 비교한 숫자중 뒤에있는 숫자가 출력
console.log(a&&b);
console.log(a||b);
console.log(1 && 0, 1 && 2, 2 && 1);
console.log(1 && 2 && 0, 1 && 0 && 2);
console.log(1 && 2 && 0, 7 && 4 && 5);
console.log("A" && "B"); // 거짓이 없으므로 마지막 비교값 출력
console.log("A" || "B"); // A가 true 이므로 A 리턴
console.log(" " || "B"); // 공백은 false 이니까 B리턴 아님 ??????????
console.log("A" || "B" || " "); // A가 true 이니까 A리턴
console.log(null || 1 || 0);
console.log(!0, !!0, !!!0);
console.log("----------------------------------")
// 할당(치환) 연산자 (=, +=, -=, /=, ...)
a = 10;
a = 5;
a = 7;
console.log(a);
b = 10;
b += 5; // b = b + 5
b += 7; // b = b + 7
console.log(b);
</script>
</head>
<body>
</body>
</html>-->
제어문
--> 문장을 제어할 수 있는 문장
***
ASCII
--> 2진수를 10진수로 바꿔준다
(ex) 만약 문자 c 를 입력하면 컴퓨터는 99로 입력받았다
조건문
- if
if(조건문) { 실행할 코드 }
-
if(조건문) { 실행할 코드 } else { }
-
if(조건문) { 실행할 코드 } else if(조건문){ 실행할 코드 } else if(조건문){ 실행할 코드 } else{ }
ex) 04_control_condition
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
let num = window.prompt("값을 입력:");
if(num % 2 === 0)
console.log("짝수");
else
console.log("홀수");
</script>
</head>
<body>
</body>
</html>
-->
-
switch
-
default 문은 생략 가능
-
break 적는거 까먹지 말기
-
switch (수식, 변수) { case 값: 실행할 코드; break; case 값: 실행할 코드; break; ... [ default: 실행할 코드 ]; }
-
- 조건문의 중첩
if(조건문){ 코드 ... if(조건문){ 코드 ... } }
반복문
***
기본적인 반복문의 구조
--> 초기화 + 조건문 + 카운터
- while
-
아주간단
-
조건이 항상 참일 경우로 생각
-
while(조건){ 실행할 코드; }
-
- do-while
- while 문이랑 똑같은데 좀 더 안전
do { 실행할 코드; }while
-
for
-
for(초기화; 조건식; 카운터){ 실행할 코드; }
-
배열 데이터일때
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
const fruits = ["Apple", "Banana", "Cherry"];
for(i=0; i<fruits.length; i++){ // i<3을 i<fruits.length 로 표현
console.log(fruits[i]);
}
</script>
</head>
<body>
</body>
</html>
위의 for문을 좀 더 간단하게
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
for(const item of fruits)
console.log(item);
</script>
</head>
<body>
</body>
</html>
객체 데이터일때 --> index 가 없으므로 반복문 사용 불가능
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
const user = {
name:"홍길동",
age: 20,
isValid: true,
email: 'hong@mail.net'
}
let u; // user에서 불러온 데이터를 받아줄 변수 u (변수는 임의지정)
for(const u in user){
console.log(u); // 키값을 불러온다
console.log(user[u]); // 키에 해당하는 값을 불러온다
}
</script>
</head>
<body>
</body>
</html>
반복문의 강제 중지
- break : 완전 종료
- continue : 일시 종료
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
for(let i=0; i<10; i++){
if(i==5){
break;
}
console.log(i);
}
for(let i=0; i<10; i++){
if(i==5){
continue;
}
console.log(i);
}
</script>
</head>
<body>
</body>
</html>반복문의 중첩
- 조건문은 중첩이 필수가 X, 반복문은 중첩이 필수 O
- 행의 반복과 열의 반복으로 이루어짐 (2차원테이블)
- 바깥의 반복문은 행, 안쪽의 반복문은 열
for () { for(){ 실행할코드 } 실행할코드 }
ex) 다음과 같이 표현하는 코드를 찾아라
**********
**********
********** <!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
for(let i=0; i<3; i++){
for(let j=0; j<10; j++){
document.write("*");
}
document.write("<br>");
}
</script>
</head>
<body>
</body>
</html>ex) 다음과 같이 표현하는 코드를 찾아라
*
**
***
****
*****
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
for(let i=0; i<5; i++){
for(let j=0; j<i+1; j++){
document.write("*");
}
document.write("<br>");
}
</script>
</head>
<body>
</body>
</html>
ex) 다음과 같이 표현하는 코드를 찾아라
***
*****
*******
*********
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
</script>
</head>
<body>
</body>
</html>
