#동기와 비동기
▷ 동기 : 순서대로 수행되는 것.
작성 순서와 실행 순서가 같다.
▷ 비동기 : 작성한 순서대로 수행되지 않음.
스레드 처럼 현재 작업은 작업대로 진행하고
자신의 작업을 수행 한다.
그래서 항상 콜백메소드를 잘 보고 찾아서 작성해야 한다.
▷ HTML5에서 image 객체는 이미지 파일의 내용을 비동기적으로 읽는다.
그리고 이미지 파일을 메모리에 전부 로드 하면 onload 이벤트가 발생한다.
이미지 파일의 경로는 src 속성에 설정한다.
▷ 이미지를 읽어서 출력 : 비동기적으로 작동하고 onload 이벤트가 발생하면 이미지를 모두 읽은 것이다.
Var image = new image();
Image.src=“이미지 파일의 경로를 설정”
image를 사용하는 코드 // (실수 주의) 이 줄은 동작하지 않을 수 있다.
위의 코드는 자기가 시간이 날 때 틈틈이 이미지를 읽기 때문에 아래 있는 코드를 먼저 수행할 수 있는데 그러면 이미지가 없는 상태에서 이미지를 사용하는 코드를 작성하는 게 되므로 작동하지 않을 수 있다.
Image.onload=function(){
Image를 사용하는 코드 작성
}
#XML 과 JSON의 용도
1. 개발자가 작성해서 데이터를 주고 받는 용도
2. 프레임워크를 만드는 개발자가 XML 과 JSON을 이용해서 설정을 하도록 하는 용도
▷ 프레임 워크의 작성 규칙을 따라야 하고 이 파일의 해석위치를 작성해야 합니다.
3. xml 파일에서 첫번째 태그의 xmlns 속성이 태그의 내용을 해석하는 위치입니다.
▷ 이 위치를 URL 형식으로 작성해야 합니다.
▷ URL 이긴 하지만 실제 웹으로 나가서 해석하는 경우도 있고 로컬에서 해석하는 경우도 있습니다.
#form
1. form 속성
1) action
: 데이터를 전송하기 위한 URL을 설정하는 옵션
2) method
▷ get은 매개변수를 URL에 붙여서 전송 - 자동 재전송, 보안이 취약, 데이터의 길이에 제한이 있습니다.
▷ post는 매개변수를 헤더에 숨겨서 전송 - 보안이 우수, 데이터의 길이에 제한이 없습니다. 자동 재전송이 안됩니다.
▶ post를 사용해야 하는 경우
(1) 반드시 사용해야 하는 경우
→ password가 있는 경우 : 이 경우는 보안 때문에 숨겼는데 최근에는 password를 password로 만들지 않고 text로 만드는 경우도 있습니다. ( 비밀번호가 복잡해서 틀리기 때문 : 비밀번호 보이기 옵션이 새로 생기는 중이다.)
→ file이 있는 경우는 반드시 post로 해야 합니다. file이 있으면 내용이 길기 때문에 분할해서 전송해야 합니다.
(2) 상황에 따라 사용하는 경우
→ textarea 가 있는 경우 : 길이 때문에 보통 post로 설정합니다. (길게 작성할 게 아니라면 post로 안해도 된다.)
3) enctype
: 폼의 데이터를 전송할 때 한번에 보낼 것인지 아니면 나누어서 보낼것인지를 설정하는 옵션인데 기본은 한번에 전송합니다.
▷ file이 있을 때 나누어서 전송할 수 있도록 multipart/form-data를 설정해 주어야 합니다.
4) onsubmit
▷ onsubmit 이 발생했을 때 false를 리턴하면 form의 데이터가 서버로 전송되지 않습니다.
2. lable
▷ value 속성에 텍스트를 설정하면 화면에 출력됩니다.
▷ for 속성에 다른 입력도구의 id를 대입하면 묶여서 하나로 취급합니다.
3. input
: 입력상자
▷ type 속성을 설정하면 입력도구가 만들어집니다.
▷ 서버에게 데이터를 전송하고자 하면 name 속성에 구별되는 이름을 설정해 주어야 합니다.
▷ 서버는 name을 이용해서 데이터를 읽어냅니다.
1) text
: 기본값으로 문자열을 입력받을 수 있는 도구이다.
▷ 입력한 내용은 value 속성으로 가져올 수 있습니다.
2)password
: text 와 동일한데 화면에 보여질 때 echo char로 보여집니다.
3) checkbox
: 0개 이상 여러 개를 선택할 수 있도록 할 때 사용하는 type으로 value를 설정하면 선택되었을 때 value 값이 넘어갑니다.
▷ 여러 개를 한 묶음으로 만들기 위해서는 name 속성의 값을 일치시키면 됩니다.
4) radio
: 여러 개 중에서 반드시 1개의 값만 선택하도록 할 때 사용하는 type으로 value를 설정하면 선택되었을 때 value의 값이 넘어갑니다.
▷ 역시 한 묶음으로 만들고자 하면 name 속성의 값을 일치시키면 됩니다.
▷ checkbox 와 radio는 checkbox 라는 속성으로 처음 선택을 설정할 수 있습니다.
▷ radio는 필수 입력을 의미하기 때문에 기본값을 설정해주는 것이 좋습니다.(가장 많이 하는 실수)
5) button
: 버튼을 만들어줍니다.
▷ value를 설정하면 버튼의 텍스트가 됩니다.
6) submit
: button 과 모양은 동일한데 누르면 form의 데이터를 서버로 전송하는 기본 기능을 소유하고 있습니다.
7) reset
: button 과 모양은 동일한데 누르면 form 안의 데이터를 클리어하는 기본 기능을 가지고 있습니다.
8) file
: 파일을 선택할 수 있는 버튼을 만들어주는 속성
▷ value를 이용해서 선택된 파일이름을 가져올 수 있지만 보안때문에 설정할 수는 없습니다. (set이 안된다)
9) hidden
: 화면에 보이지는 않고 서버에게 전송되는 속성 ( 얼마나 잘 쓰냐에 따라 능력이 달라짐)
▷ 화면에 보일 필요는 없고 계속해서 들고 다녀야 하는 데이터가 있으면 hidden을 이용하면 됩니다.
10) image
: 이미지를 출력하기 위한 속성
4. textarea
: 여러 줄의 텍스트를 입력받기 위한 도구
▷ 크기를 설정할 때는 rows 와 cols 속성을 이용해서 설정합니다.
▶ 태그와 태그 사이에 빈 줄을 만들면 커서가 가운데에서 시작합니다.
→ 따라서 태그와 태그 사이에 줄 바꿈을 안하는 게 좋습니다.
▷ 맨 처음 value 설정을 할 때는 태그와 태그 사이에 설정해야 합니다.
▷ 처음 출력할 때는 value 설정이 안됩니다.
5. select
: 여러 개 중에서 하나를 선택할 수 있도록 해주는 도구
▷ 선택할 수 있는 값들은 option 태그를 이용해서 생성을 합니다.
▷ 선택하게 되면 서버에는 option의 value 값이 넘어갑니다.
6. fieldset
: 입력도구가 아닌데 입력도구처럼 사용 됨.
▷ 입력 도구들을 하나로 묶어줄 때 사용하는 태그로 legend 속성을 이용하면 border에 텍스트가 입력됩니다.
#HTML5 의 form
1. input type 속성이 추가
▷ 날짜를 입력받는 type이 추가되었는데 아직 IE 와 Firefox에는 적용이 안되어 있어서 2개의 브라우저에도 적용하기 위해서는 jquery를 이용하는 경우가 많습니다.
#위치정보 이용하기
▷ HTML5에서는 위치 정보를 가져오는 API 가 추가되었다.
▷ IE 하위 버전이 아니면 모든 브라우저에서 지원된다.
▷ 위치 정보를 가져오는데 성공했을 때 호출되는 메소드에게는 객체가 1개 넘어가게 되는데 이 객체는 위치 정보 객체로, coords 객체를 소유하고 있으면 coords 안에 latitude, longitude, altitude, accuracy, altitudeAccuracy, heading, speed를 프로퍼티로 소유하고 있고 timestamp(위치정보를 가져오는 시간) 속성을 가지고 있습니다.
▷ 위치 정보는 Gps, internet router, 기지국에서 받아오는데 각각 오차가 있고 그 정도는 순서대로 오차가 더 심해집니다.
▷ 위치 정보를 가져오는데 실패했을 때 호출되는 메소드에게는 객체가 1개 넘어가게 되는데 이 객체는 code(UNKNOWN_ERROR, PERMISSION_DENIED, POSITION_UNAVALABLE, TMIEOUT)와 message를 소유하고 있습니다.
1. 위치 정보 지원 여부 파악
navigator.geolocation
2. 위치 정보를 1번 받아오면 호출되는 메소드
navigator.geolocation.getCurrenctPosition(function(매개변수){위치정보를 가져오는데 성공했을 때 수행할 내용}, function(매개변수){위치정보를 가져오는데 실패했을 때 수행할 내용}, {옵션})
▷ 첫번째 함수의 매개변수의 coords를 확인하면 위치 정보를 파악할 수 있습니다.
▷ 두번째 함수의 매개변수의 code 나 message를 확인하면 위치 정보를 가져오는데 실패한 이유를 알 수 있습니다.
3. 주기를 가지고 여러번 위치정보를 받고자 하는 경우
▷ getCurrentPosition 대신에 watchPosition을 이용하면 됩니다.
Open API
: 3rd Party 개발자나 데이터를 가지고 있는 기업이 다른 개발자 들이 사용할 수 있도록 함수나 클래스 또는 데이터를 제공하는 것.
▷ 데이터를 xml 이나 JSON으로 제공하는 형식의 Open API를 Restful API라고도 합니다.
▷ 페이스북, 트위터, 야후, 구글, 네이버, 다음 등이 제공하고 있습니다.
▷ 이러한 API들은 대부분 사용량의 문제나 불법적인 사용을 감시하기 위해서 인증키를 발급받아야 사용할 수 있도록 합니다.
클라이언트 정보의 저장과 사용
https://docs.google.com/presentation/d/14U0Dvg2GNJeDuyDyyvLZVVC6rvIeGWYUdTz46VRzOLY/edit#slide=id.p
실습 분석
피연산자 타입에 따른 출력 결과
피연산자 타입 / 출력결과
Undefined / undefined
Null / object(see below)
Boolean / boolean
Number / number
String / string
Symbol(new in ECMAScript 2015) / symbol
Host object(provided by the JS environment) / Implementation-dependent
Function object(implements [[Call]] in ECMA-262 terms) / function
Any other object / object
<input type="text" id="imsi"> 로 만든 도구에 아무런 값을 집어 넣지 않고 imsi의 값을 typeof 하면, null이 아닌 string으로 출력된다. 이유는 자료형이 자동으로 결정되는 자바스크립트에서 input으로 만든 imsi는 value의 값이 넘어 오므로 string type이고 아무 값도 넣지 않아도 "" 이렇게 아무것도 없는 값이 들어가기 때문이다.
null은 값에 null을 넣어야지만 null type이 되고, defined는 값이라고 할만한 것이 아애 없을 때, 즉 값을 넣은 변수를 아예 찾을 수 없을 때 반환된다.
'Front End > HTML' 카테고리의 다른 글
| [0822] 브라우저에 저장되는 데이터 (0) | 2018.08.22 |
|---|---|
| [0820] HTML5 (0) | 2018.08.20 |
