저장소

✔ JSON JSON(JavaScript Object Notation) - 데이터를 저장하거나 전송할 때 사용되는 경량의 DATA 교환 형식 - 사람과 기계 모두 이해하기 쉬우며 용량이 작아서 XML을 대체하여 데이터 전송등에 많이 사용 - 데이터 포멧일 뿐, 통신 방법도 프로그래밍 문법도 아님 ✔ JSON 특징 1 JSON의 특징 - 서버와 클라이언트간의 교류에서 일반적으로 많이 사용 - 자바스크립트를 이용하여 JSON 형식의 문서를 자바스크립트 객체로 변환하기 쉬움 - 자바스크립트 문법과 굉장히 유사하지만 텍스트 형식일 뿐임 - 특정 언어에 종속되지 않으며 대부분 프로그래밍 언어에서 JSON 포멧의 데이터를 핸들링 할 수 있는 라이브러리를 제공 { "name":"루시", "age" : 13, "fam..

✔ Promise ❗❗❗ Promise ❗❗❗ https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise - 세부설명 - 프로미스 자바스크립트 비동기 처리에 사용되는 객체 - 주로 서버에서 받아온 데이터를 화면애 표시할 때 사용 프로미스를 리턴받은 객체 .then(정상적으로 프로미스 객체가 리턴되었다면 필요한 일을 수행) .catch(에러객체가 리턴되었다면 에러를 처리) .finally(최종적으로 처리할 일을 수행) ✔ 기본예제 1 function runInDelay(seconds){ // 성공했을 때 실패했을 때 return new Promise((resolve, reject) =>{ if(!seconds |..

✔ 이벤트 전파(Event Propagation) - 이벤트가 발생했을 때 브라우저가 이벤트 리스너를 실행시킬 대상 요소를 결정하는 과정 - document 객체나 HTML 문서의 요소에서 이벤트가 발생하면 대상 요소를 결정하기 위해 이벤트 전파가 일어남 캡처링 전파방식 - 부모에서 자식으로 이벤트를 전파 버블링 전파방식 - 자식에서 부모로 이벤트를 전파 ✔ 이벤트 전파를 막는 방법 이벤트객체명.stopPropagation(); DOCTYPE html> 이벤트전파 #divBox{width :100%; height : 300px; border: 3px solid red;} #pBox{width :70%; height : 150px; border: 3px solid blue;} #spanBox{border:..

✔ 이벤트(Event) - 웹 브라우저가 알려주는 HTML 요소에 대한 사건을 발생 - 웹 페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있음 - 자바스크립트는 비동기식 이벤트 중심의 프로그래밍 모델 --------- -------- -------- 이벤트타겟 이벤트타입 이벤트리스너 이벤트타입(Event Type) - 발생한 이벤트의 종류를 나타내는 문자열로 이벤트명이라고도 함 - 키보드, 마우스, HTML, DOM, window 객체등을 처리하는 이벤트 제공 - https://developer.mozilla.org/ko/docs/Web/Events 이벤트타겟(Event Target) - 이벤트가 일어날 객체를 의미 DOCTYPE html> eventtype window...

✔ Class ✔ 객체를 만드는 켐플릿 1. 생성자 함수 2. 클래스 static : 정적 프로퍼티 및 메서드 class Fruit { // eng = 'noname'; static count_fruits = 0; constructor(name, emoji){ this.name = name; this.emoji = emoji; } display = () => { console.log(`${this.name} : ${this.emoji}`); }; static makeBanana() { // return 'banana';// class이름으로 바로 접근가능 return new Fruit('banana', '🍌'); // 클래스 레벨 메서드에서는 this를 참조할 수 없음 } } // apple은 Fruit..

✔ Date 객체 날짜, 시간등을 쉽게 처리할 수 있는 내장 객체 연도(year) - 2자리로 연도를 표기 : 1900 ~ 1999sus - 4자리로 연도를 표기 : 2000 ~ 월(month) - 0(1월) ~ 11(12월) Date 객체를 생성하는 방법 new Date() : 현재 날짜 시간을 저장한 객체가 생성 new Date('날짜 문자열') : 해당 특정 날자와 시간을 저장한 객체가 생성 new Date('밀리초') : 1970년 1월 1일 0시 0분 0초 ~ 해당 밀리초만큼 지난 날짜와 시간을 저장한 객체가 생성 new Date(년, 월, 일 , 시, 분 ,초 ,밀리초) : 해당 특정 날자와 시간을 저장한 객체가 생성 console.log(new Date()); // 내 OS 시간을 가저온다...

✔ 함수 표현식 const hello = function(){ console.log(`안녕하세요 자바!`); } hello(); 화살표 함수 - ECMA Script6에 추가된 문법 - function 키워드를 사용하여 함수를 만드는 것보다 간단하게 표현 - 화살표 함수는 항상 익명 const hello() = () => { console.log(`안녕하세요 자바!`); } const hello = () => console.log(`안녕하세요 자바!`); 매개변수가 있는 경우 const sum = function(x, y){ console.log(`두 수의 합 : ${x + y}); } const sum = (x, y) => console.log(`두 수의 합 : ${x + y}); 리턴값이 있는 경우 ..

✔ 자바스크립트 대화상자 - alert() //비표준은 내 화면에서만 보이고 다른 사용자에게 안보이는 경우도 있다 사용자에게 메시지를 보여주고, 확인을 기다림 BOM(Browser Object Model) window.alert() alert(); - confirm() 사용자에게 메시지를 보여주고, 확인이나 취소를 누르면 그 결과를 불린값으로 반환(선택창이 2개로 보이는 - 반응형) const result = confirm('확인이나 취소를 누르세요) - prompt() 사용자에게 메시지를 보여주고, 사용자가 입력한 문자열을 반환 // 자바에서의 scanner 역할과 유사하다 ❗ 입력받은 값은 문자형으로 저장된다 const result = prompt('문자를 입력하세요'); ✔ 대화상자 DOCTYPE ..

✔ JAvaScript 들어가기 전 최초의 브라우저(인터넷상에서 웹에 연결시켜 주는 윈도 기반의 소프트웨어) : 모자이크 Netscape - 네비게이터 브라우저 - 브랜드 아이크(Brendan Eich) 영입 - 10일만에 모카라는 언어로 네비게이커에 적용(인터프리터) 모카 -> 라이브 스크립트 -> 자바스크립트 java ---> compiler ---> object JAvaScript ---> interpriter jQuery - 과거 브라우저 및 특정 브라우저 버전등을 모두 사용할 수 있도록 하는 라이브러리 - jQuery 문법을 공부해야 하는 단점 V8 자바스크립트 엔진 - 2008년 구글에서 크롬의 베타 버전과 함께 v8엔진 소개 ECMA - 스크립트를 표준화(ECMA International에 ..