JS | ES6 문법 - backtick
·
JavaScript
Backtick ` 1. 백틱`을 이용해서 문자열을 표현하고, 템플릿 리터럴 ${}를 이용해서 필요값을 처리 let name = "이순신"; let age = 20; console.log("이름은:"+name + "이고, 나이는:" + 20 + "입니다"); //결과 : 이름은:이순신이고, 나이는:20입니다 //tab버튼 위에 backtick console.log(``); console.log(`이름은:${name}이고, 나이는:${age}입니다`); //tab위에 //결과 : 이름은:이순신이고, 나이는:20입니다
JS | ES6 문법 - Destructuring assignment (구조 분해 할당)
·
JavaScript
Destructuring assignment (구조 분해 할당) 1. 배열에서 destructuring let arr = [1,2,3,4]; // let a1 = arr[0]; // let a2 = arr[1]; let [a, b, c, d] = arr; console.log(a, b, c, d); //1 2 3 4 let [a1, a2] = arr; console.log(a1, a2); //1, 2 let [k1, , ,k4] = arr; console.log(k1,k4); //1, 4 let [y1, ...y2] = arr; console.log(y1, y2); //1, [2, 3, 4] let [...ar] = arr; console.log(ar); //[1, 2, 3, 4] function use..
JS | ES6 문법 - spread operator (전개구문)
·
JavaScript
spread operator (전개구문) 1. 반복 가능한(iterable) 요소에 적용할 수 있는 문법입니다. ex) 배열이나 문자열 등 2. 배열이나 문자열 등을 풀어서 요소 하나하나로 전개시킬 수 있다. 기존에는 index를 사용해서 배열의 값을 뽑아낼 수 있었지만, 배열이름 앞에 ...을 넣어주면 배열의 값을 바로 차례대로 뽑아준다. let arr = [1,2,3]; //전개구문은 반복이 가능한 요소에서만 사용 가능함 (ex.배열, 문자열 / 객체는 안됨)) console.log(...arr); //전개구문 //1 2 3 배열의 요소를 풀어서 나열시킨다. let str = "hello"; console.log(...str); console.log([...str]); // ['h', 'e', 'l'..
JS | ES6 문법 - let 변수, const 변수
·
JavaScript
let과 const let 변수 - 자바와 같음 1. let 변수는 중복선언이 🔥불가능X 하다. 2. let 변수의 유효범위는 {} 중괄호 블록이다. var 변수는 함수 스코프 (함수 범위에서까지 유효) let 변수는 중괄호 스코프 (중괄호 범위에서까지 유효) 목록1 목록2 목록3 목록4 var 변수는 함수 스코프이기때문에 계속 4가 출력됨 for(var i = 0; i < lis.length; i++){ lis[i].onclick = function(){ console.log(i); //4 } } for(var i = 0; i < lis.length; i++){ (function(x){ lis[x].onclick = function(){ console.log(x); //4 } })(i); } let 변..
JS | AJAX (비동기 통신)
·
JavaScript
AJAX(Asynchronous Javascript and XML) 비동기적 자바스크립트 그리고 xml 은 웹페이지의 이동없이 필요한 데이터만 전송하는 기술 ( 화면이동없이 데이터만 전송하는 기술 )입니다. 비동기란 ? 동기란 ? 함수를 실행하면 a함수 끝나고 -> b함수 끝나고 -> c함수 끝나고 이렇게 순서대로 실행하는 방식 블로킹 / 논블로킹 - 함수가 실행되는 도중에 침범할 수 있다 / 없다 함수가 동기와 달리 이전 함수가 끝나길 기다리지 않고 한꺼번에 실행된다! 서버(=자바)와 서버 통신, 클라이언트와 클라이언트 통신 일반적인 경우 데이터 처리는 요청 순서대로 진행하지만 AJAX는 순차적으로 진행하지 않습니다. 이런 방식을 비동기 방식이라고 합니다. 공공데이터 포털 -> 오픈 API 만 사용 가..
JS | 세션(session)
·
JavaScript
쿠키와 세션 : 정보를 지속적으로 유지하기 위한 수단 js 세션 : 브라우저측의 세션 localStorage와 sessionStorage은 브라우저의 키 = 값 형태로 데이터를 저장하는 브라우저 측의 세션입니다. localStorage는 브라우저를 종료하더라도 지속됩니다. (영구지속) sessionStorage는 브라우저를 종료하면 사라집니다. 쿠키와 다른 점은? - 쿠키는 서버간 전송이 가능합니다. - 스토리지는 브라우저에서만 사용 setItem(key, value) – 키-값 쌍을 보관합니다. getItem(key) – 키에 해당하는 값을 받아옵니다. removeItem(key) – 키와 해당 값을 삭제합니다. clear() – 모든 것을 삭제합니다. key(index) – 인덱스(index)에 해당..
JS | 쿠키(🍪cookie)
·
JavaScript
쿠키와 세션 : 정보를 지속적으로 유지하기 위한 수단 https://ko.javascript.info/cookie 쿠키와 document.cookie ko.javascript.info js 쿠키(🍪cookie) 쿠키를 문자열로 받음 예제 1 ) 🍪 Cookie의 이름과 🍪 Cookie의 값을 입력 받아 🍪 쿠키를 만들고 🍪 Cookie의 이름을 검색해서 🍪 Cookie 찾기 🍪 1번 🍴 html Cookie Name : Cookie Value : 쿠키 만들기 script //// document.cookie = "키=값"; //// document.cookie = "키=값; expires = UTC스트링시간타입"; //var date = new Date(); //date.setMinutes(date.ge..
JS | 콜백함수 (매우중요)
·
JavaScript
콜백함수 프로그램 사이에서 약속되어 있는 함수 호출하면 다시 거기다가 결과를 내가 돌려줄게! geolocation이 콜백함수가 아님 success fail이 콜백함수임 콜백함수