본문 바로가기

Web Front-end/javaScript

(5)
날씨(openWeather) API로 날씨정보 가져오기 openWeather API로 현재 날씨정보를 가져오기. 1. openWeather 사이트 접속, 현재 날씨를 가져올수 있는 api인 current Weather Data를 참조한다. https://openweathermap.org/current 2. 날씨를 불러올수 있는 방법이 아래와 같이 나와있다. 여기서 api키는 회원가입 후 my api keys를 확인하면 된다. https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key} 3.우선 현재 장치의 위치를 가져와야한다. 다음은 브라우저에서 제공하는 JS의 Geolocation API 메서드이다. success와 error 부분은 콜백함수로 position을 매개변..
자바스크립트 배열 다루기(sort, join) 1.Sort() Number 정렬하기 const data = [3, 1, 33, 6, 12, 1152, 92] const sort = data.sort() console.log(sort) // 1, 1152, 12, 3, 33, 6, 92 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따르기 때문에 위와 같이 결과가 나온다. 오름차순 정렬하기 const sortAscending = data.sort(function (a, b) { return a - b }) console.log(sortAscending) //1,3,6,12,33,92,1152 내림차순 정렬하기 const sortDescending = data.sort(function (a, b) { return b - a }) console.log..
and , or 연산자로 코드 짧게 쓰기( &&, || ) [1] or 연산자 //테스트용 객체 const person = { name: "한국인", age: 20, job: "student" } or연산자는 첫번째 값이 존재하면 첫째값을 return , 그렇지 않으면 두번째 값을 리턴 기본값 설정할때 많이 사용 console.log(person.name || '이름이 없습니다.') //한국인 console.log(person.address || '주소가 없습니다.') //주소가 없습니다. [2] and 연산자 && 연산자는 두개의 값이 모두 참이면 마지막값을 return, 둘중에 하나라도 false면 false를 리턴 특수한 상황의 조건문에 많이 사용 console.log(person.age < 20 && '운전불가능'); //false console.log(..
JavaScript - Hoisting 이란? (var , let , const) 자바스크립트에는 호이스팅이란것이 있습니다. 말 그대로 끌어올리는것인데요. 간단하게 호이스팅의 개념과 var, let, const의 차이점에 대해 알아보도록 하겠습니다. 우리는 코딩을 할 때 변수를 먼저 선언하고나서 선언한 변수를 사용할 수 있습니다. c, java 등 대부분의 언어에서요. 이는 우리가 작성한 코드를 컴퓨터가 해석할 때 위에서 부터 아래로 읽어오기 때문입니다. (절차적 프로그래밍) var sum = 10 //변수의 선언, 할당 console.log(sum) 자바스크립트는 굉장히 유연한 언어인데, 그렇게 만들어주는 기능중의 하나가 호이스팅입니다. 자바스크립트 엔진은 코드를 실행하기 전 모든 선언부의 스코프를 최상단으로 끌어오게 됩니다. 따라서 아래와 같이 console.log를 실행하고 나서..
Ajax통신을 활용한 json 데이터 불러오기(get 방식) ajax를 이용하여 json데이터를 불러오는 방법을 알아보도록 하겠습니다. 그림과 같이 버튼을 누르면 json데이터를 불러옵니다. 짱쉬움 xmlHttpRequest, axios , fetch 등 다양한 방법이 있지만 본 게시글에서는 ajax를 쓰기위해 제이쿼리를 사용하도록 하겠습니다. 제이쿼리를 써야하므로 html 헤드 영역에 아래와 같은 소스를 삽입하겠습니다. 본문 내용은 다음과 같이 작성해보겠습니다. 순번 이름 전화번호 주소 상태 비고 날짜 json 불러오는 버튼 별다른건 없고 테이블 내용에 table_body라고 class명을 주었습니다. 버튼을 클릭하면 getJSON()이라는 자바스크립트 함수가 실행됩니다. 별다른건 없고 제이쿼리의 $.each() 반복문을 이용하여 받아온 data값을 배열형태로 ..