-

Can I get 티켓숫자 + 목적지, please?Can I get a round-trip ticket to Florence, please?Can I get 3 round-trip tickets to Rome, please?Can I get 2 one-way tickets to Paris, please?For 2 adults and 1 child, pleaseFor 1 adult and 2 children, pleasePromptsHow may I help you?How may I assist you?When would you like to go?You are all set. Here are your round-trip ticketsI'd like to go/return + 날짜/시간 ~에 가고/돌아오..

스프레드 연산자(spread operator)0개 이상의 인수 (함수 호출용) 또는 원소(배열 리터럴용)가 예상되는 위치에서 배열 표현식이나 문자열과 같은 이터러블 항목을 확장하거나 0개 이상의 키/값 쌍(객체 리터럴용)이 예상되는 위치에서 객체 표현식을 확장 가능ES6이상 사용 가능/* [구문] */[...배열 또는 문자열]// 반환object스프레드 연산자 활용1. 배열의 결합스프레드 문법을 활용하여 배열 결합 가능const list1 = ['a', 'b', 'c'];const list2 = ['e', 'f', 'g'];const total = [...list1, ...list2];console.log(total); // ⇒ [ 'a', 'b', 'c', 'e', 'f', 'g' ]const str..

Array.from()ES6에서 새로 생긴 메서드배열처럼 보이지만 배열이 아닌 객체를 받아 실제 배열로 반환유사배열을 배열로 변환하여 배열의 메서드 활용 문자열을 받아 각각의 배열로 변환 가능/* [구문] */Array.from(유사배열객체)// 반환object a b c;const list = document.querySelectorAll('.list li'); // Nodelist 객체// Array.from을 통해 배열로 변환하고, 두번째 인수를 활용하여 배열의 map 함수와 동일한 기능 적용 가능const listArr = Array.from(list, val => { return val.textContent;});console.log(listArr); // ⇒ (3) ['a', 'b', ..

디스트럭처링 (Destructuring)디스트럭처링 할당 문법이란 배열의 값 또는 객체의 속성을 풀어서 별개의 변수로 쓸 수 있게 해주는 자바스크립트 표현식을 의미변수로 선언 됨을 인지하여 따옴표를 사용하지 않도록 유의객체 디스트럭처링{ } 를 활용하여 조금 더 간결하게 변수 생성 가능디스트럭처링을 활용하여 객체의 속성에 접근함과 동시에 해당 속성 이름으로 변수 선언이 가능/* 형식 */const {객체의 속성 이름, 객체의 속성 이름 } = 객체명 const person = { name : 'John', age : 20, links: { website: { google : 'http://www.google.com' } }}// ES6const { name, age } = person;con..

this의 값은 함수가 호출되는 방식에 따라 다름객체 내 this객체 내 this를 호출하는 경우 해당 객체를 가리킴// 스코프 내 this 호출 const temp = { inner : function(){ console.log(this) } } temp.inner() // 해당 객첼ㄹ 가리킴전역 범위에서의 this전역 범위에서 this 호출 시 Window 객체를 가리킴 'use strict' 를 활용하여 Window 객체 참조 방지 가능strict 모드에서 window 객체 대신 undefined로 값을 설정하는 규칙이 적용되어 undefined가 되는 경우 bind() 함수를 활용하여 this 값을 수동으로 설정 할 수 있음// 전역 범위에서 this 호출 function temp02(){ con..

브라우저 객체 모델자바스크립트 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화해 놓은 것 주요 브라우저 내장객체Window : 브라우저 창이 열릴 때마다 하나씩 생성되는 객체 Document : 웹 문서에서 태그를 만나면 만들어지는 객체, HTML 문서 정보를 가지고 있음History : 현재 창에서 사용자 방문 기록을 저장하고 있는 객체Location : 현재 페이지에 대한 URL 정보를 저장하고 있는 객체Navigator : 현재 사용 중인 웹 브라우저의 정보를 저장하고 있는 객체Screen : 현재 사용 중인 화면 정보를 저장하고 있는 객체Window 객체브라우저 창이 열릴 때마다 하나씩 생성되는 자바스크립트 최상위 객체 자바스크립트의 모든 객체는 window객체에 포..

name을 활용 Form 제어name을 활용한 폼 제어 시에는 form 뿐만 아니라 접근하려는 form 요소에 name값을 지정해야 함 Name 배열을 활용한 Form 제어폼 요소의 배열을 사용하여 접근하는 경우, form에 접근은 forms, 요소에 접근은 elements를 사용docuent.forms[0].elements[0].valueselect 요소 접근// 배열 활용 select옵션 접근 document.폼 이름.폼 요소이름.options[인덱스] document.폼 이름.폼 요소이름.options[인덱스].value // 선태된 select index document.폼 이름.폼 요소이름.options.seletedIndex document.폼 이름.폼 요소이름.options[폼요소이름.sel..

addEventListener() 함수이벤트가 발생한 요소에 이벤트 처리기를 연결해 주는 함수 document 객체, window 객체, 웹 문서, 이미지, 텍스트 등 어디에서든 사용 가능 다중 이벤트 한 번에 처리 대상.add 이벤트 유형 : 처리할 이벤트 유형을 지정, 'on'을 붙이지 않고, 'click', 'mouseover'와 같은 이벤트 이름만 사용 가능함수 : 이벤트가 발생했을 때 실행할 명령을 나열하거나 함수 이름을 지정캡쳐여부 : 이벤트를 캡쳐링하는지 여부를 지정, 생략가능 , true이면 캡처링, false(기본값) 이면 버블링이벤트 캡처링 : DOM의 부모노드에서 자식 노드로 이벤트가 전달이벤트 버블링 : DOM의 자식노드에서 부모노드로 이벤트가 전달

값에 의한 전달 (Copy by Value)값에 의한 전달기본적으로 모든 primitive 값은 copy by value원본 데이터와 복사본의 데이터가 서로 따로 제어 됨let origin = 'hi'let clone = originclone +=' john'console.log(origin); // hiconsole.log(clone); // hi john참조에 의한 전달(Copy by Reference)참조에 의한 전달원본 데이터와 복사본의 데이터가 같이 제어 됨const newObj = { name :'john'}originObj.name = 'Mike'console.log(originObj.name); // Mikeconsole.log(cloneObj.name); // Mikeconsole.l..

nav 모든 내비게이션이 아닌 페이지 주요 내비게이션 링크들만 선언하는 것이 좋음 footer안에서 nav 사용은 불필요 사이트 전반전인 이동을 위한 내비게이션과 페이지 전체를 이동하는 내비게이션을 각각 기술할 수 있음 section 문서나 어플리케이션의 내용을 주제별로 섹션을 구분하는 요소 h1~h6의 헤딩태그를 사용할 수 있으나 h2~h6 태그 사용을 권장 article 문서내의 독립적인 글을 표시하여 블로그 글이나 뉴스 본문이 해당됨 article 요소 안에 article 요소가 들어갈 경우 안쪽의 article요소는 밖에 article 요소의 내용과 관련이 있는 내용이라는 것을 의미 블로그의 글과 사용자가 작성한 댓글이 있을 경우 하나의 댓글을 안쪽으로 기술하고, 전체 블로그 글은 바깥은 arti..