Blog | Tag | Local | Media | Guest | Login  RSS
Programing에 해당되는 글 6건

   - 먼저 Bada SDK/IDE를 받아야 한다.
     개발자 사이트에 가서 받으면 되는데, 로그인을 해야 SDK/IDE를 받을 수 있다.

*) Bada 개발자 사이트
http://developer.bada.com/



   - 다운로드를 받아서 압축을 풀면 설치 파일이 있을 것이다.
     설치 파일을 실행해서 설치하면 된다.
     설치는 간단하게 끝난다. 그리고 재부팅을 한번 해야할 것이다.

   - 이제 IDE를 실행해서, Sample을 실행 해보자.
      설치된 폴더의 IDE폴더에 들어가면 "badaIDE.exe"파일을 실행하면 IDE가 실행된다.
      (편하게 실행하기 위해 바탕화면에 바로가기 버튼을 만들어 놓자)
  

   - 실행하면 위와 같은 로고가 나오면서 IDE가 실행될 것이다.


   - 그리고, 처음 실행하면, Workspace의 경로를 지정할 수 있는 창이 나타나게 된다.
      경로를 지정하고 OK 버튼을 누른다. ( ex. D:\WorkSpaceBada )

   - 이제 SDK에서 제공하는 기본적인 예제를 한번 실행 해보도록 하자.

   - 간단하게, 오른쪽에 bada SDK Samples창의 Sample들의 목록 중에 실행하고자 하는 Sample을
     선택한 후 오른쪽마우스 클릭을 하여 "copy into my worksapce.."를 실행해서 자신의 workspace로
     옮길 수 있다.

   - 다른 방법으로는 아래 처럼 import해도 된다.



   - IDE의 Project Explorer 창에서 오른쪽 마우스 버튼을 눌러서 Import 메뉴를 선택한다.


   - Import 창에서 bada Application Project를 선택하고 Next버튼을 누른다.
    

   - Select root directory 경로를 Bada SDK가 설치된 폴더의 Samples폴더에 있는 프로젝트들 중
     실행해보고 싶은 프로젝트를 선택한다. ( ex. Calculator )
     그리고 Finish를 누른다.


   - 그러면 위의 화면과 같이 프로젝트가 생성된 것을 확인 할 수 있다.
   - 여기서 프로젝트를 빌드( "Build Project" )하고, Binaries가 생기면,
     시뮬레이터로 실행( "Run as" -> "bada simulator application" ) 하면 된다.

   - 처음 실행하면, 초기화 작업을 하기 때문에 어느정도 시간이 걸릴것이다.
     그리고, 언어 설정등 초기화 화면도 나타날 것이다. 상황에 맞게 설정해주면 된다.


   - 그리고, 최종적으로 시뮬레이터에서 제대로 실행된 화면을 볼 수 있을 것이다.

   - 이제 개발환경 구축이 끝났고, 개발한 코드를 Bada 시뮬레이터에서 확인해 볼 수 있을 것이다.



신고

'Programing > Bada' 카테고리의 다른 글

[ Bada ] 개발 환경 구축하기  (0) 2010.06.06

 태그 : 

*) 설치 파일( INF )에 대한 이해

 

3.1 이름이 정해져 있는 섹션

*) Version 섹션
- 이 섹션에는 반드시 Signature지시자(Directives)가 있어야 함.

- Signature="signature-name"

    - 사용할 수 있는 운영체제

    ( $Windows NT$, $Windows 95$, $Chicago$ )

- Class=class-name

    - 드라이버 설치를 위한 디바이스 유형을 명시.

- ClassGuid={nnnnnnnn-nnnn-nnnn-nnnn-nnnnnnnnnnnn}

    - GUID

- Provider=%INF-creator%

    - INF 파일을 제공하는 제공자의 이름을 기록하는 지시자.

    - %%문자열의미, 설치 파일 내에 있는Strings 섹션에서 문자열의 값 찾아 대체

- LayoutFile=filename.inf[,filename.inf]...

    - 다른 INF 파일을 포함 할 때, Needs 지시자, Include 지시자 등을 대부분 가짐

- CatalogFile=filename.cat

    - WHQL로부터 인증 테스트를 거친 드라이버일 경우, 카탈로그 파일을 지시.

- DriverVer=mm/dd/yyyy[,x.y.v.z]

    - 드라이버 생성 날짜를 입력(윈도우2000이상)

 

*) SourceDisksNames 섹션

- 설치에 사용할 파일들이 보관된 경로를 설명하는 섹션

    - diskid=disk-description,,,subdir

        - diskid는 1,2,3처럼 서로 다른 수를 의미하는 식별 ID로 명시

        - disk-description은 파일이 보관된 볼륨의 이름을 명시

        - subdir은 볼륨 아래에 하위 경로를 따로 두는 경우에 사용

 

*) DestinationDirs 섹션

- 설치 과정 중 원본 파일이 복사될 장소를 가리키는 섹션

    - DefaultDestDir=dirid[,subdir]

        - dirid는 윈도우에서 정의된 디렉터리를 알려주는 ID

        ( 10:윈도우 디렉터리, 11:시스템 디렉터리,
         
12:드라이버 디렉터리(윈도우NT계통),시스템 디렉터리\IOSUBSYS 디렉터리(윈도우9x)

          17:INF 디렉터리, -1:절대 경로 )

        - subdir은 하위 경로

 

*) SourceDisksFiles 섹션

- 설치 과정 중에 사용할 원본 파일이 SourceDisksFiles 섹션에서 명시한 지시자 중 어떤 지시자 아래 존재하는지를 설명하는 섹션

- filename=diskid[,[subdir]]

    - filename은 설치 과정 중에 사용할 원본 대상 파일 이름을 기억

    - diskid는 SourceDisksFiles 섹션에서 설명하는 지시자ID를 나타냄.

    - subdir은 Diskid가 가리키는 디렉터리 아래의 하위 경로를 나타냄.

 

*) Manufacturer 섹션

- 제조사 정보를 보관하는 섹션. 여러 제조사 정보를 포함할 수도 있음.

- manufacturer-identifier

  [manufacturer-identifier]

- 형식

    - %strkey%=models-section-name|

       %strkey%=models-section-name[,TargetOSVersion][,TargetOSVersion]...

         - %strkey%는 제조사 이름,
         - models-section-name는 구체적인 모델정보를 담고 있는 섹션 이름,
         - TargetOSVersion는 지원 운영체제 버전.

 

*) ControlFlags 섹션

- 설치 과정 중에 특별히 추가 작업을 원하는 경우를 설명하는 섹션

- ExcludeFromSelect=*|

   ExcludeFromSelect=device-identification-string[,device-identification-string]...

     - *는 모든 섹션,
     - device-identification-string 섹션을 설치 과정에서 제외

- ExcludeFromSelect.nt=device-identification-string[,device-identification-string]...

    - NT 계통의 운영체제에서는 생략해야 할 섹션들을 설명

-ExcludeFromSelect.ntx86=device-identification-string[,device-identification-string]

    - NT 계통의 x86 시스템에서는 생략해야 할 섹션들을 설명

 

*) Strings 섹션

- 설치 파일 내에서 사용하는 모든 문자열 값을 설명하는 섹션

- strkey1=[“]some string["]

    - strkey1은 문자열 변수 이름을 정의

    - some string은 문자열 값을 정의

 

*) DefaultInstall 섹션

- 설치 파일의 컨텍스트 메뉴상의 “설치”를 선택했을 때 수행할 정보를 담는 섹션

 

*) ClassInstall32 섹션

- 설치 파일을 사용해 설치하는 항목 중에 새로운 디바이스 유형(Class)을 추가 설치할 때 사용하는 섹션.

 

 

 

3.2 이름이 정해져 있지 않은 섹션

*) Models 섹션

- Manufacturer 섹션의 지시자에서 명시한 섹션 이름이어야 한다.

- 설치할 장치 모델 정보를 담고 있다.

- device-description=install-section-name,pnp-id[,pnp-id...]

    - device-description은 설치된 이후에 장치 관리자 대화상자에서 보여질 장치의 이름

    - install-section-name은 이어질 DDInstall 섹션의 이름

    - pnp-id는 열거자가 열거한 장치를 위한 ID에 대응되어져야 하는 ID

 

*) DDInstall 섹션(DDInstall.NT)

- Models 섹션에서 지시자가 언급한 설치를 위한 섹션 이름.

