[JS] 개념정리 및 실습코드

강의하면서 준비했던 자료들입니다 

실습 코드는 여기에서 확인하세요 :-)

https://github.com/gyulch/lecture_frontend/tree/master/03_js

GitHub - gyulch/lecture_frontend: html, css, js, webgame

 

---

변수 선언

• let과 const, 그리고 var ?!

let name;     // 변수 선언
name = "홍길동";  // 변수 할당

let name = "홍길동";

const age = 27;
age = 26    // 에러

• 변수 한 번에 할당

const name = "길동", gender = "m", age = 27;

데이터타입

✒️ 문자에만 “” 넣어서 문자열임을 알려주면 됨

(js는 java와 다르게 따로 타입 표기를 하지 않아요)

JAVA

Int num = 27;

double num = 27.7;

String name = “길동”;

JS

let num = 27;

let num = 27.7;

const name = “길동";

변수

• 사용가능 변수 : age, age27, age_27, age
• 사용불가 변수 : 27age, my age, ~age, class
• 사용불가 예약어

---

💻 variable.html

— 스코프: 변수에 접근할 수 있는 범위

• var : 함수스코프
• let, const : 블록스코프

💥 핵심내용: 변수 선언 할 때는 let 또는 const로.

                변하는 값은 let, 불변값은 const 

                문자열 타입만 따옴표를 붙임

자바스크립트 데이터타입

산술 연산자

// 사칙연산
+, -, *, /, %, ** 

// 증가연산자 ++
let a = 3;
const b = ++a;

// expected output: "a:4, b:4"

let x = 3;
const y = x++; // x를 먼저 y에 넣고, x를 1 증가시킴

// expected output: "x:4, y:3"

//감소 연산자
let x = 3;
const y = x--;

// expected output: "x:2, y:3"

let a = 3;
const b = --a;

// expected output: "a:2, b:2"

Q. let a = 10;
   let b = a++ + 5;
   a와 b의 값 예상해보기

서로 다른 타입의 데이터를 사칙연산하면?

// 숫자 + 숫자
1 + 2 // 3
  
// 문자 + 문자 => 문자
"홍" + "길동" // "홍길동"

// Boolean + 숫자 
true + 1 // 2

// Boolean + Boolean
false + false // 0

// 문자 + 숫자 
"1"+ 6 //문자

// 더하기를 제외한 나머지 연산
"1" * 6 // 숫자
"길동" * 1 // NaN

+ 번외1
// js 내장함수 : isNaN()
isNaN(3) //false
isNaN("3") //false
isNaN("홍길동") //true

+ 번외2
1/0   // 연산 불가능 => Infinity

+ 번외3
// 문자열 비교할 때 아스키값을 비교함
"hi" > "Hi" //true (소문자 아스키값 > 대문자 아스키값)

할당 연산자

=, +=, -=, *=, /=, %=

let num = 3;

num = num + 10;
num += 10;

비교 연산자

==, ===

console.log(1=='1');   //true
console.log(1==='1');   //false. 
- 데이터형까지 같은 경우에 true로 판단

console.log(null == undefined);   //true
console.log(null === undefined);  //false
console.log(true == 1);           //true
console.log(true === 1);          //false
console.log(true == '1');         //true
console.log(true === '1');        //false

!=, !==
console.log(1 != '1')  //false
console.log(1 !== '1')  // true

<, <=, >, >=
console.log(1 < 2) //true
console.log(1 <= 1) //true  

논리 연산자

배열

	const arr = ["길동", "주혁", "태양", "미소"]
	
	// new Array함수를 통한 객체 생성
	const arr1 = new Array(1,2,3)
	const arr2 = new Array(3) // 배열길이 지정

- 배열의 index 알아보기
- 배열의 length 알아보기

• Array 객체의 메서드
• Array 메서드 더 알아보기

Array - JavaScript | MDN

객체

