Javascript log operation object instance

After learning JavaScript, for some summary, see my previous blog "Regular Expressions in JavaScript", "details in JavaScript", "self-built JavaScript function library", "Object-Oriented in JavaScript", and "scopes and closures in JavaScript ". and the inheritance and prototype in JavaScript. Now we can use the knowledge we have learned to implement an instance of JavaScript log operation objects. What we need is these files:

Mylog. JS: Mainly used to build the mylogger constructor, Add rows, add nodes, and control CSS.

LD. JS: it is mainly used to create rules for scripts and strings, construct namespaces, and retrieve Objects Based on ID and classname.

Test. JS: adds events to the form and tests the availability of some functions in mylog.

Log.html: used to display log objects.

The code for each file is as follows:

Test. js

// Add a load event LD to the window object. addevent (window, 'load', function () {lD. log. writeraw ('this is raw'); lD. log. writeraw ('<strong> This is bold! </Strong> '); lD. log. header ('with a header'); lD. log. Write ('write Source: <strong> This is bold! </Strong> '); For (I in document) {lD. log. Write (I );}});

Mylog. js

// JavaScript document // mylogger's constructor function mylogger (ID) {id = ID | "iclogwindow"; // reference of the log form var logwindow = NULL; // create the log form var createwindow = function () {var browserwindowsize = lD. getbrowserwindowsize (); var Top = (browserwindowsize. height-200)/2 | 0; var left = (browserwindowsize. width-200)/2 | 0; // use ullogwindow = document. createelement ("Ul"); // Add a DOM object ul under document // Add an ID to identify logwindow. setattribute ("ID", ID); // performs CSS style control logwindow. style. position = 'absolute '; logwindow. style. top = Top + 'px '; logwindow. style. left = left + 'px '; logwindow. style. width = '200px '; logwindow. style. height = '200px '; logwindow. style. overflow = 'scroll '; 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 v Erdana, tahoma, SANS; // Add the form to the document on the page. body. appendchild (logwindow);} // Add a line to the log form this. writeraw = function (Message) {// if the initial form does not exist, the log form if (! Logwindow) {createwindow ();} // create the DOM node var li = Document of Li. createelement ('lil'); // controls the CSS style of the form Li. style. padding = '2px '; Li. style. border = '0'; Li. style. borderbottom = '1px dotted black'; Li. style. margin = '0'; Li. style. color = '# 000'; // verify the message if (typeof message = 'undefined') {// Add a text node in Li. Li. appendchild (document. createtextnode ('message is undefined');} else if (typeof Li. innerhtml! = Undefined) {// This is another way to express Li. innerhtml = message;} else {Li. appendchild (document. createtextnode (Message);} logwindow. appendchild (LI); Return true ;};// declares the privileged method using the object literal quantity // adds a row to the log form, and simply processes the input content with mylogger. prototype = {write: function (Message) {If (typeof message = 'string' & message. length = 0) {return this. writeraw ('no input information');} If (typeof message! = 'String') {If (message. tostring) {return this. writeraw (message. tostring ();} else {return this. writeraw (typeof message) ;}// convert a regular expression that is greater than or less than a sign to HTML mark message = message. replace (/</g, "<"). replace (/>/g, ">"); return this. writeraw (Message) ;}, header: function (Message) {message = '<span style = "color: White; Background-color: black; font-weight: bold; padding: 0px 5px; "> '+ message +' </span> '; return this. writeraw (Message) ;}}; window ['ld '] ['log'] = new mylogger ();

LD. js

// JavaScript entif (document. All &&! Document. getelementbyid) {document. getelementbyid = function (ID) {return document. All [ID] ;}} if (! String. Repeat) {string. Prototype. Repeat = function (l) {return new array (L + 1). Join (this) ;}} if (! String. trim) {string. prototype. trim = function () {return this. replace (/^ \ s + | \ + $/g, '') ;}( function () {// construct the namespace window ['ld '] = {}; function $ () {var elements = new array (); // array of parameters of the current arguments function. Parameter for (VAR I = 0; I <arguments. length; I ++) {var element = arguments [I]; If (typeof element = 'string') {element = document. getelementbyid (element);} If (arguments. length = 1) {return element;} elements. push (element) ;}return elements ;}// register the namespace window ['ld '] [' $ '] =$; function getelementsbyclassname (classname, tag) {parent = parent | document; if (! (Parent = $ (parent) return false; // var alltags = document. getelementsbytagname (TAG); // filter tags to retrieve all tag objects. var alltags = (TAG = "*" & parent. all )? Parent. ALL: parent. getelementsbytagname (TAG); var matchingelements = new array (); classname = classname. replace (/\-/g, "\-"); var RegEx = new Regexp ("(^ | \ s) "+ classname +" (\ s | $) "); var element; For (VAR I = 0; I <alltags. length; I ++) {element = alltags [I]; If (RegEx. test (element. classname) {matchingelements. push (element) ;}/// return this array return matchingelements;} window ['ld '] ['getelementsbyclassname'] = getelementsbyclassname; Function bindfunction (OJB, func) {return function () {func. apply (OBJ, arguments) ;}}; window ['ld '] ['bindfunction'] = bindfunction; function getbrowserwindowsize () {var demo-document.doc umentelement; return {'width' :( window. innerwidth | (De & de. clientwidth) | document. body. clientwidth), 'heigth' :( window. innerheight | (De & de. clientheight) | de & document. body. clientheight) }}; // register the event window ['ld '] ['getbrowserwin Dowsize '] = getbrowserwindowsize; function addevent (node, type, listener) {If (! (Node = $ (node) return false; If (node. addeventlistener) {node. addeventlistener (type, listener, false); Return true;} else if (node. attachevent) {node ['E' + Type + listener] = listener; node [type + listener] = function () {node ['E' + Type + listener] (window. event);} node. attachevent ('on' + type, node [type + listener]); Return true;} return false ;}; // register the event window ['ld '] ['addevent'] = addevent ;})();

Running result:

Summary

This small example basically covers all the content learned previously, including basic support, object-oriented, prototype, object literal volume, this, scope chain, and other knowledge points, it is a summary of JavaScript learning. The more you learn, the more you need to find the connection between the learned content and learn Js. Instead of just learning JS, you must also contact the previous object-oriented, C #, CSS, and other knowledge, only when the knowledge is as smooth as the road can the book be read thinner ". What we can do now is to continue building my knowledge network.