JavaScript/DAY 39 _ 23.10.16 (4) 썸네일형 리스트형 잡다API // 내장 객체들 : window(최상위객체), document, history, location ... // 1. history function test1(){ // 1-1. 뒤로가기 (보통 한페이지만 뒤로가니까ㅎㅎ) history.back(1); // == history.go(-1); } // 2. location function test2(){ // 2-1. JS의 a tag처럼 이동가능 // location.href = "https://www.naver.com"; // 2-2. 현재 내위치 확인 alert(location.href); } // 3. window - 모르겠다 패스! function test3(){ var a = 10; console.log(a); console.log(window.a.. JQuery Basic ** 제이쿼리(jQuery) : - 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리 - 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 수 있음 - 이전까지배운 JS는 바닐라JSON이었음. 이게 완벽하면 제이쿼리는 쉬울텐데! 일단 나는 JSON부터 제대로....ㅠ_ㅠ ** 제이쿼리의 사용 : - 제이쿼리 라이브러리를 추가해야 합니다 - 방법은 여러가지가 있지만 대표적으로 아래의 세 가지 방법을 많이 사용합니다. ** 적용방법 1 : API를 직접 다운받아 사용 적용방법 2 : (구글)CDN을 이용하는 방법★★★ 적용방법 3 : jquery에서 제공하는 최신 버전의 jQuery url 가져오기 ** JQuery (강사님 요약) - 전세계적으로.. Event객체 // 1. querySelector || getElement.... 활용 // --> 정말 쌩뚱맞은 곳에 있는 것들(ex. 모달) 컨트롤 하기 좋음 function test1(){ document.querySelector("#x1").innerText = "test1 : querySelector || getElement.... 활용"; } // 2. this 활용 // --> 자기자신을 기준으로 하고 싶을 때 function test2(targetElement){ targetElement.innerText = "test2 : this활용"; } // 3. event내장 객체 활용 // --> 주요정보 : 대상 element, 마우스 좌표값, 키(ex. enter, click..)... 등등 상당히 상세한.. 예제] 레시피, 게시판, 모달 1. 레시피 입력양식 추가 한식 중식 일식 삭제 글쓰는 공간 2. 게시판 글 제목 리스트 새로고침 1 하이이이이이이 한조 2023.10.16 3. 모달 이전 1 다음