// 객체 (key 와 value로 이루어진 형태)
	const obj = {
		name: "길동",
	  age: 30,
	  gender: "m"
	}
	
	// 객체의 value 값에 배열 또는 함수 넣기도 가능 :-)
	const obj = {
	  name: "짱구",
		toDo: ["잠자기", "놀기", "먹기"],
	  say: function() {    //객체 안 프로퍼티로 정의된 함수: 메소드
	    alert('안녕, 나는 짱구야!');
		}
	}
	
	// 배열 안에 객체 넣기 
	  1. 이름이 태양인 학생의 객체를 콘솔에 출력해보세요
	  2. 상미의 나이를 콘솔에 출력해보세요
	const studentObj = [
		{
			name: "길동",
		  age: 17,
		  gender: "m"
		},
		{
			name: "태양",
		  age: 29,
		  gender: "m"
		},
		{
			name: "상미",
		  age: 18,
		  gender: "w"
		}
	]

api response example:

✒️ 객체 값에 객체 또 넣기 가능 :-)

🧑🏻‍🏫 값 꺼내오기 연습 : console에 “홍길동" 이 찍히도록

name 값을 출력해보세요

const obj = {
            "user": {
                "title": "UserBasicDetails",
                "type": "object",
                "properties": {
                    "name": {
                    "example": "Tony Stark",
                    "type": "string"
                    },
                    "gender": {
                    "example": "Male",
                    "type": "string"
                    }
                },
                "required": [
                    {
                        "name": "홍길동"
                    },
                    {
                        "gender": "m"
                    }
                ]
            }
        }

생성자 함수를 이용한 객체 생성 방식

// 객체: 틀 
// 인스턴스: 만든 틀을 기반으로 같은 모양으로 찍어내는 것  

// 생성자 함수
function Person(name, age) {
		// 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킨다.
    this.name = name;
    this.age = age;
    this.personInfo = function() {
        console.log(`이름: ${this.name}, 나이: ${this.age}세`)
    }
}

// 인스턴스 생성
const person1 = new Person('미미', 23); 
const person2 = new Person('동건', 40);
console.log(person1)
console.log(person2.personInfo())

Date, Math 객체 _ time.html

// new Date()
getMonth();
getDate();
getHours();

// Math
Math.PI
Math.round(2.3); // 가까운 정수로 반올림
Math.pow(2,3); // 2의 3제곱
Math.sqrt(4) // 4의 제곱근 반환
Math.abs(-4) // 절댓값 반환
Math.ceil(3.7) // 소수 첫째 자리 올림
Math.floor(3.7) // 소수 첫째 자리 내림  
Math.max(1,2,4,19,-6) // 최댓값 반환
Math.min(1,2,4,19,-16) //최솟값 반환
Math.random() // 0-1사이의 난수

- 0부터 100사이의 난수 만들기
Math.floor(Math.random()*100)

---

조건문 (if-else, switch)

// if 문
if(3 === '3') {
    console.log('@')
} else if(names[0] == "영희") {
    console.log('@')
} else if (3 == '3') {
    console.log('true 입니다.')
} else {
    console.log('else!')
}

// switch 문
switch(식) {
	case 값: 실행문;
		break;
	case 값: 실행문;
		break;
	case 값: 실행문;
		break;
	defaul: 실행문;
}

반복문 (for)

// 👾 for 문

// 0부터 5까지 출력해보자
for(let i=0; i <= 5; i++) {
	console.log(i)
}  
- for문 실행순서: 초깃값 -> 조건 -> 블록 안 코드 -> 증감식 

// for 반목문으로 배열에 있는 값을 순서대로 출력해보자
const names = ["철수","영희","길동","짱구","흰둥이"]

for(let i=0; i<names.length; i++) {
    console.log(i + ":" + names[i])
    console.log(`${i}번째 인덱스를 가진 사람은 ${names[i]}입니다.`);
}

반복문 (while, do-while)

