2023.02.06 8일차 JavaScript
JavaScript
html은 문서구조 css는 문서꾸밀때 자바스크립트는 문서 변경할때쓴다.
script태그안에 작성이 된다. statement들로 이루어져잇다. 명령문 ; 으로 끝나고 이걸 잘 조합해야한다.
명령문은 순서대로 실행된다. 값 변수 연산자 식 키워드 등등으로 이루어져잇다
JavaScript Operators 연산자에 대해서 알아보고자 한다.
18. Arithmetic Operators 산술 연산자 -1
산술연산자
+ , * , - , / , %, ** 가 있다. (binary)
18.1 사칙연산
let a = 33;
let b = 55;
let c = a + b;
console.log(c); //88
let d = 3 + 5 ;
console.log(d); // 8
let e = 3 + b;
console.log(e); // 58
console.log(3 + 5); //8
let f = 99-77;
console.log(f); //22
let g = 3 * 5;
console.log(15);
let h = 5 / 3;
console.log(h); //1.6667
let i = 5 * 2 + 3;
console.log(i); //13
let j = 3 + 5 * 2;
console.log(j); //13 30(x)
일반 사칙연산 규칙 모두 적용된다.
18.2 % : remainder(modulo, modulus) 나머지연산 모듈로 연산
let k = 5 / 3; //1.66667
console.log(k);
let l = 5 % 3; //5를3으로 나눈 후의 나머지
console.log(l); // 2
let m = 33 % 2;
console.log(m); //1
18.3 ** : exponencial 지수 몇제곱 몇승
let o = 2 ** 3;
console.log(o); //8
let p = 3 ** 2;
console.log(p); //9
브라우저 버전마다 안될 수도 있다.
19. arithmetic-operators 산술 연산자 - 2
피연산자의 타입에 따라 다른 결과가 나올 수 있다.
let a = 3;
let b = 5;
let c = a * b; //15
let d = "3";
let e = "5";
let f = d * e;
console.log(f); //15
let g = d / e;
console.log(g); //0.6
let h = d - e;
console.log(h); //-2
let i = d + e;
console.log(i); //35 스트링으로 봄 35도 아닌 문자열3 , 5임
+ 의 피연산자 중 하나가 문자열 (String)이면 연결연산자가 된다.
let j = "3" + "5"; // "35"
let k = "3" + 5; // "35"
let l = 3 + "5" // "35"
let m = 3 + 5 ; // 8
+연산자끼리는 우선순위가같으니 왼쪽부터
let n = 3 + 5 + "2"; // 8 + "2" "82"
let o = "3" + 5 + 2; //"35" + 2 "352"
피연산자의 태그에 따라 값이 달라지니 주의하자.
여러 연산자와 피연산자가 복잡하게 연결되는 경우도 있다. 이럴때 구분을 잘해야한다.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
어떤게 먼저 연산되어야 하는지 규칙을 잘 알아두자.
연산자가 매우 많으면 우선순위가 가장 높은 ()써서 우선순위를 잘 구별해주자.
괄호()를 사용해서 연산식을 잘 읽을 수 있도록 하자. 괄호()가 우선순위가 가장 높다.
let p = 3 + (5 * 2); 단순한 코드지만 괄호를 사용해서 코드를 쉽게 읽을 수 있도록!!
이외에도 먼저 연산해야하는 것을 괄호로 묶기
let r = ( 3 + 5 ) * 2; console.log(r); // 16
20. arithmetic-operators 산술 연산자 - 3
피연산자가 하나인 산술연산자 (unary)
+ , -, ++, --
let a = 3;
let b = +a; // a의 부호를 바꾸지 않은 결과
console.log(b); // 3 쓸모없어보이는데 쓸데가 잇음
let c = -a;//a의 부호를 바꾼 값이 결과
console.log(c); // -3
let d = "3";
let e = 3 + d;
console.log(e); //"33"
let f = 3 + (+d) //string을 number로 바꿔주는 연산
console.log(f); // 6
21. 단항연산자
++ , --
단항연상자(unarys)
21.1 ++ : 증가연산자(increment)
++ : 변수가 가진 값 +1이 해당 변수에 다시 할당
let a = 3;
a++; //a는 4가 됨
피연산자의 위치에 따라 연산 결과가 다르다.
let b = 3;
let c = b++;
console.log("b", b); //4
console.log("c", c); //3
let d = 3;
let e = ++d;
console.log("d", d); //4
console.log("e", e); //4
21.2 -- : 감소연산자(decrement)
피연산자 변수가 가진값 -1을 해당 변수에 다시 할당
연산결과는 피연산자의 위치에 따라 다름
let f = 5;
f--;
console.log(f); // 4
--f;
console.log(f); // 3
let g = f--;
console.log("g", g);//3
//-> 2
let h = --f;
console.log("h", j);//1
22. Assignment Operators 할당연산자 대입연산자
= +=. -=. *=, /=, %=
22.1 = : 오른쪽 값을 왼쪽에 대입(할당)
let a = 3;
let b = "hello";
let c = a;
let d = b;
let e = a + 5;
let f = b + ", world";
할당연산자는 우선순위가 낮다. 거의 제일 마지막에 연산한다.
22.2 += : 두 항의 값을 더해서 왼쪽 변수에 할당
let h = 7;
h = h + 1; //8
let i = 7;
i += 1; // i = i + 1;
console.log(i); //8
+= i;
console.log(i); //16
23.3 -=, *= , /=, %=
let j = 10;
j -= 3;
console.log("j", j); // 7
j *= 5;
console.log("j", j); // 35
j /= 7;
console.log("j", j); // 5
j %= 2;
console.log("j", j); // 1
+= : 문자열과 같이 사용하면 연결 연산 후 값 할당
let k = 5;
k += "cake";
console.log(k); // "5cake"
let l = "5";
l += 3;
console.log(l); //"53"
23.operator
실습문제
<input type="text" id="input1">
<input type="text" id="input2">
<button onclick="multiply()">X</button>
<button onclick="substract()">-</button>
<button onclick="divide()">/</button>
<button onclick="sum()">+</button>
<p id="result"></p><script>
function sum(){
let input1 = document.querySelector("#input1");
let input2= document.querySelector("#input2");
let result= document.querySelector("#result");
let num1 = parseInt(input1.value);
let num2 = parseInt(input2.value);
//let num1 = +input1.value;
//let num2 = +input2.value;
result.textContent = num1 + num2;
}
function divide(){
let input1 = document.querySelector("#input1");
let input2= document.querySelector("#input2");
let result= document.querySelector("#result");
let num1 = input1.value;
let num2 = input2.value;
result.textContent = num1 / num2;
}
function substract(){
let input1 = document.querySelector("#input1");
let input2= document.querySelector("#input2");
let result= document.querySelector("#result");
let num1 = input1.value;
let num2 = input2.value;
result.textContent = num1 - num2;
}
function multiply(){
let num1 = document.querySelector("#input1").value;
let num2= document.querySelector("#input2").value;
let result= document.querySelector("#result");
console.log(num1);
console.log(num2);
result.textContent = num1 * num2;
}
</script>24. Comparison Operators 비교연산자 -1
boolean과 관련됨 true / false값으로 결과가 나옴
비교 연산자
연산결과 : 두 항을 비교한결과(boolean)
==, ===, !=, !==, <, <=, >. >=
24.1 == : 값이 같은가?
결과 : 값이 같으면 true 값이 다르면 false
let a = 3;
let b = 5;
console.log(a == b); //false
console.log(a == 3); //true
let e = "java";
let f = "javascript";
console.log(e == f); //false
console.log(e == "java"); //true
console.log(e == 'java'); //true
console.log(e == java); //true
let g = 33;
let h = "33";
console.log(g == h); // 값만 비교라서 true
24.2 === : 값과 타입이 같으면 true 그렇지 않으면 false
console.log(g === h); //false (값과 타입 비교)
24.3 != : 값이 같지않으면 true 그렇지 않으면 false
let i = 3;
let j = 5;
console.log(i != j); // true
console.log(i != "3"); //false
24.4 !== : 값이 같지않거나 타입이 같지 않으면 true
console.log(i !== j); // true
console.log(i !== "3"); // true
console.log(i !== 3); // false
24.5 < : 왼쪽항이 작으면 true
let k = 5;
console.log(k < 6); //true
console.log(k < 5); //false
console.log(k < 4); //false
24.6 <= : 왼쪽항이 작거나 같으면 true
console.log(k <= 6); //true
console.log(k <= 5); //true
console.log(k <= 4); //false
24.7 > : 왼쪽 항이 크면 true
console.log(k > 6); //false
console.log(k > 5); //false
console.log(k > 4); //true
24.8 >= : 왼쪽 항이 크거나 같으면 true
console.log(k >= 6); //false
console.log(k >= 5); //true
console.log(k >= 4); //true
25. Comparison Operators 비교연산자-2
비교 연산자의 피연산자가 string(문자열)
문자의 코드로 비교(사전순과 유사)
let a = "java";
let b = "js";
console.log(a === b ); //false
console.log(a !== b ); //true
console.log(a === "java"); //true
console.log(a === "JAVA"); //false
let c = 'c';
let d = 'd';
console.log(c < d); //true
console.log(d < c); //false
console.log(c < "can"); //true
console.log(c < "C"); //false
비교기준이 무엇인가? unicode로 비교한다.
26. Comparison Operators 비교연산자 -3
prompt("나이를 입력하세요"); 확인창이뜬다.
let age = prompt("나이를 입력하세요.", 10);
age = +age; // number로 변환
console.log(age);
if (age >= 20) {
console.log("어른입니다.");
}
console.log("마지막 명령문");비교연산자는 if문과 자주 사용된다.
27. if - 1
작성된 코드는 statement들로 이루어져있고 특별한 일이 없으면 순서대로 실행된다.
문서 전체가 새로고침이 될때마다 실행된다.
if (true) {
//code block
console.log("실행되거나 안되는 명령문들");
}
코드블럭안에 넣고 if를 붙이면 ()안에 boolean값에 따라 실행되거나 안된다.
28. if - 2
promt로 나이를 입력받고 나이가 20이상이면 어른이라고 출력되게 만들었다.
let age = prompt("나이를 입력해주세요", 0);
age = +age; //number로 변환
if (age>=20){
console.log("어른입니다.");
}29. if-else - 1
console.log(1);
console.log(2);
if (false){
//if의 조건이 true일때
console.log("true일때 실행");
} else {
//if의 조건이 false일때
console.log("false일때 실행");
}
console.log(3);
if가 false일때는 다른 메시지를 출력하도록 만들었다.
false일때는 else블록이 실행이 된다.
30. if-else - 2
예제 연습
let age = prompt("나이를 입력해주세요", 0);
age = Number(age); //number로 변환
if (age >= 20){
console.log("어른입니다.");
} else {
console.log("어른이 아닙니다..");
}동시에실행되는 일이 없이 조건에 따라 실행되게된다.
31. if-else - 3
!!!확인문제!!!
수를 입력하세요
콘솔에 홀수 홀수입니다 짝수면 짝수입니다라고 나오게 해보자.
let num = parseInt(prompt("수를 입력하세요" , 0)) ;
if (num % 2 == 0){
console.log("짝수입니다.");
} else{
console.log("홀수입니다.");
}입력받은 숫자를 2로나누어서 나머지가 0이면 짝수 아니라면 홀수로 출력되게 만들었다.
prompt에서 입력받는 값은 문자열이니 항상 숫자로 변환해주는 것을 주의하자!!
32. else if -1
else if : 이전 조건이 false일 경우 다른 조건 확인
if (false) {
console.log(1);
} else if (true) {
console.log(2);
}
console.log(3);
console.log(4);
console.log(5);
else if는 이전 조건이 false일 경우에만 확인한다.
33. else if - 2
let age = parseInt(prompt("나이를 입력해주세요", 0 ));
if (age >= 20){
console.log("성인입니다.");
} else if (age >= 15) {
console.log("청소년입니다.");
} else if (age >= 6) {
console.log("어린이입니다.");
} else {
//else는 마지막에 한번 또는 0번 작성한다.
console.log("유아입니다.");
}else if는 계속해서 작성할 수 있고 else문은 마지막에 한번 혹은 생략을 해주면된다.
항상 if로 시작하고 else if는 0번이상 else는 나올수도 안나올수도 있다.
34. 간단한게임만들기
숫자맞추기 게임
이모티콘 윈도우 + .키
숫자 랜덤으로 선택하기 임의의 수
Math.random()
0 <= Math.random() < 1 수를 임의로 리턴함.
parseInt하면 실수를 넣으면 소수점이 없는 수로 바꿔줌. 이걸 사용해보자.
let a = Math.random(); //0.0<= a <1.0
console.log(a);
a *= 100;
console.log(a); //0.0 <= a <100.0
a = parseInt(a);
console.log(a);//0<= a <100 -> 0<= a <=99
a += 1;
console.log(a);//0<= a <100 -> 0<= a <=100
이런식의 흐름을 가지게 된다.
<input type="text" >
<button onclick="guess()">입력</button>
<p id="result"></p>
<p style="display: none;" id="test"></p>
<button type="button" onclick="see()">정답미리보기</button><script>
//컴퓨터가 1~100사이의 수 선택
///let num = Math.floor(Math.random() * 101);
let num = parseInt((Math.random() * 100) + 1);
test.textContent = num;
function guess(){
let input = document.querySelector("input");
let result = document.querySelector("#result");
let user = parseInt(input.value);
let message = "";
if (user < num){
message = "더 큰 수를 입력해보세요.";
} else if (user > num){
message = "더 작은 수를 입력해보세요.";
} else {
message = "👍정답입니다!!!";
}
result.textContent = message;
}
function see() {
let test = document.querySelector("#test");
test.style.display = "";
}
</script>테스트를 위해정답 미리보기 버튼을 추가하였다.
36. JavaScript Logical Operators 논리연산자
&&, ||, |
36.1 && (and 논리곱) : 두개의 항이 모두 true이면 결과가 true, 나머지는 fasle
피연산자의 type는 대부분 boolean
console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false
36.2 || (or 논리합) : 두개의 항의 모두 false 이면 결과가 false 나머지는 true
피연산자의 type는 대부분 boolean
console.log(true || true); // true
console.log(true || false); // false
console.log(false || true); // false
console.log(false || false); // false
36.3 ! (not) : 피연산자가 하나(boolean) 결과는 피연산자의 반대
console.log(!true); // false
console.log(!false); // true
&&(논리곱)가 먼저 연산되고 ||(논리합)가 두번째이다. 외우지말고 구분하기 위해 가능하면 괄호를 그냥 쓰자.
연습문제
let x = 6;
let y = 3;
console.log((x < 10) && (y > 1)); // true
console.log((x === 5) || (y === 5)); // false
console.log(!(x === y)); // true
37.가위바위보 게임을 만들어보자.
<button onclick="rps(0)">가위</button>
<button onclick="rps(1)">바위</button>
<button onclick="rps(2)">보</button>
<p id="com"></p>
<p id="result"></p><script>
//가위 : 0 바위:1 보:2
function rps(p) {
let com = parseInt(Math.random() *3); //0 , 1 , 2
let result = document.querySelector("#result");
let user = p;
let comrps = document.querySelector("#com");
console.log(com);
console.log(user);
if (com === 0){
comrps.textContent = "가위";
} else if (com === 1){
comrps.textContent = "바위";
} else {
comrps.textContent = "보";
}
if (user === com ){
message = "비겼습니다.";
} else if(user === 0 && com === 1 ) {
message = "졌습니다.";
} else if(user === 1 && com === 2) {
message = "졌습니다.";
} else if(user === 2 && com === 0) {
message = "졌습니다.";
} else {
message = "이겼습니다.";
}
result.textContent = message;
}
</script>함수를 실행할때 p값을 같이 받는다. 가위 : 0 주먹 : 1 보 :2를받고
전달받은 p값을 유저 값으로 저장하고 랜덤함수로 뽑은 컴퓨터와 비교해서 결과를 알려준다.
38. falsy-truthy
falsy (거짓같은 값, false로 취급되는 값)
truthy (참 같은 값, true로 취급되는 값)
Falsy 가짜는 아닌데 가짜같은값 거짓같은값이다.
0 , ""(빈 string), null, undefined, NaN가 있다.
truthy는 falsy값 외의 모든 값이다.
let a = 0;
if (a){
console.log("a는 참");
} else {
console.log("a는 거짓");
}
a가 0이라 false취급받아서 거짓으로 나온다.
let b = 1;
if (b){
console.log("b는 참");
} else {
console.log("b는 거짓");
}
-> true
let c = "";
if (c){
console.log("c는 참");
} else {
console.log("c는 거짓");
}
-> false
2023.02.06 후기
모를 때 https://stackoverflow.com/ 개발자들의 지식인 같은 곳임. 검색하면 이 사이트를 많이 보게 될 것임.
답변을 언제 했는지 중요함. 프레임워크나 버전이 계속 달리지기 때문임. 코드가 언제 기준인지 잘 살펴서 적용해야함.
추천수가 많은 답변이 가장위에잇음. 지식인이랑 비슷함. 카페블로그 같은거보다 공식 문서아니면 이런데를 보자.
갑자기오는 현탐. 매번주기적으로 찾아오는 현탐이 온듯 하다. 맞게하고있는지 모르겟다.!!
원리를 배워서 공부하는 것이 나와 잘맞는데 그 원리를 완벽하게 이해를 하지 못하니 응용을 못하는 거같다. 복습을 통해서 보는게 중요하다.
다 한번씩 말그대로 찍먹만 하고 와서 그런지 햇던거도 기억이 안나는 것 같다. 이래서 나중에 프로젝트나 취업을 할 수 잇을지 진짜 모르겟다.
뭐든 궁금한날이 있고 아무것도 궁금하지않고 들어오지 않는날이 있다. 이런날들이 주기적으로 돌아가면서 우울감을 불러일으킨다.
이런날들을 잘 극복해야 어려움이 줄어들 것 같은데 어렵다. 학원을 다니면 이런것들이 좀 줄어들까 햇는데 독학이나 학원이나 그런 건 같은 거 같다.
그래도 하나씩 매일 할일을 하다보면 발전이 있을 것이고 그러기를 바란다.