Javascript 87

생활코딩 javascript 정리 - DOM(document object model)

8. DOM Document Object Model로 웹페이지를 자바스크립트로 제어하기 위한 객체 모델을 의미한다. window 객체의 document 프로퍼티를 통해서 사용할 수 있다. Window 객체가 창을 의미한다면 Document 객체는 윈도우에 로드된 문서를 의미한다고 할 수 있다. DOM의 하위 수업에서는 문서를 제어하는 방법에 대한 내용을 다룬다. 1) 제어 대상을 찾기 문서를 자바스크립트로 제어하려면 제어의 대상에 해당되는 객체를 찾는 것이 제일 먼저 할 일이다. 문서 내에서 객체를 찾는 방법은 document 객체의 메소드를 이용한다. 2) document.getElementsByTagName 문서 내에서 특정 태그에 해당되는 객체를 찾는 방법은 여러가지가 있다. getElementsB..

생활코딩 javascript 정리 - 창제어(window 제어)

7. 창제어(window 제어) window.open 메소드는 새 창을 생성한다. 현대의 브라우저는 대부분 탭을 지원하기 때문에 window.open은 새 창을 만든다. 아래는 메소드의 사용법이다. DOCTYPE html> li {padding:10px; list-style: none} 첫번째 인자는 새 창에 로드할 문서의 URL이다. 인자를 생략하면 이름이 붙지 않은 새 창이 만들어진다. 두번째 인자는 새 창의 이름이다. _self는 스크립트가 실행되는 창을 의미한다. _blank는 새 창을 의미한다. 창에 이름을 붙일 수 있다. open을 재실행 했을 때 동일한 이름의 창이 있다면 그곳으로 문서가 로드된다. 세번재 인자는 새 창의 모양과 관련된 속성이 온다. function open1(){ windo..

생활코딩 javascript 정리 - Navigator 객체

6. Navigator 객체 브라우저의 정보를 제공하는 객체다. 주로 호환성 문제등을 위해서 사용한다. 아래 명령을 통해서 이 객체의 모든 프로퍼티를 열람할 수 있다. console.dir(navigator); 주요한 프로퍼티를 알아보자 1) 기능 테스트 Navigator 객체는 브라우저 호환성을 위해서 주로 사용하지만 모든 브라우저에 대응하는 것은 쉬운 일이 아니므로 아래와 같이 기능 테스트를 사용하는 것이 더 선호되는 방법이다. 예를 들어 Object.keys라는 메소드는 객체의 key 값을 배열로 리턴하는 Object의 메소드다. 이 메소드는 ECMAScript5에 추가되었기 때문에 오래된 자바스크립트와는 호환되지 않는다. 아래의 코드를 통해서 호환성을 맞출 수 있다. (없으면 아래처럼 구현한다는 ..

생활코딩 javascript 정리 - 사용자와 커뮤니케이션하기

5. 사용자와 커뮤니케이션하기 HTML은 form을 통해서 사용자와 커뮤니케이션할 수 있는 기능을 제공한다. 자바스크립트에는 사용자와 정보를 주고 받을 수 있는 간편한 수단을 제공한다. 1) alert 경고창이라고 부른다. 사용자에게 정보를 제공하거나 디버깅등의 용도로 많이 사용한다. 2) confirm 확인을 누르면 true, 취소를 누르면 false를 리턴한다. 3) prompt 4) Location 객체 Location 객체는 문서의 주소와 관련된 객체로 Window 객체의 프로퍼티다. 이 객체를 이용해서 윈도우의 문서 URL을 변경할 수 있고, 문서의 위치와 관련해서 다양한 정보를 얻을 수 있다. 5) 현재 윈도우의 URL 알아내기 아래는 현재 윈도우의 문서가 위치하는 URL을 알아내는 방법이다 ..

생활코딩 Javascript 정리 - Browser Object Model(BOM)

4. Browser Object Model(BOM)BOM(Browser Object Model)이란 웹브라우저의 창이나 프래임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단이다. BOM은 전역객체인 Window의 프로퍼티와 메소드들을 통해서 제어할 수 있다. 따라서 BOM에 대한 수업은 Window 객체의 프로퍼티와 메소드의 사용법을 배우는 것이라고 해도 과언이 아닐 것이다. 본 토픽의 하위 수업에서는 Window 객체의 사용법을 알아볼 것이다. 1) 전역객체 Window 객체는 식별자 window를 통해서 얻을 수 있다. 또한 생략 가능하다. Window 객체의 메소드인 alert을 호출하는 방법은 아래와 같다. 다음도 동일 객체를 만든다는 것은 결국 window 객체의 프로퍼티를 만드는..

