[패스트캠퍼스] 국비지원 11일차 학습일지

Javascript 선행 학습

1. vscode에서 app.js 연결하기

• 정보 태그말고 구조 태그에서 script 이용하여 연결하기, 그렇게 하지 않으면 null이 뜬다. (왜냐하면 아직 js가 html을 읽어오지 못 하기 때문이다.)
• 정보 태그에서 defer 이용하여 연결하기 (권장되는 방식)

 

2. 표기법

• dash-case 
• snake_case (html, css에서 권장되는 방식)
• camelCase (javascript에서 권장되는 방식)

 

3. Zero-Based Numbering

0부터 번호 매기기

 

4. 주석

• //
• /* */

ctrl + / 단축키 이용하여 주석 처리하기

 

 

5. 데이터 종류

자바스크립트 코드 짤 때에는 데이터 기반으로 사고해야 한다. 눈에 보이는 대로 코드를 작성하는 css와는 다르다.

• String : 큰 따옴표, 작은 따옴표, 백틱과 보간법을 이용하여 나타내는 방법
• Number : 정수, 부동 소수점 숫자
• Boolean : true, false
• Undefined : 값이 할당되지 않는 상태를 의미한다. (값이 없다는 의미이다.) 예를 들면 변수 선언만 하는 경우
• Null : 어떤 값이 의도적으로 비어있음을 의미한다.
• Object : {Key : Value} 형태로 여러 종류의 데이터를 저장한다. dot notation 또는 bracket notation을 이용하여 원하는 값을 가져올 수 있다. 
• Array : 여러 데이터를 순차적으로 저장한다.

 

6. 변수

데이터 저장하고 참조하는 데이터

•  let : 재할당 가능
• const : 재할당 불가능

const로 사용하다가 재할당이 필요한 경우 let으로 변경하기.

 

 

7. 예약어

특별한 의미를 가지고 있어서 함수 이름이나 변수 이름으로 사용할 수 없는 단어

 

 

8. 함수

특정 동작을 수행하는 일부 코드의 집합

• 함수 선언
• 함수 실행

 

return을 이용하여 함수 내에 있는 데이터를 바깥으로 보낼 수 있다.

그 값을 새로운 변수에 할당하여 새롭게 이용할 수 있다.

 

• 매개 변수 Parameters : 함수 밖에서 들어오는 데이터를 받아오는 역할. 함수 내에서만 사용 가능하다. 그리고 매개체 역할을 수행한다.
• 인수 Arguments : 함수 밖에 있는 데이터를 함수 안으로 차례로 넣어주는 역할.

 

매개 변수와 인수 헷갈리지 않게 주의하기. 

 

매개 변수	인수
함수 밖에서 들어오는 데이터를 함수 내로 받아오는 역할	함수 안으로 데이터를 차례로 넣어주는 역할 함수 실행 시에 인수를 넣어줘야 한다

 

• 기명 함수 : 이름이 있는 함수, 함수를 선언한다고 한다.
• 익명 함수 : 이름이 없는 함수, 변수에 넣어서 이용하고 함수를 표현한다고 한다.

 

함수 선언 (기명 함수)과 함수 표현 (익명 함수)을 구분하자!

 

// 1. 함수 선언하기. (기명 함수를 이용하기.)

function sayHello(){
	console.log("hi~");
}

// 2. 함수 표현하기. (익명 함수를 이용하기.)

const sayHello = function(){
	console.log("hi~")
}

 

 

객체 데이터 안에 함수를 메소드라고 한다. (함수를 데이터로서 이용할 수 있다.)

 

const personId = {
	name : amy,
    age : 26,
    
    // 메소드
    // 함수를 데이터로서 이용할 수 있다.
    getName : function(){
    	return this.name;
    }
};

const personName = personId.getName(); // 호출한다. 실행한다.
console.log(personName) // amy

console.log(personId.name) // amy

 

 

9. 조건문

조건의 결과에 따라 다른 코드를 실행하는 구문

 

 

if(조건이 true인 경우){
	true인 경우에 실행되는 명령어
}else{
	false인 경우에 실행되는 명령어
}

 

 

10. DOM API

• DOM : Document Object Model, 즉 HTML 내용을 의미한다. (예를 들면, div, span, input 등)
• API : Application Programming Interface, 프로그래밍 명령들을 의미한다.

즉, js로 html를 제어할 때 사용하는 명령어가 DOM API이다.

 

DOM

 

 

 

• addEventListener(이벤트, 핸들러) : 이벤트가 발생할 때마다 실행한 함수, 즉 핸들러를 넣어주기
• classList에서 add, remove, contains : 클래스명 추가, 제거, 포함 여부 확인하기 (포함 여부는 let 변수 이용하여 재할당 가능하게 만들어주기.)
• forEach 이용하여 유사 배열 (Array-like) 이용하기
• textContent를 이용하여 값을 얻는 getter 또는 값을 지정하는 setter 역할 수행하기

 

 

11. 메소드 체이닝

메소드를 체인처럼 연결하여 이용하는 것을 의미한다.

 

const a = "hello";
const b = a.split("").reverse().join("") // 메소드 체이닝 의미한다.

// 체인처럼 계속 연속적으로 메서드를 이용하는 것이다.