html JSON 활용

작업 결과물1

body, CSS, script 작업

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
#wrapper{
    width: 1200px;
    height: 700px;
    background: yellow;
    margin: auto;
    overflow: hidden;
}
#side{
    width: 200px;
    height: 100%;
    background: lightgoldenrodyellow;
    float: left;
}
#content{
    width: 1000px;
    height: 100%;
    float: left;
}
#side *{
    width: 95%;
}
#side input[type="text"]{
    height:20px;
}
#side textarea{
    height:100px;
}
</style>
<script>
var googleMap
var content;
var myCenter; //현배 맵의 중심점
var lati,lngi; //위도와 경도를 받는 텍스트 필드
var imgSelect; 
//등록시 선택할 업체의 대표 이미지, 상호면
//이차원 배열처럼 볼 수 있다.
var storeList={
    "stores":[
        {
            "name":"더 후라이팬",
            "image": "../images/store/fripan.jpg"
        },
        {
            "name":"이태리부대찌게",
            "image": "../images/store/italy.jpg"
        },
        {
            "name":"밀빵떡볶이",
            "image": "../images/store/ricecake.jpg"
        },
        {
            "name":"삼곱식당",
            "image": "../images/store/samgob.jpg"
        },
        {
            "name":"우리집",
            "image": "../images/store/woori.jpg"
        }
    ]
};
 
 
 
 
function init(){
    // alert("구글맵이 준비되었어요")
    content=document.getElementById("content");
    lati=document.getElementById("lati");
    lngi=document.getElementById("lngi");
    imgSelect=document.getElementById("imgSelect")
 
    // 맵의 중심점에 대한 좌표 및 카메라 줌 확대비율을 설정하자
    myCenter=new google.maps.LatLng(37.50028678504946, 127.03671113549815);
 
    var mapProp={
        center: myCenter,
        zoom: 18
    };
    // 설정 정보를 구글맵 객체에 적용(어디에 출력?, 어떤설정)
    googleMap = new google.maps.Map(content,mapProp);
 
    //마커 생성하기
    var marker = new google.maps.Marker({position: myCenter});
    marker.setMap(googleMap); //생성된 마커를 적용할 맵 지정
    createImg();
 
}
//선택할 이미지 옵션 목록 생성
function createImg(){
    //집함의 크기만큼
    for(var store of storeList.stores){
        // var ~ in ~ : 인덱스를 뽑아낸다
        // var ~ of ~ : 요소를 뽑아낸다.
        // console.log(path);
        var op=document.createElement("option");
        op.text=store.name;
        op.value=store.image;
        imgSelect.add(op); //생성된 옵션을 select박스에 붙이기
    }
}
 
 
 
 
 
function apply(){
    //위도와 경도를 변경하여, 마커를 찍어보자
    myCenter=new google.maps.LatLng(lati.value, lngi.value);
    var marker = new google.maps.Marker({position: myCenter});
    marker.setMap(googleMap);
 
    //카메라의 중심점 이동
    googleMap.setCenter(marker.getPosition());
 
    //마커를 클릭하면
    google.maps.event.addListener(marker,'click',function() {
        //인포 윈도우 띄우기
        var tag="<h3>"+document.getElementById("store_name").value+"</h3>";
        tag+="<img src=\""+imgSelect.value+"\" width=\"60px\"><p>";
        tag+=document.getElementById("detail").value;
        var infowindow = new google.maps.InfoWindow({
            content:tag
        });
    
        infowindow.open(googleMap,marker);
    });
 
}
 
 
 
 
 
//선택한 상점의 이미지를 바꾸기
function preview(){
    document.getElementById("pic").src=imgSelect.value
}
 
function registByJson(){
    //체크박스가 체크된 상태라면, json  입력 textarea보여주고, 아니면 안보이게
    var vision=(document.getElementById("ch").checked)? "block":"none";
    document.getElementById("dump").style.display=vision;
}
 
 
 
 
 
