2010-05-23 4 views
1

질문은 다음과 같습니다.자바 스크립트 BOM 관련 질문에 관한 간단한 문제

많은 링크가있는 페이지를 만듭니다. 그런 다음 창 onload 이벤트에 발생하는 코드를 작성하여 페이지의 각 링크에 대한 href를 표시합니다.

그리고 이것은 내 솔루션

<html> 
<body language="Javascript" onload="displayLink()"> 
<a href="http://www.google.com/">First link</a> 
<a href="http://www.yahoo.com/">Second link</a> 
<a href="http://www.msn.com/">Third link</a> 

<script type="text/javascript" language="Javascript"> 
function displayLink() 
{ 
for(var i = 0;document.links[i];i++) 
{ 
alert(document.links[i].href); 
} 
} 
</script> 

</body> 
</html> 

I 사용자의 브라우저 버전을 확인하는 방법에 대한 자바 스크립트 튜토리얼에 들어가기 전에이 책

<html> 
<head> 
<script language=”JavaScript” type=”text/javascript”> 
function displayLinks() 
{ 
var linksCounter; 
for (linksCounter = 0; linksCounter < document.links.length; linksCounter++) 
{ 
    alert(document.links[linksCounter].href); 
} 
} 
</script> 
</head> 
<body onload=”displayLinks()”> 
<A href=”link0.htm” >Link 0</A> 
<A href=”link1.htm”>Link 2</A> 
<A href=”link2.htm”>Link 2</A> 
</body> 
</html> 

에서 제공하는 답이다 또는 모델, 루프에 대한 links 배열의 length 속성을 처리하여 예제와 같은 메서드를 사용했지만, 하지만 튜토리얼을 읽은 후에는 document.links[i]이 유효한 값을 반환하는 경우에만 테스트 조건이 true로 평가되는 메서드를 사용하여이 대체 방법을 사용할 수 있다는 것을 알았습니다. 따라서 코드는 유효한 코드를 사용하여 작성됩니다. 방법? 그렇지 않다면 더 나은 코드를 작성하는 방법에 관한 의견은 무엇입니까 ?? 틀렸다면 올바른 내용을 말하면서 사람들의 일부가 "좋은 코드가 작동하는지 여부 만 평가하는 것이 아니라, 속도의 조건, 코드를 이해하는 능력, 다른 사람들이 쉽게 코드를 이해하도록 할 수 있습니다. "사실인가요?

+0

예. 그렇습니다. –

답변

5

일반적으로 배열을 반복 할 때 책의 솔루션과 마찬가지로 length 속성을 사용하려고합니다. 귀하의 솔루션은이 의 특정 특정 상황에서도 문제가 없지만 약점이 있습니다 : 어레이의 항목이 0, null, undefined 또는 false 인 모든 것이 "거짓"값이며 배열의 끝에 있지 않더라도 document.links[i]은 거짓 일 수 있습니다.

예 : 3, 21,하지만 중지 경고합니다

var index, a; 
a = [3, 2, 1, 0, -1, -2]; 
for (index = 0; a[index]; ++index) { 
    alert(a[index]); 
} 

. 3, 2, 1, 0, -1-2을 경고 할 ...

var index, a; 
a = [3, 2, 1, 0, -1, -2]; 
for (index = 0; index < a.length; ++index) { 
    alert(a[index]); 
} 

:에 비교.

다음과 같은 코드가 나타날 수 있습니다. for (index in a). 일반적으로 배열 인덱스를 통해 루프를 사용하지 마십시오. 이것은 for..in의 오해를 기반으로합니다. (이에 대한 자세한 내용은 아래에 있습니다.)

(새로운 5th edition 사양의 경우 배열 항목을 반복하는 또 다른 방법이 있습니다 : forEach 함수입니다. 함수를주고 각 함수에 대해 호출합니다. 배열의 요소는. Details in this other answer.. 슬프게도, IE8를 지원하지 않지만 여러 옵션 "ES5 심"에 대한   — 검색 "을 shimmed"할 수있는 것들 중 하나입니다.)

