JavaScript: function in function. JS Programming Language

Ideas of dynamic content formation on web-resources became the norm. Static pages and template site design have finally completed their mission.

However, a modern web resource does not need to be represented by a set of pages, generated by the server and updated by the browser (JS + AJAX).

A Web resource at the moment of arrival of a visitor can be a pair of headers for the protocol, some text in the "head", several lines of code in the "body" and everything. The rest will " figure out " in the process of the visitor's work - this is an ideal site or striving to be one.

The place of description and the essence of functions

опыт, наработаный многими десятилетиями. JavaScript is an experience gained over many decades. It has a significant development history, a modern qualified team of creators-developers. The language is well thought out, reliable, beautiful and gives the real opportunity for developers to write decent code and improve themselves.

The concept of an algorithm outside the function is absent in principle. Of course, the developer can insert a script anywhere in the page, place the code in it and it will be executed. страницы? But what's the point in the code that executes only once: when loading (reloading) the page? Unless it is possible to establish initial values of any not significant variables.

The script is the place of the description of the necessary variables and functions, rather than a good piece of code written for its own sake. It is the set of functions that is significant and significant, perhaps their mutual direct connection, but more often it's different. The place of the function description and the place of its application is not the same.

It is not absolutely necessary that the function will call another function directly, it can be done indirectly through dynamic code generation. The visitor makes a decision within the framework of this code and an entirely different function system works.

Functional dynamics

Functional dynamics is not only and not so much the handlers assigned to the elements of the page, these are the functions that form the elements of the page, and the direct handlers can also change.

The action on the page unfolds depending on its elements and the behavior of the visitor on it. Mouse movements, keyboard buttons, clicks, element events and other circumstances lead to the launch of the required functions.

Initially, there is no consistency and there is no parallel. There is an adequate reaction of the web-resource to events. How quickly JavaScript will fulfill this or that function, depends on many technical (computer, communication lines) and semantic (logic of the algorithm, subject area, meaning of the problem) factors.

In fact, it can be argued that something worked in parallel, and something will come to pass after something, but there is no point in that. It is important that the JavaScript function is the ability to create an adequate response to visitor actions.

This new thinking in development: distributed processing of information in the bowels of a single browser!

Syntax of variables and functions

JavaScript variables are placed both in the "script" tag and in the body of the function. The functions are defined in the same way. There is no special meaning for writing inside the function, but this may be necessary for various and well-grounded reasons.

The function description generally begins with the keyword "function", followed by its name, a list of arguments in parentheses separated by a comma, and the function body in curly brackets.

This example describes two functions that provide AJAX exchange between a page and a server. The variable scXHR is described above, therefore it is available both in InitXML and inside WaitReplySC.

Function name and function parameter

An asynchronous variant was presented here, when the JavaScript function in the function is called after the server response. In this case, having received a response from the server, WaitReplySC accesses page tags, fills them with information received and calls other functions that may well trigger the next request to the server.

Here it is also important to note that WaitReplySC is a function. scXHR.onreadystatechange = WaitReplySC она передается как параметр. But in the scXHR.onreadystatechange = WaitReplySC line, it is passed as a parameter. This is a general rule for passing functions to other functions as parameters. He specified the parentheses and passed the parameter (parameters) to them - the function will be executed immediately. I gave only the name, so what? The call of the function will be made by the one who received its name.

The functionality implemented through AJAX allows you to call the JavaScript function through the data received from the server. In fact, by sending a request to the server, this or that function may not even "know" which function it is accessing and with which information.

Exit the function and its result

In the body of the function, you can write any language operators, which, in fact, is intended for this. Inside the function, variables are available that are described internally and externally, but not those described in other functions.

If you want the function to return the result, you can use the return JavaScript operator: return. There can be a sufficient number of return statements in the body of the function. It is not at all necessary that they all return the result of the same type.

Usually, developers very much respect this possibility and, depending on the situation, make a decision about leaving the function as soon as it becomes possible.

It is not necessary to run through the entire algorithm of the function, when you can exit earlier.

Function Arguments

Arguments in a function are passed by a comma-separated list, enclosed in parentheses, and immediately after its name. Variables are used as arguments, but values can also be passed directly. In order for JavaScript to pass a function to a function, you just need to specify its name without brackets.

A variable arguments is available inside the function, which has the length property . You can access any function argument via arguments [0], arguments [1], ... until the last arguments [arguments.length-1].

Changing the function argument is really inside the function, but not outside it. In order to change something outside the function, you need to use the JavaScript return operator, through which to pass the necessary value outward.

