Seven Notes for beginners of JavaScript

Source: Internet
Author: User
Each language has a special place. For JavaScript, using var can declare any type of variables. This script language looks very simple, however, to write elegant code, you need to constantly accumulate experience. This article lists seven details that JavaScript Beginners should pay attention. & Nbsp; SyntaxHighlighter

Each language has a special place. For JavaScript, using var can declare any type of variables. This script language looks very simple, however, to write elegant code, you need to constantly accumulate experience. This article lists seven details that JavaScript Beginners should pay attention.

(1) simplified code

It is very simple to define objects and arrays in JavaScript. We want to create an object, which is generally written as follows:

1 var
 
Car =
New
 
Object ();
2 car. color =
Red
;
3 car. wheels = 4;
4 car. hubcaps =
Spinning
;
5 car. age = 4;

The following statement can achieve the same effect:

1 var
 
Car = {
2
Color:
Red
,
3
Wheels: 4,
4 hubcaps:
Spinning
,
5 age: 4
6}

The subsequent statement is much shorter, and you do not need to repeat the object name. Note that do not add points after braces; otherwise, errors may occur in IE.

In addition, there is a simple way to write arrays. In the past, we declared arrays as follows:

1 var
 
MoviesThatNeedBetterWriters =
New
 
Array (
2
Transformers
,
Transformers2
,
Avatar
,
Indiana Jones 4
3 );

A more concise statement is as follows:

1 var
 
MoviesThatNeedBetterWriters = [
2
Transformers
,
Transformers2
,
Avatar
,
Indiana Jones 4
3];

For arrays, there is also a special thing like associating arrays. You will find that many codes define objects as follows:

1 var
 
Car =
New
 
Array ();
2 car [
Color
] =
Red
;
3 car [
Wheels
] = 4;
4 car [
Hubcaps
] =
Spinning
;
5 car [
Age
] = 4;

This is crazy. Don't be confused. "Join array" is just an alias of an object. Another way to simplify the code is to use the ternary operator. For example:

1 var
 
Direction;
2 if
(X & lt; 200 ){
3
Direction = 1;
4}
Else
 
{
5
Direction =-1;
6}

We can replace this statement with the following code:

1 var
 
Direction = x <200? 1:-1;

(2) Using JSON as the great data format Douglas Crockford invented the JSON data format to store data, you can use the native javascript method to store complex data without any extra conversions. 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 is applied in many APIs, for example:

01 <
Div
 
Id
=
"Delicious"
> Div
> <
Script
>
02 function delicious (o ){
03
Var out = <
Ul
>;
04
For (var I = 0; I <
O. length
; I ++ ){
05
Out + =

  • <
    A
     
    Href
    =
    "+ O [I]. u +"
    > +
    06
    O [I]. d + A
    > Li
    >;
    07
    }
    08
    Out + = Ul
    >;
    09
    Document. getElementById (delicious). innerHTML = out;
    10}
    11 Script
    >
    12 <
    Script
     
    Src
    =
    "Http://feeds.delicious.com/v2/json/codepo8/javascript? Count = 15 & callback = delicious"
    > Script
    >

    Call delicious's Web service to obtain the latest bookmarks, return them in JSON format, and display them as Unordered Lists. In essence, JSON is the most lightweight way to describe complex data and runs directly in a browser. You can even call the json_decode () function in PHP to use it.

    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"
    > Try to use"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"
    > Native functions
    "FONT-FAMILY:; mso-ascii-font-family: Times New Roman; mso-hansi-font-family: Times New Roman"
    >

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

    1 var
     
    Numbers = [3,342, 124,];
    2 var
     
    Max = 0;
    3
    (
    Var
     
    I = 0; I 4
    If
    (Numbers [I]> max ){
    5
    Max = numbers [I];
    6
    }
    7}
    8 alert (max );

    In fact, the same function can be implemented without loops:

    1 var
     
    Numbers = [3,342, 124,];
    2 numbers. sort (
    Function
    (A, B ){
    Return
     
    B-});
    3 alert (numbers [0]);

    The simplest method is:

    1 Math. max (12,123, 433,4 );
    /// Returns 433

    You can even use Math. max to check the attributes supported by the browser:

    1 var
     
    ScrollTop = Math. max (
    2
    Doc.doc umentElement. scrollTop,
    3
    Doc. body. scrollTop
    4 );

    If you want to add a class style to an element, the original method may be as follows:

    1 function
     
    Addclass (elm, newclass ){
    2
    Var
     
    C = elm. className;
    3
    Elm. className = (c =

    )? Newclass: c +

    + Newclass;

    The more elegant method 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 a click event to a link in the list. The general practice 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
  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.