今まで見たことのない JavaScript スキル_javascript スキル

WBOY
リリース: 2016-05-16 18:28:40
オリジナル
1121 人が閲覧しました

JavaScript の成功は広く話題になっており、Web ページの JavaScript コードを記述することは、すべての Web デザイナーにとっての基本的なスキルとなっています。この興味深い言語には、長年の経験を持つ JavaScript プログラマーですら完全に理解していないことが数多くあります。この記事では、あまり馴染みのない、しかし非常に実践的な JavaScript のテクニックを 7 つの側面から説明します。
省略されたステートメント
JavaScript では、次のコードのような省略されたステートメントを使用してオブジェクトと配列を迅速に作成できます:

コードをコピー コードは次のとおりです:

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


コードをコピー コードは次のとおりです:

var car = {
colour:'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'
];

配列に関するもう 1 つの質問は、連想配列のようなものが存在するかどうかです。この例のように、上記の車を定義するコード例がたくさんあります。
コードをコピーします コードは次のとおりです:

var car = new Array();
car['colour'] = 'red';
car['wheels'] = 4; = 'spinning' ;
car['age'] = 4;


省略されたステートメントを使用できるもう 1 つの場所は、

です。 コードをコピーします コードは次のとおりです:
var direct;
if(x < 200){
direction = 1;
} else {
direction =
}

は次のように短縮できます:

コードをコピーしますコードは次のとおりです:
var directive = x < 200 ? 1 : -1;

JSON データ形式
JSON は、Douglas Crockford によって設計された「JavaScript Object Notation」の略称です。JSON は、次の例のように、複雑なデータ形式をキャッシュする際の JavaScript のジレンマを変更します。バンドを記述したい場合は、次のように記述できます。

コードをコピー コードは次のとおりです:
var Band = {
"name":"レッド・ホット・チリ・ペッパーズ",
"メンバー":[
{
"名前":"アンソニー・キーディス",
"役割":"リード・ボーカル"
},
{
"name":"マイケル 'フリー' バルザリー",
"役割":"ベースギター、トランペット、バッキング ボーカル"
},
{
"名前":"チャドスミス",
"role":"ドラム、パーカッション"
},
{
"name":"ジョン・フルシアンテ",
"role":"リードギター"
}
],
"year":"2009"
}


JSON は、一部の API の戻りデータ オブジェクトとしても、JavaScript で直接使用できます。次のコードは、有名なブックマーク Web サイト「delicious.com」の API を呼び出し、この Web サイトのすべてのブックマークを返し、自分の Web サイトに表示します。

コードをコピーします コードは次のとおりです:

<script> <br>function fresh(o){ <br>var out = '<ul>'; for(var i=0;i<o.length>out = '<li><a href="' o[i].u '">' ].d '</a></li>'; <br>} <br>out = '</ul>'; <BR>document.getElementById('delicious').innerHTML = out; 🎜>} <BR></script>
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート