Head First 시리즈는 "생각하게 만드는 책"이다. 요즘 인터넷이 발달하고 많은 자료, 샘플 자료들이 널려 있기에 검색해서 사용하면 느리지만 가능하다. 기술은 없으나 기교를 키울 수 있다.
하지만, 본 시리즈는 개발자에게 왜 이렇게 구동하는지? 이렇게 하면 어떤 이익과 문제점이 있는지를 잘 구분해서 알려준다. 기술서적이라기 보다는 산책하는 기분으로 읽기에 1주일 이내에 빠르게 봐야 의미가 있다.
해당 시리즈는 여러권 읽어 보았으나, 오늘은 Ajax에 대해 쓰기로 한다.
Ajax는 java script를 활용하여 DOM, JSON, XML을 활용하는 기법이다.
즉 특별한 기법이라기 보다는 특화(?)된 기법이라고 하는게 맞다. 이책 Head First 특성상 디테일한 내용보다는 개념을 잡는 책이다.
기존 JavaScipt 를 사용해본 사람이면, 예를 들어
<html>
<Head>
<script language="javascript">
function example() {
var dev1 = "1";
dev2 = "2";
.........
}
</script>
<body onload = example();>이런식으로 활용했을 것이다.
최초 화면 로딩시 특정 함수를 실행하는 방법은 2가지이다.
1. 위의 예제처럼 body 태그안에 onload= "함수"를 명시.
2. 스크립트 정의하는 부분에
window.onload = example;
이라고 ()를 제외한 함수를 명시하는 것이다.
3. 변수 역시 var를 사용하지 않으면 해당 변수는 전역변수로 인식한다. 그래서 대부분 사용자가 함수정의시에 var를 사용해서
다른 함수와 변수가 겹치지 않도록 지역변수로 선언한 것이다. 이것 역시 funtion example() { .........} 구분 밖에서 선언하면,
var를 사용해서 선언하였다 하더라도 { } 밖에서 선언한 것이라 전역변수가 된다.
이것은 추후에 함수 사용시 변수를 재사용할 수 있는 여부를 결정짓기 때문에 중요하다.
# 예제 소스
function checkUsername() {
request = createRequest();
if(request == null )
alert("unable to create request");
} else {
var theName = document.getElementById("username").value;
var username = escape(theName); <----- 특수문자들을 처리하기 위해서 escape 함수로 변수 처리
var url = "checkName.php?username=" + username;
request.onreadystatechange = userNameChecked; <-----결과가 나오면 처리할 함수를 설정
request.open("GET", url , true); <-----get, post방식, url, true(비동기), false(동기) 방식.
request.send(null);
}
# 예제 소스
- 보여지는 부분과 기능을 구현하는 것을 구분하는 방법은 CSS를 활용하여 보여지는 것을 구분하는 것이다. 즉 클래스를 설정한 후,
자바스크립트로는 클래스를 변경해주면 된다.
CSS 파일...
#username {
background : #ff url .....
}
#username.checking { background :...}
#username.approved { backgroudn...}
# 예제소스
- 엘리먼트 찾기 : 엘리먼트들은 일종의 parent-child 관계이기 때문에 특정 element를 찾은 후, 다시 거기서 element검색이 가능하다.
function showTab() {
var selectedTab = this.title;
var images =
document.getElementById("tabs").getElementsByTagName("img"); <--- 특정 Element 안에 Element로 검색
for(var i =0 ; i < images.length; i++){
var currentImage = images[i];
}
}# 예제소스
2개이상의 이벤트 등록하기
- 사파리, 파이어폭스,
currentBtn.addEventListener("mouseover", showHint, false);
currentBtn.addEventListener("mouseover", buttonOver, false);
- IE
currentBtn.attachEvent("onmouseover", showHint);
currentBtn.attachEvent("onmouseover", buttonOver);
- 1개만 등록시에는
currentBtn.onclick = showHint;
- 이벤트 제거방법
currentBtn.onclick = "";
# 예제소스
- this 가져오기.
브라우져마다 this를 가져오는 방식이 다르다. 위의 showTab() 에서 this를 해결해주는 방법.
function getActivatedObejct(e) {
var obj;
if(!e) {
//early version of IE
obj = window.event.srcElement;
} else if(e.srcElement) {
// IE 7 이상.
obj = e.srcElement;
} else {
// DOM Level 2 Browser
obj = e.target;
}
return obj;
}
# 1장의 전체 소스
붙임파일 참조.
if(passwordRequest.readyState == 4) { << -- 비동기전송의 결과가 옴.
if(passwordRequest.status == 200) { << -- 처리가 정상으로 됨.
if(passwordRequest.responseText == "okay") { << --결과값을 검증.
# 함수소개
1. t = setInterval(scrollImages, 50); (함수, 밀리초단위시간) << - 주기적으로 함수를 실행함.
2. var pieces = "Decide, Commit, Succeed".split(",");
alert(pieces[0] + "," +pieces[1] + "," +pieces[2] );
3. insertBefore(), appendChild()와는 달리 특정 엘리먼트 앞에 추가함.
4. removeChild()는 노드를 제거하는데, 마지막 노드부터 제거해야 함.
# DOM특징
모든 노드들은 parentNode라는 속성을 가지지만 parentNode 속성은 읽기 전용.
appendChild() 함수. --> Node.appendChild(element);
노드 관련 속성 : parentNode, firstChild, lastChild, childNodes, nextSibling, previousSibling, nodeName
이중에서 nodeName에 관하여...
엘리먼트 노드들은 엘리먼트 이름과 동일한 노드 이름을 지니고, 문자 노드의 노드이름은 "#text"이다.
즉 img 경우 nodeName은 img 이지만, 문자열은 "#text"이다.
# 프레임워크
$("username") 문법은 document.getElementById("username"); 을 의미함.
9장에서는 요청과 응답으로 데이터를 주고 받을 때 사용하는 방식에 대해 설명한다.
1. XML 2. JSON 3. innerHTML
# JSON 객체의 멤버에 접근하는 예제
for ( var property in hero ) {
alert("Found a property named : " + property);
}
# 예제소스 참조 XML 파싱
# 예제소스 참조 XML 파싱에서 어레이와 단순속성 파악후 처리.
# 예제소스 참조 JSON 파싱
# 예제소스 참조... property의 속성을 확인하여, 어레이와 단순속성을 확인하여 처리.
# 서버의 응답은 바로 실행하는 것보다는 분리해서 실행하는 것이 안전.
-> var itemDetails = JSON.parse(request.responseText);
JSON은 json2.js라 로드 될때 생성되며, parse는 문자열이 JSON형태면 객체를 반환.
# 예제소스 참조 안전한 방법 POST
registerRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
헤더 설정 필수, get 방식은 url전체를 보내는 것이라 설정할 필요가 없으나, post방식은 명시해줘야 함.
# 유명한 library ( framework)
1. script.acluo.us
2. yahoo ui (YUI)
3. prototype
4. jQuery
5. mooTools
예전에는 JavaScript에 대해 다양한 기술이 난무하여 표준이 없었으나, 산업이 발전하다 보니 표준기술보다는 산업의 기술(구굴, 페이스북 등)에서 프레임워크로 Ajax보다 뛰어난 것들이 많이 나오고 있다. 모든 것은 기본이 충실하면 이해가 쉬우니 느리더라도 단계를 밟아 가길 바라며, 바쁘다면 열심히 읽기 바란다.
'개발자 넋두리 > 코딩하다가..' 카테고리의 다른 글
| [프로프레임] core dump 확인하기. (0) | 2020.11.24 |
|---|---|
| [될 때까지 안드로이드] 기초 다지기3 (Margin과 Padding의 차이) (0) | 2019.11.09 |
| 코딩의 진정한 고수란.. (0) | 2019.10.22 |
| DB관련 유용한 사이트 모음 (0) | 2019.09.09 |
| 외국인등록번호, 주민번호 검증방식 (0) | 2019.04.13 |
