JAVASCRIPT
목 차
1. JS Day 1
변수, 변수 선언 키워드, String&Number, 배열, 배열 메소드, 객체, 객체 메소드
2. JS Day 2
함수, 데이터 비교, 조건문&논리연산자
3. JS Day 3
JS로 HTML, CSS 조작, 반복문, interval, 인자와 매개변수, 브라우저 저장소
4. JS Day 4
DOM조작, 이벤트, addEventListener, 스코프, localStorage, 호이스팅
5. JS Day 5
API, 웹페이지의 통신, Promise, 구조분해할당, 복사(얕,깊), JSON, 딜레이개선
6. D-Day Counter
7. ToDo List
8. JAVAScript 연습 문제
-
변수, 함수
-
조건문, 반복문, 문자열
-
배열과 객체
JS Day 1
변수와 상수는 데이터를 담고, 꺼내 쓰는 상자
var, let, const
= 할당 연산자
데이터 타입
String 문자열 - 텍스트 데이터
Number 숫자 그대로 입력 vs “숫자”
Boolean, undefined, null, symbol, Bigint, Object
Array&Object
Array(배열) : 순서가 있는 데이터 컬렉션 저장시 사용
Property
데이터타입이 가진 속성
arr.length?
arr.push() arr.pop() arr.indexOf()? arr.includes() 데이터 존재여부
key - value
Dot notation
userdata.name.
Bracket ? userdata[’name’], 새 키 추가 가능, 문자열 아닐 시 변수
Object.keys() 객체의 프로퍼티 중 키만 가져와 배열에 담음
object.keys(jasonData)
[’name’,’age’,’gender’] 문자열 형태
object.values(); 밸류만 가져옴 - 순서 없음
Object.keys() → 키 모음 배열로( 문자열로 )
.values() → 모든값 데이터타입 그대로 돌려줌; 어떤 데이터든 할당할 수 있기 때문에 JS Day 2
함수?
함수 - 매개변수 - 반환데이터
function()
onclick ?
querySelector(?)
new Date
함수 선언식 vs 표현식, 화살표함수
localhost
DNS, port ?
비교 연산자
원시타입과 참조 타입? 원시 ; 불변
원시 7 가지 - String, Number, Boolean, bigint, undef, symbol, null
참조 - 이외 모두
조건문?
논리 연산자? &&, ||, !, .
JS Day3
반복문?
for(){}
while?
let I = 0;
while(I<10){
//
I++
} 종료조건 설정 필요
for-of [배열에 주로 사용]
for(let el of arr){
}
for-in{객ㅊㅔ}
for(let key in obj){
}
setInterval?
clearinterval?
전달인자, 매개변수?
**참조ㅗ 영역? JS의 함수, 변수는 정의된 영역 안에서만 존재해
밖에서 참조될 수 없다. → return 을 통해 밖으로
Web Storage
- sessionStorage
- localStorage
localStorage.setItem(저장할 데이터)
lS.setItem(’data-key’, ‘data-value’)
확인은 어디에서?
LS.getItem() ?
데이터 꺼내오기 getItem(’data-key’)
→ data-value 꺼내옴
조건문과 결합
const savedTimerData = localStorage.getItem( 'saved-timer-data' )
const startTimer = function() {
// 타이머를 시작하는 코드
localStorage.setItem( 'saved-timer-data', '타이머 시작에 필요한 데이터' )
}
if( savedTimerData !== null ) {
startTimer()
}JS Day 4
ul, ol, li 태그;
DOM ?
DOM이라는 트리 구조의 객체. 여러 개의 노드로 구성, 하나의 부모가 여러 개의 자식 노드 갖게 된다.
엘리먼트 노드 , 텍스트 노드, 속성 노드 등등
이벤트
window.event → window 객체 내의 event 속성으로 접근 가능
event : DOM 내에서 발생하는 이벤트 (온클릭 등)
스코프
- 함수 레벨 스코프
- 블록 레벨 스코프
- 스코프 체이닝
디버거
- 문제 찾을 때 쓴다
호이스팅
선언 단계 - 초기화 단계 - 할당 단계와 TDZ
JS Day5
geolocation ?
getcurrentposition()
메서드 안의 변수 함수 → ㅋㅂㅎㅅ
JSON.parse() 응답 바디만 존재할 때
res.json(); 헤더 바디 다 존재해도 된다
str.trim() ?
비동기 함수는 then 을 통해 기다려야 함
API 의 개념?
HTTP? 경고 메시지의 종류
멀티스레드&싱글스레드 → 동기/ 비동기
비동기 처리
JS는 싱글 스레드로 동기적 → 어떻게 해결? 1. 콜백함수
- Promise
현재는 얻을 수 없으나 추후 작업 완료시 받아올 수 있는 데이터에 대한 접근 수단. new Promise() 같은 코드를 입력해 직접 생성 가능
fulfilled, pending, rejected?
then(), catch()
구조분해할당
- 배열
- 객체
스프레드 연산자
얕은 복사
얕은 복사의 한계(객체)
깊은 복사 ? JSON.stringify(). JSON.parse()
rest parameter?
DdayCounter
ToDoList
JS연습문제
4주간의 프리캠프가 끝났다. 이제 본격적으로 공부를 시작할 날이 곧 다가온다.
