⁂ Java Script/: 기본 익히기

[JS] #13-2 오픈소스 활용하기 : 카카오맵 활용

참고 사이트 : https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 1. 카카오맵으로 지도 띄우기 1) API키 받기 앞서 살펴보았던 카카오 우편번호 서비스는 특별한 API 키 없이도 사용이 가능한 오픈 소스였다. 하지만 이 카카오맵은 API를 따로 생성해야한다. 그렇기에 회원가입 및 로그인이 필수이다. 회원가입과 로그인을 마치고 API키를 받아오자. 위 이미지에서 JavaScript 키를 복사해두면 된다. 2) 코드 복사하기 이제 카카오 Developers 사이트의 지도 안에 들어가 가이드 항목..

[JS] #13-1 오픈소스 활용하기 : 카카오 우편번호 서비스

1. 오픈소스 활용하기! 참조 : 카카오 우편번호 서비스 https://postcode.map.daum.net/guide Daum 우편번호 서비스 우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다. postcode.map.daum.net 여러 오픈 소스 중에서는 인증키를 가지고 있어야만 사용할 수 있는 오픈 소스가 있다. 하지만 이 우편번호 서비스는 key를 따로 발급받을 필요가 없는 오픈 소스이다. 위 사이트를 확인해보면 사이트에 적용하는 방법과 예제까지 모두 확인해볼 수 있다. 그러나 코드를 그저 복붙하면 무조건 적용이 되는 것이 아니므로 오픈 소스를 나의 페이지에 적용하는 방법을..

[JS] #12 JavaScript JSON

1. JSON에 대하여 JavaScript 안에서는 사용되는 여러 가지 문법이 있는데(AJAX, AngularJS, React 등등) 그 중 하나이다. JSON은 JavaScript Object Notation의 약자로 문법에 대한 표기법이다(언어가 아니다). data를 서로 주고 받는 통신 상황에서 data를 어떻게 저장할 것인지 표기하는 문법이라고 이해하면 된다. 이 JSON이 가장 흔히 쓰이는 것이 바로 댓글이다. 사이트를 들어가면 사이트 내에서 이동할 때마다 URL이 바뀌는 것을 확인할 수 있다. URL이 바뀐다는 것은 그 사이트가 사용자에게 URL이 바뀔 때마다 새로운 문서의 전체를 준다는 것이다. 이 모습이 페이지 단위(문자 단위; 비동기식)로 통신하는 모습이다. 그런데 댓글을 열고, 다른 댓..

[JS] #11 This

참조 사이트 https://www.w3schools.com/js/js_this.asp JavaScript this 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, and many, many more. www.w3schools.com 1. This is Me!! this는 자신이 갖고 있는 요소를 가리킬 때 쓰이는 명령어이다. 자바스크립트에서 자신이 갖고 있는 요소에 접근할 때 코드가 불필요하게 길어질 때가 있다. 그럴 때 this를 사용하여..

[JS] #10 자바 스크립트에서 스타일(.CSS) 접근하기

1. 자바 스크립트에서 스타일 접근하기! 자바 스크립트은 스타일에 자주 접근을 한다. 예를 들어 만약 회원가입을 할 때 아이디가 중복되어있으면 빨간색으로 아이디를 출력시킬 수 있다. 이런 식으로 자바스크립트에서 css에 대한 접근은 정말 자주 하게 된다. jQuery에서도 명령어들이 더러 있을 정도이다. 우선 아래와 같은 코드로 를 하나 만들고 버튼도 함께 만들었다. 자바스크립트에서 스타일 접근 대한민국 아래의 버튼을 누르면 div의 스타일 속성을 변화시킬 것이다. 속성 변화는 test1() 함수로 줄 것이다. 2. 버튼으로 .css 접근하기 1) test1() 함수로 의 .css에 제대로 접근하는지 alert()로 확인해보기 먼저 test1() 함수를 만들어보자. 그리고 test1() 함수가 정상적으로..

[JS] #9-2 유효성 검사 - 회원가입틀 만들기 2

1. 유효성 검사 function validate() { // 회원가입 폼에 대한 유효성 검사 // 1) 아이디 글자 갯수 8-12 사이인지 확인 // 위의 조건을 만족하지 않으면 // -> 경고창(alert) // -> ID를 다시 입력할 수 있도록 id=uid에서 커서를 생성해 주고(focus) // -> 서버로 전송하는 것을 차단 let uid=document.getElementById("uid").value; uid=uid.trim(); // 맨 앞과 뒤의 공백 제거 if(!(uid.length>=8 && uid.length=5 && upw.length