After the function has completed, all that has been associated with its execution will be destroyed. At runtime, the function can modify external variables, except those described in other functions, including internal ones.

Arguments has a callee property that is intended to call a function that is currently executing. If you call yourself, then the JavaScript function option in the function will allow you to implement recursion.

Using Functions

The main concern of the functions is to service the browser events. To do this, in almost every tag, it is possible to specify the name of the event and the function that processes it. You can specify several events, but only one function is specified for each event.

One function can serve multiple page elements and several events. With the "this" parameter, you can pass information to the function, from where it was called.

The classic use of JS functions is event handlers on elements. In this example, the scfWecomeGo () or scfWelcomeCancel () function will be called in the visitor entry / exit form, and when scfMenuItemClick (this) is selected.

In the latter case, the parameter "this" is passed, which allows you to miraculously find out which diva the call originated from. In general, JavaScript is so well implanted in DOM and it allows you to navigate through its elements so conveniently, collect the necessary information, that the dynamics of the page can be simply unpredictable.

The function does not need to return a string of characters, a number, or another function. It can return a full HTML element, and in which there will be a required number of elements, with its own event handlers.

By placing such an element on the page, the developer creates new functionality, which is good in terms of solving the problem and satisfying the interests of visitors, but it is quite difficult in terms of implementation.

Starting such a full-featured development, it's easy to get confused in your own code, in function calls, in the moments when this or that content of this or that part of the page is formed. Before taking such a direction of development, it does not hurt to weigh everything well.

About distributed thinking

The developer has to think at the level of all elements of the page, at the level of all events and have a clear idea of how things really are. It's complicated, but this work is worth it.

In JavaScript, a function can be deferred to an event, and there can be many such functions, and the events have the property of propagating and falling into the "scope" of the various handlers.

In this example, somewhere earlier, a function was called that initiated the creation of the file navigation menu item. A paging organization is assumed, that is, there are only seven files in the window that can be deleted and processed. You can move both by clicking on the line of the file, and by arrows on the keyboard, and by blocks of seven lines.

In each case, there are functions. In other words, in such a simple example, you need to write a couple of dozens of functions that will respond to different events, and some of these functions will handle different variants and situations that do not apply to events at all.

For example, if you delete a line, the bottom lines should move up. To do this, you will either need to make a new selection, which is trivial and capacious in resources, or recalculate lines, use javascript array functions and elegantly achieve the goal.

Arguments and function results

JavaScript allows you to bring the code to a "full-featured" state. Normally, when the argument of a function is a function. An option is possible when the function returns a function. JavaScript treats this quite calmly.

This is a good mechanism, but it is quite complex with respect to implementation. Technically, everything is permissible, semantically provide the logic for the transfer of "functional" only by a qualified developer.

When in JavaScript function in function - wherever went, but when the function generates a function, and that one more, then it's quite difficult to keep track of the logic. In fact, the question is not whether to apply the qualification, the question is to get a safe and correct result.

Care developer is clear and simple. There is a task, you need a solution, not a bug like "JavaScript error the operation is insecure", a clean screen or stopping the entire browser engine.

If the argument is a function, then the developer passes a variable with special properties, that is, it is not a number, not a string, not an object. But the use of such an argument can lead to the fact that external variables will change and the result of the execution of the function will be. Depending on what is passed, there will be adequate changes.

Execution of generated code

Implement the execution of code generated during the operation of another code, you can use "eval". This is not considered an excellent solution, but it is often possible not to complicate the code with redundant functions, but to limit yourself to the banal generation of a JavaScript code string and simply execute it.

In this example, an insert line is inserted into the acting divs of some information. The diva number and the content of the information are different for different positions, because such a decision in this situation is not guaranteed to ensure the situation "javascript error the operation is insecure", but it will reliably give the desired effect.

Nuance of the JavaScript paradigm "function in function"

If there is a possibility to do without excesses, it is better to use it. All listed options are good. Of course, in many cases this is the only solution.

A classic example of recursion: factorial calculation. Here it is difficult enough to write an algorithm that gets stuck, but it's very easy to go beyond the limits of meaning. The factorial grows too fast.

However, both recursion and a function that calls another function that can make a reasonable callback is the norm of things.

For example, a regular table. There can be other tables in the table. Nesting can not be limited. To write for each table its own set of functions is too great a luxury.

There are many such examples, and all of this will be real and urgent tasks, not at all from the field of programming. That's why the problem is precisely that you can not do without the excesses, the created system of functions, more precisely its debugging and subsequent reliable work becomes a concern not of JavaScript, but of the developer.