1. 카카오맵 https://apis.map.kakao.com/
1. 카카오 개발자사이트 (https://developers.kakao.com) 접속
2. 개발자 등록 및 앱 생성
3. 웹 플랫폼 추가: 앱 선택 – [플랫폼] – [Web 플랫폼 등록] – 사이트 도메인 등록
4. 사이트 도메인 등록: [웹] 플랫폼을 선택하고, [사이트 도메인] 을 등록합니다. (예: http://localhost:8080)
5. 페이지 상단의 [JavaScript 키]를 지도 API의 appkey로 사용합니다.
6. 앱을 실행합니다.
2. 카카오오븐: https://ovenapp.io/
OvenApp.io
Oven(오븐)은 HTML5 기반의 무료 웹/앱 프로토타이핑 툴입니다. (카카오 제공)
ovenapp.io
[막힌 부분]
문제.
1. w3cschools.com - javascript - 전구 껐다 켰다하기 (button)
2. 똑같은 문제를 토글버튼을 사용하여 껐다 켰다하기(무려 20분 소요..)
- 결과화면: on
- 결과화면: off
- 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 전구 on/off -->
<h2>자바스크립트: 전구 on/off </h2>
<!-- 버튼 2개로 전구 on/off 하기 -->
<button onclick="on()">Turn On</button>
<img src="img/pic_bulboff.gif" alt="전구" id="bulb">
<button onclick="off()">Turn off</button>
<!-- 토글 사용하여 하나의 버튼으로 전구 on/off 하기 -->
<button onclick="toggle()">토글</button>
<!-- javascript -->
<script>
/* on */
function on() {
//var img = document.images[0].src;
document.getElementById("bulb").src = "img/pic_bulbon.gif";
console.log("켜라");
}
/* off */
function off() {
document.getElementById("bulb").src = "img/pic_bulboff.gif";
console.log("꺼라");
}
/* 버튼 한 개로 키고 꺼라 (on/off) */
function toggle() {
/* 이미지 비교하는 법 .src */
if(document.getElementById("bulb").src == "http://localhost:8080/javascript/img/pic_bulboff.gif") {
/* 킨다 */
on();
} else {
/* 끈다 */
off();
}
}
</script>
</body>
</html>
'기타' 카테고리의 다른 글
| 0426 이것저것 사이트(2) (0) | 2022.04.26 |
|---|---|
| 0407 javascript 및 이것저것 사이트 (0) | 2022.04.07 |
| 만들어보고자 한 사이트(1) - rok.wiki(국사무쌍) (0) | 2022.02.28 |