공부 및 일상기록

먼저 입력할 html을 만든다. 여기에 만들어 보자! 현재 기온 : 이렇게 먼저 구성을 해본다. 다음은 오픈 api를 이용하여 데이터를 받아온다. 여기서는 스파르타코딩클럽에서 제공한 날씨 api를 사용한다. icon의 경우 이미지 파일이기 때문에 이미지 코드를 입력 했다. jQuery 임포트가 꼭 필요하다.

페이지가 로딩 후 실행되게 하는 jQuery 기능이 있다. $(document).ready(function () { alert('다 로딩됐다!') }); 위 코드를 복사해서 안에 붙이면 페이지가 실행될 때 알럿이 뜨게 된다.

ajax를 통해 랜덤 이미지와 텍스트가 부여된 api에서 이미지 및 텍스트를 받아와 표현하는 방법이다. 위 예시는 q1함수에 이미지와 텍스트를 받아서 변환하는 기능을 입력하였고 버튼을 onclick 시 q1함수가 발동되도록 하였다. (html은 너무 길어서 가져오지 않았다.) 1. GET방식을 통해 api에서 어떤 형태로 자료를 주는지 먼저 console.log(response)를 찍어서 데이터 형태를 먼저 본다. 2. msg에 텍스트가, url에 이미지가 있음을 확인 하였으면 받아온 값을 각각 선언해 준다. 3. 다음과 같이 원하는 ID위치를 넣고 이미지 url 또는 넣고싶은 text를 넣는다. //이미지 변환 $("#ID값입력").attr("src", '이미지 url'); //텍스트 변환 $("#ID..

jQuery란 HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리 미리 작성된 Javascript 코드를 가져다 쓰기 때문에 사용전에 꼭 임포트 해야한다. 다음 주소에서 jQuery CDN 부분을 참고해서 임포트 한다. https://www.w3schools.com/jquery/jquery_get_started.asp jQuery Get Started W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, an..