안드로이드 웹앱 콘테츠 개발자 양성(국비지원)/HTML+Java script32 ECMA script 2015(ES6) ◎ Bootstrap - Front-end library (유용성으로 보면 CSS library로 볼 수 있다.) 아래 사이트에서 Bootstrap을 다운받거나, CDN 방식으로 사용해보자. (손쉽게 홈페이지 꾸미기) https://getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com 우선 다운로드하여 사용해보자. 파랑색 1번을 눌러서 파일을 다운로드 받으면 알집 형태인데, 압축을 풀고 사용하자. 압축을 풀면 크게 js 폴더 css 폴더로 2개 폴더로 나뉜다. (결론 js 폴더에서 1개, css폴더에서 1개씩 파일 가져오자.) 각 파일을 구별하기 위해 현재 작업하는 폴더에 임의.. 2019. 12. 23. ECMA script 2015(ES6) module (다른문서 클래스,변수 사용/import) ① 새로운 변수 선언 키워드 : let, const ② class 키워드 ,extends ③ 화살표 함수 (Arrow Function) ④ module 문법 : import, export 다른 문서나, js파일에서 다른문서, js 파일에 클래스나 변수를 가져와서 사용해 본다. 우선 js파일을 만들자. 함수 show()를 만들었다. 그리고 다른 문서에서 사용을 하려면 esport default를 해야 사용가능하다. 이제 html이나 js에서 사용을 하려면 import해주면 된다. 위 예제는 html 문서이지만, 다른 문서도 가능하다. 코드를 안써도 show()메소드 사용이 가능하다. export deault는 한번만 사용 가능하다.. 그래서 다른 함수도 사용가능하도록 하려면 함수명 앞에 export를 써주.. 2019. 12. 20. ECMA script 2015(ES6) arrowfunction (화살표 함수[람다식 표기]) ① 새로운 변수 선언 키워드 : let, const ② class 키워드 ,extends ③ 화살표 함수 (Arrow Function) ④ module 문법 : import, export 일반 메소드를 화살표 함수(람다식 표기법)로 표현해본다. 좀더 간결하고, 짧게 줄을 줄일 수 있다. 우선 일반적으로 함수를 만들어 보자. 참조변수를 이용해서 익명 함수도 만들 수 있다. 이제 output()함수와 비슷하게 화살표 함수로 바꿔보자. 참조변수가 함수를 참조하는데, function을 없애고 ()다음에 =>를써준다. (람다식 표기법) let display=function() { document.write(name+' '); } //이거나 아래 코드나 똑같은 의미 let display= ()=> { documen.. 2019. 12. 20. ECMA script 2015(ES6) class (멤버 변수,메소드 사용 및 구조분해할당) ① 새로운 변수 선언 키워드 : let, const ② class 키워드 ,extends ③ 화살표 함수 (Arrow Function) ④ module 문법 : import, export - class를 만들고, 참조변수로 참조, 멤버 변수,함수 사용 및 구조분해 할당을 알아본다. 다른 언어에서 사용 되는 class의 개념이 기존 JS에 없었지만, ES6에 개념이 등장하였다. class에 대해 알아보자. class에 멤버 변수는 반드시 생성자에 만들어야 한다. (this 사용) 멤버 변수가 잘 나온다. this가 아닌 let으로 선언한 gender는 어떻게 될까? 결과 화면을 보면 undefined가 나온다. 이것은 let gender가 아닌 JS에서는 변수가 없이 사용을 하면 새로 만든다. 결국 per.. 2019. 12. 20. 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. 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. 이전 1 2 3 4 다음