- [CopyFiles=@filename | file-list-section[,file-list-section]...]

    - @filename은 복사할 원본 파일 이름을 바로 지정할 때 사용된다.

    - file-list-section은 여러 개의 원본 파일들이 복사되어야 하는 경우에 이들에 대한 정보를 기억하는 섹션 이름을 기록

- [CopyINF=filename1.inf[,filename2.inf]...]

    - 설치 가정 중에 복사하고자 하는 INF 파일의 이름을 적는다.

- [AddReg=add-registry-section[,add-registry-section]...]

    - 설치 과정 중에 추가하고자 하는 시스템 레지스트리 정보를 담고 있는 섹션 이름을 적는다.

- [Delfiles=file-list-section[,file-list-section]...]

    - 설치 과정 중에 지우고 싶은 파일들의 정보를 담고 있는 섹션 이름

- [Renfiles=file-list-section[,file-list-section]...]

    - 설치 과정 중에 이름을 바꾸고 싶은 파일들의 정보를 담고 있는 섹션 이름

- [DelReg=del-registry-section[,del-registry-section]...]

    - 설치 과정 중에 지우고 싶은 시스템 레지스트리 정보를 담고 있는 섹션 이름

- [LogConfig=log-config-section[,log-config-section]...]

    - 설치 과정 중에 해당하는 디바이스 장치에 할애할 입출력 주소 정보, 인터럽트 리소스 정보등을 담고 있는 섹션 이름.

 

*) DDInstall.Services 섹션(DDInstall.NT.Services)

- 하나 이상의 서비스를 등록하는 지시자로 이루어진 섹션.

- 드라이버는 윈도우에서 Win32 서비스 형태로 등록되므로 모든 드라이버는 이처럼 서비스로 등록되어야 함.

- AddService=ServiceName,[flags],service-install-section

    - ServiceName음 등록될 서비스의 이름을 명시

    - service-install-section은 설치될 서비스에 대한 구체적인 파라미터를 담고 있는 섹션에 대한 이름을 명시.

- Flags는 등록될 서비스의 역할을 설명.

    - 0x00000002 (Associate Service, 주 서비스 드라이버)

- DelService=ServiceName[,[flags]

    - ServiceName은 제거될 서비스의 이름을 명시

- flags

    - 0x00000004 (디버깅을 위해서 사용되는 이벤트 로깅 정보를 삭제하라는 의미)

    - 0x00000200 (서비스를 삭제하기 전에 우선적으로 서비스를 중지시키라는 의미)

 

*) DDInstall.HW 섹션(DDInstall.HW)

- 시스템 레지스트리의 열거자 키( HKLM\SYSTEM\CurrentControlset\Enum)의 하위 키에 해당하는 장치를 위해서 열거자가 만들어 놓은 디바이스의 키 아래에 원하는 변수 값을 기록하거나 지울 때 사용하는 섹션 정보.

- AddReg지시자,DelReg지시자

 

3.3 지시자(Directives)

*) AddReg 지시자

- 시스템 레지스트리에 특정 키와 변수들을 추가할 때 작성하는 지시자다.

- AddReg=add-registry-section[, add-registry-section]...

    - add-registry-section은 추가할 레지스트리 정보를 담고 있는 섹션

    - [add-registry-section]

        reg-root, [subkey], [value-entry-name], [flags], [value]

            - reg-root는 접근할 레지스트리 기준 키를 명시

                - HKCR : HKEY_CLASSED_ROOT를 지칭

                - HKLM : HKEY_LOCAL_MACHINE을 지칭

                - HKCU : HKEY_CURRENT_USER을 지칭

                - HKU : HKEY_USERS를 지칭

                - HKR

                    - DDInstall ( 장치의 소프트웨어 키 )

                    - DDInstall.HW ( 장치의 하드웨어 키 )

                    - DDInstall.Service ( 장치의 서비스 키 )

                        - 소프트웨어 키 : 설치되 이후 만들어지는 Class정보를 담고 있는 위치

                        - 하드웨어 키 : 열거자에 의해서 열거된 장치의 정보를 담고 있는 위치

                        - 서비스 키 : 사용되는 서비스 정보를 담고 있는 위치

                - subkey는 reg-root 키 아래의 하위 키를 명시

                - value-entry-name은 변수 이름을 명시

                - flags는 변수의 속성을 의미

                    - 0x00000000 ( 널 문자열 값 )

                    - 0x00000001 ( 바이너리 값 )

                    - 0x00010000 ( 다중 문자열 값 )

                    - 0x00010001 ( DWORD 형태 값 )

                    - value는 값을 의미

 

*) DelReg 지시자

- 시스템 레지스트리에서 특정 키와 변수들을 제거할 목정으로 작성하는 지시자

- DelReg=del-registry-section[, del-registry-section]...

    - del-registry-section은 지우고 싶은 레지스트리 키와 변수들을 정의하는 섹션 이름

 

*) CopyFiles 지시자

- 설치 과정 중에 복사할 파일들을 지정하는 지시자

- [MyCopyFiles]

    mydriver.sys

    filter.sys

 

*) CopyINF 지시자

- 설치 과정 중에 복사할 설치 파일들을 지정하는 지시자

- [MyMfDevice.NTx86]

    CopyINF = Sound.INF

 

*) DelFiles 지시자

- 설치 과정 중에 제거할 파일 목록을 담은 섹션을 지칭하는 지시자

 

*) RenFiles 지시자

- 설치 과정 중에 이름을 바꾸고 싶은 파일 목록을 담은 섹션을 지칭하는 지시자

- RenFiles=file-list-section[, file-list-section]...

    - file-list-section은 이름을 바꾸고 싶은 파일들의 목록을 담고 있는 섹션의 이름을 명시

    - [file-list-section]

        new-dest-file-name, old-source-file-name

 

*) AddService 지시자

- 설치 과정 중에 등록하고자 하는 서비스를 나열하는 지시자

 

*) DelService 지시자

- 설치 과정 중에 제거하고자 하는 서비스를 나열하는 지시자

 

*) Include 지시자

- 외부에 있는 다른 설치 파일을 포함하는 용도로 사용, Needs 지시자와 함께 사용

 

*) Needs 지시자

- 외부에 있는 다른 설치 파일을 포함하는 경우에 실제 사용할 섹션 명을 명시하는 지시자 ( 외부에 있는 USBSTOR.INF 파일을 열어서, USBSTOR_BULK_NT 섹션을 포함하도록

- [HajeSample]

    Include=USBSTOR.INF

    Needs=USBSTOR_BULK_NT


신고

'Programing > WDM' 카테고리의 다른 글

[ WDM ] 설치 파일( INF )에 대한 이해  (0) 2010.06.06

 태그 : 

1. SDK 다운로드

*) 개발자 사이트
   -  http://developer.android.com/index.html


   - 각 OS에 맞는 SDK를 Download한다.



2. 이클립스 다운로드

*) 이클립스 홈페이지
   - http://www.eclipse.org/





   - 각 OS에 맞는 이클립스를 Download한다.



