Here are some of the most interesting HTML/JS/DOM/CSS hacks that I found very interesting.

You can pass arguments into setTimeout and setInterval

By David Calhoun

Say you want to pass in two variables to the function you call in setTimeout. You'd probably think this is the only way to do it:

  var callback = function(a,b){
    console.log(a + b);  // 'foobar'
}
window.setTimeout(function(){
    callback('foo', 'bar');
}, 1000);

But you can accomplish the same thing with this:
window.setTimeout(callback, 1000, 'foo', 'bar');

Note that this isn't supported on IE (not even IE9).

Console

console.trace();

developer.mozilla.org

Outputs a stack trace to the Web Console.

  function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();

In the console, the following trace will be displayed:

  bar
foo
<anonymous>

console.table();

https://developer.mozilla.org/en-US/docs/Web/API/Console/table

With a simple console.table() you can get a friendly tabular output of your Object or Array, displayed in your console.

monitor();

If you simply want to monitor the arguments passed into a specific function, but you don’t want messy output to crowd your code. That’s when you use monitor() to fetch those precious, precious values.

console.time() & console.timeEnd();

console.dir()

If you need a JavaScript representation of an Object, you can use console.dir(). That will give you a list of properties for that Object.

console.profile()

Check the CPU profile and analyze the time consumed in each run with the very handy console.profile(). This will give you an idea of what’s more expensive in your JavaScript code.

Old String functions

By David Calhoun

If you type in String.prototype into your console, you can see a bunch of old functions you can use to wrap the text in HTML tags (some deprecated HTML obviously):

  'foo'.italics()

...will return this:

  '<i>foo</i>'

Similarly for strike(), sub(), small(), link() (Brian Yee refers to this in his comment), etc.

window.name & document.name

windows and document hold different types of data. Window is the top of the hierarchy. All global JavaScript objects, functions, and variables automatically become members of the window object.

The document object is the root node of the HTML document and the "owner" of all other nodes: (element nodes, text nodes, attribute nodes, forms, buttons and comment nodes).

Now the interesting part. You can call variables with "window.name" and forms, buttons names with document.name. Example:

  <form action="" name="myForm">
  <input type="text" name="name"/>
</form>

  var myForm = "variable";

// This is related to the form 
console.log(document.myForm);

// This is related to the variable 
console.log(window.myForm);

3. An HTML element with an ID creates a JavaScript global with the same name

By David Calhoun

Surprising but true, and it's done by modern browsers as a means of backwards compatibility:

  <div id="someInnocentDiv"></div>

  console.log(someInnocentDiv);  
// <div id="someInnocentDiv"></div>

Forms

Each form element inside the web page is made available to you as an object

Common Properties and Methods

You probably already familiar with properties like "name", "value", type and methods focus(), blur()

The form Property

All form element objects also have the form property, which returns the Form object in which the element is contained.

  <form action="" name="myForm" class="flex flex-column">
  <input type="text" name="name"/>
</form>

  // This will return: "<input type="text" name="name"/>"
console.log(document.myForm.elements.name);

// And this will return the whole HTML 
//form with all its elements in which this 
// element ("name="name") is contained
// console.log(document.myForm.elements.name.form);

Assign wherever possible

Since assignment returns the assigned value, perform assignment and evaluation at the same time to save bytes. A good example of this is @jed's JSONP function, where the string script is assigned in the createElement method.

  a=this.localStorage;if(a){...} // before
if(a=this.localStorage){...}   // after

Use an array to swap variables

An array can be used as a temporary placeholder to avoid declaring another variable.

  var a=1,b=2,c;c=a;a=b;b=c // before
var a=1,b=2;a=[b,b=a][0]  // after

var a=1,b=2;a=b^a^(b=a)   
// after - not as useful, but can 
// come in handy Alternatively, 
// for numbers you can save another two bytes:

  var a=1,b=2;a=[b,b=a][0]  // before
var a=1,b=2;a+=b-(b=a)    // after

Reference


2,500 0 55