// 제이슨을 이용한 일괄등록
function applyAll(){
    // alert("json 으로 등록할까");
    //textarea에 작성된 문자열내의 json 표기를 실제 json 객체화 시켜보자
    //그러기 위해서는 문자열을 제거하고, json 을 해석을 하자
    var json=JSON.parse(document.getElementById("dump").value); //파싱할 대상 문자열이 옴
 
    // console.log(json);
 
    var markerArray=[]; //여러개의 마커를 반복문 돌떄, 보관할 용도
 
    //마커 만들기
    for(var i=0;i<json.storeList.length;i++){
        var jumpo=json.storeList[i]; //점포 하나를 접근
 
        myCenter=new google.maps.LatLng(jumpo.latLng.lat, jumpo.latLng.lng);
        //마커 생성
        var marker = new google.maps.Marker({
            position: myCenter,
            index:i
        });
        marker.setMap(googleMap);
        markerArray.push(marker); // 배열에 마커를 담아준다.
 
        //위치를 역삼으로 이동
        googleMap.setCenter(marker.getPosition());
    
 
        google.maps.event.addListener(marker,'click',function() {
            //인포 윈도우 띄우기
            // 여기서의 this는 이 이벤트를 일으킨 주체(marker)
            console.log("당신이 클릭한 마커의 index",this.index);
 
            var tag="<h3>"+json.storeList[this.index].name+"</h3>";
            tag+="<img src=\""+json.storeList[this.index].image+"\" width=\"60px\"><p>";
            tag+=json.storeList[this.index].review;
 
            var infowindow = new google.maps.InfoWindow({
                content:tag
            });
        
            infowindow.open(googleMap,markerArray[this.index]);
        });
    }
 
}
 
 
 
 
 
</script>
</head>
<body>
    <div id="wrapper">
        <div id="side">
            <input type="text" placeholder="상호입력" id="store_name">
            <textarea id="detail"></textarea>
            <!-- 기존에 선택한 옵션과는 다른 옵션을 선택했을때, 즉 선택값이 바뀌었을때 -->
            <select id="imgSelect" onchange="preview()">
                <option value="">이미지 선택</option>
            </select>
            <img src="../images/kitty.jpg" width="195px" id="pic">
 
            일괄 등록:<input type="checkbox" id="ch" onclick="registByJson()">
 
            <textarea placeholder="json 데이터 입력" id="dump" style="display:none"></textarea>
            <input type="text" value="37.57493611044894" id="lati">
            <input type="text" value="126.97791539856028" id="lngi">
            <button onclick="(document.getElementById('ch').checked)? applyAll():apply()">등록</button>
        </div>
        <div id="content"></div>
    </div>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDjhpFifuvNK9AdbYUW8n2MR0KnNo-6PBo&callback=init"></script>
                                                                                                                                        <!-- 구글맵이 콜백되었을때 init을 바로 호출 -->
</body>
</html>
Colored by Color Scripter

cs

script 설명

작업 결과물2

body, CSS, script 작업

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#wrapper{
    width:1000px;
    height:800px;
    background:yellow;
    margin: auto;
}
#movie_title{
    width:100%;
    height:100px;
    background:black;
    font-size:65px;
    text-align: center;
    color: white;
}
#content_wrapper{
    width:100%;
    height:550px;
    background:chartreuse;
    overflow: hidden;
}
#pic{
    width:500px;
    height:100%;
    background:grey;
    float:left;
}
#detail{
    width:500px;
    height:100%;
    background:gainsboro;
    float:left;
    font-size: 32px;
}
#navi{
    width:100%;
    height:50px;
    background:honeydew;
}
#thumb{
    width:100%;
    height:100px;
    background:darkseagreen;
    position: relative;
    overflow: hidden;
}
</style>
<script src="../js/marvel.js"></script>
<script src="../js/Pointer.js"></script>
<script>
var box;
var pointer;
var targetX=0;//box의 목표 이동 지점
 
 
function init(){
    createBox(); //박스먼저 만들고
    createThumb(); //이미지 부착
    getDetail(movies.marvel[0]);
    createPointer();
}
 
 
function createBox(){
    box=document.getElementById("box"); //이미지들을 통째로 이동시킬 박스
    //프로그래밍 적으로 제어하기 위해 위치값을 js에서 지정
    box.style.position="absolute"
    box.style.left=0+"px";
    box.style.top=0+"px";
    box.style.width=(100*20)+"px";
    box.style.height=100+"px";
    box.style.backgroundColor="darkseagreen";
}
 
//썸네일 만들기
function createThumb(){
    for(var i=0;i<movies.marvel.length;i++){
        var movie=movies.marvel[i]
        var thumb=document.getElementById("thumb");
        var img=document.createElement("img");
        img.src=movie.url;
        img.style.width=90+"px";
        img.style.height=90+"px";
        img.style.position="absolute";
        img.style.left=5+(100*i)+"px";
        img.style.top=5+"px";
        img.id=i; //<img src="" id=i>
        box.appendChild(img);
 
        //각 썸네일 이미지에 이벤트 연결
        img.addEventListener("click", function(){
            //유저가 지금 선택한 이미지와 관련된 영화 json을 꺼내자
            console.log("당신이 선택한 이미지의 index는", this.id);
            pointer.targetX=this.id*100; //목표지점 설정
            //1000마다 다시 0으로 전환!!
            pointer.targetX=(this.id*100)%1000;
            getDetail(movies.marvel[this.id]); //상세보기 함수호출
        })
    }
 
}
 