// 👾 while 문 (0부터 10까지의 수를 짝수만 출력되게 해보자)

let num = 0;

while(num <=10) {
  if(num % 2 === 0) {
      console.log(num);
  }  
  num ++;
}

// 👾 do while 문
do {
	실행할 명령
} while (조건)
=> 일단 명령 한 번 실행 후 조건 체크.

alert(), confirm(), prompt()

alert.html
// propmt로 사용자 값을 입력 받아 alert으로 결과값을 알려주는 코드를 작성해보세요
// switch 문 사용
const study = prompt('수업을 입력하세요(html, css, js, react)')

switch(study) {
    case 'html' : 
        alert('html 수업은 1주차 강의입니다.');
        break;
    case 'css' : 
				alert('css 수업은 2주차 강의입니다.');
        break;
    case 'js' : 
				alert('js 수업은 3주차 강의입니다.');
        break;
    case 'react' : 
        alert('react 강의는 8월초에 진행합니다.');
        break;
    default: alert('예정되지 않은 강의입니다.');
}

👾 switch -> if, else 로 바꿔보세요 (7월강의와 8월강의를 구분해서 결과값을 띄워주세요)

+ 번외: propmpt() 로 사용자에게 입력받은 값은 "문자열"로 저장이 됩니다.
  따라서 숫자를 받는 경우라면 parseInt() 함수를 사용해요
  parseInt() : 괄호 안의 값을 정수로 변환 (실수 -> 정수로 변환할 때도 쓰여요!)

ex) parseInt(prompt("숫자를 입력하세요"));

삼항 조건 연산자

// 조건식 ? 실행문1 : 실행문2;
// 사용자에게 받은 값이 짝수인지 홀수인지 확인하는 코드
👾 if, else 를 '삼항연산자' 로 바꿔보세요

const num = prompt('숫자를 입력하세요')

if(num !== null) {
	**if(num % 2 === 0)
		alert("짝수입니다 ✌🏻");
	else 
		alert("홀수입니다 ☝🏻");**
} else {
	alert("사용자가 취소버튼누름");
}

---

함수

 - 함수선언
function 함수명() {
		// 실행코드
    return;   // 함수 종료
}
 - 함수호출
함수명();

// 파라미터 1,2를 받아 두 인자를 더해 리턴하는 함수를 구현해보세요.

// 이름과 나이를 받아 console에 출력하는 함수를 구현해보세요.

// return : 함수종료

• 함수 선언 방식

// 함수 선언문
function addHandler(a, b) {
    console.log('함수 선언문')
}

// 함수 표현식(익명함수를 변수에 할당)
const addHandler = function() {
	console.log('함수 표현식')
}

// arrow_화살표 함수 (es6)
const addHandler = (a, b) => a + b;

// 즉시실행함수
(function(){
    console.log('즉시실행')
}());

• 매개변수 기본값 설정 (es6)

const addFunc = (a, b=10) => {
    return a + b;
}

console.log(addFunc(5,3))
console.log(addFunc(3))

👾 전역변수와 지역변수 값 예측해보기

**const num = "나는 전역변수";** // 전역변수

const myFunc = () => {
    **const num = "나는 지역변수";** // 지역변수
    console.log("퀴즈1:", num);
}
myFunc();

console.log("퀴즈2:", num)

🧑🏻‍🏫 지역변수 num은 전역변수 num보다 우선순위를 가짐

• 번외

웹브라우저에서 js를 해석할 때 함수 선언 부분을 가장 먼저함! (호이스팅)
그래서 함수 호출 후 선언이 가능.

=> 함수 표현식은 안됨 (const 또는 let 변수에 함수를 할당하기 때문)

재귀함수

// 함수 안에서 자기 자신을 호출
const factorial = num => {
    if(num <= 0) {
        return 1;
    } 
    return num * factorial(num - 1);
}

const result = factorial(5);
console.log(result)

문자열 다루기

str.length : 문자열 길이 반환

