Seven Notes for beginners of JavaScript (1)

(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:

 
 

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

The following statement can achieve the same effect:

 
 

  
  
var car = {  
  
  
    colour:'red',  
  
  
    wheels:4,  
  
  
hubcaps:'spinning',  
  
  
age:4  
  
  
} 
 
 

The subsequent statement is much shorter, and you do not need to repeat the object name.

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

 
 

  
  
var moviesThatNeedBetterWriters = new Array(  
  
  
  'Transformers','Transformers2','Avatar','Indiana Jones 4' 
  
  
); 
 
 

A more concise statement is as follows:

 
 

  
  
var moviesThatNeedBetterWriters = [  
  
  
  'Transformers','Transformers2','Avatar','Indiana Jones 4' 
  
  
]; 
 
 

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

 
 

  
  
var car = new Array();  
  
  
car['colour'] = 'red';  
  
  
car['wheels'] = 4;  
  
  
car['hubcaps'] = 'spinning';  
  
  
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:

 
 

  
  
var direction;  
  
  
if(x < 200){  
  
  
  direction = 1;  
  
  
} else {  
  
  
  direction = -1;  
  
  
} 
 
 

We can replace this statement with the following code:

 
 

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

(2) Use JSON as the data format

The great Douglas Crockford invented the JSON data format to store data. You can use the native javascript method to store complex data without any extra conversion. For example:

 
 

  
  
var band = {  
  
  
  "name":"The Red Hot Chili Peppers",  
  
  
  "members":[  
  
  
    {  
  
  
      "name":"Anthony Kiedis",  
  
  
      "role":"lead vocals" 
  
  
    },  
  
  
    {  
  
  
      "name":"Michael 'Flea' Balzary",  
  
  
      "role":"bass guitar, trumpet, backing vocals" 
  
  
    },  
  
  
    {  
  
  
      "name":"Chad Smith",  
  
  
      "role":"drums,percussion" 
  
  
    },  
  
  
    {  
  
  
      "name":"John Frusciante",  
  
  
      "role":"Lead Guitar" 
  
  
    }  
  
  
  ],  
  
  
  "year":"2009" 
  
  
} 
 
 

You can use JSON directly in JavaScript, or even as a format returned by the API, which is applied in many APIs, for example:

 
 

  
  
<div id="delicious"></div><script>  
  
  
function delicious(o){  
  
  
  var out = '<ul>';  
  
  
  for(var i=0;i<o.length;i++){  
  
  
    out += '<li><a href="' + o[i].u + '">' +  
  
  
           o[i].d + '</a></li>';  
  
  
  }  
  
  
  out += '</ul>';  
  
  
  document.getElementById('delicious').innerHTML = out;  
  
  
}  
  
  
</script>  
  
  
<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.

(3) Try to use JavaScript native functions

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

 
 

  
  
var numbers = [3,342,23,22,124];  
  
  
var max = 0;  
  
  
for(var i=0;i<numbers.length;i++){  
  
  
  if(numbers[i] > max){  
  
  
    max = numbers[i];  
  
  
  }  
  
  
}  
  
  
alert(max); 
 
 

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

 
 

  
  
var numbers = [3,342,23,22,124];  
  
  
numbers.sort(function(a,b){return b - a});  
  
  
alert(numbers[0]); 
 
 

The simplest method is:

 
 

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

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

 
 

  
  
var scrollTop= Math.max(  
  
  
 doc.documentElement.scrollTop,  
  
  
 doc.body.scrollTop  
  
  
); 
 
 

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

 
 

  
  
function addclass(elm,newclass){  
  
  
  var c = elm.className;  
  
  
  elm.className = (c === '') ? newclass : c+' '+newclass; 
 
 

The more elegant method is:

 
 

  
  
function addclass(elm,newclass){  
  
  
  var classes = elm.className.split(' ');  
  
  
  classes.push(newclass);  
  
  
  elm.className = classes.join(' ');  
  
  
}