2024.04.15
로컬 스토리지
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로컬 스토리지</title>
<script type="text/javascript">
window.onload=function(){
const save = document.getElementById('save');
//이벤트 연결
save.onclick=function(){
//사용자가 입력한 번호,이름,주소를 읽어옴
const num = document.getElementById('num');
const name = document.getElementById('name');
const addr = document.getElementById('addr');
//로컬 스토리지에 개별적으로 저장
/*
localStorage.num = num.value;
localStorage.name = name.value;
localStorage.addr = addr.value;
*/
//JSON(JavaScript Object Notation-자바스크립를 객체 형식으로
// 만드는 것을 의미) 형식의 문자열로 만듬
//let memberStr = '{"num":'+num.value+',"name":"'+name.value+'","addr":"'+addr.value+'"}';
//localStorage.member = memberStr;
const memberStr = {};
memberStr.num = num.value;
memberStr.name = name.value;
memberStr.addr = addr.value;
//자바스크립트 객체를 JSON 문자열로 변환
localStorage.member = JSON.stringify(memberStr);
//입력창 초기화
num.value = '';
name.value = '';
addr.value = '';
};
const load = document.getElementById('load');
//이벤트 연결
load.onclick=function(){
//저장된 문자열 읽어오기
let loadedMemberStr = localStorage.member;
//문자열을 객체로 변환
const memberObj = JSON.parse(loadedMemberStr);
//객체의 속성 호출
alert(memberObj.num + ',' + memberObj.name + ','
+ memberObj.addr);
};
};
</script>
</head>
<body>
번호 <input type="text" id="num"><br>
이름 <input type="text" id="name"><br>
주소 <input type="text" id="addr"><br>
<button id="save">저장</button>
<button id="load">불러오기</button>
</body>
</html>
이미지 미리보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지 미리 보기</title>
<script type="text/javascript">
window.onload=function(){
//미리보기 이미지가 표시되는 img 태그
const image = document.getElementById('image');
const file = document.getElementById('file');
//이벤트 연결
file.onchange=function(){
if(!file.files[0]){//if(file.files[0] == undefined)
alert('파일을 선택하세요!');
//기본 이미지 노출
image.src='../files/face.png';
return;
}
//FileReader 객체 생성
const reader = new FileReader();
//이미지 읽기
reader.readAsDataURL(file.files[0]);
reader.onload=function(){
//image.setAttribute('src',reader.result);
image.src = reader.result;
};
};
};
</script>
</head>
<body>
<h2>이미지 미리 보기</h2>
<div>
<img id="image" src="../files/face.png" width="200"
height="200" alt="Image Preview">
</div>
<input type="file" id="file"
accept="image/gif,image/png,image/jpeg">
</body>
</html>
geolocation
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>좌표 읽기</title>
<script type="text/javascript">
window.onload=function(){
if(navigator.geolocation == undefined){
alert('본 기기가 위치정보를 지원하지 않습니다.');
return;
}
/*
getCurrentPosition : 사용자의 현재 기기의 위치를 position 오브젝트형으로
반환
[옵션]
frequency : 위치 정보를 가져올 시간 간격으로 단위는 밀리세컨드(ms),
기본값은 10000
enableHighAccuracy : 위치 정보의 정확성을 최상으로 할지를 지정
timeout : 기기로부터 위치 정보를 가져올 때까지의 최대 대기 시간 단위는
밀리세컨드(ms)
maximumAge : 위치 정보를 캐싱하는 기간을 지정, 단위는 밀리세컨드(ms)
*/
navigator.geolocation.getCurrentPosition(
success,fail,{timeout:10000});
//위도,경도값 호출이 가능한 경우
function success(position){//현재 위치 값
/*
latitude : 위도
longitude : 경도
altitude : 고도
accuracy : 위도와 경도의 정확도
altitudeAccuracy : 고도의 정확도
heading : 방향 (북쪽으로부터 시계 방향으로 현재 방향까지의 각도)
speed : 현재 기기의 속도를 meter per second
*/
document.getElementById('startLat').innerHTML = position.coords.latitude;
document.getElementById('startLon').innerHTML = position.coords.longitude;
}
//위도,경도값 호출이 불가능한 경우
function fail(error){
alert('에러 발생 코드 : ' + error.code);
/*
0 : 알 수 없는 오류
1 : 권한 거부
2 : 위치 추적 실패
3 : 시간 초과
*/
}
//현재 위치를 계속 확인
//watchPosition : 일정 간격으로 기기의 위치가 바뀌면 현재 기기의 위치를
// position 오브젝트 형으로 반환
let watchId = navigator.geolocation.watchPosition(
function(position){
let lat = position.coords.latitude;
let lon = position.coords.longitude;
let acc = position.coords.accuracy;
document.getElementById('currentLat').innerHTML = lat;
document.getElementById('currentLon').innerHTML = lon;
document.getElementById('acc').innerHTML = acc;
});
const btn = document.getElementById('btn');
//이벤트 연결
btn.addEventListener('click',function(){
//clearWatch : watchPosition 메서드로 위치 추적을 하는 것을
// 해제하는 역할
navigator.geolocation.clearWatch(watchId);
alert('위치 추적이 해제됨');
},false);
};
</script>
</head>
<body>
시작 위치 (위도,경도) : <br>
<span id="startLat">위도</span>°
<span id="startLon">경도</span>°
<br><br>
현재 위치 (위도,경도) : <br>
<span id="currentLat">위도</span>°
<span id="currentLon">경도</span>°
<br><br>
정확도 : <br>
<span id="acc">정확도</span>미터 정도의 정확도를 보임
<br><br>
<button id="btn">위치 추적 해제</button>
</body>
</html>
다음(daum)맵 api
/*
1. <<a href=https://developers.kakao.com/>https://developers.kakao.com/</a>> 로 이동
2. 로그인
3. 웹 개발 시작 앱 생성
4. 설정 - 일반
5. 플랫폼 - 웹 <http://localhost:8080> 으로 지정. ip 사용시 ip 지정
6. JavaScript 키 복사해서 script에 표시
7. 자바스크립트 관련 지도 가이드 - <<a href=https://apis.map.kakao.com/web/guide>https://apis.map.kakao.com/web/guide</a>>
*/
window.onload=function(){
if(!navigator.geolocation){
alert('본 기기가 위치정보를 지원하지 않습니다.');
return;
}
navigator.geolocation.getCurrentPosition(function(position){
//위도
let lat = position.coords.latitude;
//경도
let lon = position.coords.longitude;
//지도를 표시할 div
const mapContainer = document.getElementById('map');
//지도에 설정할 옵션 값 지정
const mapOption = {
center:new daum.maps.LatLng(lat,lon),//지도의 중심 좌표
level:3 //지도의 확대 레벨
};
//지도 생성
const map = new daum.maps.Map(mapContainer,mapOption);
//마커가 표시될 위치
const pos = new daum.maps.LatLng(lat,lon);
//마커 생성
const marker = new daum.maps.Marker({
position:pos,
clickable:true //마커를 클릭했을 때 지도의 클릭 이벤트 처리
});
//마커를 지도에 표시
marker.setMap(map);
//마커를 클릭했을 때 마커 위에 표시할 인포윈도우 내용 명시
let iwContent = '<div style="padding:10px;width:250px;height:38px;">' + lat + ',' + lon + '<br>나 여기 있어요!!</div>';
//인포윈도우 생성
const infowindow = new daum.maps.InfoWindow({
content:iwContent,
removable:true //x버튼 표시
});
//마커에 클릭 이벤트 등록
daum.maps.event.addListener(marker,'click',function(){
//마커 위에 인포윈도우를 표시
infowindow.open(map,marker);
});
});
};
jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 연결</title>
<!-- jQuery 연결 방법 1 : js 파일을 다운로드 서버에 저장하고 연결 -->
<!-- <script type="text/javascript" src="../js/jquery-3.7.1.min.js"></script> -->
<!-- jQuery 연결 방법 2 : CDN(Contents Delivery Network)방식 : URL를 통해 js 파일 연결 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
//window.onload=function(){};
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행하라는 의미
$(document).ready(function(){
alert('First Ready!!');
});
</script>
</head>
<body>
</body>
</html>
