What are the components of the code in JavaScript

JavaScript: Basic Concepts

Here is a JavaScript documentation by molily. At the moment it is still patchy, but it is gradually growing. Comments and feedback are welcome by email.

To the table of contents

Client-side scripting language

This introduction is about the use and execution of JavaScript on the Client-Computer in the browser.

To understand this, we need to recall the client-server model: data on the web is by means of HTTP transmitted (English Hypertext Transfer Protocol = Hypertext transmission protocol). This protocol uses a request-response model. The user's computer, called Client (English for customer) connects to the server (English for providers) and send a request. This can, for example, be the instruction to provide him with a specific address. The web server usually responds to this with a confirmation and sends back an HTML document, for example.

The client does not contact the server directly to request JavaScript. JavaScript is embedded in or linked to an HTML document. As soon as the browser sees such a link, it also requests JavaScript in a separate request. The JavaScript therefore only becomes active when the HTML document has at least partially reached the client and the browser is processing the document.

Cooperation between server and client-side programs

A common misconception is that client-side JavaScript can be mixed with server-side programming languages. However, the execution of server programs (such as PHP scripts) and the execution of JavaScripts are strict sequentially and separately from each other instead of. Server-side PHP code cannot directly execute client-side JavaScript code and vice versa, as the following sequence is intended to show.

  1. The client sends an HTTP request to the server when the user activates a link or submits a form.
  2. The web server accepts the request. The server program is started and usually generates an HTML document which can contain JavaScript. This JavaScript code can be composed dynamically by the server program.

    The server program usually does not run for more than a few seconds and then terminates. This ends the scope of the server program: It starts when a client request is received and ends before the generated HTML document is transmitted to the client.

  3. The browser on the client receives the HTML code and processes it. At this moment, JavaScripts linked to the document are executed.

This should show how server and client-side programs work together, but are still separate - because they run one after the other on different computers, work in a different environment and perform different tasks.

To make matters worse, JavaScript is not included on the client, but can interact with server programs on its own. However, JavaScripts cannot call program code directly on the server. The only option is to start an HTTP request in the background. We will refer to this technique later under the heading Ajax to get to know.

Document Object Model (DOM), Element Objects, and Nodes

After looking at the transfer of HTML documents from the web server to the browser, we need to see how the browser processes the document.

The HTML code is initially available to the browser as plain text. While the browser is still receiving the code over the network, it processes it piece by piece. The so-called Parser (English parse = break a sentence down into its grammatical parts). The parser converts the HTML code into an object structure, which is then stored in the main memory. - With object what is meant here is a bundle of information in memory. - This object structure consists of nested node, above all element nodes and text nodes that are arranged in a tree structure.

The browser uses this object structure for all further operations, not the HTML source code on which the web author usually works. In particular, CSS and JavaScript do not refer to the HTML code as text, but to the corresponding element tree in the memory. How this object structure is set up is stated in the above Document Object Model regulated.

JavaScript interpreter

How do JavaScripts come into play? Either the HTML document directly embeds JavaScript code. Or the HTML document references an external JavaScript file. The browser also requests the JavaScript file from the server and executes it. This happens while the document is being processed (parsed) and displayed piece by piece. For this purpose, today's browsers have a built-in JavaScript interpreter.

But not all browsers have a JavaScript interpreter. Especially not all programs that process websites in some way. In addition, the respective interpreters have very different skills.

Even if the browser has a JavaScript interpreter, there are many reasons why JavaScript is not executed or cannot use all technologies: The user can deactivate the interpreter for all or for certain websites. The execution of JavaScripts can be blocked or restricted for security reasons. Or a so-called proxy, an intermediary computer between client and server, can filter out the code during transmission.

Object based

JavaScript is based on so-called objects that represent the environment in which a script works. The browser window and the document are accessed via objects that are structured according to certain rules. These rules for building objects are also called object types.

JavaScript objects are boxes for more information. An object works like an assignment list that saves a certain value under a name. The names will properties, in English Properties or Member called. The values ​​are called in English Values. An object can again be stored in a property. Objects can thus be nested as required.

As I said, the HTML document consists of nodes from the point of view of the DOM. These nodes are also addressed as objects in JavaScript. So we are dealing with node objects, the most common are element objects.

One thing should be anticipated: if we want to address a property of an object, we note the name of the object in the JavaScript code, then a period and finally the name of the property. For example: .

Windows and documents

JavaScripts are always executed in the context of a browser window. This browser window is represented in JavaScript by an object. It bears the name and will global object called. It is the top and most important object in the hierarchy of JavaScript.

The object is attached to this as a sub-object. It maps the HTML document that is displayed in the window.

With window is usually meant a normal browser window. However, several HTML documents can also be displayed in one browser window. This is the case with frames, inner frames (iframes), and pop-up windows. Each of these nested windows has its own - and - objects.

So with JavaScript you have access to the widget. That doesn't mean that you are in control of the entire browser. The window object is just a representation and is a collection of selected functions and properties.

A JavaScript is always executed in the context of exactly one window and exactly one document. If the browser displays several documents at the same time, as is the case with frames, however, JavaScript can also access other windows and documents - at least in principle, because there are certain security barriers.

These are just the basics of the two central JavaScript concepts. You can find out more in the chapter on windows and documents and in the chapter on security.

Events

JavaScripts do not work in empty space, but, as I said, in the context of a browser window in which an HTML document is displayed. How is the connection between HTML and JavaScript made? When does a script become active?

At the moment when the browser reads the HTML code, transfers it to the said object structure and calculates the representation, all scripts linked to the document are also executed.

However, scripts do not do their main work when the page is loaded. They become active for a short time, then usually go to sleep again. They only become active again if something happens in the document. Because JavaScript works on the principle of Monitoring and handling of events (in English event handling). A event can be many things. It is primarily about user input. For example:

  • A key is pressed on the keyboard (event type:)
  • An element in the document is clicked with the mouse (event type:)

In addition to these events that are directly related to user input such as keystrokes and mouse clicks, there are those that relate to interaction with forms:

  • A form field is focused ()
  • The text in a form field is changed ()
  • A form is being sent ()

Finally, events that relate to the entire window or the document can also be monitored:

  • The document was completely loaded with all graphics and style sheets, its object structure is completely available ()
  • The size of the browser window is changed ()

Such an event can now be linked to the execution of a JavaScript function. (A function is a reusable part of the program - more on this later in the corresponding chapter.) Whenever the event occurs, the specified function is then carried out. In this way, an action by the user is followed by a JavaScript reaction.

To monitor an event, three components are necessary:

  1. The spot, Where the event is to be monitored: window-wide, document-wide or at a specific element in the document.
  2. The Type of the event. For example, that means all mouse clicks.
  3. The JavaScriptfunctionto be executed on the event. This function will Event handler called (English act = process, dealer = Processor).

With JavaScript we can now formulate such rules: If the event occurs on the element with the ID, execute the handler function. If the user clicks on the element in question, the function is executed and the user input can be responded to.

It can justifiably be said that that event handling The main concept of JavaScript is: Most of the programming of JavaScript consists of designing processes that are controlled by events. At the same time, this area brings with it great challenges that make practice extremely difficult.

You can find out more about this in the chapter Basics of Event Processing.