📜 ⬆️ ⬇️

5 useful tricks

I collected these small pieces of code for my entire JavaScript programming experience. They should seriously facilitate the life of a Web developer, and teach how to solve problems easier without screwing up heavy JavaScript libraries. I don’t argue, sometimes they can be very useful, but loading JQuery to create a timer is, in my opinion, wild ...



Reception number 1:
')
There is very little documentation on how to remove objects using JavaScript. At one of the forums I was told that it was impossible. In fact - not only possible, but very simple:

function Kill(object) {
object.innerText = null;
object.innerHTML = null;
object.outerHTML = null;
object = null;
}


The object passed in the first and only argument of the function is deleted completely. DOM is an element, or a variable, all the same from object nothing remains. If, for example, the first two lines are removed from the function, the object can no longer be accessed, but the HTML element is not going anywhere. You can add something like this to the function:

if(typeof(object)=="string"){object=document.getElementById(object)};

To automate the process. Then, instead of the object reference itself, you can pass as an id argument to some HTML element.

Reception number 2:

From the preface is taken. Timers. Well, it seems to me that a sufficient number of people know about the functions setInterval () and clearInterval (). But some programmers are mistaken in thinking that only independent JavaScript code written in quotes can be executed cyclically:

i = setInterval("alert('Hello, World!')",3000)

It's not so bad! In reality, instead of a line there you can thrust an object-function, despite the fact that it is not accepted to pass functions into arguments:

i = setInterval(abc(),3000)

Some try to pass the function in quotes, as a string, and nothing comes out. Since JavaScript is as flexible as Russian gymnasts, you can generally write it this way:

i = serInterval(function{_},3000)

So it's really easy to make a timer.

Reception number 3:

AJAX many people love. And in JavaScript it is sometimes useful to implement a function through a call to a script on the server. I.e:

bin2hex(number)

It is calculated on the server side, and we just get the answer. One problem: it takes time to complete the task and transfer the data. Who will wait for our function? Yes, no one! You can use synchronous HTTP requests that “hang” the entire Web page until the answer comes. Nice and easy:

function getXmlHttp(){
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}

function Get(url) {
var xmlhttp = getXmlHttp()
xmlhttp.open('GET',url, false);
xmlhttp.send(null);
if(xmlhttp.status == 200) {
//
}
}

, . , - Chrome ("! !"). , , :

function Get(url,whattado) {
var xmlhttp = getXmlHttp()
xmlhttp.open('GET',url, true);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
whattado(xmlhttp.responseText);
}
}
};
xmlhttp.send(null);
}



Again, no one forbids writing:

Get('file.txt',function(txt){alert(txt)})

And the browser will not hang, and the programmer will be happy.

Reception number 4:

Bypass Runtime Errors! An ordinary user does not know about the existence of the console and will be offended if any button on the page stops performing its actions without reacting at all (and, indeed, this is exactly what happens if an error occurs). Use the try..catch construction to catch exceptions:

try
{
document.write (junkVariable)
}

catch (e)
{
alert (e.message)
}

You can, by the way, throw exceptions yourself using the throw () operator. But then instead of the message object, you should refer to its parent object directly:

try
{
// code_here
throw "Error5"
}
}

catch (e)
{
if (e == "Error5") {alert ("Error No. 5")}
}

Reception number 5:

Once, I needed to create a Read-only variable to store the JavaScript version of the library. It is clear that the problem with this is not only mine, but it is strange why everyone requires “Read-only variables”, and not “Constants in JavaScript”. So, there are no constants in JavaScript. There is in ECMAScript, but then our page is no longer cross-browser, and the customer stops feeding us at the same second. Read-only variables are created using getter:

var lib = {
get version () {return 5}
}

lib.version == 5, i.e. behaves like a variable, not a function.

The cross-browser version of the reception looks like this:

var lib = {
this .__ defineGetter __ ("version", function () {return 5});
}

These are not all useful tricks that I would like to tell you about. See you soon.

Source: https://habr.com/ru/post/126788/


All Articles