생활코딩 Javascript 정리 - Object Model

3. Object Model 웹브라우저의 구성요소들은 하나하나가 객체화되어 있다. 자바스크립트로 이 객체를 제어해서 웹브라우저를 제어할 수 있게 된다. 이 객체들은 서로 계층적인 관계로 구조화되어 있다. BOM과 DOM은 이 구조를 구성하고 있는 가장 큰 틀의 분류라고 할 수 있다. 이 관계를 그림으로 나타내면 아래와 같다. (출처 : http://learn.javascript.ru/browser-environment) var imgs = document.getElementsByTagName(‘img’); imgs[0].style.width = ‘300px’; //width값을 바꿔줌. window.document : DOM(Document Object Model)을 의미함 window.navigator..

생활코딩 Javascript 정리 - 자바스크립트 개념 및 HTML에서 자바스크립트 로드하기

1. 웹브라우저와 Javascript Javascript 여기서 onclick 부분에서 클릭이 되면 클래스이름을 dark로 하라는 의미이다. 클릭 후 결과 2. HTML에서 JAVA Script 로드하기 1) inline 방법 inline 방식은 태그에 직접 자바스크립트를 기술하는 방식이다. 장점은 태그에 연관된 스크립트가 분명하게 드러난다는 점이다. 하지만 정보와 제어가 섞여 있기 때문에 정보로서의 가치가 떨어진다. ex_1.html onclick은 HTML 문법 alert는 자바스크립트 문법임 2) script 태그 방법 ex_2.html 3) 외부 파일로 분리 js를 별도의 파일로 분리할 수도 있다. 장점은 보다 엄격하게 정보와 제어를 분리할 수 있다. 하나의 js 파일을 여러 웹페이지에서 로드함으..

Javascript - jQuery Mobile 이벤트

1. mobileinit 이벤트 위와 같이 중간에 넣어야 한다. 2. 기본 환경 설정 3. 페이지 초기화 이벤트 (pagebeforecreate, pagecreate, pageinit) 4. 페이지 변경 이벤트 (pagebeforechange, page change, pagechangefailed) 5. 페이지 전환 이벤트 (pagebeforeshow, pagebeforehide, pageshow, pagehide) 6. 페이지 로드 이벤트(pagebeforeload, pageload, pageloadfailed) 7. tap, taphold 이벤트 8. swipe, swipeleft, swiperight 이벤트 9. orientationchange 이벤트 18-01.html DOCTYPE html> 1..

Javascript - jQuery Mobile 컴포넌트 - 컨텐트 서식 적용, 테마롤러 사용법

1. 레이아웃 그리드 ui-block-a 클래스가 가장 맨 앞임 2. 콜렙서블 컨텐트 블록 3. 콜렙서블 셋(아코디언) 4. 테마롤러 디자인하기 테마롤러 사용법 http://themoeroller.jquerymobile.com으로 접속한뒤 사용하는 jquery 버젼을 설정해준다. 테마롤러를 이용하면 사용자 정의 css파일을 얻을 수 있다. 위의 팔레트에서 드래그앤 드롭으로 아래와같이 커스터마이징 테마를 쉽게 만들 수 있다. 다운로드 버튼을 누르면 다음과 같이 나와서 테마 이름을 쓰고 를 추가해서 써야된다고 써있다. 다운받은 파일을 풀어보면 다음과 같이 나온다. themes폴더를 카피해서 앱타나 스튜디오 프로젝트에 넣는다. 여기서 프로젝트.html파일에 첫번째는 자기가 만든 테마.css파일을 넣고 두번째는..

Javascript - jQuery Mobile 컴포넌트 - 폼

1. 필드 컨테이너 텍스트 입력 필드 그에 맞는 소프트 키보드가 나오게 설계되어있음 2. 슬라이더 3. 플립 토글 스위치 4. 라디오 버튼 5. 체크박스 버튼 6. 셀렉트 메뉴 1. 네이티브 옵션 메뉴 2. data-native-menu 옵션이 false 3. 여러개 선택하면 선택된 갯수가 나옴 16-01.html DOCTYPE html> 16-01 폼 요소 텍스트 입력 필드 슬라이더 플립 토글 스위치 라디오 버튼 체크박스 버튼 셀렉트 메뉴 © 2014 T academy 출력 화면 16-02.html DOCTYPE html> 16-02 텍스트 입력 필드 Home 이름 패스워드 이메일 전화 나이 URL 검색 내용 © 2014 T academy 출력 화면 16-03.html DOCTYPE html> 16-0..

반응형