3. SDK와 이클립스 연동하기

   - 다운로드 받은 이클립스를 압축을 풀고, "eclipse.exe"를 실행 한다.
     ( 이클립스를 실행하기 위해서는 java sdk가 설치 되어 있어야 한다. http://java.sun.com/ 에서
      JDK(Java SE)를 다운 받아 설치하면 된다. )

   - 경로 설정등을 하는 화면이 나타날 것이고, 초기화면이 나타나면 정상적으로 실행된 것이다.

   - 이제 이클립스 안드로이드 플로그인을 다운로드 한다. 아래 화면의 빨간 사각형을 차례로 클릭한다.



   - Installing the ADT Plugin 부분으로 이동하면 아래와 같은 화면이 나올 것이고,
     빨간 사각형 부분의 내용인 Eclipse3.5( Galileo )에 해당하는 글을 따라서 하면 된다.



   - 먼저 이클립스를 실행하고, Help -> Install New Software 선택한다.
     Available Software 화면에서 Add버튼 클릭한다.



   - Add Site화면이 나타나면
     "Name"에는 "Android Plugin"을 입력하고,
     "Location"에는 https://dl-ssl.google.com/android/eclipse/ 을 입력한고 OK버튼을 누른다.



   - 그러면 위와 같은 화면이 나올 것이고, 나오지 않는 다면, 빨간색 사각형의 리스트를 보는 버튼을 눌러서,
      해당 Location을 선택해준다.

   - 그리고, 플러그인 목록을 모두 체크한 후 Next 버튼을 누른다.



   - Install Details 화면이 나오면, Android DDMS와 Android Development Tools를 확인하고 Next 버튼을 누른다.
      그리고, 사용자 약관에 동의하고 Finish 버튼을 누르면 install이 진행된다.

   - Install이 완료되고 나서 이클립스를 재실행한다.



   - 이클립스가 재실행 되고 나서는 툴바에 안드로이드 아이콘이 보이게 될 것이다.

   - 이제는 Android SDK Directory를 가리키도록 이클립스의 Preferences를 수정해야한다.

   - 먼저 처음에 받았던 Android SDK의 압축을 풀고, 적당한 경로에 옮겨 놓는다.
     ( ex. D:\android-sdk-windows )



   - 이클립스의 메뉴 Window -> Preferences를 선택하고,
     Android탭에서 SDK Location 항목에 D:\android-sdk-windows를 입력한다.

   - Apply 버튼을 클릭하고, OK 버튼을 누른다. 작업 진행이 완료될 때까지 기다린다.



   - 작업이 완료되고, 툴바의 안드로이드 아이콘을 클릭해서, 두번째 탭의 Installed Packages를 클릭하면,
     위의 빨간색 사각형 부분의 항목을 확인할 수 있을 것이다.( 나머지 항목은 뒤에서 설치한다. )



4. Available Package 추가 등록하기

   - 이제는 Available Package 추가등록을 할 것이다.

   - 툴바의 안드로이드 아이콘을 클릭한다.
     세번째 탭인 "Available Packages" 항목을 클릭한다.


   - check박스를 체크하면, 설치할 수 있는 package들이 나올 것이다.
     여기서 이름은 같은데 버전이 다른 패키지들이 보일 것이다.
     이 때 가장 최근 버전만 체크해서 설치하는 것이 좋다.

   - 체크를 다 했으면, "Install Selected"버튼을 눌러 다음 화면으로 넘어간다.

   - Choose Packages to Install 화면이 나오면 오른쪽에 "Accept All"을 체크한 후
     "Install Accepted" 버튼을 눌러 설치를 시작한다.

   - 인스톨이 완료된 후 Installed Packages 탭에서 설치된 패키지들을 확인할 수 있다.

   - 앞으로 더 필요한 패키지들이 있다면 위와 같은 방법으로 추가로 설치하면 된다.



5. Virtual Device 생성하기

   - 이제 안드로이드폰 애뮬레이터를 생성하도록 하겠다.

   - 툴바의 안드로이드 버튼을 클릭한다.



   - 첫번째 탭의 "Virtual Devices"메뉴를 보면 아직 등록된 AVD가 없을 것이다.
    여기서 New버튼을 눌러서 등록을 시작한다.



   - Create new AVD창에서 Name을 입력하고, Target을 선택한다.
     그리고 Create AVD 버튼을 누른다.



   - 그러면 위와 같이 AVD가 등록된 것을 확인할 수 있을 것이다.
     그리고, Start 버튼을 누르게 되면 안드로이드 에뮬레이터가 실행되게 된다.


   - 위와 같은 화면이 처음에 나타나게 되고, AVD가 완전히 로딩될 때까지는 시간이 좀 걸린다.( 약 3분 정도 )

   - 로딩이 완료되면 아래와 같은 화면이 나타난다.


   - 안드로이드를 개발할 기본적인 준비가 다 되었다.
     이제 개발하고 애뮬레이터에 올려보면서 테스팅을 할 수 있을 것이다.





신고

'Programing > Android' 카테고리의 다른 글

[ Android ] 개발 환경 구축하기  (0) 2010.06.06

 태그 : 

 

브라우저내장객체 계층구조 .........................................................


익스플로러나 네비게이터 등의 브라우저가 내장하고 있는 객체를 자바스크립트를 이용하여 이용할 수 있다. 이 부분이 자바스크립트의 상당부분을 차지할 정도로 중요하고 이용빈도 또한 아주 높다.



객체 구성 (테이블 태그로 만든 도표)

 

window

 

 

 

 

 

 

 

 

 

 

document

 

frame

 

history

 

location




navigator

 

 

 

 

 

 

 

 

anchor

 

applet

 

area

 

form

 

image

 

layer

 

link

 

plugin

 

title

 

 

 

 

 

 

button

 

checkbox

 

file upload

 

hidden

 

password

 

radio

 

reset

 

select

 

submit

 

text

 

textarea

 

 

 

 

 

 

 

 

 

 

 

 

 

 

option

 

위의 각각은 모두 객체이름이다. 일단 숫자에 한번 놀라고!
또한 각각의 객체는 모두 자신만의 속성과 메서드와 이벤트 핸들러를 가지고 있다.
그 숫자 또한 엄청 많아서 또 한번 놀라야한다!!!

그러나 걱정할 일은 아니다. HTML 에서 만난적이 있는 안면있는 태그들을 전부 객체라고 부를 뿐이다.

브라우저 객체는 최상위 window객체로부터 파생되어 계층적인 구조를 가지고 있다.
window
객체의 메서드 open()을 사용한다면 window.open() 처럼 사용할 수 있다.
window
객체는 최상위 객체로 생략하여 open() 처럼 사용할 수 있지만 같은 메서드를 다른 객체도 가질 수 있으므로 객체이름을 꼭 적어주는게 좋겠다.



window 객체 .........................................................


아래는 최상위 window객체가 가진 속성과 메서드,이벤트 핸들러의 종류를 훓어보고 몇가지 예제를 해본다. 필요한 작업이 있을 때마다 객체를 찾아보고 속성이 있나, 메서드를 가졌나, 이벤트핸들러가 있는지를 찾아봄으로써 점점 내공이 깊어지는 것이다.

 



■ window 객체 프로퍼티

 

status

브라우저의 상태바에 문자열을 출력하는 경우에 사용

defaultStatus

브라우저의 상태바에 초기 문자열을 설정

length

창안의 프레임 수

name

창 이름

self

현재 창 자신, window와 같음

window

현재 창 자신, self와 같음

parent

프레임에서 현재프레임의 상위프레임

top

현재프레임의 최상위프레임

opener

open()으로 열린 창에서 볼 때 자기를 연 창

document

document 오브젝트

frames

창안의 모든 프레임에 대한 배열정보

history

history 오브젝트 및 배열

location

location 오브젝트

closed

창이 닫혀 있는 상태

locationbar

location

menubar

창 메뉴 바

innerHeight

창 표시 영역의 높이(픽셀), 익스플로러 지원되지 않음

innerWidth

창 표시 영역의 너비(픽셀), 익스플로러 지원되지 않음

outerHeight

창 바깥쪽 둘레의 높이, 익스플로러 지원되지 않음

outerWidth

창 바깥쪽 둘레의 너비, 익스플로러 지원되지 않음

pageXOffset

현재 나타나는 페이지의 X위치, 익스플로러 지원되지 않음

pageYOffset

현재 나타나는 페이지의 Y위치, 익스플로러 지원되지 않음

personalbar

창의 퍼스널 바

scrollbar

창의 스크롤 바

statusbar

창의 상태 바

toolbar

창의 툴 바

 



■ window 객체 메서드

 

alert()

경고용 대화상자를 보여줌

clearTimeout()

setTimeout 메소드를 정지

confirm()

확인, 취소를 선택할 수 있는 대화상자를 보여줌

open()

새로운 창을 오픈

prompt()

입력창이 있는 대화상자를 보여줌

setTimeout()

일정 간격으로 함수를 호출하여 수행, millisecond 단위로 지정

eval()

문자열을 숫자로 바꿈

toString()

오브젝트를 문자열로 바꿈

blur()

focus를 이동

focus()

focus를 줌

scroll()

창을 스크롤 함

valueOf()

오브젝트 값을 반환

back()

한 단계 전 URL(이전화면)로 돌아감. 익스플로러 지원 안함

find()

창안에 지정된 문자열이 있는지 확인, 있다면 true 없으면 false. 익스플러러 지원 안함

forward()

한 단계 뒤의 URL(다음화면)로 이동. 익스플로러 지원 안함

home()

초기화 홈페이지로 이동. 익스플로러 지원 안함

moveby()

창을 상대적인 좌표로 이동. 수평방향과 수직방향의 이동량을 픽셀로 지정

