$$config title: 자바스크립트 & 제이쿼리 keywords: - IT - 자바스크립트 $$
## [웹3 자바스크립트 수업 강의](https://slog.gg/p/11213)

# [자바스크립트 1~6강](https://codepen.io/ddpp12/pen/jOKBWqB?editors=0011) - 문장과 숫자는 더할 수 있다. (정수형과 실수형) ``` console.log(10); // 정수형 console.log(3.14); // 실수형 //사칭현상 : 문장과 숫자를 더할 수 있다. console.log("안" + "녕"); console.log("안" + 10 + 20); console.log("안"+ 10 * 20); ``` # [자바스크립트 7강](https://codepen.io/ddpp12/pen/LYrWGjv?editors=0011) - ( = ) 좌측에 있는 것은 무조건 변수, 우측은 숫자 ``` let x; x = 10; // ★[=] 기준으로 좌측에 있는 것만 변수로 측정★ 무조건 [= 좌측에 있는 값은 변수] console.log(x); console.log("x : " + x); // 10 x = x + 1 console.log("x : " + x); // 11 아래와 동일하게 쓸 수 있다. let x = undefined; 현재 let x에는 undefined(정의되지 않은)가 들어 있다. let x = 10 이라고도 쓸 수 있다. 비어있는 x 라는 변수를 선언한 상태에서 그 다음 우리가 x의 값을 할당한 것이다. 이 때문에 let x 에 undefined인 것. 프로그램은 위에서 아래로 순차적으로 코드 실행된다. [값이 정의되어 있지 않다 라는 뜻] console.log(x); x = 10; [=] 기준으로 좌측에 있는 것만 변수로 측정 let x = 10 은 x를 선언한 동시에 10이라는 값을 넣었다. console.log(x); console.log("x : " + x); // 10 x = x + 1 console.log("x : " + x); // 11 ``` # [자바스크립트 8강](https://codepen.io/ddpp12/pen/poKegpp?editors=0011) - 변수는 재활용이 가능하며, 오직 1개만 저장할 수 있다. ``` let a = 10; let b = 5; //변수는 재활용이 가능하다. a = 5; // let a = 5 는 틀림 / 변수는 오직 1개만 저장 가능하다. b = 10; console.log("a : " + a); console.log("b : " + b); ``` # [자바스크립트 9강](https://codepen.io/ddpp12/pen/WNyprKZ?editors=0011) - 변수 a와 b의 값을 서로 교체, temp 변수 ``` 문제 : 변수 a와 b의 값을 서로 교체해 주세요. 조건 : 숫자를 사용할 수 없습니다. 조건 : 4칙연산을 사용할 수 없습니다. console.clear(); let a = 10; let b = 5; 수정가능지역 시작 let c = 10; a = b; b = c; 수정가능지역 끝 console.log("a + " + a); 출력 => a : 5 console.log("b + " + b); 출력 => b : 10 ``` # [자바스크립트 10강](https://codepen.io/ddpp12/pen/poKrByz?editors=1111) - css가 아닌 제이쿼리로 디자인하기 ``` $('div') = 내가 div를 검색한다. 라는 의미 [방법1] let divWidth = '200px'; let divHeight = '200px'; let divBackgroundColor = 'gold'; $('div').css('width', divWidth); $('div').css('height', divHeight); $('div').css('background-color', divBackgroundColor); [방법2] $('div').css('width', '200px'); $('div').css('height', '200px'); $('div').css('background-color', 'red'); ``` # [자바스크립트 11강](https://codepen.io/ddpp12/pen/GRGywQJ?editors=0011) - 산술연산자, 비교연산자, 논리연산자 ``` - 산술연산자 : +, -, *, /, %(나눈 몫) - 비교연산자 : >=, >, <, <=, ==, !=, ===(같다/데이터타입까지 고려), ==!(다르다/데이터타입까지 고려) - 논리연산자 : &&(and), ||(or) && : 양쪽의 비교한 결과 값이 둘 다 true면 true이다. 반대로 양쪽의 비교한 결과 값 중 하나라도 false면 false이다. || : 양쪽의 비교한 결과 값이 둘 다 false면 false이다. 반대로 양쪽의 비교한 결과 값 중 하나라도 true면 true이다. [% 예시] console.log(10 % 1); => 0 console.log(10 % 2); => 0 console.log(10 % 3); => 1 console.log(10 % 4); => 2 console.log(10 % 7); => 3 [=== 예시] console.log('5' == 5); -> true console.log('5' === 5); -> false ``` # [자바스크립트 12강](https://codepen.io/ddpp12/pen/XWYVyqB?editors=0011) - 조건부, if, else if, else 1부 - [프로그래머스 자바스크립트 입문 문제 정답](https://codepen.io/jangka44/live/ExWwyKK)
*복습* ``` ○ 변수 - 변수는 선언되어야 사용 가능하다. let x; console.log(x); x = 10; - 변수는 공간이다. - 변수에는 값을 오직 1개 밖에 저장하지 못한다. - 변수는 재활용이 가능하다. let x = 10; x = 20; (기존 10은 날아가고 x는 20이 된다. 1et x자리에 '-', '숫자'는 넣을 수 없다.) 문장형 : 안녕(" ", ' ' 둘 다 상관없지만 웬만하면 문장에 " " 을 쓰는 것이 보기 편하다.) 숫자형 : 1, 2, 3 논리형 : true, false ○ 연산자 - 사직연산자 : +, -, *, /, % - 비교연산자 : >=, >, <, <=, ==,!=, === console.log("1" == 1) -> 문장 1과 숫자 1은 같다고 할 수 없기 때문에 ("1" === 1)이라 작성해야 한다. - 논리연산자 : && (둘 다 true여야 true/하나라도 false일 경우 fales), || (둘 다 false여야 false/하나라도 true일 경우 true) 결과값은 무조건 true or false ``` **오늘 수업 내용** ``` ○ 제어문(조건문, 반복문) let age = 20; if(조건식) { } 조건식은 '참'일 때에만 실행이 된다. 컴퓨터는 1~2 중 1번에서 이미 정답이 나왔음에도 굳이 2번까지 풀어본다. 우리가 얘기해 주지 않으면 다 실행하는 특정을 가지고 있다. 이를 단축하기 위해 [1문제]이 아닌 [2문제]과 같이 조건문을 작성하면 된다. [1문제] let age = 20; if(age >= 20) { console.log("성인입니다."); } else if(age < 20) { console.log("미성년입니다."); } [문제2] let age = 20; if(age >= 20) { console.log("성인입니다."); } else { console.log("미성년입니다."); } ``` # [자바스크립트 12강](https://codepen.io/ddpp12/pen/jOKYQaw?editors=0011) - 조건부, if, else if, else 2부 - 코드는 짧고 간결하고 알아보기 쉽게 적는 것이 중요하다. ``` [바효율적인 코드 예시] if(ageGrade == -1) { console.log("50대 이상입니다.") } else { if(ageGrade == 0) { console.log("10세 미만입니다.") } else { console.log(ageGrade + "대 입니다.") } } [올바른 코드 예시] if(ageGrade == -1) { console.log("50대 이상입니다.") } if(ageGrade == 0) { console.log("10세 미만입니다.") } else { console.log(ageGrade + "대 입니다.") } ↓↓↓↓↓↓↓↓↓ if(ageGrade == -1) { console.log("50대 이상입니다.") } else if(ageGrade == 0) { console.log("10세 미만입니다.") } else { console.log(ageGrade + "대 입니다.") } -> ★ else if 로 묶지 않는다면 여러 개의 답이 출력된다. ★ 모든 코드를 if문으로 작성하는 것은 좋지 못한 코드이다. ``` # [자바스크립트 13강](https://codepen.io/sangwon7242/pen/wvyaWOO?editors=0012) - age의 값에 따라서 성년인지 미성년인지 출력해주세요. [정답](https://codepen.io/ddpp12/pen/BaVJvjd?editors=0012)
# [자바스크립트 14강](https://codepen.io/sangwon7242/pen/ExQjyJZ?editors=0012) - if문 개념문제, 실행되는 출력문에는 '참' 그렇지 않으면 '거짓'이라고 적어주세요. [정답]()