웹어플리케이션 4

웹어플리케이션_Chapter06_날씨 어플리케이션 제작

이번 챕터는 Open Weather API를 이용해서 날씨 데이터를 받아와 날씨 웹 어플리케이션을 제작하는 것을 배울것이다. 기본 용어 웹 어플리케이션을 제작하기 위해 기본적으로 숙지해야 할 용어들이 있다. API Application Programming Interface의 약자로 두 개의 어플리케이션이 서로 통신하는 방법(요청과 응답)을 정의하는 것이다. JSON JavaScript Object Notation Key/ value 형식을 전달하기 위해 정의된 형식으로 {키 : 값, 키 : 값} 의 형태로 여러 쌍을 저장한다. Open Weather API Open Weather은 40,000개 이상의 기상 관측소 데이터 기반으로 70,000개의 도시의 현재 날씨 정보를 제공한다. https://ope..

웹어플리케이션_Chapter05_JQuery3 : 이벤트&애니메이션

이벤트 : 마우스, 키보드, 포커스, 내용의 변화가 발생했을 때 변화한 대상 애니메이션 : 숨기기와 보이기, 애니메이션 생성, 예약 함수 0.이벤트 이벤트 바인딩 JQuery는 이벤트 바인딩을 위한 다양한 방법을 제공한다. 다음 예제는 id가 'button'인 요소에 클릭이벤트 핸들러를 바인딩하는 다양한 방법이다. $('#button').click(function(e){ //수행할 기능 }); $('#button').on('click',function(e){ //수행할 기능 }); document.querySelector('#button').addEventListener('click',function(e){ //수행할 기능 }); 이벤트 제거와 강제 실행 .off() 메소드는 더 이상 사용하지 않는 이벤..

웹어플이케이션_Chapter04_JQuery 2

1. 객체 속성 조작 태그 내의 내용 변경하는 방식이다. 각 속성에 Text / HTML / INPUT 인자값에 값을 넣으면 Setter, 비워놓으면 Getter형식으로 작동한다. 속성 조작 Attribute .attr()로 사용하며 HTML 태그의 속성 값을 받아오거나 변경할 때 사용한다. 주로 img 태그의 src, a 태그의 href 등을 조작할 때 사용 Property .prop()로 사용하며 DOM의 상태 값을 받아오는데 사용한다. 임의의 변수를 저장할 때에도 사용 가능하다. 2. 객체 수치 조작 3. 객체 편집 종류 표기 설명 앞에 추가 ('#obj').before('안녕') ('안녕').insertBefore('#obj') 선택한 객체 전에 객체를 추가한다. 뒤에 추가 ('#obj').aft..

웹어플리케이션_Chapter01_개요

백엔드를 희망하는 사람도 어느정도의 프론트엔드 지식이 필요하다. 그렇기에 이번 카테고리는 웹 어플리케이션 시작품을 개발하는 것을 목표로한다. 그렇기에 웹퍼블리싱, 마크업 랭기지(HTML/ CSS) 및 UI 디자인 도구(Figma)와 JS기본 문법을 어느정도 알고 있어야한다. 1. JQuery(JavaScript Library) 자바스크립트를 더 편하게 사용할 수 있도록 만들어주는 라이브러리 브라우저의 호환성 지원, 애니메이션, 데이터 전송 등의 기능 포함 사용법 jQuery를 사용하기 위해서는 jQuery를 불러와야 하는데 2가지 방법이 존재한다. 다운로드방식 jQuery라이브러리를 다운로드하고 필요한 곳에 직접 파일을 넣어 Import하는 방식 https://jquery.com/download/ Dow..