쌍용강북교육센터 국비 학원 Day 51일차 JavaScript (URI, URL, Checkbox, 팝업창)

 

쌍용 강북 교육센터 국비학원 Day 51일차

 

URL, URI, URN

 

 

 

 

URI는 (Uniform Resource Identifier) URL은 (Uniform Resource Locator) URN은 (Uniform Resource Name) 의 약자이다. 자원의 식별자(URI), 위치(URL), 이름(URN)으로 유추해 볼 수 있다.

 

URI : 통합 자원 식별자(Uniform Resource Identifier, URI)

인터넷에 있는 자원을 나타내는 유일한 주소이다. URI의 존재는 인터넷에서 요구되는 기본조건으로서 인터넷 프로토콜에 항상 붙어 다닌다. URI의 하위개념으로 URL, URN 이 있다

 

URL : URL(Uniform Resource Locator, 문화어: 파일식별자, 유일자원지시기)

네트워크 상에서 자원이 어디 있는지를 알려주기 위한 규약이다. 즉, 컴퓨터 네트워크와 검색 메커니즘에서의 위치를 지정하는, 웹 리소스에 대한 참조이다. 흔히 웹 사이트 주소로 알고 있지만, URL은 웹 사이트 주소뿐만 아니라 컴퓨터 네트워크상의 자원을 모두 나타낼 수 있다. 그 주소에 접속하려면 해당 URL에 맞는 프로토콜을 알아야 하고, 그와 동일한 프로토콜로 접속해야 한다.

 

URN : URN(Uniform Resource Name, 통합 자원 이름)

urn:scheme 을 사용하는 URI를 위한 역사적인 이름이다. URN은 영속적이고, 위치에 독립적인 자원을 위한 지시자로 사용하기 위해 1997년도 RFC 2141 문서에서 정의되었다.

 

 

 

 

 

 

URI 인코딩 / 디코딩

문자열을 유효한 URI (Uniform Resource Identifier)로 (UTF-8로) 인코딩/디코딩 하는 법

 

encodeURI ("문자열"); -> "문자열"을 UTF-8와 맵핑된 문자 (%문자)로 변환시켜준다.

decodeURI ("인코딩된%문자열"); -> "인코딩된 (%문자열)" 을 원래의 글자로 되돌려 준다.

 

 

 

 

 

CheckBox

checkbox 제어의 기본개념

checkbox 는 동일한 이름을 가진 체크박스들이 여러개 존재하며, 다수의 선택을 가능하게 하는 기능을 제공한다.

checkbox 는 배열의 개념이 필요하기 때문에 getElementById 가 아닌 getElementsByName 을 이용하여 제어한다.

그래서 id가 아닌 name 을 이용하기 때문에 태그에 id가 아닌 name을 지정하여 사용한다.

 

checkbox 의 주요속성

1. name - 체크박스의 이름.

2. length - 동일한 이름의 체크박스의 갯수.

3. checked - 체크박스의 체크여부. 체크가 되어지면 true, 체크가 해제되면 false 를 리턴함.

4. value - 체크박스의 값.

 

 

 

체크박스를 하나 선택하면 나머지는 자동으로 체크가 해제되는 함수예제 파라미터는 this를 가르킨다

 

전체선택 / 전체해제가 있는 체크박스 예제 파라미터는 this.checked를 대입

 

전체선택 중에 1개라도 해제되면 전체선택박스도 해제되고 반대로 하나씩 모두가 선택되면 전체선택도 선택되는 예제. 

 

 

 

 

window.open() - 팝업창

[문법]

변수타입 변수명 = window.open("url", "name", "specs", "replace");

 

새로 만들어진 창 객체가 반환되고, 창의 생성에 실패하면 null을 반환한다. 이 객체를 통해서 새창을 제어할 수 있다. (예로 .close(); 로 창을 닫을 수 있다)

 

- url

팝업창으로 나타낼 주소 이다. 선택적인 값으로 비워두면 빈창(about:blank) 이 나타난다.

 

- name

팝업창의 속성 또는 창의 이름을 지정한다. 선택적인 값으로 기본값은 "_blank" 이다.

_parent - 부모 프레임에 열린다.

_self - 현재 페이지를 대체한다.

_top - 로드된 프레임셋을 대체한다.

name (임의의 이름) - 새 창이 열리고 창의 이름을 지정한다. 동일한 이름에 다시 open() 을 하면 기존의 열린창의 내용이 바뀐다. 다른 이름을 사용하면 또다른 새창이 열린다.

 

- specs

선택적인 값으로 창의 크기, 스크롤여부, 리사이즈 가능등의 속성을 지정한다.

 

height = pixels - 팝업창의 높이를 지정한다.(height=600)

width = pixels - 팝업창의 너비를 지정한다.(width=500)

left = pixels - 화면 왼쪽에서부터 팝업창이 띄워질 위치를 지정한다.

top = pixels - 화면 위쪽에서부터 팝업창이 띄워질 위치를 지정한다.

channelmode = yes | no | 1 | 0 - 전체화면으로 창이 열린다. (IE에서만 동작)

fullscreen = yes | no | 1 | 0 - 전체 화면 모드. (IE에서만 동작)

location = yes | no | 1 | 0 - 주소 표시줄 사용여부를 지정한다. (Opera에서만 동작)

menubar = yes | no | 1 | 0 - 메뉴바 사용여부를 지정한다.

resizable = yes | no | 1 | 0 - 창의 리사이즈 가능 여부를 지정한다. (IE에서만 동작)

scrollbars = yes | no | 1 | 0 - 스크롤바 사용여부를 지정합니다. IE, Firefox, Opera에서 동작합니다.

status = yes | no | 1 | 0 - 상태바를 보여줄지 지정한다.

titlebar = yes | no | 1 | 0 - 타이틀바를 보여줄지 지정한다. 호출 응용 프로그램이 HTML 응용 프로그램이거나 신뢰할 수있는 대화 상자가 아니면 무시된다.

toolbar = yes | no | 1 | 0 - 툴바를 보여줄지 지정한다. (IE, Firefox에서 동작)

 

 

팝업창의 예제로 url대신 html 코드를 변수에 추가해 대입하였다.

 

 

 

 

---

출처 - https://velog.io/@jch9537/URI-URL