배열에 대해 학습 할 때, Javascript 배열이 다른 언어의 배열과 매우 다르다는 것을 아는 것이 중요합니다.한 가지 들어, 그들은 (필연적으로) 배열이 아닙니다. 실제로, 그것들은 몇 가지 특별한 기능이 추가 된 정상적인 Javascript 객체입니다. Javascript 객체는 속성 맵이며 키를 값에 매핑합니다. obj 객체가 값 1의 열쇠 "foo" (문자열) 매핑

var obj = {foo: 1}; 

한다 : 예를 들어. 코드에서 리터럴 이름을 사용하거나 [] 및 문자열을 사용하여 해당 속성에 액세스 할 수 있습니다. 물론 후자를 수행하는 경우 문자열 (리터럴 또는 변수 또는 표현식 등)을 사용할 수 있습니다. 따라서이 모든 결과는 같습니다.

x = obj.foo; 
x = obj["foo"]; 
name = "foo"; 
x = obj[name]; 
name = "o"; 
x = obj["f" + name + name]; 

... 아이디어가 있습니다. []에서 사용하는 문자열이 문자열로 평가되는 한 해당 키를 사용하여 값을 찾을 수 있습니다. 그러나 자바 스크립트는 암시 적 강제를 수행하므로이 작동 :이

var obj = {"1": "one"}; 
alert(obj[1]); // alerts "one" 

내가 값 "one"-"1"라는 이름의 속성을 매핑했습니다. 그런 다음 문자열이 아닌 숫자를 사용하여 obj[1]으로 찾습니다. 그건 괜찮아. 통역관은 그것을 나를 위해 끈으로 바꾸고 키 조회를 할거야.

이 모든 것이 어레이와 어떤 관련이 있습니까? 이것은 : 배열 인덱스는 단지이라는 속성 이름 일뿐입니다. 자바 스크립트 배열은 이러한 특수 기능 키를 값에 매핑하는 일반 객체입니다 :

그 숫자가 현재의 최대 인덱스에 존재하는보다 큰 경우, 이름을 숫자로 해석 될 수있는 속성을 설정할 때마다
  • 배열에서 length 속성이 변경됩니다. 그래서 :

    var a = ["zero"]; 
    alert(a.length); // alerts 1 
    a[3] = "three"; 
    alert(a.length); // alerts 4, because the max index is now 3 
    
  • 보다 크거나 새 길이에 해당하는 값이 숫자 이름을 가진 속성이있는 경우는, length을 설정할 때마다

    은 이러한 속성은 개체에서 삭제됩니다.

    var a = ["zero", "one", "two", "three"]; 
    alert(a[3]); // alerts "three" 
    a.length = 3; 
    alert(a[3]); // alerts "undefined", the "3" property has been deleted 
          // only the "0", "1", and "2" properties remain 
    
  • 는 그들은 join 또는 splice 같은 Array.prototype으로, 상속 기능을위한 다양한 속성을 가지고있다.

그게 전부입니다. C, C++, Java 또는 대부분의 다른 언어의 배열과 같은 것이 없습니다.

var a = ["zero", "one", "two"]; 
a.foo = "bar"; 
alert(a[1]);  // alerts "one", 1 is implicitly coerced to "1" 
alert(a["1"]); // alerts "one" 
alert(a.foo);  // alerts "bar" 
alert(a["foo"]); // alerts "bar" 

그리고 for..in 것은 고장 곳은 다음과 같습니다 : 배열은 단지 추가 기능의 몇 개체 때문에 당신이 원하는 경우

, 당신은 배열에 다른 숫자가 아닌 속성을 넣을 수 있기 때문에

var a, name; 
a = [1, 2, 3]; 
a.foo = "bar"; 
for (name in a) { 
    alert(name); 
} 

"1", "2",경고 : for..in 배열 인덱스를 통해 하지 루프를 수행, 그것은 속성 이름을 통해 루프및 "foo" (특별한 순서는 없습니다). 어떻게하면 배열 인덱스 일 뿐이라고 생각했는지 알 수 있습니다.당신 루프 배열 인덱스로 사용할 수 있지만, 그것보다 가치가 더 복잡 :

