'javascript'에 해당되는 글 9건

  1. 2008.04.15 텍스티콘 tag를 text로 변경하기
  2. 2008.01.14 [javascript sample] 최근 개발 sample
  3. 2008.01.05 [javascript sample] innerHTML 반대!~
  4. 2008.01.04 Array에 관한 집합
  5. 2008.01.03 [javascript sample] Array?
  6. 2008.01.03 [javascript sampel] undefined? 1
  7. 2007.12.26 페이지 다시 읽기 (reload)
  8. 2007.12.12 [sample] 가상의 input 만들어내 Action을 발생시키기
  9. 2007.02.09 [sample] javascript 자신의 쿠키정보 파악하기 1

<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();
    }
   }
}

<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];
    ****
  }
}

스크립트에서 의도하는 바는 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 {
     ****
   }
  }     
 }



본 스크립트에서 의도하는 바는 undefined에 대해서입니다.
undefined은 문자열이 아니랍니다. 그래서 'undefined' 나 "undefined" 로 비교하게 되면
위에 조건절로 본다면 true를 return 하게 됩니다.
꼭! undefined 은 아무런 코멘트 없이 사용하시기 바랍니다.

현재 웹페이지를 다시 읽어오는 것이다.

일반적인 다시 읽기
window.location.reload();
이렇게 하면 컴퓨터의 캐쉬에서 우선 파일을 찾아봅니다. 없으면 서버에서 받아옵니다.


적극적인 다시 읽기
window.location.reload(true);
true 라는 파라미터를 입력하면, 무조건 서버에서 직접 파일을 가져 오게 됩니다. 캐쉬는 완전히 무시됩니다.


소극적인 다시 읽기
history.go(0);
이렇게 하면, 캐쉬에서 현재 페이지의 파일들을 항상 우선적으로 찾습니다.

 

 var cCateList = new Array();
        cCateList[0] = new sCategory("N", "6", "test", "y", "3"); ..
..
..

 for (var i=0; i < cCateList.length; i++) {
   // I 추가, M 수정, D 삭제, N 변경안됨 , Z : 클라이언트에서 입력 후 삭제
   if (cCateList[i].type == "I" || cCateList[i].type == "M" || cCateList[i].type == "D" || cCateList[i].type == "N") {
      var input = document.createElement('input');
      input.type = 'hidden';
      input.name = 'folderChannels';
      input.value = serialize(cCateList[i]);
    
      formObj.appendChild(input);
      aInputObject.push(input);
      input = document.createElement('input');
      input.type = 'hidden';
      input.name = 'channelNames';
      input.value = cCateList[i].title;
           
      formObj.appendChild(input);
      aInputObject.push(input);
   }


위소스는 정말 신선하게 다가왔다. 어떻게 저렇게 만들어 submit까지 날려버리는지
최초개발자분에게 박수를 보내고 싶다 .
사이트에 접속하신 후에 주소줄에 다음을 입력하시면 해당 페이지의 쿠키를 보실 수 있습니다.

javascript:alert(document.cookie)


간단해 보이지만 디버깅할때 가장 요긴하게 잘 사용하는 방법에 해당한다.


1 

글 보관함

카운터

Total : / Today : / Yesterday :
get rsstistory!