분류 전체보기
[자바스크립트] 날씨 정보 가져오기, Geolocation API
[자바스크립트] 날씨 정보 가져오기, Geolocation API
2021.07.09날씨 추가하기, geolocation API geolocation API는 사용자의 현재 위치 정보를 가져올 때 사용하는 자바스크립트 API이다. 사용자의 위치를 지도에 표시하거나, 사용자 근처의 상점을 찾아주는 등의 위치기반 서비스를 할 수 있다. 그러나 이러한 정보는 사용자의 동의를 꼭 구하고 사용해야 한다. Geolocation.getCurrentPosition() 장치의 현재 위치를 가져오는 메소드이다. 기본 문법 navigator.geolocation.getCurrentPosition(success[, error[, [options]]) success 함수는 GeolocationPosition 객체를 유일한 매개변수로 받는 콜백 함수이다. Geolocation API 메소드 Method 설명 g..
[자바스크립트] 노드의 관리, appendChild(), createElement(), createAttribute() 등
[자바스크립트] 노드의 관리, appendChild(), createElement(), createAttribute() 등
2021.07.08노드의 관리 JS로 노드의 추가, 생성, 등을 알아보자 노드의 추가 appendChild() appendChild() 메소드는 새로운 노드를 해당 노드의 자식 노드 리스트(child node list)의 맨 마지막에 추가한다. See the Pen appendChild by Wonjun Hwang (@dittoh) on CodePen. insertBefore() insertBefore() 메소드는 새로운 노드를 특정 자식 노드 바로 앞에 추가한다. 기본 문법 부모노드.insertBefore(새로운자식노드, 기준자식노드); 새로운 자식 노드 : 자식 노드 리스트(child node list)에 새롭게 추가할 자식 노드를 전달 기준 자식 노드 : 새로운 노드를 삽입할 때 기준이 되는 노드로, 이 노드 바로 ..
[자바스크립트] milliSeconds를 시/분/초로 변환하는 법
[자바스크립트] milliSeconds를 시/분/초로 변환하는 법
2021.07.07milliSeconds를 시, 분, 초로 변환 시간 계산하면 milliSeconds 상태에서 계산하게 된다. milliSeconds -> 시(Hours) ((milliSeconds / (1000 * 60 *60 )) % 24 ); milliSeconds -> 분(Minutes) ((milliSeconds / (1000 * 60 )) % 60 ); milliSeconds -> 초 (Seconds) (milliSeconds / 1000 ) % 60 ; 요약 const days = Math.floor(gap / (1000 * 60 * 60 * 24)); // 일 const hour = String(Math.floor((gap/ (1000 * 60 *60 )) % 24 )).padStart(2, "0"); //..
[자바스크립트] Date 객체
[자바스크립트] Date 객체
2021.07.06Date 객체와 날짜 Date 객체는 날짜를 저장할 수 있고, 날짜와 관련된 메서드도 제공해주는 내장 객체이다. Date 객체를 활용하여 시간과 날짜를 출력할 수 있다. 객체 생성하기 new Date()를 호출하면 새로운 Date 객체가 만들어진다. new Date() 인수 없이 호출하면 현재 날짜와 시간이 저장된 Date 객체가 반환됩니다. let now = new Date(); alert( now ); // 현재 날짜 및 시간이 출력됨 new Date(year, month, date, hours, minutes, seconds, ms) 주어진 인수를 조합해 만들 수 있는 날짜가 저장된 객체가 반환됩니다(지역 시간대 기준). 첫 번째와 두 번째 인수만 필수 값이다. year는 반드시 네 자리 숫자여야 ..
[자바스크립트] Math 객체
[자바스크립트] Math 객체
2021.07.06Math 객체 Math는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체이다. Math 객체는 생성자 함수가 아니다. Math의 모든 속성과 메서드는 정적이다 Math는 Number 자료형만 지원하며 BigInt와는 사용할 수 없다. Math 메소드 1. Math.abs(x) 인수의 절댓값을 반환한다. Math.abs(-1); // 1 Math.abs('-1'); // 1 Math.abs(''); // 0 Math.abs([]); // 0 Math.abs(null); // 0 Math.abs(undefined);// NaN Math.abs({}); // NaN Math.abs('string'); // NaN Math.abs(); // NaN 2. Math.round(x) 소수점을 반올림하여 ..
[자바스크립트] setInterval(), Date(), padStart(), 시/분/초 구하기
[자바스크립트] setInterval(), Date(), padStart(), 시/분/초 구하기
2021.07.06setInterval(), Date(), padStart(), 시/분/초 구하기 intervals와 timeout에 대해서 알아보자 setInterval(function, milliseconds) 함수를 지정한 시간 주기마다 반복 호출하는 메소드 사용 경우 갤러리 형식의 뷰를 만들어서 이미지를 정해진 시간 간격으로 바꾸어 적용하는 경우 일정 시간 간격으로 배너 광고를 바꾸면서 보여줄 경우 일정 주기로 계속해서 서버와 통신이 필요한 경우 사용 예 : setInterval(sayHello, 5000); clearInterval(변수) setInterval를 종료시키는 메소드 즉, 생성한 타이머 함수를 제거하는 메소드 A script on this page starts this clock: Stop time ..
[자바스크립트] Map과 Set
[자바스크립트] Map과 Set
2021.07.05맵과 셋 객체 : 키가 있는 컬렉션을 저장 배열 : 순서가 있는 컬렉션을 저장 맵(Map) 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. 키가 있는 데이터를 저장한다는 점에서 객체와 유사하다. 맵은 키에 다양한 자료형을 허용한다는 점에서 차이가 있다. 즉, key-value의 쌍을 저장하며 각 쌍의 삽입 순서도 기억하는 컬렉션이다. 맵은 객체와 달리 키를 문자형으로 변환하지 않는다. 키에 자료형 제약이 없다. const array1 = [1, 4, 9, 16]; // pass a function to map const map1 = array1.map(x => x * 2); console.log(map1); // expected output: Arr..
[자바스크립트] window 창 크기
[자바스크립트] window 창 크기
2021.07.04자바스크립트 window 창 크기 컨트롤 윈도우 크기 창 크기를 알아보자. window.innerWidth : 브라우저 화면의 너비 window.innerHeight : 브라우저 화면의 높이 window.outerWidth : 브라우저 전체의 너비 window.outerHeight : 브라우저 전체의 높이 const body = document.querySelector("body"); function handleResize() { const length = window.innerWidth; if (length 800 && length < 1200) { body.className = "medium"; } el..
[자바스크립트] 이벤트 등록, addEventListener()
[자바스크립트] 이벤트 등록, addEventListener()
2021.07.04이벤트란? 사용자(사람)와 상호 작용을 하면서 마우스(키보드, 터치, 펜 등)를 조작하면 그에 대한 반응을 하는 것 특정 이벤트가 발생되었을 때, 특정 함수를 실행할 수 있게 해주는 것이 addEventListener이다. 자바스크립트 이벤트 처리 방법 3가지 1. HTML 요소의 속성으로 등록 이벤트를 단 하나밖에 지정할 수 없다는 단점이 있다. 2. DOM 요소의 프로퍼티로 등록 위와 동일 단점이 있다. let btn = document.getElementById("button"); btn.onclick = btnClick(); 3. addEventListener 사용하여 등록 여러 개의 이벤트를 등록할 수 있다. addEventListener("이벤트") 기본 문법 const title = docu..
[자바스크립트] 배열과 메서드
[자바스크립트] 배열과 메서드
2021.07.04배열과 메서드 배열 메서드에 대해서 알아보자 요소 추가·제거 메서드 arr.push(...items) : 맨 끝에 요소 추가 arr.pop() : 맨 끝 요소 제거 arr.shift() : 맨 앞 요소 제거 arr.unshift(...items) : 맨 앞에 요소 추가 1. arr.splice(start) delete arr[1];를 사용해서 배열을 삭제하면 key에 상응하는 값만 지우기 때문에 빈 공간을 나머지 요소들을 메워지는 않는다. 요소가 삭제되면서 배열 길이도 짧아지려는 어떻게 해야 할까? arr.splice(start)을 사용하면 된다!! 기본 문법 arr.splice(index[, deleteCount, elem1, ..., elemN]) 첫 번째 매개변수는 조작을 가할 첫 번째 요소를 가리..
[자바스크립트] 배열
[자바스크립트] 배열
2021.07.04배열 배열이란 순서가 있는 컬렉션을 저장할 때 쓰는 자료구조이다. 배열 선언 let arr = new Array(); let arr = []; // 대부분 이 방법을 사용해서 선언한다. let fruits = ["사과", "오렌지", "자두"]; // 초기 요소를 넣을 수 있다. 배열 수정 fruits[2] = '배'; // 배열이 ["사과", "오렌지", "배"]로 바뀜 새로운 요소 추가 fruits[3] = '레몬'; // 배열이 ["사과", "오렌지", "배", "레몬"]으로 바뀜 배열의 길이 알아내기 :: length let fruits = ["사과", "오렌지", "자두"]; alert( fruits.length ); // 3 // 요소에 여러 가지 자료형이 섞여 있다. let arr = [ '..
[자바스크립트] 문자열 및 관련 메소드
[자바스크립트] 문자열 및 관련 메소드
2021.07.04문자열 자바스크립트엔 글자 하나만 저장할 수 있는 별도의 자료형이 없다. 문자와 문자열의 자료형은 하나로 같다 백틱 문자열은 작은 따옴표, 큰 따옴표, 백틱으로 감쌀 수 있다. 백틱으로 감싼 문자열 중간에 표현식을 ${…}사용하면 문자열 중간에 쉽게 삽일할 수 있다. 이를 템플릿 리터럴(template literal)이라고 부른다. function sum(a, b) { return a + b; } alert(`1 + 2 = ${sum(1, 2)}.`); // 1 + 2 = 3. 백틱을 사용하면 문자열을 여러 줄에 걸쳐 작성할 수 있다. let guestList = `손님: * John * Pete * Mary `; alert(guestList); /* 출력 손님: * John * Pete * Mary *..