JavaScript 初心者が注意すべき 7 つの詳細

それぞれの言語には独自の機能があります。JavaScript では、var を使用して任意の型の変数を宣言できますが、洗練されたコードを記述するには継続的な経験が必要です。この記事では、JavaScript 初心者が注意すべき 7 つの詳細をリストし、それらを共有します。

(1) コードを簡略化します

JavaScript でオブジェクトと配列を定義するのは非常に簡単です。通常は次のように記述します。

1 var

car =
new

Object( );
2 car.color =
red
;
3 car.wheels = 4;
5 car.age = 4;

1 var

car = {

2

colour:

red
,
3
wheels:4,
4 ホイールキャップ:
spinning
,
5 age:4
6 }

以下の記述はさらに短く、オブジェクト名を繰り返す必要はありません。中括弧の後にセミコロンを追加しないように注意してください。追加すると、IE でエラーが発生します。

さらに、以前は次のように配列を宣言しました:

1 var

moviesThatNeedBetterWriters =

new

Array(
2
Transformers
,
Transformers2
,
)アバター
,
インディ ジョーンズ 4
3 );

より簡潔に書くと次​​のようになります:

1 var

moviesThatNeedBetterWriters = [

2 Transformers

,

Transformers2
,
Avatar
,
インディ・ジョーンズ4
3 ];

配列には、連想配列という特殊なものもあります。 多くのコードでは、次のようなオブジェクトが定義されていることがわかります。 = 4 ;
4 car[
hubcaps
] =
spinning

;

5 car[

age

] = 4;

これはおかしなことです、「連想配列」は単なるオブジェクトのエイリアスです。 コードを簡素化するもう 1 つの方法は、次のように三項演算子を使用することです。
5
direction = -1;
6 }

この記述を置き換えるには、次のコードを使用できます。偉大なダグラス クロックフォードがデータを保存するための JSON データ形式を発明したため、追加の変換を行わずにネイティブ JavaScript メソッドを使用して複雑なデータを保存できます。たとえば、

01 var

band = {
02
"name" です。
:
「レッド・ホット・チリ・ペッパーズ」
、
03
「メンバー」
:[
04
{

05

「名前」

:

「アンソニー・キーディス」
、
06
「役割」
:
"リードボーカル"
07
}、
08
{
09
"名前"
:
"マイケル・フリー・バルザリー"

、

10

"役割"

:
"ベースギター、トランペット、バッキングボーカル"
11 } 、

12

{

13

「名前」
:
「チャド・スミス」
、
14
「役割」
:
「ドラム、パーカッション」
15
}、
16
{
17
" 「
:
「ジョン・フルシアンテ」
、
18「役割」
:
「リードギター」
19
}
20
]、
21
「年」
:
「2009」
22 }

Jを使用できますソンJavaScript で直接、または API によって返される形式としても使用できます。これは JSON?P と呼ばれ、次のような多くの API で使用されます。

01 <
div

id
=
"おいしい"
>div
><
script
>
02 function おいしい(o){
03
var out = <
ul
> i].u + "
> +
06
o[i].d + a
>li
>;
07
}
08
out + = ul
>;
09
document.getElementById(delicious).innerHTML =
11script
> /codepo8/javascript?count=15&callback=delicious"
>script
>

ここでは、delicious の Web サービスを呼び出して最新のブックマークを取得し、JSON 形式で返します。その後、ブックマークは順序付けされていないものとして表示されます。リスト。 基本的に、JSON は複雑なデータを記述するための最も軽量な方法であり、ブラウザーで直接実行されます。 PHP で json_decode() 関数を呼び出して使用することもできます。

1 "FONT-FAMILY: 宋体; mso-ascii-font-family: Times New Roman; mso-hansi-font-family: Times New Roman"
>"FONT-SIZE: 14pt"
>(3)"FONT-SIZE: 14pt"
>"FONT-FAMILY: 宋体; mso-ascii-font-family: Times New Roman; mso-hansi-font-family: Times New Roman"
>可能な場合は使用してください< SPAN>"FONT-FAMILY: Times New Roman"

face=
"Times New Roman"
>JavaScript"FONT-FAMILY : 宋体; mso-ascii-font-family: Times New Roman; mso-hansi-font-family: Times New Roman"

>ネイティブ関数"FONT -家族: mso-ascii-font-family: Times New Roman; mso-hansi-font-family: Times New Roman"

>gt;

一連の数値の最大値を見つけるには、次のようなループを作成します。

1 var

numbers = [3,342,23,22,124]; 3 for
(
var

i=0;i4
if
(numbers[i] > max){
5
max =
6

}

7 }

8 alter(max);

実際、ループせずに同じ機能を実現できます:

1 var

numbers = [3,342,23,22,124];
2numbers.sort(
function
( a, b){
return

b - a});
3 alter(numbers[0]);

そして、それを書く最も簡単な方法は次のとおりです:

1 Math.max(12,123,3,2,433,4) );
/ / は 433 を返します

Math.max を使用して、ブラウザがサポートしているプロパティを検出することもできます。 body.scrollTop
4);

要素にクラス スタイルを追加したい場合、元の記述は次のようになります:

1 function

addclass(elm,newclass){
2
var

c = elm.className;
3
elm.className = (c ===

) ? newclass : c+

+newclass;

さらにエレガントな書き方は次のとおりです:

1 function

addclass(elm, newclass){

2
var

クラス = elm.className.split(

);
3
classes.push(newclass)

4

elm.className = class.join(

);
(4) イベントの委任

イベントは JavaScript の非常に重要な部分です。クリック イベントをリスト内のリンクにバインドする一般的なアプローチは、ループを作成してイベントを各リンク オブジェクトにバインドすることです。

1

素晴らしい Web リソース

  
2

「リソース」
>  
3

• "http://opera.com/wsc"
  >Opera Web 標準カリキュラム