📌 subString(🍊, 🍌) : 🍊인덱스부터 ~ 🍌 인덱스-1 까지 자름

let str = '반갑습니다아';

const result1 = str.substring(0, 2);
// "반갑"

const result2 = str.substring(2, 5);
// "습니다"

const result3 = str.substring(2);
// '습니다아'

📌 slice(🍊, 🍌) : subString 과 사용법 똑같음

단, slice는 음수 사용 가능( 뒤에서부터 자르기)

let str = '반갑습니다아';

const result1 = str.slice(-2);
// "다아"

const result2 = str.slice(-4, 5);
// "습니다"

📌  substr(🍊, 🍌) :

🍊인덱스부터 🍌 length 만큼 자름

let str = '반갑습니다아';

const result1 = str.substr(0, 2);
// '반갑'

const result2 = str.substr(2, 4);
// '습니다아'

const result3 = str.substr(2);
// "습니다아"

---

이벤트와 이벤트 처리기

• 마우스 이벤트: 💻 event-mouse.html
• 키보드 이벤트: 💻 event-keyboard.html

event.keyCode, event.which: 키보드 키코드값 반환

• 인라인 함수 밖으로 빼보기

// onclick _ 💻 callback.html
document.querySelector('선택자').onclick = function() {
    this.style.backgroundColor = 'red'
}

// onload, onresize _ 💻 callback2.html
window.onresize = function() {
    console.log('크기변경됨')
    console.log(window.innerWidth)
}

돔 조작해보기 (선택자)

• 💻 dom.html

HTML요소생성: createElement(), appendChild()

   const btn = document.createElement('button');
	 btn.onClick = function() {
		 alert('새로만든 버튼 클릭')
	 }
   const txt = document.createTextNode('버튼입니다');
  
   btn.appendChild(txt);
   document.body.appendChild(btn);

HTML요소제거: removeChild()
	const lists = document.querySelectorAll("mylist > li");
	
	for(let i=0; i<lists.length; i++) {
      lists[i].addEventListener('click', function() {
		    this.parentNode.removeChild(this);
      })
	}

HTML요소교체: replaceChild(newNode, oldNode)
	const ul = document.querySelector('ul')
	const lists = document.querySelectorAll("mylist > li");
	
  for(let i=0; i<lists.length; i++) {
		lists[i].addEventListener('click', function(idx) {
			const elem = document.createElement('li');
			const txt = document.createTextNode('새로운 목록'); 
			elem.appendChild(txt);

			ul.replaceChild(elem, this);
		})
	}

이벤트리스너

// addEventListener

addEventListener(이벤트, 함수)
- 이벤트: click, mouseover, mouseout
ex) tag.addEventListener('click', function() {
		   this.style.backgroundColor = 'green';
    })

JS로 form 제어하기

input.onfocus
input.onblur
input.ininput  :입력창에 입력할 때마다 발생
input.onsearch :입력 후 enter누를 때 발생
onchange : form-change.html
onreset:
onsubmit:

---

📌 번외, 참고 사이트

🧑🏻‍🏫 자바스크립트 작성 규칙

1. 들여쓰기 (html, css도 해당)
2. 세미콜론 (문장을 구분해줘야 디버깅 쉬움)
3. 한줄에 여러문장 작성금지 // let a = 0; let b = 1;
4. 연산자, 값 사이에 공백 넣기 // let sum = num + 10; 

🧑🏻‍🏫  자바스크립트 코딩 스타일 가이드 (코딩 컨벤션) 정의 사이트

(var 사용x, arrow 함수 사용권장, 템플릿 문자열 사용 권장(${} 등)

• 구글 스타일가이드

styleguide/jsguide.html at gh-pages · google/styleguide

GitHub - google/styleguide: Style guides for Google-originated open-source projects

• 에어비앤비 스타일가이드

https://github.com/airbnb/javascript

GitHub - airbnb/javascript: JavaScript Style Guide