코딩 공부/Javascript

[Ajax] api실습

jQuery + Ajax 영화 데이터 요청 지도 api 사용해보기 차트 api사용해보기 날씨 정보 api 현재 날씨는? 날씨가져오기 날씨+차트 현재 날씨는? 날씨가져오기 //main.js function getData() { $.ajax({ url: 'https://api.openweathermap.org/data/2.5/weather?q=seoul&appid=1eb1d18602c0e2dde562cdc2005a4495', type: 'get', success: function (res) { $('#container').append(`현재온도 : ${res.main.temp}`) $('#container').append(`최고온도 : ${res.main.temp_max}`) $('#container').a..

Ajax, API 사용법

Ajax (Asynchronous Javascript and XML) -필요한 데이터만을 웹 서버에 요청해서 받은 후 클라이언트에서 데이터에 대한 처리를 진행하는 비동기적인 웹 어프리케이션을 제작하기 위한 웹 개발 기법 동기(Synchronous)통신 -request가 있으면 해당 response가 전달될 때 까지 다른 request를 요청할 수 없는 통신 방법 비동기(Asynchronous)통신 -request를 보내더라도 response를 언제 받아도 상관없이 다른 request를 요청할 수 있는 통신 방법 동기 vs 비동기 통신 차이 -사용자 입장에서는 화면갱신이 없고 요청과 응답 사이 시간에도 다른 일을 할 수 있어 편리하고 빠른듯한 환경을 느낄 수 있다. 1.CSV (comma-separated..

[JavaScript] 선택자

querySelector(selector) -CSS 선택자를 이용하여 하나의 요소를 검색 querySelectorAll(selector) -CSS 선택자를 이용하여 모든 요소를 검색 Element 요소 변경 메소드 저를 변경해주세요! 변경! 스타일실습 이동하기! 둥글게! CallBack 함수 -코드를 통해 명시적으로 호출하는 함수가 아니라, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수 클릭!

[JavaScript] 객체 반환

객체 실습 DOM(Document Object Model) -문서 객체 모델링 -서로 다른 언어가 소통할 수 있도록 쪼개서 '객체화'시켜주는 것! -HTML요소지만 JavaScript를 이용할 수 있도록 해준다. 문서에서 = > document 접근 => . 가지고와줘 => get 요소 => Element 아이디를 통해 => ByID() HTMLElement -모든 종류의 HTML요소를 나타내는 인터페이스 -getElement 메소드를 통해서 원하는 객체를 조회 -조회된 객체들을 대상으로 구체적인 작업 처리 getElementByID() -접근하고자 하는 HTML태그의 id값을 이용해 HTMLElement객체 조회 객체 반환 예제 Hello, World! Click! DOM예제 버튼을 누르면 1씩 증가하..

[JavaScript]함수실습,객체

배열실습 HTML을 데이터와 결합해야할 때 1. 일반 문자열 결합 '안녕하세요 저는'+name+'이고, '+num+'살 입니다.' 2. 템플릿 리터럴 (ES6) ``백틱 ${} `안녕하세요 저는 ${name}이고, ${num} 살 입니다.' 함수(Function) :특정 기능을 수행하는 소스 코드를 하나로 묶어 필요할 때마다 호출하여 사용하기 위한 구조 **재사용성! 1.매개변수와 입력값의 데이터 타입이 동일한지 검사하지 않는다. why? 내부적으로 arguments 객체가 호출되어 인자들을 배열 형태로 지정한다. 2. 입력값의 개수가 매개 변수의 개수보다 적다면 매개 변수의 값은 undefined로 설정된다. 함수의 구조 함수 예제 함수 실습 별찍기 function 신문법(화살표함수) function ..

[JavaScript] 반복문,배열

성적 계산 숙제 반복문 반복문 실습1 배열(Array) 같은 타입의 여러 변수를 하나의 묶음으로 다루는 것 **인덱스! 배열예제 배열 함수 배열 예제

[JavaScript] 이론

변수 -변화를 줄 수 있는, 변할 수 있는 수 ECMAScript6 표준안에서 새로운 변수 키워드 등장 Var. let(변수), const(상수) 실습1 자료형 자료형 설명 number 정수, 실수 등 산술 연산이 가능한 자료형 String 문자열로 이루어진 자료형 boolean 참/거짓으로 표현되는 논리 형태의 자료형 undefined 값이 할당된 적이 없거나 존재하지않는 속성일 때의 유형 null 아무런 값을 나타내지 않을 때의 자료형 let num ; => undefined -변수를 선언하고 값을 할당하지 않은 상태 ★ 자바스크립트는 초기 값을 꼭! 설정해줘야한다!!!!!!!!!!! let abc = 1; abc = null ; => null 형변환 연산자 종류 parseInt() 문자열을 숫자(정..

[JavaScript] 기초

Javascript -웹 페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 객체 기반의 스크립트 언어 ECMAscript -브라우저에서 동작하는 언어를 만들 때, 문법적인 사항들을 정리한 문서 기초 실습 안녕하세요! Design Change! 💖 Revert 🌟 HTML CSS Javascript 오늘은 5/11 즐거운 JS 수업입니다! 🎊 JavaScript의 출력 document.write(); -HTML문서 내에 출력 console.log(); -console창에 출력 alert(); -알림 팝업창으로 출력 JavaScript의 입력 Prompt("출력내용","입력내용")입력창을 통한 입력문 - 리턴타입: String confirm("출력문 작성") - 리턴타입 : boolean