//영화 1건에 대한 상세내용 보기( 매개변수로 영화1편을 넘겨받자)
function getDetail(obj){
    // console.log("처음에 보여질 영화정보객체",obj)
    //큰사진 보여주기
    var pic=document.getElementById("pic");
    pic.style.backgroundImage="url("+obj.url+")";
    pic.style.backgroundSize=500+"px "+550+"px";
 
    //상세내용 
    var msg="";
    msg += "제목 : "+obj.title+"<br>";
    msg += "부제 : "+obj.phase+"<br>";
    msg += "개봉년도 : "+obj.release_year+"<br>";
    msg += "상영시간 : "+obj.running_time+"<br>";
    msg += "제작예산 : $"+obj.budget+"<br>";
    msg += "영화수익 : $"+obj.gross+"<br>";
    document.getElementById("detail").innerHTML=msg;
    
    //영화제목 처리
    document.getElementById("movie_title").innerText=obj.title
}
 
function createPointer(){
    // constructor(container, width, height, x, y, a, targetX)
    pointer=new Pointer(document.getElementById("thumb"), 100, 100, 0, 0, 0.1, 0);
}
 
//썸네일 담고 있는 컨테이너를 이용하여, 페이지 전환 애니메이션 구현
function moveBox(){
    box.style.left=parseFloat(box.style.left)+0.1*(targetX-parseFloat(box.style.left))+"px";
}
 
 
 
function aniLoop(){
    pointer.tick();
    pointer.render();
    moveBox();
}
 
function setPage(page){
    targetX=page;
}
 
 
window.addEventListener("load",function(){
    init();
    setInterval("aniLoop()",10);
});
</script>
</head>
<body>
    <div id="wrapper">
        <div id="movie_title">영화 제목 나올곳</div>
        <div id="content_wrapper">
            <div id="pic">사진 나올곳</div>
            <div id="detail">영화설명 나올곳</div>
        </div>
        <div id="navi" style="position:relative">
            <button style="position:absolute;left:0px" onclick="setPage(0)">Prev</button>
            <button style="position:absolute;right:0px" onclick="setPage(-1000)">Next</button>
        </div>
        <div id="thumb">
            <div id="box"></div>
        </div>
    </div>    
</body>
</html>
 
 
Colored by Color Scripter

cs

script 설명

class 작업

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

// 갤러리의 썸네일을 쫒아다니는 사각 포인터
class Pointer{
    constructor(container, width, height, x, y, a, targetX){
        this.container=container;
        this.div=document.createElement("div");
        this.width=width;
        this.height=height;
        this.x=x;
        this.y=y;
        this.a=a; //비율계수
        this.targetX=targetX //목표지점
        this.init()
    }
 
    init(){
        this.div.style.width=this.width+"px";
        this.div.style.height=this.height+"px";
        this.div.style.position="absolute";
        this.div.style.left=this.x+"px";
        this.div.style.top=this.y+"px";
        this.div.style.border="5px solid red";
        this.div.style.boxSizing="border-box";
        this.div.style.background="white";
        this.div.style.opacity=0.3
 
        this.container.appendChild(this.div);
    }
    //감속도 운동~~ 나의위치=나위치+비율계수*(거리차)
    tick(){
        this.x=this.x+this.a*(this.targetX-this.x);
    }
    render(){
 
        this.div.style.left=this.x+"px";
    }
}
Colored by Color Scripter

cs

'개발 > HTML&JS' 카테고리의 다른 글

html 플랫포머 게임 (0)	2021.04.04
htm 슈팅게임 (0)	2021.03.25
html 충돌검사 (0)	2021.03.24
html 객체와 class (0)	2021.03.23
html 다차원 배열2 (0)	2021.03.18

우당탕탕 개발일기👨‍💻
미지니의 성장 블로그

html JSON 활용

작업 결과물1

body, CSS, script 작업

작업 결과물2

body, CSS, script 작업

class 작업

'개발 > HTML&JS' 카테고리의 다른 글

댓글

티스토리툴바

html JSON 활용

작업 결과물1

body, CSS, script 작업

작업 결과물2

body, CSS, script 작업

class 작업

'개발 > HTML&JS' 카테고리의 다른 글

관련글

댓글

티스토리툴바