https://jquery.com/ 여기서 바로 다운로드 해주면 되는데, jQuery의 특징중 하나로 브라우저 호환이 잘 된다는 점이 있다! 이 장점때문에 실제로 많이 쓰였다고 하는데, 현재는 React가 대세라고 한다. 다운로드시에는 production ver가 아닌 development version을 받아준다. production버전은 라이트해서 개발자에겐 맞지 않다고 한다. slim버전은 ajax기능 (비동기처리) 없으므로 X!! 나는 uncompressed버전을 받았다. 파일이뜨면 오른쪽마우스버튼 - 저장! head안에 이렇게 써주면 로드 성공! jQuery 기본선택자 안녕1 안녕2 안녕3 안녕4 안녕5 기본선택자 btn1.addEventListener('click',()=>{ //const $..
fetch - XMLHttpRequest(=callback방식으로 전달하는 객체)의 callback 방식을 개선해 Promise를 통한 then절에서 응답결과를 처리할 수 있다. btn1.onclick = () => { console.log( fetch(USER_URL) .then((response) => { console.log(response); return response.json(); // message body 적힌 부분을 추출하는 promise가 한 단계필요하다. }) .then((data) => console.log(data)) ); }; USER_URL 은 {"id":"shqkel","company":"KH정보교육원","classroom":"M","cnt":1} 라는 값을 가진 데이터이다...
Web Storage 웹서버에 많은 정보를 Client에 저장해 두는 것. localStorage 도메인별로 관리 . 직접 삭제하기 전까지 영구적으로 보관 sessionStorage 도메인별로 관리. 접속한 동안만 데이터를 유지 Cookie와 다른점 크기에 제한이 없음 - cookie는 4KB , Web Storage는 제한이 없음. 서버로 보내지지 않음 - Cookie는 HTTP Request에 의해 자동으로 서버에 전송이 되지만 Web Storage는 전송되지 않음. 유효기간의 제한이 없음 - Cookie처럼 특정 기간이 지나면 자동으로 삭제되지 않음. JavaScript 객체를 저장할 수 있음 localStorage로 CRUD(Create Read Update Delete) 기능 만들기 1. Cre..
정규표현식(RegExp : Regular Expression) 특정 규칙을 가진 문자열 집합에 대한 표현식. 유효성 검사, 검색, 문자열 대체 등에 유용 언어독립적. 간결하게 복잡한 조건을 검사가능. 문법자체가 복잡하므로 학습 비용이 비교적 높음 정규표현식 객체 생성하기 정규표현식 객체 btn1.addEventListener('click',(e)=>{ //숫자포함여부 검사용 정규표현식 const regexp1 = /[0-9]/gi; const regexp2 = new RegExp(/[0-9]/gi); const regexp3 = new RegExp("[0-9]","gi"); console.dir(regexp1); console.dir(regexp2); console.dir(regexp3); }); 모두 ..
Event (이벤트) 문서가 모두 로딩되었을때 window의 load이벤트 발생! window.onload와 body.onload는 동일하다. window.onload=()=>{ const h2=document.createElement("h2"); h2.append(document.createTextNode("Hello Friday~")); target.append(h2); //Uncaught ReferenceError: target is not defined -> 위에서부터 아래로 해석 }; event 웹페이지 상에 일어나는 모든 사용자의 action, 네트워크상 처리상태변화 등 event라는 이름으로 하나의 이벤트로 관리됨. event -> eventHandler : 이벤트가 발생하면, 태그에 등록된..
window객체 웹페이지의 모든 자원을 관리하는 객체 BOM (Browser Object Model) navigator, location, history, screen, XMLHttpRequest, frames ... DOM (Document Object Model) document (html로 부터 변환된 객체) Javascript (Object, String, Array, ...) 오늘은 이렇게 배워봤다. window 객체 웹페이지의 모든 자원을 관리하는 객체 (최상위) F12콘솔창에 this를 검색하면, 다음과 같이 window 가 가진 객체들이 뜬다. 그외에도 window.Object , window.Array, window.String 등등 검색이 가능하다. window객체는 페이지에 대한 관리..
구조분해할당(Destructuring Assignment) 구조가 있으면 그걸 해체 후 변수에 대입( assign ) 구조 분해하기 const arr=[1,2,3]; const a=arr[0]; const b=arr[1]; const c=arr[2]; console.log(arr,a,b,c); 보통 이렇게 값을 표현했었다. const [a,b]=arr; console.log(arr,a,b); 필요없는 번지수 생략 가능 (c가 생략됨) const[a, ,b]=arr; console.log(arr,a,b); 변수 생략시 해당 인덱스 값은 버리게 된다. (1,3 출력) const[a,b,c,d]=arr; console.log(arr,a,b,c,d); 없는 변수 d를 호출하더라도, 인덱스는 undefined를 ..
자유변수 & 클로져 함수 자유변수 (Free Variable) 함수 내에 선언되지 않은 변수 const test1 = () => { const greeting = '오늘 날씨 정말 좋다~'; // say의 지역변수 : name, word const say = (name) => { const word = '안녕,' + name; console.log(word); console.log(greeting); }; say('영희'); }; 여기서 say의 지역변수는 name과 word. 그렇다면 greeting은 ? 함수 내에 선언되지 않은 자유변수이다. 클로져 함수 (Closure Function) 필요한 변수를 모두 갖고 외부로부터 닫힌 함수. (지역변수, 자유변수) const test2 = () => { c..