moveto()

창을 절대적인 좌표로 이동. 창의 왼쪽 상단 모서리를 기준으로 픽셀을 지정

resizeby()

창의 크기를 상대적인 좌표로 재설정. 밑변의 모서리를 기준으로 수평방향, 수직방향을 픽셀로 지정

resizeto()

창의 크기를 절대적인 좌표로 재설정. 창 크기를 픽셀로 지정

scrollby()

창을 상대적인 좌표로 스크롤. 창의 표시영역의 수평방향과 수직방향에 대해 픽셀로 지정

scrollto()

창을 절대적인 좌표를 스크롤. 창의 왼쪽 상단 모서리를 기준으로 픽셀로 지정

stop()

불러오기를 중지. 익스플로러는 지원 안함

captureEvents()

모든 타입의 이벤트를 판단

setInterval()

일정시간마다 지정된 처리를 반복

clearInterval()

setInterval 메소드의 정지

handleEvent()

이벤트 취급자를 정함

print()

화면에 있는 내용을 프린터로 출력

releaseEvent()

다른 계층의 이벤트로 이벤트를 넘김

routeEvent()

판단한 이벤트와 같은 계층의 이벤트

toSource()

오브젝트값을 문자열로 반환

 



■ window 객체 이벤트핸들러

 

onBlur

브라우저가 포커스를 잃을 때 발생

onDragDrop

사용자가 다른곳에서 객체를 브라우저 안에 넣으려고 할 때 발생. 익스플로러는 지원 안함

onError

문서를 읽는 중에 에러가 생길 때 발생

onFocus

브라우저에 포커스를 얻을 때 발생

onLoad

문서를 읽을 때 발생

onMove

브라우저의 위치를 변경했을 때 발생. 익스플로러는 지원 안함

onResize

창의 크기를 변경했을 때 발생. 익스플로러는 지원 안함

onUnload

현재 문서를 지울려고 할 때 발생

 



새창열기 open() 메서드

 

window.open("문서url","창이름","창의 특성")

웹여행중에 많이 본 것일텐데 링크나,버튼,이미지를 누를 때 많이 뜨죠!

첫째인수로 url이 필요하죠. 새창에도 내용을 넣어야 하니까요.
둘째인수로 창이름, 이게 같은 경우엔 계속 창을 열 때 새로 열지 않고 이미 열린 창을 이용합니다.
세째인수는 새로 열릴 창의 너비,높이,툴바,상태바등을 지정하는거죠.

 



창의특성

 

directories

yes || no

익스플로러 연결도구모음, 익스플로러 전용

location

yes || no

주소입력란

menubar

yes || no

메뉴표시줄

scrollbars

yes || no

스크롤바

status

yes || no

상태표시줄

toolbar

yes || no

도구모음

copyhistory

yes || no

히스토리정보를 복사

resizable

yes || no

창 크기 조절 가능여부

width

픽셀

창의 너비

height

픽셀

창의 높이

 

 

<script language="javascript">
//
페이지로딩시 새창 열기

function winOpen() {
window.open("123.html","newWin","width=300,height=200,toolbar=no")
}
</script>

<body onLoad="winOpen()">


<script language="javascript">
//
클릭시 새창열기

function winOpen() {
window.open("123.html","newWin","width=300,height=200,toolbar=no")
}
</script>

<font onClick="winOpen()">


<script language="javascript">
//
클릭시 새창열기 , 링크에서

function winOpen() {
window.open("123.html","newWin","width=300,height=200,toolbar=no")
}
</script>

<font onClick="winOpen()">
클릭열기 </font>
<a href="javascript:winOpen()">
링크열기 </a>


<script language="javascript">
//
매개변수를 이용하기

function winOpen(url,winname,winhow) {
window.open(url,winname,winhow)
}
</script>

<a href= "javascript:winOpen('123.html','newWin','width=300,height=200,toolbar=no')">
매개열기 </a>


 



새창열기 close() 메서드

 

 

<script language="javascript">
function winClose() {
window.close()
}
</script>

<a href= "javascript:winClose()">
함수이용해서 닫기 </a>

<a href= "javascript:window.close()">
메서드 이용 닫기 </a>


 



새로 열린 창에서 연 창을 컨트롤하기

 

 

<script language="javascript">

//
창 닫기 전에 연 창의 폼요소에 값 넘기기

function winClose(addr) {
opener.form1.address=addr
self.close()
}
</script>

<a href= "javascript:winClose('
서울 종로구')"> 종로구</a>
<a href= "javascript:winClose('
서울 마포구')"> 마포구</a>


<script language="javascript">

//
창 닫기 전에 연 창을 리로드하기

function winClose() {
opener.location.reload()
self.close()
}
</script>

<a href= "javascript:winClose()">
함수이용해서 닫기 </a>


 



새로 열린 창에서 크기 조절하기 window.resizeTo

 

 

<script language="javascript">
//
페이지로딩시 크기 조절

function winSize() {
window.resizeTo(300,200) //
너비,높이
}
</script>

<body onLoad="winSize()">

 



새로 열린 창에서 위치 조절하기 window.moveTo

 

 

<script language="javascript">
//
페이지로딩시 위치 조절

function winMove() {
window.moveTo(200,200) // X,Y
좌표
}
</script>

<body onLoad="winMove()">

 

window 객체에서 가장 많이 사용되는 필수 기능인 새창관련만 살펴보았다.
나머지는 필요할 때 검색을 통해 많은 예제 소스를 접할 수 있을 것이다!!!

 

document 객체 .........................................................


최상위 window객체에서 파생된 것으로 <body>~</body> 태그속의 내용과 관련된 처리를 할 수 있다.

많은 기능이 있지만 이 객체는 범위가 넓어서 직접 다루는 일은 별로 없고 실제 이용은 이 객체에서 파생된 하위객체(Layer, Link, Image, Area, Anchor, Applet, Form)를 통해 세세한 접근을 할 수 있다.

상위 객체인 window를 생략하고 사용한다!!!

 



■ document 객체 프로퍼티

 

title

문서의 제목을 설정하거나 반환

location

현재 문서의 URL

referer

이전 문서의 URL

cookie

쿠키파일의 정보

bgColor

창의 배경색을 설정

fgColor

글자색을 설정

lastModified

파일의 최종 변경 날짜를 알아냄

URL

현재의 URL

alinkColor

누르고 있는 동안의 링크문자열의 색을 설정

vlinkColor

이미 누른적이 있는 링크 문자열의 색을 설정

linkColor

링크색을 설정

anchors

anchor 오브젝트 및 배열

forms

form 오브젝트 및 배열

links

링크 오브젝트 및 배열

domain

현재 도메인 이름(tainting 상태일때만 사용가능)

applets

applet 배열

area

area 오브젝트

embeds

plug in 배열정보

images

이미지 오브젝트 및 배열

layers

layer 오브젝트 및 배열

 



■ document 객체 메서드

 

open()

문서에 내용입력 준비됨, 기존 내용 삭제됨

close()

문서에 내용입력이 끝났음

clear()

문서의 내용을 삭제

write()

문서에 내용을 출력

writeln()

줄바꾸기를 포함 문서에 내용을 출력

eval()

문자열을 수치로 변경

toString()

오브젝트를 문자열로 변경

valueOf()

오브젝트 값을 표시

getSelection()

선택범위안에 포함되어 있는 문자열을 반환

captureEvent()

모든 타입의 이벤트를 판단

releaseEvent()

다른 계층의 이벤트로 이벤트를 넘김

routeEvent()

판단한 이벤트와 같은 계층의 이벤트

toSource()

오브젝트 값을 문자열로 표시

 



■ document 객체 이벤트핸들러

 

onBlur

문서가 비활성화될 경우

onFocus

문서가 활성화될 경우

onClick

문서가 클릭될 때

onDBClick

문서가 더블클릭될 때

onKeyDown

키를 누를 때 발생

onKeyPress

키를 누르고 있을 때 발생

onKeyUp

키를 눌렀다 놓을 때 발생

onMouseDown

아우스를 누를 때 발생

onMouseUp

마우스를 눌렀다 놓을 때 발생

 



현재문서의 URL

 

 

<script language="javascript">
alert(document.location)
</script>

 



이전문서의 URL

 

 

<script language="javascript">
alert(document.referer) //
이 파일을 링크한 페이지에서 넘어와야 값이 있음!
</script>

 

