본문 바로가기

전체 글

 (89)
JS #16- 웹 API 6 비동기통신 (promise) 동기적 통신 : 내가 하나의 데이터만 필요하더라도, 모~든 데이터가 동기적으로 통신되는 것 모든 데이터가 다시 들어오니까, 모든 화면을 브라우저가 다시 그려야한다. 비동기적 통신 : 필요한 데이터에 대해서만 JSON 파일로 주고받으며 서버와 통신한다. = '문자화' 시켜준다. 비동기 통신 API body를 직접 실어서 보내줘야지 실행할 수 있다. 확장프로그램 thunder를 다운받아서 get 주소에 넣고 send const xhr = new XMLHttpRequest(); xhr.open('GET', END_POINT) //통신방식, 통신할 대상 , POST할때는 body를 함께 전달 ㄴ POST형식으로 받을 때는 body를 함께 전달해야한다. XMLHttpRequest import {} from './..
JS DOM/스타일/이벤트 정리 DOM / 스타일 1. node 가져오기 let node = document.querySelector('.first'); console.log(node); 2. class에 접근하기 2-1) 클래스 이름 추출 let node = document.querySelector('.first'); console.log(node.className); 2-2) 클래스 리스트 추출 (클래스가 여러개인 경우 배열로 추출) let node = document.querySelector('.first'); console.log(node.classList); classList.add : 클래스 추가 classList.remove : 클래스 삭 classList.contains : 존재여부를 확인 (T/F 반환) 3-1. 표준 ..
JS #15- 웹 API 5 (주접생성기, 랜덤다이스 프로그램) 두 프로젝트 모두 모듈프로그래밍을 기초로 둔다. 주접생성기 (main.js) import { copy, shake, getNode, addClass, showAlert, getRandom, insertLast, removeClass, clearContents, isNumericString, } from "./lib/index.js"; import jujeobData from "./data/data.js"; // 모듈 프로그래밍 사용해서 // [phase-1] // 1. 주접 떨기 버튼을 클릭할 수 있는 핸들러를 연결해 주세요. // - button click addEventListener // 2. input 값을 (콘솔에)가져와 주세요. // - input value console.log // 3. j..
JS #14- 웹 API 4 (jquery, swiper, 계산기, 모듈프로그램) jQuery jquery 1. 자바스크립트 엔진이 버전업 하면서 문법이 쉬워짐 2. 느림. 엔진 무거움 3. Single Page Application 웹사이트 구현 못 //jquery $('.navigation').on('click', 'li', function(e){ //이벤트명, 찾을요소 e.preventDefault(); const index = $(this).attr('data-index'); $('.visual img').attr('src', `./assets/part01/${data[index-1].src}`); $('.visual img').attr('alt', data[index-1].alt) $('.navigation > li').removeClass('is-active'); // 네비..
JS #13- 웹 API 3 (DOM- 이벤트) 브라우저 이벤트 addEventListener('event', handler함수); + 마우스 이벤트 blur : 마우스가 떠났을 때 이벤트 발생 DOM프로퍼티를 통한 이벤트 설정 function handler() { console.log('클릭 이벤트 발생'); } first.onclick = handler; // 온클릭 속성에게 핸들러 함수를 전달 실행X first라는 dom 변수의 onclick 속성에다가 handler함수를 실행하지 않고 전달하면, 해당 이벤트가 실행될 때마다 handler 함수가 실행된다. >>제거하고 싶다면, onclick = '' null 값을 할당한다. addEventListener : 이벤트 설정 node.addEventListener(evet, handler함수, [op..
JS #12- 웹 API 2 (DOM- 속성과 프로퍼티, 클래스와 스타일) document.documentElement는 html을 뜻한다. firstChild,lastChild, childNodes를 통한 자식 노드 탐색... 등등을 할 수 있다. (이터럴) 자식 노드(child node, children) 는 바로 아래의 자식 요소를 나타냅니다. 자식 노드는 부모 노드의 바로 아래에서 중첩 관계를 만듭니다. 와 는 요소의 자식 노드입니다. 후손 노드(descendants) 는 중첩 관계에 있는 모든 요소를 의미합니다. 자식 노드, 자식 노드의 모든 자식 노드 등이 후손 노드가 됩니다. document가 null으로 나오는 경우 = 해당 노드가 없다. 탐색 프로퍼티를 이용한 이웃노드로의 이동, 탐색 프로퍼티는 크게 두개의 집합으로 나뉜다. 모든 노드에 적용 가능한 parent..
JS #11- 웹 API 1 (BOM, DOM) Location 객체 Navigator 객체 const { platform, userAgent, language, onLine, geolocation } = navigator; navigator.geolocation.getCurrentPosition((data) => { //위치를 찾음 console.log(data) }) 위도, 경도 콘솔에 출력하기 const { platform, userAgent, language, onLine, geolocation } = navigator; navigator.geolocation.getCurrentPosition((data) => { //위치를 찾음 const {latitude:lat, longitude:long} = data.coords; console.log(..
JS #10-자바스크립트 기초 개념10 (string, array 메서드) String의 특징 인덱스로 접근이 가능하다. // 부분 문자열 추출 let slice = msg.slice(1, -1); //문자를 잘라내는데, 마이너스값이 된다. console.log(slice); let subString = msg.substring(1, 5); //문자를 잘라내는데, 마이너스값이 안된다. console.log(subString); let subStr; //레거시한 아이다. // 문자열 포함 여부 확인 let indexOf = msg.indexOf('is'); //현재 메세지에 해당 메세지가없으면 '-1'반환, 있으면 인덱스 반환 let lastIndexOf; let includes = msg.includes('Less'); //문자열이 있는지 확인 후 True of False가 나..

티스토리툴바