>웹 프론트엔드 >JS 튜토리얼 >이전에 본 적 없는 JavaScript 스킬_javascript 스킬

이전에 본 적 없는 JavaScript 스킬_javascript 스킬

WBOY
WBOY원래의
2016-05-16 18:28:401164검색

JavaScript의 성공은 널리 알려져 있습니다. 웹 페이지용 JavaScript 코드 작성은 모든 웹 디자이너의 기본 기술이 되었습니다. 이 흥미로운 언어에는 수년간의 경험을 가진 JavaScript 프로그래머도 완전히 이해하지 못한 많은 알려지지 않은 내용이 포함되어 있습니다. 이 기사에서는 여러분에게 익숙하지 않지만 매우 실용적인 JavaScript 기술을 7가지 측면에서 설명합니다.
축약된 문
JavaScript는 다음 코드와 같은 단축된 문을 사용하여 객체와 배열을 빠르게 생성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var car = new Object()
car.colour = 'red'
car.wheels = 4 ;
car .hubcaps = 'spinning';
car.age = 4;

다음과 같이 축약된 구문을 사용할 수 있습니다.
코드 복사
코드는 다음과 같습니다. var car = { color:'red',
wheels:4,
hubcaps:'spinning',
age:4
}


객체 자동차가 생성되지만, 앞에 ";"를 추가하지 않도록 주의하세요. 닫는 중괄호를 사용하지 않으면 IE에서 큰 문제에 직면하게 됩니다.
배열을 생성하는 전통적인 방법은 다음과 같습니다.



코드 복사
코드는 다음과 같습니다. var movieThatNeedBetterWriters = new Array( 'Transformers','Transformers2','Avatar','Indiana Jones 4'
)


축약된 구문 사용:




코드 복사
코드는 다음과 같습니다. var movieThatNeedBetterWriters = [ 'Transformers ','Transformers2',' Avatar','Indiana Jones 4'
];


배열에 대한 또 다른 질문은 연관 배열이라는 것이 있는지 여부입니다. 위의 자동차를 이 예제처럼 정의하는 코드 예제를 많이 찾을 수 있습니다.



코드 복사
코드는 다음과 같습니다. var car = new Array(); car['color'] = '빨간색'
car['wheels'] = 4
car['hubcaps'] = 'spinning' ;
car['age'] = 4;



조건문을 사용할 수 있는 또 다른 곳은 다음과 같습니다.



코드 복사
코드는 다음과 같습니다. var Direction if(x < 200){
direction; = 1;
} else {
방향 = -1;
}


은 다음과 같이 단축할 수 있습니다:


코드 복사
코드는 다음과 같습니다.var 방향 = x < 200 ? 1 : -1 JSON 데이터 형식JSON은 Douglas Crockford가 디자인한 "JavaScript Object Notation"의 약어입니다. JSON은 복잡한 데이터 형식을 캐싱할 때 JavaScript의 딜레마를 변경합니다. 다음 예에서와 같이 밴드를 설명하려면 다음과 같이 작성할 수 있습니다.


코드 복사

코드는 다음과 같습니다. var band = { "name":" The Red Hot Chili Peppers", "멤버":[ {
"이름":"Anthony Kiedis",
"역할":"리드 보컬"
},
{
"이름":"Michael 'Flea' Balzary",
"역할":"베이스 기타, 트럼펫, 백 보컬"
},
{
"이름":"Chad Smith",
"역할":"드럼,타악기"
},
{
"name":"John Frusciante",
"role":"리드 기타"
}
],
"year":"2009"
}



JSON을 JavaScript에서 직접 사용할 수 있으며 일부 API의 반환 데이터 개체로도 사용할 수 있습니다. 다음 코드는 유명한 북마크 웹사이트 Delicious.com의 API를 호출하고 이 웹사이트의 모든 북마크를 반환하여 자신의 웹사이트에 표시합니다.



코드 복사

코드는 다음과 같습니다.

<script> <br>function Delicious(o){ <br>var out = '<ul>'; for(var i=0;i<o.length;i ){ <BR>out = '<li><a href="' o[i].u '">' <br>o[i ].d '</a></li>'; <br>} <br>out = '</ul>' <br>document.getElementById('delicious').innerHTML = out <br>} <br></script>