기타 : 문서를 구성하는 이미지,링크,폼태그,레이어의 배열정보를 얻을 수 있다.

 

history 객체 .........................................................


window
객체에서 파생된 것으로 window를 생략한다.
방문자가 최근에 방문한 URL을 웹브라우저가 저장해둔 히스토리정보를 이용해서 앞으로,뒤로 갈 수 있다. URL자체를 알아내지는 못한다!

어떤 일처리를 하고 나서 원래의 페이지로 보낼 때! 이용하겠죠!!!

*
새로 서버의 문서를 요청하지 않고 보관하고 있던 페이지를 보여준다는것!!!

 



■ history 객체 프로퍼티

 

length

저장된 URL 개수

 



■ history 객체 메서드

 

back()

히스토리 목록에서 한 단계 뒤로

forward()

히스토리 목록에서 한 단계 앞으로

go(정수)

히스토리 목록에서 한 단계 앞으로,뒤로(음의 정수일 경우)

 

back() go(-1) 과 같음

 



뒤로 돌아가기

 

 

<script language="javascript">
alert("
암호가 다르군요")
history.back() // history.go(-1)
과 동일
</script>


<a href="javascript:history.back()">뒤로</a>

 

location 객체 .........................................................


window
객체에서 파생된 것으로 window를 생략한다.
현재 열려있는 문서의 URL정보를 얻을 수 있고...

이보다는 앞으로 이동할 문서의 URL을 설정하는 데 아주 중요하게 사용됩니다!!!

 



■ location 객체 프로퍼티

아래 URL 샘플을 가지고 URL에 대한 이해를 하시길...

http://www.dragoneye.co.kr:80/column2/list.asp#top?table=table30&page=2

 

href

문서의 URL 주소

위 주소 전체

host

호스트 이름과 포트

http://www.dragoneye.co.kr:80

hostname

호스트 컴퓨터이름

http://www.dragoneye.co.kr

hash

앵커이름

#top

pathname

디렉토리 이하 경로

/column2/list.asp

port

포트번호 부분

80

protocol

프로토콜 종류

http:

search

URL 조회부분

table=table30&page=2

 



■ location 객체 메서드

 

eval()

문자열을 숫자로 바꿈

toString()

오브젝트를 문자열로 바꿈

reload()

현재 문서를 다시 읽어옴

replace()

현재 문서를 다른 URL 문서로 바꿈

valueOf()

오브젝트 값을 표시

toSource()

오브젝트 값을 문자열로 표시

 



열릴 문서의 URL설정하기

 

 

<script language="javascript">

// URL
을 이동시킴
location.href= "http://www.dragoneye.co.kr"
//location.href= "login.html"
</script>


<script language="javascript">
alert("
회원가입을 하시겠습니까?")
location.href= "member.html"
</script>


<script language="javascript">
//
연 창의 URL 이동
opener.location.href= "member.html"
</script>


<script language="javascript">
//
부모창 지정프레임의 URL 이동
parent .frame1.location.href= "member.html"
</script>


<script language="javascript">
//
전체창에 새 페이지 열기
top.location.href= "index.html"
</script>


 



문서 새로 열기

 

 

<a href="javascript:location.reload()"> 새로열기 </a>


<script language="javascript">
//
연 창의 URL 새로 열기
opener.location.reload()
</script>

 

image 객체 .........................................................


document
객체 소속으로 문서내 모든 이미지에 정보를 가지고 있고 또한 설정도 가능하다. 기존 <img> 태그의 모든 속성을 컨트롤 할 수 있다!

실제 사용시에는 문서내의 이미지에 대한 설정을 변경하고자 할 때 사용됩니다!!!

 



■ image 객체 프로퍼티

<img>
태그에서의 각종 속성이 그대로 객체의 속성으로 되어 있음을 알 수 있다.
아래 객체 속성을 이용하면 이미지의 모든 속성을 바꿀 수 있다.

 

name

이미지객체의 이름

src

이미지 URL

width

너비

height

높이

border

테두리선 두께

hspace

좌우여백

vspace

상하여백

align

텍스트 속의 정렬

 



■ image 객체 이벤트핸들러

 

onclick,onMouseOver,onMouseOut 정도를 이용하면 된다.

 



이미지관련 예제 : <img> name을 설정해야 자바스크립트 객체롤 접근!

 

 

<script language="javascript">
//
자신의 이미지 바꿔주기
function imgChange(){
document.img1.src="2.gif"
}
</script>

<img name="img1" src="1.gif" onClick="imgChange()">


<script language="javascript">
//
자신의 이미지 롤오버 효과
function imgOver(){
document.img1.src="2.gif"
}
function imgOut(){
document.img1.src="1.gif"
}
</script>

<img name="img1" src="1.gif" onMouseOver="imgOver()" onMouseOut="imgOut()">


<script language="javascript">
//
작은이미지 클릭시 큰이미지 보여주기(이미지쇼)
function imgChange(img){
document.img1.src=img
}
</script>

<!--
큰이미지 초기 src 1b.gif -->
<img name="img1" src="1b.gif">

<!--
작은 이미지 -->
<img src="1s.gif" onMouseOver="imgChange('1b.gif')">
<img src="2s.gif" onMouseOver="imgChange('2b.gif')">


* 레이어및 새창과도 연결해 사용할 수 있다.

 

frame 객체 .........................................................


window
객체 소속으로 브라우저 내의 모든 프레임에 대해 정보를 가지고 있다.
실제 사용시에는 문서내의 이미지에 대한 설정을 변경하고자 할 때 사용됩니다!!!

이 객체의 속성,메서드,이벤트핸들러는 window객체와 동일하다.

frame
객체에서 중요한건 여러개의 프레임으로 나뉜 경우 어느 프레임에서 다른 프레임에 어떻게 접근할 수 있는가 하는 것이다.

*
프레임 나누기와 이름주기는 HTML 에서 먼저 약간의 공부를 필요로 한다.

 


아래 소스는 HTML 프레임만들기 의 예제 소스이다.

index.html

 

<html>
<head>
<title>
드래곤아이입니다~~ASP, HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<frameset rows="100,*" frameborder="NO" border="0">
<frame src="top.html" name="top" scrolling="NO" noresize marginwidth="0" >
<frameset cols="200,*" frameborder="NO" border="0">
<frame src="left.html" name="left" scrolling="NO" noresize marginwidth="0" marginheight="0">
<frame src="main.html" name="main" scrolling="auto" noresize>
</frameset>
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>

 



■ parent 속성

 

위와 같은 프레임구조에서 어느 프레임 파일에서 다른 프레임 파일에 접근하는 방법은

frames[0],frames[1],frames[2]
배열정보를 이용할 수 있고 또는
top,left,main
프레임이름으로 접근할 수도 있다.

 



■ parent , top, self

 

 

main.html 에 폼태그 form1 이 있고, 폼요소 address 가 있는데
top.html
에서 위 페이지의 폼요소 address 에 접근하는 방법이다.

parent.frames[2].document.form1.address.value="
서울" 또는
parent.main.document.form1.address.value="
서울" 으로....


어느 특정 프레임파일에서 위의 index.html같은 프레임셋파일을 창 전체에 어떤 문서를 로딩하려면 top 이란 속성을 사용해야 한다.

document .top.location.href="index2.html"


어느 특정 프레임파일에서 부모창의 URL을 바꾸는 방법
parent.top
이나 parent.left 를 생략하면 self 가 적용되어 자기창에 실행이 된다.

parent .top.location.href="top2.html"
parent .left.location.href="left2.html"


어느 특정 프레임파일에서 부모창의 URL을 리로딩 하기
parent.top
이나 parent.left 를 생략하면 self 가 적용되어 자기창에 실행이 된다.

parent .top.location.reload()
parent .left.location.reload()




* open() 메서드로 열린 자식창과 연 창에서 나오는 opener 와 혼동하지 않도록!

 

form 객체 .........................................................


document
객체 소속으로 html <form> 태그에 접근하는 정보를 제공합니다.
웹프로그래밍에서 아주 중요한 전송과 관련하여
필수로 애용해야 하는 객체입니다.

asp
기초 부분의 request 객체의 form 컬렉션 부분을 먼저 하고 나서 보완 차원에서 공부를 해야한다.

 


간단한 폼태그로 폼과 폼요소에 접근하는 방법을 살펴봅니다.
<form> ~ </form>
사이는 한건의 폼 전송으로 취급되며 한문서에는 여러개 폼이 올 수 있고, 폼 속에는 여러개의 폼요소(입력상자)가 올 수 있습니다.

각각은 name을 지정하여 자바스크립트에서 접근할 수 있도록 합니다.


아래는 간단한 폼태그로 자바스크립트에서 어떻게 접근하는지를 보려고 한 것입니다

 

<form name="form1" action="ok.asp" method="post" target="_self" enctype="" >
<input type="text" name="tel">
</form>
<form name="form2" action="ok.asp" method="post" enctype="">
<input type="text" name="tel">
</form>

 

* 위의 폼태그에서 "tel" 에 접근하려면 아래처럼 배열 또는 이름을 이용할 수 있다.

document.form1.tel 또는 document.forms[0].elements[0]
document.form2.tel
또는 document.forms[1].elements[0]


*
배열정보를 이용할 때는 for 반복문을 통해 모든 폼/모든 요소에 접근할 때 유리하다

 



■ form 객체 속성

 

name

<form> 태그의 name속성 값

위의 form1,form2

action

<form> 태그의 action속성 값

ok.asp

method

<form> 태그의 method속성 값

post || get

target

<form> 태그의 target속성 값

_blank, _self, _top,_parent

encoding

<form> 태그의 enctype속성 값

첨부파일 유무에 따라

elements

<form> 태그내의 폼요소를 배열로 저장

tel form1.elements[0]

 

1.

name 은 자바스크립트에서 폼이름으로 접근하기 이해 설정이 필요

2.

action 은 이 폼을 전송에 사용하고자 할 경우 이 전송을 받아 처리할 페이지를 설정

3.

method 는 전송의 방법으로 post 를 주로 사용한다 (asp request부분 참조)

4.

target 은 링크관련 태그와 마찬가지이다. 생략하면 _self 가 적용된다.

5.

encoding 은 전송 데이타를 encode하는 방법으로 첨부파일이 있다면
multipart/form-data
... 첨부가 없다면 생략하면 된다.

*


자바스크립트 속성을 이용하면 html에서는 고정시킨 속성값을 조건에 따라 유연하게 변화를 줄 수 있다. html에서 정한 속성값을 변경시킬 수가 있다.

 



■ form 객체 메서드

 

submit()

서버로 데이타 전송

submit 버튼을 누른 효과

reset()

폼요소의 값을 모두 초기화

reset 버튼을 누른 효과

 



■ form 객체 이벤트핸들러

 

onSubmit()

submit 버튼을 누르거나 submit() 메서드가 실행될 때

onReset()

reset 버튼을 누르거나 reset() 메서드가 실행될 때

 

form 객체의 사용법은 하위객체인 폼요소를 마치고 종합하는 단원에서 실제 사용례를 보는게 순서에 맞을 것 같아서 여기서는 생략합니다.

 

text, password, hidden, textarea ..............................................

사용자 입력값을 잘 콘트롤 하기 위해서는 HTML 태그의 속성, 객체의 속성,메서드,이벤트핸들러를 잘 이해하고 있어야겠다.

 



■ html 태그

 

 

1. size=20 이면 20문자 를 입력받을 수 있다.(공백도 1 한글도 1)

<input type="text" name="tel" size="20" maxlength="15">


2.
공간이 부족하면 사이즈는 작게 최대입력문자는 크게 할 수 있다.

<input type="password" name="pass" size="10" maxlength="20">


3.
미리 초기값을 줄 수 있다. (화면에 보이지 않음 대체로 초기값이 있어야 한다.)

<input type="hidden" name="name" value="
홍길동">

4.
사용자가 입력하는 걸 막으려면 readonly속성을 사용할 수 있다.

* textarea
에는 value 속성이 없다. 값은 시작태그 마감태그 사이에 넣어주면 된다.
<textarea name="content" cols="40" rows="5" readonly></textarea>
<textarea name="content" cols="40" rows="5">초기값</textarea>
*
자바스크립트에서 입력해 줄 수 있다.

text 는 한줄입력상자로 가장 많이 사용된다.

textarea
는 여러줄 입력상자로 cols(가로입력문자수), rows(세로라인수) 속성이 있다.

hidden
은 사용자에겐 보여주지 않으면서 미리 값을 가지고 있다가 서버로 전송시 사용

password
는 암호 같은 보안이 필요한 사용자 입력값을 받을 때 사용되며 *** 표시로
입력값을 모르도록 해둔 것이며 브라우저에서 뒤로가기를 할 경우 사라진다.

 



객체 속성

 

name

<input> 태그의 이름 설정 ,자바스크립트, asp 에서 이름을 사용함

value

이 상자에 사용자가 입력한 값

defaultValue

<input> 태그에 기본적으로 든 값 value="홍길동" 처럼 한 경우

type

<input> 태그에 type에 설정한 값 (text 를 리턴)

 



객체 메서드

 

focus()

지정한 입력상자에 커서를 둔다 (*자주 이용)

blur()

지정한 입력상자에 커서를 없앤다

select()

지정한 입력상자에 든 모든 값을 선택한다

 



객체 이벤트핸들러 (password에는 없다)

 

onFocus

지정한 입력상자에 커서를 둔 경우

onBlur

지정한 입력상자에 커서를 뺄 경우

onSelect

지정한 입력상자에 든 값을 선택할 때

onChange

지정한 입력상자에 든 값을 바꿀 때

 

<script language="javascript">
function Check(){

// 사용자 입력값 빈값인 경우
var tel=document.form1.tel.value

if (tel=="") {
alert("
전화번호는 꼬~!")
return //
호출한 쪽으로 돌려보냄(아래소스 실행을 막기 위해)
}


//
값이 있는 경우 submit() 메서드
document.form1.submit()
}
</script>

<form name="form1" action="ok.asp" method="post" target="_self">
<input type="text" name="tel">
<input type="button" value="
등록" onClick="Check()">
</form>

 

 

// 사용자 입력값 4자 미만인 경우
var tel=document.form1.tel.value
if (tel.length<4) {
alert("4
자 이상 입력을!!")
}


// 사용자 입력값 4자 미만이거나 8자 이상인 경우
var tel=document.form1.tel.value
if (tel.length<4 || tel.length>9) {
alert("4
자 이상 8자 까지 입력을!!")
}

 

radio, checkbox ...........................................................

사용자로 부터 입력을 받기도 하지만 어떤 데이타는 체크를 통해서 입력을 대신할 수 있다. 이것도 자주 사용하는 것으로 HTML이 가진 속성과 자바스크립트 객체가 가진 속성,메서드,이벤트 핸들러를 다줄 줄 알아야 한다

 

■ radio (HTML)

 

 

<input type="radio" name="sex" value="" checked>남자
<input type="radio" name="sex" value="
">여자

radio 버튼은 여러개 중에서 하나만을 고를 수 있는 경우에 사용하여야 하며
동일한 name 값을 설정한다.

위의 경우 화면에 보이는 부분인 "남자"를 선택하면 value "" 이 된다.
화면상의 라벨과 value가 반드시 같을 필요는 없다.

사용자의 편의를 위해 하나는 checked 속성으로 선택되어 있도록 할 수도 있다.

다른 항목을 체크하면 이전의 체크는 자동으로 빠진다.

 



■ checkbox (HTML)

 

 

<input type="checkbox" name="hoby" value="등산">등산
<input type="checkbox" name="hoby" value="
낚시">낚시
<input type="checkbox" name="hoby" value="
채팅">채팅

checkbox 버튼은 여러개 중에서 여러개를 고를 수 있는 경우에 사용할 수 있고
동일한 name 값을 설정해도 되고 안해도 된다.

위의 경우 화면에 보이는 부분인 "등산"를 선택하면 value "등산" 이 된다.
화면상의 라벨과 value가 반드시 같을 필요는 없다.

radio
와 달리 checked 속성으로 선택되어 있도록 하는 것은 좀 이상하다.

 



■ radio, checkbox 객체 속성

 

name

<input> 태그의 이름 설정 ,자바스크립트, asp 에서 이름을 사용함

value

태그안의 value 속성값

length

버튼의 개수

checked

체크된 경우 true, 안되면 false

defaultChecked

버튼이 기본으로 체크되어 있는지 true ,false 로 리턴

type

<input> 태그에 type에 설정한 값

 



■ radio, checkbox객체 이벤트핸들러

 

onClick

버튼 클릭시

 



■ radio객체 예제

 

radio 버튼은 항목이 여러개이므로 배열로 다뤄야...
아무 항목도 체크 안한 경우를 검사하는 스크립트

* radio
는 디폴트 checked 를 준 경우는 체크 안된 경우는 없다.
*
한번이라도 한 항목이 체크되면 한 항목도 체크안될 수가 없다.

 

 

<script language="javascript">

function Check(){

checkpoint=false //
체크안된 것으로 봄

//
배열이므로 반복문을 이용해서 배열요소에 접근
for(i=0 ; i<document.form1.sex.length ; i++){

if (document.form1.sex[i].checked==true) {
checkpoint=true //
체크된 것으로 만듬
}
}

//
반목문을 나온 checkpoint를 검사

if (checkpoint==false) {
alert("
꼭 체크해 주세요!")
return
}

//
체크한 경우 submit() 메서드
document.form1.submit()
}
</script>

<form name="form1" action="ok.asp" method="post">
<input type="radio" name="sex" value="
">남자
<input type="radio" name="sex" value="
">여자
<input type="button" value="
등록" onClick="Check()">
</form>



document.form1.sex.length radio 버튼 개수
document.form1.sex[i].checked==true i번째 버튼이 체크되었음

 



■ checkbox 객체 예제

 

checkbox 는 배열로 다룰 수도, 아닐 수도 있다.
name
속성을 같이 설정하면 배열로 다뤄야 한다.

 

 

<script language="javascript">

function Check(){

if (document.form1.agree.checked==false) {
alert("
약관에 동의하셔야!")
return
}

//
체크한 경우 submit() 메서드
document.form1.submit()
}
</script>

<form name="form1" action="ok.asp" method="post">
<input type="checkbox" name="agree" value="yes">
약관에 동의
<input type="button" value="
등록" onClick="Check()">
</form>


document.form1.agree.checked == true 버튼이 체크되었음

*
동일한 name 을 설정하고 다중선택, 다중 삭제하는 예제는 asp TIP 을 참조!

 

select ...........................................................

여러 항목중에 고를 수 있도록 한 목록 상자로 많이 사용된다. 보통 콤보 상자라고 많이 알고 있더라구.

 



■ select (HTML)

 

 

<select name="addr">
<option value="
서울 마포구 드래곤">서울 마포구 드래곤아이
<option value="
경기 군포시 드래곤">경기 군포시 드래곤아이
<option value="
강원 원주시 드래곤">강원 원주시 드래곤아이
</select>

select 태그에서 size=정수 속성으로 보여줄 리스트수를 설정할 수 있다.
select
태그에서 multiple 속성을 설정하여 여러개 선택을 할 수 있다.
option
태그에서 selected 속성으로 디폴트 선택을 줄 수 있다.

 



■ select 객체 속성

 

name

태그 name 속성값 (addr)

length

목록의 개수 (3)

selectedIndex

선택한 목록 인덱스 번호 (0 부터)

options

목록상자 값을 배열로 (익스플로러 지원안됨)

options[0].text

0번째 목록의 문자 (서울 마포구 드래곤아이)

options[0].value

0번째 목록의 value (서울 마포구 드래곤)

options[0].selected

0번째 목록이 선택되면 true 아니면 false

options[0].defaultSelected

0번째 목록이 기본으로 선택되어 있는지

 



■ select 객체 이벤트핸들러

 

onChange

현재 선택된 목록이 아닌 다른 목록을 선택시

 



■ select 객체 예제 : 주소 검색 결과를 선택하기

 

 

<script language="javascript">
function Check(){

i =document.form1.addr.selectedIndex //
선택항목의 인덱스 번호
if (i<0) {
alert("
주소를 선택!")
return
}

var address1 = document.form1.addr.options[i].value //
선택항목 value
var address2 = document.form1.addr.options[i].text //
선택항목 text
alert(address1) // value
확인
alert(address2) // text
확인
}
</script>

<form name="form1" action="ok.asp" method="post">
<select name="addr" size="3">
<option value="
서울 마포구 드래곤">서울 마포구 드래곤아이
<option value="
경기 군포시 드래곤">경기 군포시 드래곤아이
<option value="
강원 원주시 드래곤">강원 원주시 드래곤아이
</select>
<input type="button" value="
등록" onClick="Check()">
</form>


document.form1.addr.selectedIndex 선택항목의 인덱스 번호
==>
선택이 안되면 -1을 리턴
document.form1.addr.options[i].value 선택항목 value

 

button, submit(image), reset, .................................................

버튼 ! 흔히 보는 자주 보는 버튼이지만 기능은 다 다르다. 자바스크립트로 접근하는
방법도 약간씩 다르다.

 



■ HTML(생긴건 비슷해도 맛은 다 다르므로 조심해야...)

 

<input type="button" name="button1" value="버튼">

<input type="submit" name="button2" value="전송버튼">

<input type="image" name="button3" value="이미지"src="123.gif">

<input type="reset" name="button4" value="초기화">

버튼 : 아무 기능을 내장하고 있지 않은 것으로 onClick 이벤트핸들러와 자바스크립트로 기능을 줘야한다.

전송버튼 : 전송기능을 내장하고 있는 것으로 자바스크립트의 submit() 기능을 내장하고 있으므로 따로 submit()을 설정하면 드번 전송이 된다.

이미지버튼은 기능이 위의 전송버튼과 같이 전송기능을 내장하고 있으므로 주의를 !!!

리셋버튼은 누르는 순간 입력상자의 모든 값을 초기상태로 만들어 준다.

 



객체 속성

 

name

위의 name 속성

value

위의 vaule 속성

type

위의 type 속성

 



■ select 객체 이벤트핸들러

 

onClick

버튼을 누른 순간 발생

 



버튼이 여러개일때 누른버튼 구분하기 (매개변수이용)

 

 

<script language="javascript">
function Check(i){
if(i=='1'){
alert("1
번 버튼 오케이!")
return
}
if(i=='2'){
alert("2
번 버튼 오케이!")
return
}
if(i=='3'){
alert("3
번 버튼 오케이!")
return
}
if(i=='4'){
alert("4
번 버튼 오케이!")
return
}
}
</script>
<form name="form1" action="ok.asp" method="post">
<input type="button" name="button1" value="
버튼1" onClick="Check('1')">
<input type="button" name="button1" value="
버튼2" onClick="Check('2')">
<input type="button" name="button1" value="
버튼3" onClick="Check('3')">
<input type="button" name="button1" value="
버튼4" onClick="Check('4')">
</form>


 



■ submit (image) 버튼 사용시 이벤트 핸들러

 

 

<script language="javascript">
function Check(){

alert("1
번 버튼 오케이!")
return false //
주의 !!! form 태그에 이벤트핸들러 return 함수(), return false

}
</script>
<form name="form1" action="ok.asp" method="post" onSubmit="return Check()">
<input type="submit" value="
버튼1">
<input type="image" src="123.gif">
</form>


* 이미지버튼은 전송버튼과 자바스크립트 구문이 동일하다.

 



■ <IMG> 태그를 버튼으로 사용시

 

 

<script language="javascript">
function Check(i){

if(i=='1'){
alert("1
번 버튼 오케이!")
return
}
if(i=='2'){
alert("2
번 버튼 오케이!")
return
}
}
</script>

<form name="form1" action="ok.asp" method="post">
<a href="javascript:Check('1')"> <img src="123.gif" border="0"></a>
<a href="javascript:Check('2')"> <img src="123.gif" border="0"></a>
</form>



*
일반 이미지에 버튼기능을 부여하는 것은 button 사용법과 자바스크립트 구문은 동일하다.

 

입력값 체크와 전송 예제 .................................................

* 게시판 입문자를 위한 내용입니다.

폼태그를 이용해서 서버로 전송을 하는 경우 여러가지 이유로 우리는 동일한 버튼을 사용할 수 없는 경우를 자주 만나게 된다. 몇가지 전송기능을 가진 버튼을 사용하는 방법을 알아보고 기나긴 브라우저 객체를 마칠까한다.

 



■ button 이나 <IMG> 태그 이용은 같은 방법으로!!!

 

 

<script language="javascript">
function Check1(){

var tel=document.form1.tel.value

if (tel=="") {
alert("
전화번호는 꼬~!")
return // 호출한 쪽으로 제어권을 넘기므로 아래소스 실행를 막게된다
}

document.form1.submit()
// button 자체에 submit() 기능이 없다
}
</script>

<form name="form1" action="ok.asp" method="post">
<input type="text" name="tel">
<input type="button" value="
등록"
onClick="Check1()">
<a href="
javascript:Check1()"><img src="123.gif" border="0"></a>
</form>


 



■ submit image 는 같은 방법으로 !!!

 

 

<script language="javascript">
function Check2(){

var tel=document.form1.tel.value

if (tel=="") {
alert("
전화번호는 꼬~!")
return false // 자신의 submit() 기능을 행사하지 못하도록
}

return true
// 자신의 submit() 기능을 행사하도록

}
</script>

<form name="form2" action="ok.asp" method="post"
onSubmit="return Check2()">
<input type="text" name="tel">
<input type="submit" value="
버튼1">
<input type="image" src="123.gif">
</form>


 



매개변수를 이용하여 action 을 바꿀 수 있다.

 

 

<script language="javascript">
//
매개변수로 action바꾸기

function Check3(mtype){

var tel=document.form3.tel.value
if (tel=="") {
alert("
전화번호는 꼬~!")
return
}

else {

if (mtype=="1") {
document.form3.action="ok1.asp" // 매개변수값이 "1" 일 때 action
document.form3.submit()
}
else if (mtype=="2") {
document.form3.action="ok2.asp" // 매개변수값이 "2" 일 때 action
document.form3.submit()
}

}

}
</script>

<form name="form3" method="post">
<input type="text" name="tel">
<input type="button" value="
무료회원등록"
onClick="Check3('1')">
<input type="button" value="
유료회원등록" onClick="Check3('2')">
</form>


 

navigator 객체 .................................................

* 미리 공부할 필요는 없는 과정이다. 어떤 정보를 가졌는지 대~~충 살펴보고~~

첫 강좌 브라우저 객체 계층 구조에서 보듯이 얘는 window객체가 아닌 따로 독립된 객체로 사용자의 브라우저 정보를 가지고 있는 객체로 사용자의 브라우저 상황을 파악하여 거기에 맞는 서비스를 하는데 이용할 수 있다.

*
고급 웹사이트 제작시, 국제적인 사이트 제작시, 고려할 필요가 있으며...
*
가급적이면 사용자 브라우저에 영향을 받지 않는 스크립트를 사용하는 게 좋고...
*
국내 서비스용은 익스플로러를 기준으로 많이 작성하는데 버전을 낮춰 제작하는게...

 



■ navigator 객체 속성

 

appName

브라우저 이름

appVersion

브라우저 버전

appCodeName

브라우저 코드명

userAgent

브라우저가 서버로 보내는 정보

mimeType

브라우저가 지원하는 MimeType (익스플로러 지원안함)

plugins

브라우저가 지원하는 플러그인 정보

language

브라우저가 사용하는 언어 (익스플로러 지원안함)

platform

시스템종류

 



몇가지 정보 알아내기

 

 

<script language="javascript">
document.write(navigator.appName) // Microsoft Internet Explorer
document.write(navigator.appVersion) // 4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.0.3705)
</script>

 



신고

'Programing > JavaScript' 카테고리의 다른 글

[자바스크립트] javascript 정리  (0) 2010.06.06

 태그 : 

2010 6 2

 

Tutorial에 있는 예제를 기준으로 해보도록 할 것이다.

 

 - 먼저 extension의 코드들을 저장할 폴더를 만든다. 아무 폴더에 만든 extension의 이름의 폴더를 만들면 된다. 여기서는 바탕화면에 “Hello”라는 폴더를 만드는 것으로 하겠다.

 

 - “Hello”라는 폴더 안에 “manifest.json”이라는 파일을 만든다. 이 파일은 extension의 설정 파일이다. Extension의 이름, 버전, 설명, 제한조건 등등을 설정할 수 있다.

 

 - “manifest.json”파일을 만든 후에 아래와 같이 입력한다.

{

  "name": "My First Extension",

  "version": "1.0",

  "description": "The first extension that I made.",

  "browser_action": {

    "default_icon": "icon.png",

    "popup": "popup.html"

  },

  "permissions": [

    "http://api.flickr.com/"

  ]

}

 

 - 그리고 아래의 아이콘을 “Hello” 폴더에 넣어 놓는다. Extension의 툴바에 들어갈 아이콘이다.

-----------아이콘

 

 - 그리고 아래의 “popup.html”파일을 “Hello” 폴더에 넣어 놓는다. Extension의 툴바를 눌렀을 경우에 pop up으로, “popup.html”이 나타나게 된다.

----------popup.html

 

 - 그러면 “Hello”폴더 안에 “manifest.json”, “icon.png”, “popup.html” 3개의 파일이 있을 것이다.

이제 Chrome 브라우저를 실행하고,

 버튼을 눌러 확장 프로그램관리 화면으로 간다. 그리고 압축해제된 확장 프로그램 로드를 클릭하여, “Hello”폴더를 로드한다.

 

 

위와 같은 화면이 나타날 것이고, 빨간 사각형처럼 “Hello”폴더에 넣었던 아이콘이 나타나게 될 것이다. 그리고, 아이콘을 클릭하게 되면, 아래의 화면 처럼 “popup.html”이 출력 될 것이다.

 

 


여기서 코드를 수정하거나, 삭제하거나 할 경우에는 “Hello”폴더의 파일들에서 파일을 수정하고 나서, 새로고침을 누르게 되면, 수정된 Extension을 브라우저에서 확인 할 수 있다.

 


이제 간단한 Exention을 만들어 보았다. 이제는 Extension의 여러 기능들에서 공부해보고 적용해 보도록 하자.




신고

2010 6 1

 

먼저 Extension부분은 OS에 큰영향은 안 받을 것이라 예상하지만, Plugin부분이 OS에 영향을 받기 때문에, OS를 명시하도록 하겠다. 먼저 Windows기반일 경우에 대해서 설명할 것이다. 만약 Linux기반일 경우에 대해서는 필요시에 설명하도록 하겠다.

 

*) Extension을 만드는 목적

 - 확장 프로그램( Extension )이란 말 그대로 브라우저의 기능을 확장한다는 뜻이다. 기본적으로브라우저 자체에서 제공하는 기능들이 아닌 필요한 기능들을 사용하기 위해서 Extension을 설치, 개발하여 사용한다. 알툴바 같은 프로그램을 생각하면 좋을 것 같다.

  또한, 기본적으로 브라우저에서는 시스템적인 부분에 접근할 수 없다. 예를 들어 마우스를 이동시키거나 파일을 저장한다거나의 작업들이 해당될 것이다. 그렇지만, NPAPI를 이용하여 C,C++로 작성할 수 있는 Plugin을 만들게 되면, 위의 기능들을 하게 될 수 있고, Extension Plugin을 연결시키면, 브라우저의 기능들과 시스템적인 부분의 기능들을 사용할 수 있게 되는 것이다.

  Google Chrome같은 경우에는 Tutorial이 잘 되어 있고, Sample도 제공 되기 때문에 접근하기도 쉽다. 어느 정도의 Java Script C,C++ 프로그래밍 소양만 갖추고 있으면, 누구나 쉽게 개발 할 수 있을 것이다.

 

*) Google Chrome 설치

 - 먼저 개발을 시작하기 위해서는 Google Chrome 브라우저가 있어야 하므로, 먼저 설치를 한다.

http://www.google.com/chrome/?hl=ko

 


  설치하게 되면 위와 같은 화면을 볼 수 있고, 빨간색 사각형 부분을 클릭하게 되면 메뉴가 나타나는데, “확장 프로그램메뉴를 클릭하게 되면, 아래와 같은 화면이 나타나게 된다. 나타나지 않는다면, 개발자 모드를 클릭하면 나타날 것이다.

여기서 Extension을 압축하여 배포판을 만들 수 있고, Extension을 로드, Update, 삭제 등의 작업을 할 수 있다.

 


  일단 간단한 소개를 끝내고, 다음으로 모든 프로그래밍의 시작인 “Hello World”를 출력 해보도록 하자.
이에 앞서 TutorialSample의 소스코드를 보면, 흐름을 더욱 쉽게 파악할 수 있을 것이다.

 

*) Tutorial

http://code.google.com/chrome/extensions/getstarted.html

*) Samples

http://code.google.com/chrome/extensions/samples.html




신고

 태그 : 

티스토리 툴바