for (name in a) { 
    if (String(Number(name)) === name && a.hasOwnProperty(name)) { 
     alert(name); 
    } 
} 

속성 이름은 숫자이며, 그 속성에 정의되어 있는지 여부를 확인하는 경우 먼저 확인합니다 그건 a 자체는 Array.prototype이 아닙니다 (배열은 Array 프로토 타입에서 속성을 상속받습니다). (이 후자의 검사는 아마도 그다지 중요하지 않을 것입니다. 누군가가 Array 프로토 타입에 숫자 형 속성을 추가하면 아주 나쁜 일을합니다. (tm)

+1

+1 나는이 질문에 호의적 이었지만, 나는이 대답을 선호하는 편이 낫다. 내가 읽은 최고의 설명 중 하나입니다 (15 년 넘게). – GitaarLAB

0

예, 그렇습니다. 코드가 작동 할뿐만 아니라 이해하기 쉽도록해야합니다. 이를 관리 효율성이라고하며, 훌륭한 코드를 작성하는 데 매우 중요합니다. 약간의 차이와 약간의 문제가 코드 및 제공된 대답에

살펴 보자 :

  • 당신은 HTML 문서에서 head 부분을 누락되었습니다. 문서가 유효한 HTML이어야합니다.

  • 제공된 대답에 headtitle 태그가 누락되었습니다.이 역시 필요합니다.

  • 자바 스크립트 태그는 문서의 head 섹션에 위치해야합니다. 그것은 본문에 스크립트 태그를 가지고 작동하지만, 이것은 비표준이므로 특별한 이유가 없으면 피해야합니다.

  • 스크립트 태그의 문자는 language이며 더 이상 사용되지 않으므로 type 속성 만 필요합니다.

  • 잘 알려진 규칙 인 루프에 대해 변수 i을 사용하고 있습니다. 변수에 대한 설명적인 이름을 제공하는 것은 좋은 코딩의 또 다른 측면이지만 모든 변수가 긴 이름을 가져야한다는 것을 의미하지는 않습니다. 루프 카운터와 같이 쉽게 알아볼 수있는 목적을 위해 사용되는 일부 변수는 짧은 이름을 가질 수 있습니다.

  • 컬렉션의 길이를 확인하는 것이 유효한 값을 확인하는 것보다 낫습니다. 실제로 원하는 작업에 더 잘 맞습니다. 이 경우에는 유효한 값을 검사하지만 null 값을 포함 할 수있는 콜렉션이있는 경우 루프는 첫 번째 널 (NULL) 값으로 중지되어 루프가 짧게 절단됩니다.

따라서, 페이지의 콘텐츠에 대한 블록 태그 (페이지 대신 쿼크 모드의 표준 모드로 렌더링 할)으로하는 doctype 선언과 같은 몇 가지 유용한 물건을 추가하는, 내가보고 코드를 추천 할 것입니다 예 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <title>Links test</title> 

    <script type="text/javascript"> 

    function displayLink() { 
    for(var i = 0; i < document.links.length; i++) { 
     alert(document.links[i].href); 
    } 
    } 

    </script> 

</head> 
<body onload="displayLink();"> 

    <div> 
    <a href="http://www.google.com/">First link</a> 
    <a href="http://www.yahoo.com/">Second link</a> 
    <a href="http://www.msn.com/">Third link</a> 
    </div> 

</body> 
</html> 
+1

여기 주위에 많은 전문가를 가져 주셔서 감사합니다 !!!! 나는 당신이 정말로 열렬하고 도움이된다고 말하기 위해 자신을 저항 할 수 없다 !!!! 나는 나중에 주어진 코멘트와 조언을 읽고 어떤 결정을 내릴 것인가? 가장 좋은 대답, 나는 모든 대답을주는 것이 아주 좋다라고 생각한다 !!!! 다시 고마워. – caramel1995