간단하게 확인하려면 파이어폭스에서 콘솔로 찍어보면 되겠습니다.
encodeURIComponent('http://127.0.0.1/_test/api/neouser/Front.do?id=asdfa&no=1');
'javaScript'에 해당되는 글 12건
- 2011.01.26 [javascript] urlencode 4
- 2010.08.20 브라우져 창크기 내맘데로 조절하기 1
- 2008.10.30 JSON javascript 읽기 2
- 2008.04.22 Server Side Script
- 2008.04.15 텍스티콘 tag를 text로 변경하기
- 2008.01.14 [javascript sample] 최근 개발 sample
- 2008.01.05 [javascript sample] innerHTML 반대!~
- 2008.01.04 Array에 관한 집합
- 2008.01.03 [javascript sample] Array?
- 2008.01.03 [javascript sampel] undefined? 1
javascript: self.resizeTo(1024, 768);
위와같은 스크립트를 주소표시줄에 넣고 Enter를 눌러주면
브라우져 창 크기가 조절된다.
스크린샷을 뜰때 유용하게 사용할 수있다.
JSON(Javascript Object Notation)은 경량 데이터 교환 형식이다.
사람이 읽기 쉽고, 쓰기 쉽고, 또 기계에게도 해석과 생성이 용이한 형식이며
JavaScript(ECMAScript)에 근거한 부분집합이다.
즉, 자바스크립트로 객체를 기술하는 방법이다.
예들 들어, 아래와 같이 씁니다.
var oj = {
"프로퍼티 이름" : "값",
"메소드 이름" : function() {alert!('This is method')}
}
이것만으로 오브젝트 oj를 만드는 것이 가능하여, oj.프로퍼티이름 으로 값을 얻어 낼 수 있어,
oj.메소드이름() 으로 "This is method"라는 대화창을 표시합니다.
또한 Javascript로는 배열도 다음과 같은 꼴로 다룰 수 있는 경우가 자주 있습니다.
var ary = ["값1", "값2", "값3"]
데이터 교환용 형식으로 고려해보면, 이것은 XML과 마찬가지 또는 그 이상으로 가벼우며
간단한 형식이라는 것을 알 수 있습니다.
특히 웹 상에 보급하고 있는 언어는 C언어계가 많아, C, C++, C#, 자바, JavaScript, Perl,
Python 등 많은 언어간의 연동을 꾀하기 쉬운 형식이라고 할 수 있겠습니다.
그래서 XML을 대신 할 데이터 교환용 형식으로 Ajax에서는 JSON이 보급되고 있습니다.
키가 없는 배열에 대해서는 []를 사용한다.
KOR은 obj[0]으로 접근 할수 있고 CHN은 obj[2]로 접근 할수 있다
var obj = ["KOR","USA","CHN"];
키가 있는 배열에 대해선 {키:값}을 사용한다.
var man = {name:"홍길동",height:"170"};
var result = {
mans : [
{name:"홍길동",height:"170"},
{name:"홍길순",height:"165"}
]
}
[접근법]
result.mans[0].name; //홍길동
result.mans[1].name; //홍길순
XML이 커질수록 XML DOM을 이용하여 객체로 표현하는 것은 매우 수고스러운
작업이 될 것이다.
JSON(제이슨)은 이러한 단점을 보완할 수 있는 표기법으로 XML대신 JSON으로
표기된 문자열은 자바스크립트에서 쉽게 객체로 복구하여 사용 할 수 있다.
var json_str = "{name:'홍길동',height:'170'}";
var man = eval!("(" + json_str + ")");
alert!(man.name);
따라서 서버의 응답이 JSON 문자열이라면 XML DOM을 만들 필요도 없다.
아주 간단히 결과를 객체화하여 사용 할 수 있다.
Server Side Script(서버 사이드 스크립트. 이하 SSS)란 웹의 관점에서 바라보았을 때 서버에서 실행되는 스크립트 언어를 가리킨다.
구체적으로는 클라이언트가 서버로 파일을 요청할 때, 미리 웹서버에 지정된 확장자를 클라이언트가 요청하는 경우 서버가 클라이언트에게 요청받은 내용을 전달하기 전에 지정된 스크립트 엔진을 이용해서 클라이언트가 지정된 내용 중 SSS로 작성된 부분을 스크립트 엔진이 실행해서 SSS로 작성된 코드 부분을 실행된 결과로 치환한 뒤 그 결과를 클라이언트로 보내게 된다.
보통 SSS가 하는 역할은 클라이언트가 파일을 HTTP로 요청하면서 HTTP 헤더에 부가적인 정보를 보내면 웹서버(정확히는 스크립트 엔진)는 그 정보를 이용해서 DB 서버에 접속, 결과를 도출해서 사용자에게 동적인 내용을 보여주는 것을 기본으로 한다. 이런 역할의 대표적인 것으로는 인터넷 게시판 등이 있다.
그렇지만 지금은 클라이언트에서 전달한 내용으로 동적인 내용을 구성하는 것을 넘어서 세션을 이용해서 사용자를 구별해서 각 사용자마다 다른 개인화 서비스를 제공한다거나 그래픽 라이브러리를 이용해서 동적인 이미지 생성을 해서 새로운 컨텐츠를 생산해내는 등 지금에 와서는 그 역할이 지극히 다양해졌다.
SSS를 공부하다 보면 가장 자주보는 실수가 바로 Client Side Script로 처리가 가능한 부분을 SSS로 처리하려고 하여 Client Side Script 안에 다시 SSS를 삽입하여 원하는 결과를 얻으려고 하는 행위 등이 있다. 이를 테면 JavaScript와 ASP를 공부중인 학생이 JavaScript로 쿠키의 값을 얻으려고 하였으나 JavaScript의 쿠키 값을 읽어들이는 루틴이 복잡하다고 생각하여 자바스크립트 중간에 ASP로 쿠키를 읽어들이는 코드를 넣는다던가 하는 부분 등이다. 이런 점을 막기 위해선 Server Side Script와 Client Side Script의 실행되는 위치를 명확하게 주지시킬 필요가 있다.
여담으로 マサキ君은 예전에 학교에서 ASP를 가르쳐주시던 선생님께서 'ASP같은 서버 사이드 스크립트들은 말하자면 HTML 생성기라고 생각하면 되지'라고 가르쳐주시던게 퍼득 떠오른다.
또한 웹 개발에 처음 뛰어드려는 사람은 Server Side Script와 Client Side Script의 실행 위치와 능력의 한계, 두 스크립트 언어의 차이점을 명확히 알아둘 필요가 있다.
대표적인 Server Side Script는 ASP, PHP, JSP 등이 있으며, 이러한 SSS들의 대다수는 보통 HTML 태그 중간에 여는 꺽쇠와 정해진 한개의 문자를 조합해서 여는 태그로 삼고 역시 정해진 문자 하나와 닫는 꺽쇠를 이용해서 닫는 태그로 삼고 그 사이에 언어에 맞는 코드를 집어넣게 된다. 예를 들어 ASP는 <%로 시작해서 %>로 끝나며 PHP는 <?로 시작해서 ?>로 끝나며 그 사이에 프로그램 코드가 들어가게 된다. 만약 웹서버 설정을 잘못해서 지정 확장자에 스크립트 언어로 맵핑하는 것을 잊었다던가 Server Side Script와 Client Side Script의 차이점을 잘 모르는 사람이 실수로 클라이언트에서 실행하게 되면 SSS의 코드는 모두 무시되고 처리된다. 이것은 <로 시작해서 >로 끝나는 항목이 있으면 태그로 인식하는 브라우저의 특정(정확히는 기존 HTML 4.01의 특성)에 기인한 것이다.
구체적으로는 클라이언트가 서버로 파일을 요청할 때, 미리 웹서버에 지정된 확장자를 클라이언트가 요청하는 경우 서버가 클라이언트에게 요청받은 내용을 전달하기 전에 지정된 스크립트 엔진을 이용해서 클라이언트가 지정된 내용 중 SSS로 작성된 부분을 스크립트 엔진이 실행해서 SSS로 작성된 코드 부분을 실행된 결과로 치환한 뒤 그 결과를 클라이언트로 보내게 된다.
보통 SSS가 하는 역할은 클라이언트가 파일을 HTTP로 요청하면서 HTTP 헤더에 부가적인 정보를 보내면 웹서버(정확히는 스크립트 엔진)는 그 정보를 이용해서 DB 서버에 접속, 결과를 도출해서 사용자에게 동적인 내용을 보여주는 것을 기본으로 한다. 이런 역할의 대표적인 것으로는 인터넷 게시판 등이 있다.
그렇지만 지금은 클라이언트에서 전달한 내용으로 동적인 내용을 구성하는 것을 넘어서 세션을 이용해서 사용자를 구별해서 각 사용자마다 다른 개인화 서비스를 제공한다거나 그래픽 라이브러리를 이용해서 동적인 이미지 생성을 해서 새로운 컨텐츠를 생산해내는 등 지금에 와서는 그 역할이 지극히 다양해졌다.
SSS를 공부하다 보면 가장 자주보는 실수가 바로 Client Side Script로 처리가 가능한 부분을 SSS로 처리하려고 하여 Client Side Script 안에 다시 SSS를 삽입하여 원하는 결과를 얻으려고 하는 행위 등이 있다. 이를 테면 JavaScript와 ASP를 공부중인 학생이 JavaScript로 쿠키의 값을 얻으려고 하였으나 JavaScript의 쿠키 값을 읽어들이는 루틴이 복잡하다고 생각하여 자바스크립트 중간에 ASP로 쿠키를 읽어들이는 코드를 넣는다던가 하는 부분 등이다. 이런 점을 막기 위해선 Server Side Script와 Client Side Script의 실행되는 위치를 명확하게 주지시킬 필요가 있다.
여담으로 マサキ君은 예전에 학교에서 ASP를 가르쳐주시던 선생님께서 'ASP같은 서버 사이드 스크립트들은 말하자면 HTML 생성기라고 생각하면 되지'라고 가르쳐주시던게 퍼득 떠오른다.
또한 웹 개발에 처음 뛰어드려는 사람은 Server Side Script와 Client Side Script의 실행 위치와 능력의 한계, 두 스크립트 언어의 차이점을 명확히 알아둘 필요가 있다.
대표적인 Server Side Script는 ASP, PHP, JSP 등이 있으며, 이러한 SSS들의 대다수는 보통 HTML 태그 중간에 여는 꺽쇠와 정해진 한개의 문자를 조합해서 여는 태그로 삼고 역시 정해진 문자 하나와 닫는 꺽쇠를 이용해서 닫는 태그로 삼고 그 사이에 언어에 맞는 코드를 집어넣게 된다. 예를 들어 ASP는 <%로 시작해서 %>로 끝나며 PHP는 <?로 시작해서 ?>로 끝나며 그 사이에 프로그램 코드가 들어가게 된다. 만약 웹서버 설정을 잘못해서 지정 확장자에 스크립트 언어로 맵핑하는 것을 잊었다던가 Server Side Script와 Client Side Script의 차이점을 잘 모르는 사람이 실수로 클라이언트에서 실행하게 되면 SSS의 코드는 모두 무시되고 처리된다. 이것은 <로 시작해서 >로 끝나는 항목이 있으면 태그로 인식하는 브라우저의 특정(정확히는 기존 HTML 4.01의 특성)에 기인한 것이다.
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script language="javascript">
function test() {
var textDoc = document.getElementById("test").document;
var textHTML = document.getElementById("test").innerHTML;
for (imgs =0; imgs < textDoc.images.length; imgs++){
tmpA = textDoc.getElementById(textDoc[imgs].id).outerHTML;
txtname = textDoc[imgs].name;
textHTML = textHTML.replace(tmpA, txtname);
}
alert (textHTML);
}
</script>
<BODY onload="javascript:test();">
<div id="test" name="2133">
1오<IMG id=74 src="http://neouser.tistory.com/pie2/texticon/texticon28.gif" name=~> <IMG id=81 src="http://neouser.tistory.com/pie2/texticon/texticon12.gif" name=즐>쳐드<IMG id=69 src="http://neouser.tistory.com/pie2/texticon/texticon17.gif" name=삼> 이게방상
</div>
</BODY>
</HTML>
하지만 이 방법은 그리 좋지 않다.
dom객체를 재 생성하는것은 그다지 바람지 하지 않기 때문이라고 한다.
더불어 이 방법은 test시에는 가능했지만 실전적용에 용이하지 못해 파기를 했다.
본 소스코드는 innerHTML의 다양한 활용을 볼 수 있는 소스코드입니다.
단순이 HTML을 넣을때 뿐만아니라 해당 내용을 get 해올적에도 innerHTML이 사용되고
있는것을 볼 수 있답니다.
더불어 페이지 리로드 하는것도 있네요.
조건절에 특별히강조를 더한이유는
document.getElementById("rssGrp"+grp+"Area").innerHTML ㄴ의 실행결과 기대값으로 NULL이거나 선언되어있지 않다면 if절에서는 false를 보이기 때문입니다.
function notReadAllFinal(resultCode, url, param){
var chid = param[0];
var viewOrer = param[1];
var allynflag = param[2];
if (allynflag =="N") {
document.getElementById("itemCount_notRead_top").innerHTML = ""; //(0)
document.getElementById("itemCount_notRead").innerHTML = ""; // (0)
for (var k=0; k < channelList.length; k++) {
document.getElementById("itemCount_" + channelList[k]).innerHTML = ""; // 메뉴상의 신규아이템 카운터 (0)
}
for (grp =1; grp < 100; grp++) {
if (document.getElementById("rssGrp"+grp+"Area") != null && document.getElementById("rssGrp"+grp+"Area").innerHTML
&& document.getElementById("set_rssGrp"+grp)) {
document.getElementById("set_rssGrp"+grp).innerHTML ="";// (0)
}
}
} else {
window.location.reload();
}
}
}
var chid = param[0];
var viewOrer = param[1];
var allynflag = param[2];
if (allynflag =="N") {
document.getElementById("itemCount_notRead_top").innerHTML = ""; //(0)
document.getElementById("itemCount_notRead").innerHTML = ""; // (0)
for (var k=0; k < channelList.length; k++) {
document.getElementById("itemCount_" + channelList[k]).innerHTML = ""; // 메뉴상의 신규아이템 카운터 (0)
}
for (grp =1; grp < 100; grp++) {
if (document.getElementById("rssGrp"+grp+"Area") != null && document.getElementById("rssGrp"+grp+"Area").innerHTML
&& document.getElementById("set_rssGrp"+grp)) {
document.getElementById("set_rssGrp"+grp).innerHTML ="";// (0)
}
}
} else {
window.location.reload();
}
}
}
<span id="neouser">Good</span>
document.getElementById("itemCount_rssGrp1").innerHTML ="neouser";
> 값을 넣어줍니다.
document.getElementById("itemCount_rssGrp1").outerHTML
> return 값 : <span id="neouser">Good</span>
document.getElementById("itemCount_rssGrp1").outerText
> return 값 : Good
innerHTML 의 반대되는 개념은 뭐가 있을까?
값을 잘 끄집어 내오는것을 난 찾았다.
그러다 발견한 outerHTML ... 하지만 이것을 쓸데없는 테그까지 가져온다.
그렇다면 outerText 는 어떠할까?
결과는 만족스럽다.
이구~ 이런것을 찾으려 들면 항상 없어요.
Java 의 Vector 클래스는 내부적으로 배열을 사용하고 있다. 따라서 Vector 의 자바스크립트 버전을 만들기 위해서는 Array 객체에 대한 빵빵한 지식이 필요하다 (없어도 된다. 그러나 있으면 매우 좋다). 자! 배열의 기초와 유용한 메쏘드들을 살펴보자.
배열의 생성
1. 생성자를 이용한 생성
- new Array(arrayLength)
ex) friends = new Array(3); // 크기가 3 인 배열 생성
- new Array(element0, element1, ... , elementN)
ex) friends = new Array("개똥이", "소똥이", "말똥이"); // 크기 3인 배열 생성(값이 채워짐)
2. 직접 생성
friends = ["개똥이", "소똥이", "말똥이"];
간접적인 배열 길이의 증가
배열의 길이는 현재 배열의 길이보다 큰 인덱스를 사용하면 자동으로 증가한다. 아래는 배열의 길이가 0 인 객체 생성 후 99번째 요소에 값을 할당하여 배열의 길이가 100 으로 증가한 예이다.
friends = new Array();
friends[99] = "새똥이";
메쏘드 종류
concat : 두개의 배열을 합쳐 새로운 배열을 리턴한다. 원본 배열은 변하지 않는다.
문법
arrayName.concat(arrayName2, arrayName3, ... , arrayNameN)
인자
arrayName2, ... , arrayNameN - 합쳐질 인자들
예제
두 배열을 합치는 예
alpha = new Array("a", "b", "c");
numeric = new Array(1, 2, 3);
alphaNumeric = alpha.concat(numeric); // ["a", "b", "c", 1, 2, 3] 배열 생성
join : 모든 요소가 구분자로 이어진 문자열을 리턴한다. 디폴트 구분자는 comma(,) 이다.
문법
arrayName.join(separator)
인자
separator 요소와 요소 사이에 사용될 구분자 문자열
예제
friends = new Array("소똥이", "개똥이", "말똥이");
strFriends1 = friends.join(); // 소똥이,개똥이,말똥이
strFriends2 = friends.join(", "); // 소똥이, 개똥이, 말똥이
strFriends3 = friends.join(" + "); // 소똥이 + 개똥이 + 말똥이
pop : 배열의 마지막 요소를 삭제한 후 그 값을 리턴하고 배열의 크기를 줄인다.
문법
arrayName.pop()
인자
없음
예제
// 말똥이가 pop 되고 배열에는 "개똥이", "소똥이"만 남는다.
// 배열크기도 2로 줄어든다.
friends = ["개똥이", "소똥이", "말똥이"];
popped = friends.pop(); // popped 에 말똥이가 할당된다.
push : 배열에 하나 또는 여러개의 값을 넣고 새로운 배열의 길이를 리턴한다.(배열길이 증가)
문법
arrayName.push(element1, element2, ... , elementN)
인자
element1, element2, ... , elementN - 추가될 요소들
예제
friends = ["개똥이", "소똥이"];
pushed = friends.push("말똥이", "새똥이"); // ["개똥이", "소똥이", "말똥이", "새똥이"]
alert(pushed); // 4
reverse : 배열 요소를 역순으로 재배치한다(첫번째 요소는 마지막으로, 마지막 요소는 처음으로).
문법
arrayName.reverse()
인자
없음
예제
myArray = new Array("1", "2", "3");
myArray.reverse(); // ["3", "2", "1"]
shift : 첫번째 요소를 삭제하고 배열의 길이를 하나 줄인 후, 삭제된 요소를 리턴한다.
문법
arrayName.shift()
인자
없음
예제
friends = ["개똥이", "소똥이", "말똥이"];
shifted = friends.shift(); // ["소똥이", "말똥이"]
alert("삭제된 요소는 " + shifted + " 입니다."); // 개똥이
slice : 얇게 썬 슬라이스 치즈가 생각난다(^^). 배열의 일부를 잘라내어 새로운 배열을 리턴한다.
문법
arrayName.slice(begin[,end]) : [] 은 선택사항임
인자
begin - 0보다 큰 시작 인덱스 (필수)
end - 0보다 큰 끝 인덱스 (선택). 지정되지 않으면 배열의 끝까지 복사된다.
예제
numbers = ["0", "1", "2", "3", "4"];
sliced1 = numbers.slice(2, 3); // ["2"]
sliced2 = numbers.slice(2); // ["2", "3", "4"]
sort : 배열의 요소를 정렬한다.
문법
arrayName.sort([compareFunction])
인자
compareFunction - 정렬방법을 지정한 함수.
생략시에는 요소들의 toString() 값을 사전순서(Dictionary order) 대로 정렬한다.
compareFunction(a, b) 에서
1) a > b : 0 보다 큰 값 리턴
2) a = b : 0 리턴
3) a < b : 0 보다 작은 값 리턴
예제
// 역행 정렬
function descComparator(a, b) {
return b - a;
}
// 순행 정렬
function ascComparator(a, b) {
return a - b;
}
numbers = ["0", "1", "2", "3", "4"];
numbers.sort(); // ["1", "2", "3", "4", "5"]
numbers.sort(ascComparator); // ["1", "2", "3", "4", "5"]
numbers.sort(descComparator); // ["4", "3", "2", "1", "0"]
splice : 이전 배열요소를 삭제하고 새로운 내용물을 추가하는 형태로 배열 내용을 변경한다. 삭제된 요소들은 리턴된다. Vector 와 유사한 기능을 하므로 숙지하자.
문법
arrayName.splice(index, howMany, [element1][, ..., elementN])
인자
index - 변경하고자 하는 요소의 시작 인덱스
howMany - 삭제하고자 하는 이전 배열요소 갯수.
element,...,elementN - 추가하고자 하는 배열 요소들
예제
// numbers[2]부터 2개("2", "3")를 삭제하고 그 자리에 "5"와 "6" 을 삽입한다.
numbers = ["0", "1", "2", "3", "4"];
spliced = numbers.splice(2, 2, "5", "6"); // ["0", "1", "5", "6", "4"]
alert(spliced); // "2", "3"
unshift : 하나 또는 여러개의 요소를 배열의 왼쪽에 추가한다. 배열길이는 증가한다.
문법
arrayName.unshift(element1,..., elementN)
인자
element1,...,elementN - 배열의 앞쪽에 들어갈 요소들
예제
numbers = ["0", "1", "2"];
numbers.unshi
function getChannel(blogid) {
var channelList = new Array();
#foreach($channel in $runChannel)
channelList.push ("$channel.chid");
#end
for (run = 0; run < channelList.length; run++ ) {
var getchid = channelList[run];
****
}
}
var channelList = new Array();
#foreach($channel in $runChannel)
channelList.push ("$channel.chid");
#end
for (run = 0; run < channelList.length; run++ ) {
var getchid = channelList[run];
****
}
}
스크립트에서 의도하는 바는 programming 되어넘어오는 각각의 값들을
위와같이 Array롤 받아서 하나 하나 pup 해서 사용하려는 의도입니다.
Array에는 보다 다양한 기능들이 있답니다.
var readItem = new Array();
function updateItemCount() {
var inchid = document.neouserForm.chid.value;
if (readItem.length == 0 && itemCountChannel[inchid] !=undefined) {
document.getElementById("itemCount_channel_"+inchid).innerHTML = itemCountChannel[inchid];
} else {
****
}
}
}
function updateItemCount() {
var inchid = document.neouserForm.chid.value;
if (readItem.length == 0 && itemCountChannel[inchid] !=undefined) {
document.getElementById("itemCount_channel_"+inchid).innerHTML = itemCountChannel[inchid];
} else {
****
}
}
}
본 스크립트에서 의도하는 바는 undefined에 대해서입니다.
undefined은 문자열이 아니랍니다. 그래서 'undefined' 나 "undefined" 로 비교하게 되면
위에 조건절로 본다면 true를 return 하게 됩니다.
꼭! undefined 은 아무런 코멘트 없이 사용하시기 바랍니다.
