JavaScript DOM advanced programming 2.4-try{}catch{}-- I will persist!

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Look at the period of abnormal statement

var sound = 'Roar!';
function myOrneryBeast() {
    this.style.color='green';//Window has no style property
    alert(sound);
}
myOrneryBeast();

Accession to the try{}catch{}

var sound='Roar';
function myOrneryBeast()
{
    this.style.color='green';
    alert(sound);
}
try
{
    myOrneryBeast();
}
catch (theException)
{
    alert('Oops,we caught an exception Name:'
        +'theException.name'
        +',message:'
        +'theException.message'
    );
}

Application: your debug log

Usually, when we debug JS are generally use alert but, when for example met for (I in document) {alert (I);} this situation, is indeed a headache, used Quarzts.net all know. I do, and he also similar, add similar features in our ADS library, similar to the for (I in document) {ADS.log.write (I);}, following it, we began to complete this function.

The myLogger object

function myLogger(id)
{
    id=id||'ADSLogWindow';
    var logWindow=null;//In the internal object to reference the DOM node log window
    var createWindow=function(){};//You can create logWindow node in the DOM tree with this method
    this.writeRaw=function(message){};//Privilege for add one day record to the log window
}


myLogger.prototype=
{
    //Speaking in front of, defined by a literal syntax
    write:function(message){};//The most frequently used in the log has method. 
    //He will be in the message brackets are encoded and displays the HTML source code in the log window, the method will eventually message string encoded passed to the writeRaw () method
    header.function(message){};//Add bold to log window, red item titles

    //But the use of literal not redundant: for example, add a link method
    link:function(link){};
    
}
//The above code can also be defined as follows
//myLoger.prototype.write=function(message){};
//header.prototype.write=function(message){};//This local rookie do not understand one thing, why not use//myLoger.prototype.header=function(message){};
//..
//myLogger.prototype.link=function(link){};//Well, it may be because the printing error
if (!window.ADS){window['ADS']={};}
window['ADS']['log']=new myLogger();

The following specific analysis of each method

myLogger.createWindow()

//Create a protected method creates a log window
createWindow=function()
{
    //New window in your browser
    //The angular position when placed to the left.
    var browserWindowSize=ADS.getBrowserWindowSize();//Methods of the ADS library. You can see the source code, will be posted
    var top=((browserWindowSize.height-200)/2)||0;
    var left=((browserWindowSize.width-200)/2)||0;
    //Create a Dom node log window
    //Use the logWindow property protected maintenance reference
    logWindow=document.createElement('UL');

    //The specified ID value, if necessary in the DOM tree can recognize him
    logWindow.setAttribute('id',id);

    //Center log window on the screen
    logWindow.style.position='absolute';
    logWindow.style.top=top+'px';
    logWindow.style.overflow='scroll';

    //Add some style, with plum appearance
    logWindow.style.padding='0';
    logWindow.style.margin='0';
    logWindow.style.border='1px solid black';
    logWindow.style.backgroundColor='white';
    logWindow.style.listStyle='none';
    logWindow.style.font='10px/10px Verdana , Tahoma,Sans';

    //Add it to the document body.
    document.body.appendChild(logWindow);
}

getBrowserWindowSize()Method

function getBrowserWindowSize()
{
    var de = document.documentElement;
    return{
        'width':(window.innerWidth||(de&&de.clientWidth)||document.body.clientWidth),
        'height':(window.innerHeight||(de&&de.clientHeight)||document.body.clientHeight)
    }
};
window['ADS']['getBrowserWindowSize']=getBrowserWindowSize;

myLogger.writeRaw()Method

this.writeRaw=function(message)
{
    //If the initial window does not exist. You create it
    if (!logWindow)
    {
        createWindow();
    }
    //Create a list of appropriate to add style to the soldiers
    var li  = document.createElement('LI');
    li.style.padding='2px';
    li.style.border='0';
    li.style.borderBottom='1 px dotted black';
    li.style.magin='0';
    li.style.color='#000';
    li.style.font='9px/9px Verdana ,Tahoma,Sans';//In fact, rookie did not know what is the meaning of this writing
    //Later in the article mentioned, this embedding style is not a good way. 
    //Add information to the log node
    if (typeof message='undefined')
    {
        li.appendchild(document.createTextNode('Message was undefined'))
    }else if (typeof li.innerHTML!=undefined)
    {
        li.innerHTML=message;
    }else
    {
        li.appendchild(document.createTextNode(message));
    }

    //The entries to the log window
    logWindow.appendChild(li);
    return true;

};

When we run the ADS.log.writeRaw ('This is raw.') and ADS.log.writeRaw ('<  strong> This; </strong> is bold!'); the browser will display the middle:

Finally, in order to create a common write () and head () method, to put the following code added to the myLogger object prototype.

myLogger.prototype={
    write:function(message)
    {
        //Warning message is null
        if (typeof message=='string' && message.length==0)
        {
            return this.writeRaw('ADS.log:null message');
        }
        //If message is not a string, is trying to call toString () method, if not the access record object types
        if ( typeof message!='string')
        {
            if (message.toString)
            {
                return this.writeRaw(message.toString());
            }
            else
            {
                return this.writeRaw(typeof message);
            }
        }

        //Conversion of < to innerHTML; and > message would not be as THML analysis
        message=message.replace(/</g,"&lt;").replace(/>/g,"&gt;");//Here, /g is what mean. . . 
        return this.writeRaw(message);

        //Write a title to log window
        header:function(message)
        {
            message='<span style="color:white;background-color:black;font-weight:bold;padding:0px 5px;">'
            +message+'</span>';
            return this.writeRaw(message);
        }
};

Well, the whole case was done

There is a doubt, this source is how to upload the rookie, never used, looking for a long time did not find..... Will be to ask to go. . .








Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Hunk at November 15, 2013 - 3:30 AM