기억보단 기록을 #1 : Javascript 브라우저의 특징과 이벤트 정리

컴퓨터상에 브라우저의 객체는 여러가지 존재하는데,, 최상위 순부터 천천히 알아보도록 하자.

 

- 브라우저 객체 모델 설명 (최상위 객체순으로 나열)

 

* window 객체 
ⓐ location 객체  
ⓑ navigator 객체
ⓒ history 객체
ⓓ screen 객체
ⓔ document 객체 (HTML 문서 관련)

 

- window 객체

ⓐ 브라우저 기반 자바스크립트의 최상위 객체

ⓑ alert(), prompt() 모두 window 객체의 메서드이며

window.open(URL, name, features, replace) // 매개변수는 옵션 안써도 됨
→ 새로운 window 객체 생성(새 창 띄우기를 할 수 있다.)

- 문서 객체 속성 중 'on'으로 시작하는 속성을 이벤트 속성이라 부르고 함수를 할당해야 한다.

window.onload = function(){
   // HTML 페이지에 존재하는 모든 태그가 화면에 올라가는 순간 실행(window 객체 코드 완료)
}  // innerHTML 사용 불가능 시 사용하면 됩니다.

 

- 문서 객체 모델 만들기
ⓐ 웹 브라우저가 HTML 페이지를 인식하는 방식으로
ⓑ document 문서 객체와 관련된 객체의 집합체라고 할수 있다.

 

*간단한 용어정리
ⓐ 요소 노드 : HTML 태그를 의미
→ createElemnet(tagName) 
ⓑ 텍스트 노드 : 요소 노드 안에 들어있는 글자를 의미
→ createTextNode(Text)
   ↓
var header = document.createElement('h1');
var textNode = document.createTextNode('hello');
header.appendChild(textNode); // 노드와 노드 연결
document.body.appendChild(hearder); // 화면에 출력

- 텍스트 노드를 갖지 않는 문서 객체
var img = document.createElements('img');
img.src = 'pen.png';
img.width = 100;  // px단위
   or
img.setAttribute('src', 'pen.png');
img.setAttribute('width', 100);

document.body.appendChild(img);

- 문서 객체 가져오기
// 태그 아이디가 'header-1'인 노드를 가져온다.
var header = document.getElementById('header-1');
// HTML, css에서 id 값은 중복해서 부여하면 안 된다.

// 객체 속성 변경
header.innerHTML = 'Hello';
header.style... // 스타일 변경 기능

* 그 외 방법들
ⓐ getElementByName('name');
ⓑ getElementByTagName('tagName');

// ⓐ, ⓑ return 값은 배열

ⓒ querySelector('선택자');
ⓓ querySelectorAll('선택자'); - return 배열
// ⓒ, ⓓ HTML5에서 추가 css 선택자 사용

- 고전 이벤트 모델
var header = document.getElementById('haeder');
header.onclick = function(){ // 클릭 시 실행
   alert('클릭');  // this 사용 시 이벤트 발생 객체를 가리킨다.
   header.onclick = null // 이벤트 제지
}

-이벤트 강제 실행
메서드 호출처럼 이벤트 속성을 호출하면 객체 실행
ex) header.onclick();
- 인라인 이벤트 모델 : HTML 페이지의 가장 기본적인 이벤트 연결 방법
<h1 onclick = "alert('클릭')">
<h1 onclick = "myfunc(e)">
   ▼ =
function myfunc(e){
   alert('클릭');
}

- 디폴트 이벤트
ⓐ<a>처럼 기본적인 이벤트를 가지고 있는 태그가 있다.
디폴트 이벤트를 제거하려면 이벤트 처리함수가 false 반환해야하는데
<a href = ... onclick = "return false;">

preventDefault() 라는 함수로 a 태그의 기본적인 이벤트를 초기화할수 있으며

Gnb > ul > li > ul > li a 깊숙한 구조를 갖고 있을시 버블링 발생을하는데 이때 별도로 

쓸수 있는 함수도  stoppropagation() 있다. 

 

ⓑ
<form>는 submit 버튼을 누르면 onsubmit 이벤트 발생

* 입력 내용 확인 후 전송하는 방법
<form onsubmit = "return validCheck()">
   ...
<script>
function validCheck(){
   if(...) return false;
   return true; // 전송
}
</script>

$('#id') → 해당 id의 Dom 객체를 감싼 jQuery 객체 리턴
(DOM 객체 얻는 법 : $('#id').get(0)
document.getElementById('id') → DOM 객체 리턴

// 둘 비교시 false
- 이벤트 전달특정 요소에서 이벤트가 발생했을 때, 부모나 자식 요소에 전달될 수 있다(자식→부모, 부모→자식)

 

제이쿼리(j-Query) 간단 정리

* j-Query
$(document).ready(function(){...});
= window.onload

<기본문법>
$('h1').css('color', 'red');
//선택자     //메서드

<한꺼번에 여러 속성 추가>
$('h1').css({ // 객체 사용
   color : 'red',
   background : 'black'
});

<이벤트>
$('h1').on('click', function(){...});

JSON (간략한 정리이니 유튜브 생활코딩 참고!)
- 자바스크립트에서 객체를 만들 때 사용하는 문법(조현식)이지만

 다양한 언어에서 데이터를 쉽게 주고받을 수 있는 중요한 요소로 사용한다.

{
   "name" : "웃남",
   "age" : 30
}

* JSON.parse(json 형식의 문자); // '{"name" : "웃남", "age" : 5}'
→ 자바스크립트에서 사용할 수 있는 JSON 객체로 변경

* JSON.stringfy(json 객체);
→ 자바스크립트에서 사용할 수 있는 JSON 포맷의 문자열로 변경

-- 서버(JSP, PHP)와 클라이언트(자바스크립트...) 간의 데이터를 좀 더 쉽게 주고 받을 수 있도록 해준다.

a-jax (에이작스) 사용법 : 비동기 통신
j-Query a-jax 사용 ( a-jax 통신을 좀 더 쉽게)

$.ajax({
   url : 'time.jsp',
   type : 'post',
   data : $('form').serialize(),
   // 서버에 전송할 데이터
   success : function(data){ // (data) 받아온 데이터가 들어있다
      console.log(data);
   }
});

serialize() // 폼 태그 안 에러 구성요소를 쿼리 문자열 형식으로 자동으로 만들어 줌.

 

* j-Query.a-jax([setting])

ⓐ data : 서버로 데이터를 전송할 때 사용

ⓑ dataType : 서버 측에서 전송한 데이터를 어떤 형식의 데이터로 해석할 것인가?

ⓒ success : 성공 했을 때 호출할 콜백

ⓓ type : 데이터 전송 방법(기본 POST,GET )

 

POST든 GET이든 보내는 데이터는 전부 클라이언트측에서 볼 수 있다.

단지 GET방식은 URL에 데이터가 표시되여 별다른  노력없이 볼 수 있어서지,

두 방식 전부 보안을 생각한다면 암호화 해야한다.

 

GET방식이 POST방식보다 속도가 빠르다?

빠른건 맞다. 하지만 왜 빠른지를 알아야 하는데, 이유는 GET방식의 요청은 *캐싱 때문에 빠른것이다.

*캐싱  (한번 접근 후, 또 요청할 시 빠르게 접근하기 위해 데이터를 저장시켜 놓는다.)

 

 

아직 처음써보는거라 ,, 두서 없긴하지만.. 점점 익숙해지겠지..?ㅎㅎ..