Seven details that JavaScript beginners should pay attention to

Every language has its special features. For JavaScript, you can use var to declare variables of any type. This scripting language seems very simple, but writing elegant code requires continuous accumulation of experience. . This article lists seven details that JavaScript beginners should pay attention to and share them with you.

(1) Simplify the code

It is very simple to define objects and arrays in JavaScript. We want to create an object, which is usually written like this:

1 var

car =
new

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

The following writing can achieve the same effect:

1 var

car = {
2
colour:
red
,
3
wheels:4,
4 hubcaps:
spinning
,
5 age:4
6 }

The following writing is much shorter, and you don’t need to repeat it. Object name. Be careful not to add a semicolon after the braces, otherwise an error will occur in IE.

In addition, there is also a concise way to write arrays. In the past, we declared arrays like this:

1 var

moviesThatNeedBetterWriters =
new

Array(
2
Transformers
,
Transformers2
,
Avatar
,
Indiana Jones 4
3 );

A more concise way of writing it is:

1 var

moviesThatNeedBetterWriters = [
2
Transformers
,
Transformers2
,
Avatar
,
Indiana Jones 4
3 ];

For arrays, There is also such a special thing as associative array. You will find that a lot of code defines objects like this:

1 var

car =
new

Array();
2 car[
colour
] =
red
;
3 car[
wheels
] = 4 ;
4 car[
hubcaps
] =
spinning
;
5 car[
age
] = 4;

This is crazy, don’t get confused, “associative array” is just an alias for an object. Another way to simplify the code is to use the ternary operator, for example:

1 var

direction;
2 if
(x < 200){
3
direction = 1;
4 }
else

{
5
direction = -1;
6 }

We can use the following code to replace this writing:

1 var

direction = x < 200 ? 1 : -1;

(2) Using JSON As a data format, the great Douglas Crockford invented the JSON data format to store data. You can use native javascript methods to store complex data without any additional conversion, for example:

01 var

band = {
02
"name"
:
"The Red Hot Chili Peppers"
,
03
"members"
:[
04
{
05
"name"
:
"Anthony Kiedis"
,
06
"role"
:
"lead vocals"
07
},
08
{
09
"name"
:
"Michael Flea Balzary"
,
10
"role"
:
"bass guitar, trumpet, backing vocals"
11
},
12
{
13
"name"
:
"Chad Smith"
,
14
"role"
:
"drums,percussion"
15
},
16
{
17
"name"
:
"John Frusciante"
,
18 "role"
:
"Lead Guitar"
19
}
20
],
21
"year"
:
"2009"
22 }

You can use JSON directly in JavaScript, or even as a format returned by the API. This is called JSON?P, which is used in many APIs, such as:

01 <
div

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

Here we call delicious's web service to get the latest bookmarks, return them in JSON format, and then They are displayed as an unordered list. Essentially, JSON is the most lightweight way for describing complex data, and it runs directly in the browser. You can even use it by calling the json_decode() function in PHP.

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"
>Use < SPAN>"FONT-FAMILY: Times New Roman"

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

>Native function"FONT -FAMILY: 宋体; mso-ascii-font-family: Times New Roman; mso-hansi-font-family: Times New Roman"

>


To find the maximum number in a set of numbers, we might write a loop, for example:

1 var

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

max = 0;
3 for
(
var

i=0;i4

if

(numbers[i] > max){

5

max = numbers[i];

6

}
7 }
8 alert(max);

In fact, the same function can be achieved without looping:

1 var

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

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

And the simplest way to write it is:

1 Math.max(12,123,3,2,433,4);

/ / returns 433

You can even use Math.max to detect which properties the browser supports:

1 var

scrollTop= Math.max(
2
doc.documentElement.scrollTop,
3
doc.body.scrollTop
4);

If you want to add a class style to an element, the original writing may be like this:

1 function

addclass(elm,newclass){

2

var

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

) ? newclass : c+

+newclass;

And a more elegant way to write it is:

1 function

addclass(elm,newclass){
2
var

classes = elm.className.split(

);
3
classes.push(newclass);
4
elm.className = classes.join(

);

5 }

(4) Event delegation

Events are a very important part of JavaScript. We want to bind click events to links in a list. The general approach is to write a loop and bind events to each link object. The HTML code is as follows:

1

Great Web resources

  
2

"resources"
>  
3   

• "http://opera.com/wsc"
  >Opera Web Standards Curriculum