Frontend/Javascript

반응형
Frontend/Javascript

[kh정보교육원 72일차] jQuery - event / traversing / css

event mouseover | mouseout : 자식 객체에 진입시, 탈출시에도 이벤트 발생 mouseenter | mouseleave : 자식개체에 진입시, 탈출(출차)시에는 이벤트 발생하지 않음 div 로 outer와 inner를 만들어 비교해보자. .outer{ width:200px; height: 200px; background-color: orange; padding: 50px; margin: 20px auto; } .inner{ width: 100%; height: 100%; background-color: tomato; } $(".outer") .mouseover((e)=>{ console.log("mouseover",e.target) }) .mouseout((e)=>{ console.l..

Frontend/Javascript

[kh정보교육원 71일차] jQuery - 제이쿼리 설치 / selector / atter / prop / filter

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 $..

Frontend/Javascript

[kh정보교육원 70일차] 개인미니프로젝트 - 홈페이지 만들기 / git으로 html파일 사이트 주소 생성하기

git 으로 html파일 사이트 주소 생성하기 먼저 git 에 들어가서 repository를 생성한다. repository 이름은 깃허브 아이디.github.io 그리고 https://git-scm.com/ 에 들어가서 git을 운영체제에 맞게 다운받는다. (Git 이랑 github 달라요) Git About The advantages of Git compared to other source control systems. Documentation Command reference pages, Pro Git book content, videos and other material. Downloads GUI clients and binary releases for all major platforms. Commu..

Frontend/Javascript

[kh정보교육원 69일차] Javascript - fetch / async / await

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} 라는 값을 가진 데이터이다...

Frontend/Javascript

[kh정보교육원 68일차] Javascript - Promise (프로미스)

Promise 기존 callback함수를 통한 비동기처리를 개선하기 위한 문법 producer/consumer 코드를 연결 - producer(비동기처리가 포함된 코드) - consumer(비동기완료 후 실행할 코드) 속성 status pending -> fulfilled(이행) / rejected(거부) result undefined -> value(이행할 경우) / error 객체 (거부될 경우) resolve : 이행시 호출할 콜백함수 (then에서 전달) - 실행시 PromiseState : fulfilled / PromiseResult : value reject : 거부시 호출할 콜백함수 (catch에서 전달) - 거부시 PromiseState : rejected / PromiseResult :..

Frontend/Javascript

[kh정보교육원 67일차] Javascript - Asynchronous (비동기처리) / Html5api - LocalStorage

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..

Frontend/Javascript

[kh정보교육원 66일차] Javascript - RegExp (정규표현식)

정규표현식(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); }); 모두 ..

Frontend/Javascript

[kh정보교육원 65일차] Javascript - Event(이벤트)

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 : 이벤트가 발생하면, 태그에 등록된..

Frontend/Javascript

[kh정보교육원 64일차] Javascript - window객체 , BOM, DOM

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객체는 페이지에 대한 관리..

Frontend/Javascript

[kh정보교육원 63일차] Javascript - 객체배열 (리터럴,생성자함수,prototype,속성비교), 상속

객체배열 - 리터럴 [{},{},{}] 이런 형태로 관리할 때 사용한다. const test1=()=>{ const pets=[]; pets.push({ name:'구리구리', breed: '푸들', weight: 3, age: 10, color:['white'], bark(){ console.log(this.weight); return this.weight< 10?'왈왈':'멍멍'; } }) pets.push({ name:'둘리', breed: '말티즈', weight: 6, age: 5, color:['white'], bark(){ console.log(this.weight); return this.weight< 10?'왈왈':'멍멍'; } }) pets.push({ name:'사랑이', breed:..

반응형
유경(shin-6-0)
'Frontend/Javascript' 카테고리의 글 목록