JavaScript (24) 썸네일형 리스트형 잡다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. 모달 Element의 생성 / 삭제 / 추가 // 1. 생성 : createElement★★★ // --> 문법 : document.createElement("tagname"); // --> 하지만 이렇게 정의한것만으로는 아무일도 일어나지 않아. // --> 이걸 어디다 붙일건지가 중요!!!! function test1(){ // 1-1. 생성 const createLi = document.createElement("li"); const createBtn = document.createElement("button"); // 1-2. 정보변경 createLi.innerText = "li추가중"; createBtn.innerText = "이것이 버튼추가"; // 1-3. 스타일변경 createLi.classList.add("fs-2", "text-da.. DOM element 조작 ## body 하이하이 하이하이 하이하이 하이하이 하이하이 테스트1 테스트2 테스트3 테스트4 테스트5 테스트6 테스트7 테스트8 // 1. 텍스트 변경 : innerText function test1(){ const getX1 = document.getElementById("x1"); getX1.innerText = "내용변경. 아까 많이 했지이"; } // 2. 내용 조작 : innerHTML --> 사용금지!!!!!!!!! 딱, 한case 빼고 // ★ 초기화 할 때만 사용하도록 합니다아 ★ function test2(){ const getX1 = document.getElementById("x1"); // 2-1. 되긴돼. 하지마. // getX1.innerText = "innerText는 전부 .. DOM API★ // DOM API - 매우중요 // ★★★ element(= tag) 접근 방법 이건 남아있니? -> 아니 다 지워져.. 하이하이 하이하이 하이하이 하이하이 하이하이 반갑반갑 반갑반갑 반갑반갑 반갑반갑 반갑반갑 테스트1 테스트2 테스트3 테스트4 테스트5 테스트6 테스트7 테스트8 // 1.id로 접근 // getElementById : 얘만 단수 (어차피 ID는 무조건 하나만 생성이니까 머..) // ---> ID가 없을 때 : null리턴 // getElements... : 나머지는 복수 -> 리스트를 리턴해준다 (ex. getElementsByClassName) // ---> class가 없을 때 : 배열을 리턴, 내용은 없으니까 반복문이 안돌아가겠지 function test1(){ // docu.. DOM Basic // HTML DOM 관련 // 1. getElementById ★★★ // document.getElementById("box1").innerText = "이러면 box1이 body에있으니까 box1에 해당하는 값이 없어서 null exception."; // --> 그래서 리스너가 필요하다@! // 1-1. addEventListener ★★★ // --> 대상 DOM 요소에 이벤트를 바인딩하고 해당 이벤트가 발생했을 때 실행될 콜백 함수(이벤트 핸들러)를 지정 // eventTarget.addEventListener('eventType', function / functionName [, useCapture]) // 대상객체.addEventListener(이벤트명, 실행할이벤트리스너, 이벤트전파방식).. 이전 1 2 3 다음