본문 바로가기

반응형

JavaScript

(15)
[JS] jQuery UI datepicker API (날짜선택기) 구현 방법 datepicker (날짜선택기) jQuery에서 제공하는 위젯 중 하나이며, 날짜를 다룰 때 UI 형식으로 쉽게 날짜를 선택 하도록 도와주는 역할 jquery UI 공식사이트에 올라온 API를 사용 https://jqueryui.com jQuery UI jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQu..
[JS] 카카오 로그인 API 구현 방법 java script 의 openAPI 를 이용해서 직접 만든 사이트의 로그인 부분에 카카오 로그인을 구현해보려고 합니다. 카카오는 카카오 디벨로퍼에 openAPI가 잘 설명되어 있어서 어떤 기능이 있고 어떻게 구현하는지 여러번 읽어보고 차례차례 따라하면 됩니다. 그럼 카카오 로그인을 구현하는 방법을 순서대로 설명하도록 하겠습니다. 로그인 API 구현 흐름 1. 클라이언트(WEB) 에서 로그인 2. 카카오서버는 redirect url로 code를 전달 3,4. code를 이용하여 access_token을 발급 5. access_token을 서버로 전송 6,7. 서버에서는 받은 access_token을 이용하여 카카오 서버에서 사용자 정보를 받음 8. 받은 사용자 정보를 이용하여 회원가입 또는 로그인을 진..
[JavaScript] Ajex 에서 JSON데이터 출력 AJAX -> jQuery에서 비동기 처리를 담당하는 메서드 실시간 반영 ex ) 아이디 중복검사, 네이버지도, ... JSON 데이터와 함께 활용됨 기상관측데이터 -> 프로그램 미세먼지데이터 -> 모듈 JSON JSON은 JavaScript Object Notation의 약자입니다. JSON은 사람이 읽을 수 있는 텍스트 기반의 데이터 교환 표준입니다. 이러한 JSON은 XML의 대안으로서 좀 더 쉽게 데이터를 교환하고 저장하기 위하여 고안되었습니다. 또한, JSON은 텍스트 기반이므로 어떠한 프로그래밍 언어에서도 JSON 데이터를 읽고 사용할 수 있습니다 예제 1) JSON 데이터를 HTML 테이블에 넣어서 출력하기 JSON [ {"name": "홍길동", "score1": 95, "score2": ..
[JavaScript] Swiper 사용법 오픈 API 인 Swiper를 사용하여 슬라이드 구현해보도록 하겠습니다. swiper를 사용하려면 여러 방법이 존재합니다. 저는 별도로 다운로드가 필요없는 cdn 방식을 추천 드립니다. cdn으로 사용하는 방식 실제 swiper js파일을 swiper github에서 다운 받아 삽입하는 방식 npm으로 설치하여 사용하는 방식 https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com Swiper 사이트 접속 후 G..
[JavaScript] jQuery toggleClass(), trigger() toggleClass() 설정된 클래스명을 해당하는 요소가 가지고 있는지 판단하여 해당 요소가 있으면 이를 제거합니다. 반대로 해당 요소가 없다면 이를 부여하는 매우 유용한 메소드입니다. trigger() 클릭이나 스크롤 이동, 브라우저 사이즈 등등 몇몇의 핸들러가 작동하게 될 경우 브라우저에 이를 알리고 함수를 실행하지만 이런 이벤트 핸들러 없이도 동작이 가능하게 하려면 trigger()메소드가 필요합니다. $('selector').trigger('선택할 이벤트');
[JavaScript] jQuery mouseover(), mouseenter() $("A").mouseover() : A위에 마우스가 올라갔을 때 $("A").mouseenter() : A 안에 마우스가 올라갔을 때 $("A1").append("A2") : A1안에 A2 삽입
[JavaScript] jQuery insertAfter(), insertBefore() insertAfter() - 지정한 요소 뒤에 새로운 요소를 삽입 A.insertAfter(B) – B 뒤에 A를 추가 insertBefore() – 지정한 요소의 시작 부분에 내용을 삽입 A.insertBefore(B) – B 앞에 A를 추가 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 광고, 갤러리 *{ margin: 0px; padding: 0px..
[JavaScript] 랜덤으로 돌아가는 주사위 게임 만들기 컴퓨터와 사용자를 나누어 주사위를 돌리게되면 랜덤으로 주사위가 돌아가 승패를 나눠주는 게임을 만들어보자! 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 과제- 주사위게임 .dice { text-align: center; } .start { text-align: center; } .user { text-align: center; display: ..

반응형