본문 바로가기

안드로이드 웹앱 콘테츠 개발자 양성(국비지원)226

ECMA script 2015(ES6) let과 var 차이, const ① 새로운 변수 선언 키워드 : let, const ② class 키워드 ,extends ③ 화살표 함수 (Arrow Function) ④ module 문법 : import, export let과 var의 차이를 알아보고 const사용해 본다. (범위 인식) let과 var의 차이를 알아보자. 우선 var로 변수 선언 및 특징을 알아보자. var로 똑같은 변수를 사용해도 에러가 안난다. 다른 언어에서는 똑같은 변수를 선언하면 에러.. 비교적 실수를 방지하기엔 똑같은 변수 선언은 에러인게 더 좋을거 같다. 그래서 let키워드 변수가 존재한다. var 대신 let만 써주면 똑같이 변수선언을 하는 것이다. 변수를 만들고 값 변경은 당연히 된다. const 상수를 만들고 값은 변경할 수 없다. JS에서는 let.. 2019. 12. 20.
HMTL (기초) viewport (화면이 비율이 달라질 시, 보이는 차이) viewport 사용 차이 웹에서는 정상으로 보이나, 화면이 작은(휴대폰)것으로 보면 작게 보인다. 지금은 자동으로 적용이 되서 사용 안할 수도 있다. 우선 글씨와 이미지를 추가하자. 웹 브라우저로 볼때와 휴대폰으로 볼때 사이즈가 다르다. 그러면 사이즈를 해당 휴대폰 화면에 맞춘다면? 아래 사진과 같이 알맞게 보인다. 그러나 휴대폰마다 사이즈가 다르다 그래서 아래 줄을 사용하자. 알맞게 맞춰준다. 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 View Port Test This is viewport test 2019. 12. 19.
HTML+Java script (기초) webStorage (localStorage, sessionStorage ) 웹 브라우저 데이터 저장 관련 localStorage, sessionStorage 차이점은 localStorage 브라우저를 종료해도 데이터가 보관되어 다음 접속에 데이터 사용 가능, sessionStorage는 데이터가 지속적으로 보관되지 않는다. localStorage, sessionStorage 차이점을 알아보자. localStorage은 새로고침, 웨 브라우저를 닫아도 누적 카운팅이 된다. sessionStorage은 새로고침은 누적 카운팅이 되지만, 웹 브라우저를 닫으면 데이터가 사라진다. 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 //웹 스토리지 : 웹문서가 데이터를 clie.. 2019. 12. 19.
HTML+Java script (기초) worker (Thread와 같은 기능, 값 전달) 코드 작성을 잘 해도, 크롬에서 동작이 잘 안될 수 있다. Edge에서 실행하자. 카운트가 계속 실행되는 기능을 만들어보자. 우선 버튼과 표시될 h2요소를 만들자. 이제 버튼을 누를시, 카운트가 되고, 그것이 h2요소에 표시되게 해보자. 그리고 추가로 버튼을 3개 만들자. 실시간으로 동작되는 것은 다른 곳에서 수행을 해야한다. js파일을 만들어서 가져오자. 우선 start worker버튼을 누르면 Worker객체를 생성하자. 이제 실시간 카운트할 기능을 js 파일로 만들자. 만든 js 파일을 적용하자. 그러나 너무 빨리 반복되어서 내가 원하는 숫자 카운트를 볼 수 없다. 컴퓨터가 1부터 카운트하는 속도는 인간과 다르다. 그래서 딜레이를 거는 것처럼 0.5초후에 실행하도록 하자. 그러나 동작이 안될 것이다.. 2019. 12. 19.
HTML+Java script (기초) geolocation Google Map Api 이용 (웹페이지에서 지도 보여주기) 블로그에서 음식점을 리뷰하고 거기 위치를 마커로 표시하는 것을 봤을 것이다. 그것처럼 브라우저에서 지도를 표시해보자. 우선 지도 API를 이용해야한다. 네이버-유료, 카카오-부분? 예제에서는 Google을 이용한다. 아래 개발자 사이트에 접속하자. http://developers.google.com/ Google Developers Everything you need to build better apps. developers.google.com Products에 아무래도 지도니까 Maps Platform으로 들어가자. 부분 유료로 되어 있는데 문서를 들어가자. 웹 페이지이므로 Maps JavaScript API를 선택하자. 그러면 구글 지도에 대한 여러 기능들이 쭉 나온다. 찾아서 사용하면된다. 가장 기.. 2019. 12. 19.
HTML+Java script (기초) geolocation (위도, 경도 ) ①첫 번째 버튼은 현재 위치를 버튼을 누를 때마다 얻어온다. ②두 번째줄의 버튼들은 실시간으로 위치를 얻어온다. 하지만 웹페이지에서 구한 것이기 때문에, 컴퓨터가 움직이지 안으면 값은 당연히 같을 것이다. 그러나 호스트 주소에 올리고 휴대폰으로 실행을 시킨다면 값이 바뀌는 것을 알 수 있다. 우선 버튼과 h3요소를 만들어서 현재 위치를 확인해 보자. 퍼미션은 자동으로 적용된다. 위치 자동 업데이트 되는 버튼과 기능을 만들어 보자. 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.. 2019. 12. 19.
HTML+Java script (기초) drag에 대한 이벤트 드래그 & 드롭을 하는 과정에서 많은 이벤트가 발생한다. 우선 임의로 두개의 이미지를 추가하자. div요소와 img 요소2개를 배치하자. div의 크기는 없기 때문에, style로 크기와 선을 주자. 드래그를 시작하고 끝났을때 메소드와 이벤트 발생한 요소의 id를 저장하는 변수를 만들자. 캡쳐 화면에서는 안보이지만, 드래그 했을때 이미지에 동그라미에 슬래시 표시가 나온다. (뭔가 안된다는 표시) 결과는 동작은 된다. 그 안된다는 표시르 우선 없애자. 2019. 12. 19.
JQuery parseXML 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 //XML문자열 var xml="Avatarsf, advanture"; //xml을 파싱해주는 jquery의 메소드 호출 var xmlDom=$.parseXML(xml); //xml을 xmlDOM객체로 변환 alert( $(xmlDom).find('title').text() + "\n" + $(xmlDom).find('genre').text() ) 2019. 12. 19.
jquery에서 ajax 사용 메소드 [ get(), post(), ajax(), load() ] 한 웹페이지에서 여러가지 방식을 사용해보자. jquery에서 ajax사용하는 메소드를 알아보자. 우선 4개의 버튼과 textarea 1개를 만들자. 우선 get() 메소드를 알아보자. text.txt는 이미 만들었다. (같은 저장된 폴더에) 확인을 위해 서버에 업로드 하자. div에도 표시할 수 있다. get메소드를 이용해서 GET방식으로 데이터를 보낼 수 있다. 아래 사진과 같이 php파일을 (같은 저장된 폴더에) 만들었다. 확인을 위해 서버에 업로드를 하고 실행하자. 이번엔 post메소드로 POST방식으로 데이터를 보내보자. ajax(GET, POST 방식) 메소드를 이용해보자. load 메소드를 이용해서 html 내용을 가져오자. 변경된 사항이 있으니, 다시 서버에 업로드를 하고 확인하자. 이제 버.. 2019. 12. 18.

티스토리툴바