학원 일기/학원-JavaScript (16) 썸네일형 리스트형 JS로 API사용방법 핵심 openAPI로 실습하였다 API를 제공하는 사이트를 들어간다 사용하고싶은 API를 찾고 사용방법을 읽는다 (이과정이 가장 어렵고 중요하다) 사실 세부적인 내용하나하나가 발목을 잡을수있기때문에 모두 중요하지만 일반적으로 흐름을 찾아보자면 -해당 API는 어떠한방식으로 사용가능한지 확인한다 ex) JavaScript, REST API.. -API를 호출할수있는 권한을 어떻게 얻을수있는지 확인한다 -script 또는 파일저장또는 fetch방식을 통하여 제공하는 기능사용 또는 데이터를 불러온다 -우선 필요한 기능이 구현된 코드를 그대로 가져온다 그다음 중요한것 -해당 API에서 파라미터별 제공하는 기능에대해 이해하여 알맞게 사용한다 -해당 API의 기능에서 출력값을 결정하는 부분이 어떤것인지 이해하고 본인의 .. JS11 ctrl+k ctrl+f JS11 fetch("경로) 를통해 promise 객체 반환 해당객체는 성공,실패,보류 상태중 하나를 나타내고있다 promise객체의 속성을통해서 비동기식으로 함수를 사용할수있다 엔드포인트파라미터 - 내가필요한 값만 가져올수있게만드는 파라미터 - 해당api를 제공하는 사이트에서 제공하는 메서드?? 예를 들어 파라미터 명과과 해당파라미터에 넣을수있는 함수가담긴값 목록이 적혀있고 그옆에는 Discription 이라고 설명이 적혀있다 참조한 페이지 >>https://yts.mx/api#list_movies JS10 CallBack함수 - 나중에 호출되는 함수 특징 - 콜백함수라는 이유로 특별한 선언또는 문법을 가지고 있지않다. - 콜백함수도 일반적인 스크립트 함수다. - 개발자가 함수를 호출하는것이아니다 , 개발자는 이함수를 등록하기만한다 특정이벤트 또는 특정 시점에 도달했을때 시스템이 직접 호출하는 함수이다 (= 이걸 나중에 호출되는 함수라고 이해할수 있는것 같다) 여기서 특정시점이아닌 특정이벤트라는문구가 있다는것은 등록후 시간이지나 실행이된다는 의미만 가진것이아니다 ex) 태그에 이벤트핸들러를 onclick = "click()"를 추가해줬다면 이것또한 함수를등록하고 어떠한이벤트가 발생했을경우 시스템이 해당함수를 싱행시키는것이다. 좀더 구체적으로 블로그의 글을 인용해 정리를해보자면 Callback함수 - 바로실행.. JS9 객체.children - 부모의 자식노드를 전부 반환 setInterval ( 함수 , millisecond ) - 해당함수를 지정한시간마다 재실행 clearInterval(); - Interval 종료 setTimeout( 함수 , millisecond ) - 해당함수를 지정한시간이 지나면 실행 clearTimeout(); - Timeout 종료 Object.keys()메서드는 지정된 객체의 고유 한 열거 가능한 속성 이름 배열을 반환 하며 일반 루프와 동일한 순서로 반복됩니다. -출처 MDN Object.keys(JSON객체명).length; - JSON의 길이구하기 JS8 태그의 dataset 속성 태그에 data-key(이름상관없음) = "value" 를 추가하면 --> 해당객체의 datatset이라는 속성에 key는 키이름 value는 키값으로 추가된다 그래서 console.log(객체.dataset.key) 를 입력할경우 --> value를 출력한다. ( 여기서 브라우저의 console창에 출력되는 value는 단순 정보를 담은 문자에 불과하다 ) 이어서 value에 JSON형태의 값을 형식에맞춰(키와 값이 ""에 포함되게끔) 작성후 console.log(객체.dataset.key)을 입력할경우 --> {"키" : "값 , "키":"값"}의 문자를 출력한다 이제 해당 태그만 가져올수 있게된다면 JSON.parse(객체.dataset.key); 를이용해 해당 값을 JS.. JS7 스크립트 언어인 JS에서 코드작성시 길이가길어 행을바꾸고싶을때 "\" 백슬래쉬를 쓰면 이어줄수있다 객체.toggle("name") - 태그 class에 "name"이 있다면 삭제 없다면 추가 합니다. 상위태그에 이벤트핸들러를 부여하면 본인을포함한 하위모든태그에 동일한 이벤트가 부여된다 (단 list는 부모가 아니다 [ ex)qeurySelectorAll("id명")으로 가져온 객체는 배열이지 부모가아님! ] 이벤트위임 - 이벤트핸들러를 사용할때 함수안에는 항상 event객체가 전달된다 주의할점 - 의도하지않은 태그에도 이벤트핸들러가 작동한다 예방법 - event.target.tagName 값을 확인해서 해당반환값이 아닌경우 이벤트작동을 하지않게끔 설정을하면 원하는 자식 태그에만 이벤트를 설정하는 효과를 .. JS6 객체.parentElement - 부모 태그를 반환 객체.parentNode - 부모의 태그,text반환 ========== Element가 없으면 text까지반환 없다면 태그만 반환 한다 ======== 객체.nextElementSibling - 다음 형제 태그 반환 객체.previousElementSibling) - 이전 형제 태그 반환 객체.firstElementChild - 첫번째 자식 태그 반환 객체.lastElementChild - 마지막 자식 태그 반환 이벤트 헨들러에 this 매개변수를 전달해주는것을 응용하면 현재태그의 부모,자식,형제 태그를 자유롭게 지정할수있다 (함수안에서 동적으로 생성된 이벤트 핸들러에도 이벤트 핸들러를 추가할수 잇다) 부모객체.insertBefore(자식객체 1번, .. JS5 문자열을 태그처럼 작성하여 태그안에 태그를 추가할수있다 ex) var str = ; 변수명.innerHTML = str; document 태그관련 객체 createElement("태그명") - 새로운 태그의값을 변수에 추가한다 ex) var li = document.createElement("li"); 태그객체.appendChild("태그명객체") - 태그안에 태그를 추가한다 ex) li.appendChild(div 그결과 지속적으로 태그의 추가가 되지않았다 계속해서 새로운태그만 대입하고있는상태였다 정답을 보기이전까지 해결책을 찾지못한이유 -->함수가 실행될때마다 객체가 생성되는 코드는 항상 비효율적이라고 생각하여 함수안에 잦은 객체생성을 아예 하려고하지않았다. 하지만 이와같은경우에는 함수의재사용을 하면.. JS4 BOM - 브라우저 모든요소 DOM - document객체 (BOM의 하위속성) JSON데이터 저장방법 var 변수명 = JSON.stringify ({ 키이름 : 변수 }) or = [ {"키 이름" : " 값"}] js로 css사용 방법 - 변수.style.(속성) = "옵션" (단 , getElementsByClassName으로 가져온 변수일경우 [인덱스]를 꼭 활용해야 사용가능하다) 노드 - 데이터의 분기점 , 데이터의 접속점 list 생성방법 - var 변수명 = new Array() change특징 - 포커스가 풀리는 순간을 변화가 일어난시점으로 인식한다 이전 1 2 다음