JavaScript 初心者が注意すべき 7 つの詳細-jsチュートリアル-php.cn

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

高洛峰

リリース： 2016-11-25 10:45:23

オリジナル

951 人が閲覧しました

それぞれの言語には独自の機能があります。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 = {

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
{

「名前」

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

、

"役割"

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

{

「名前」
:
「チャド・スミス」
、
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 標準カリキュラム