본문 바로가기
728x90

개발/JavaScript14

2023.04.13 JavaScript의 에이싱크, JSON 1. JavaScript의 에이싱크(Async / Await) Async / Await Async 실습 2. JavaScript의 JSON(JavaScript Object Notation) JSON의 특징 JSON의 구조 JSON의 메소드 JSON 보는팁들 크롬환경 검증사이트 1. Async / Await (에이싱크) 비동기 프로미스 문법을 조금더 쉽게 사용할수 있게 해주는 ES7에 추가된 문법 callback, Promise 비동기처리를 좀 더 쉽게 처리할 수 있도록 사용 됨 ES7에 추가된 문법 ✔async를 사용하면서 유의할점 3가지 !!! 1. promise(비동기 처리될 함수)를 만들고자 하는 함수 앞에 async를 붙여준다. 2. promise 앞에 await를 붙여줍니다. 3. retrun되.. 2023. 4. 14.
2023.04.12 JavaScript의 map,예외처리 목차 1. JavaScript의 맵(map) 2. JavaScript의 예외처리 1. JavaScript의 맵(map) - Key,Value로 이루어진 데이터 집합의 자료구조 형태 const 맵이름 = new Map([['키1', '값1'],['키2', '값2'],....]); const 맵이름 = new Map([['키1', '값1'],['키2', '값2'],....]); ✔ 팁!! 주석(comments) // : 한줄짜리 주석 /* ..... */ : 여러줄 주석 /** */ : JSDoc 주석 (추천하는 주석문) 예) /** *ㅁㄴㅇㄹㅇㅁㄴ *ㅁㄴㅇㄹㄴㅇㅁ *ㅁㅇㄴㄻㄴㅇ */ 2. JavaScript의 예외처리 - 문법 try { 예외가 발생할 것으로 예상되는 문장; ... ... }catch(er.. 2023. 4. 12.
2023.04.12 JavaScript의 프로미스,옵셔널체이닝 목차 1. JavaScript의 프로미스(Promise) 프로미스를 사용시 장점 사용법 프로미스를 리턴받는 객체 2. JavaScript의 옵셔널 체이닝(Optional Chaining) 연산자 1. JavaScript의 프로미스(Promise) 자바스크립트 비동기 처리에 사용되는 객체 (- 비동기란? -> 시간이 걸리는 처리를 잠깐 멈춰두고 다하고 다시 시작) 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용 1-1. 프로미스를 사용시 장점 비동기 처리 시점을 명확하게 표현할 수 있다. 연속된 비동기 처리 작업을 수정, 삭제, 추가하기 편하고 유연하게 만들수 있다. 코드의 유지 보수성이 증가한다. 1-2. 프로미스 사용법 성공 실패 ---------- ------- const 프로미스객체 = () .. 2023. 4. 12.
2023.04.11 JavaScript의 이벤트, 이터레이터,스프레드,세트 목차 1. JavaScript의 이벤트(Event) 이벤트 타입(Event Type) 이벤트 타겟(Event Target) 이벤트 리스너(Event Listener) 이벤트 등록 이벤트 제거 이벤트 객체(Event Object) 이벤트 전파(Event Propagation) 버블링 전파방식 캡처링 전파방식 이벤트 전파를 막는방법 2. JavaScript의 이터레이터(Iterator) 이터러블(Iterable) 제너레이터(Generator) 스프레드(Spread)연산자 ->전개구문 구조분해할당 3. JavaScript의 세트(set) 1. JavaScript의 이벤트(Event) 웹 브라우저가 알려주는 HTML 요소에 대한 사건이 발생 웹 페이제 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 .. 2023. 4. 11.
2023.04.10 JavaScript의 클래스심화, 상속의활용 목차 1. JavaScript의 클래스심화 Static(정적프로퍼티) 문제. 카운터 만들기 2. JavaScript의 상속의 활용 상속 기본 문제. 정직원, 아르바이트생 한달 급여 계산하기 3. JavaScript의 Wrapper Primitive Types 환경을 찍어주는 명령어! 동등 연산자 URL,URI대한 추가 설명 1. JavaScript의 클래스심화 1-1.Static(정적프로퍼티) 정적 프로퍼티 및 메소드를 생성 할 수 있다. 미리 메모리에 올릴수 있는 애들 클래스 레벨 메소드(static을 사용한)에서는 this를 참조 할 수 없다. 예시 1) // static class Fruit { static count_fruit = 10; //정적프로퍼티: 객체를 생성한적 없는 메모리에 올려 놓는다.. 2023. 4. 10.
2023.04.10 JavaScript의 함수작성법,객체활용 목차 1. JavaScript의 함수작성법 함수의 기본 ✔함수와 메모리 ✔함수 작성법 팁 매개변수의 기본값 콜백함수, 활용법, 문제 원시값과 객체값의 비교 ✔자바 스크립트에만 존재하는 코드 2. JavaScript의 객체 활용법 객체 생성(기본 리터럴법으로 생성) 객체의 출력법 프로퍼티 추가하기 프로퍼티 삭제하기 동적으로 속성에 접근하기 객체에 프로퍼티 추가해주는 함수 만들기 객체에 프로퍼티 삭제해주는 함수 만들기 객체 생성하는 함수 만들기 생성자 만들기 생성된 생성자를 이용하여 객체 생성하기 생성된 객체를 출력 1. JavaScript의 함수작성법 1-1. 함수의 기본 매개 변수 두 수를 입력 받아 Sum을 출력해주는 함수 function 함수명(매개변수1, 매개변수2,...){ 함수 호출시 실행할 문.. 2023. 4. 10.
2023.04.07 JavaScript의 노드, 정규표현식 목차1. JavaScript의 Node(노드)Node(노드)의 종류Node(노드)의 관계Node(노드) 추가Node(노드) 생성Node(노드) 제거Node(노드) 복제2. JavaScript의 정규표현식정규 표현식자바스크립트 정규표현식 적용방법1. JavaScript의 Node(노드) - 앞으로 배울 노드랑은 완전 다른 내용입니다. - HTMl DOM은 노드라고 불리는 계층적 단위에 정보를 저장한다. 1-1. Node(노드) 의 종류 - 문서 노드: 문서 전체를 나타내는 노드 - 요소노드: HTML 요소는 요소노드, 속성노드를 가질 수 있음 - 속성노드: 속성은 모두 속성노드이며, 요소노드에 관한 정보를 가지고 있다. - 텍스트노드: 텍스트는 모두 텍스트노드 이다. - 주석노드: 주석은 모두 주석노드 이.. 2023. 4. 7.
2023.04.07 JavaScript의 객체들(로케이션,히스토리,네비게이터,DOM) 목차 1. JavaScript의 객체 Location(로케이션)객체 protocol : 프로토콜(http, https, ftp) hostname : IP,도메인 과 포트번호 pathname : 경로 href : 페이지 정보 또는 페이지이동 reload(): 페이지를 새로고침하는 기능 history(히스토리) 객체 history메소드 back() : 뒤로 forward(): 앞으로 go(0) :새로고침 navigator(네비게이터) 객체 geolocation: GPS정보 문서 객체 모델(Document Object Model) document 객체 getElementById(): 해당 아이디의 요소를 선택할때 getElementsByTagName(): 해당 태그 이름의 요소를 모두 선택해준다. getEle.. 2023. 4. 7.
728x90

티스토리툴바