Javascript include js file. Connecting scripts in HTML. Turn on the image map backlight

Today I will tell you how the connection is made different types scripts for your site. This is kind of the basics, and I should have written this article one of the first. Therefore, let's begin.

Connecting JS scripts (files with *.js extension) to the site

JavaScript helps us improve the functionality of the site in many ways. Be it stylization of forms or, for example, some technical side of the issue.

JavaScript can be connected in two ways:

1. First– this is directly inserting code into your website using tags:

Code

2. Second– using the file:

Where “https://www.pandoge.com/main.js” is the path to the script file. It is recommended to write this option for files on a remote (external) server. If the file is located on your website, then you can simply specify relative path:

This is convenient if you suddenly want to change the domain or transfer the site to a different protocol.

As for the connection location, it is recommended to connect all scripts in the HEAD section, before its closing tag. For example:

Everything for a beginner webmaster

They can also be connected in the BODY section. For example, it is recommended to include all libraries in the HEAD section, while all counters, sliders, galleries and other scripts are included in the BODY section, also before the closing tag.

Connecting PHP scripts (files with *.php extension) to the site

Connecting PHP scripts is carried out in three ways:

1. First– this is the same insertion of code into the site page itself (note that if you have a page with the *.html extension, you need to change the extension to *.php) using tags:

2. Using a file (in this case, the connection can also be made on a page with a *.html extension):

But for this method to work, you need to add these lines to the .htaccess file, which is located at the root of your site, at the very top:

RemoveHandler .html .htm AddType application/x-httpd-php .php .htm .html .phtml

If such a file is not available on your hosting, create it using any text editor.

3. Third– using a JS script. In this case, you can also get the result of the executed PHP script on the server.

The implementation will be as follows:

$(document).ready(function() ( $(".result").load("/main.php"); ));

Where “.result” is the class where the data will be loaded, and “/main.php”, respectively, is the address to the PHP script.

If you are loading data from another server, then PHP support on your server is not required. Don't forget to connect the jQuery library to your site.

Here the rules are absolutely the same: the full address to the file if it is on an external server, the relative address if it is on yours.

Note! If you want to connect a PHP script to your site, then the server must have PHP support. Check with your hosting provider to find out if you have this option.

If you are connecting scripts for the first time, try connecting scripts from the archive, which is attached at the end of the article. If in both cases you received the message “Hello World! " means you did everything right.

HTML/CSS capabilities allow you to create beautiful and dynamic pages. helps the developer assign functionality to page elements, process events, organize a dialogue with the visitor, and ensure data exchange with the server.

HTML pages and CMS

Modern Internet programming increasingly uses content management systems (Content Management System - CMS). In this case, the connection of any files is resolved automatically.

In this example, all buttons added to the site page can be equipped with additional functionality, as through onclick event, and by connecting additional file scripts.

Connecting templates and frameworks (for example, jQuery) is done automatically. JavaScript is an integral part of the browser. Any CMS takes this into account and uses it as efficiently as possible. As a rule, a CMS makes full use of the AJAX mechanism and the most advanced JS tools, but leaves the developer the opportunity to adjust and refine the functionality of the page in the browser, especially to control event processing.

Traditional JavaScript connection to HTML

There aren't many options. You can insert JS code with the script tag into the page itself (3) or connect it as an external file (1). Each option has its own advantages. Usually developers use both options at the same time.

JavaScript is about events, DOM and full control all page elements. Option 2 is a direct connection to the page body, which fires when the page is fully loaded.

External files and server management

Formation of an HTML document when developing on a CMS basis and when manual creation web resource is programmed. Event processing, creation of page elements and external files can be done in a way that is convenient in each specific case, in real time.

The PHP interpreter, when creating a page, can create page code, JavaScript files, pictures, and arrange the structure of files and folders. Through the scope of variables and data, the developer can switch functionality.

Typically, an HTML document provides several options for interacting with the visitor. For example, depending on the region, gender, age, etc., certain features of the site can be connected, which are convenient and expedient to have on one page.

This example shows how to connect JavaScript to HTML page elements using mouse events. This option for using JS capabilities is necessary when the functionality of an element needs to be changed while the page is running.

Functionality of page elements

JavaScript is focused on serving events on page elements and the DOM object tree (Document Object Model). From this point of view, the question "How to connect JavaScript to HTML elements?" is decided initially.

For example, all fields of a data entry form can immediately receive JS handlers to validate (check) the data for correctness. The date must be a date, the number must be a number, and the character string must contain only valid characters.

Data input control is an important functionality, and there is no point in solving it in real time and connecting a JS handler while the visitor is on the page. It is advisable to provide in advance the form for the structure, content and functionality of the check. The problem of how to connect JavaScript to HTML form elements can be solved right away.

The situation will be different for elements when solving the problem of data transfer using Drag and Drop mechanisms. In most cases, you will have to dynamically change handlers. Grabbing an element to move is one event; actually moving across the boundaries of other elements is another event.

The question of how to connect JavaScript to HTML page elements that “meet along the way” can be not only dynamic, but also unpredictable.

Dynamics and event processing

The peculiarity of JavaScript is its inherently distributed algorithms and events that can work in the most unpredictable way. A program (script) in JS is far from a program in C/C++, PHP or Perl. Conventional programming languages ​​allow events, data type dynamics, parallel computing, but the originality of JS and its close connection with the DOM brings specificity to programming in this language and, very importantly, correct placement code.

All JS scripts are merged into single space, but proper placement of variables, functions, event handlers, and sequence of operations is essential.

Using the server PHP language inside JavaScript code It is more convenient to do this when the code is directly inserted into the HTML document. It is not customary to place PHP code inside external file*.js, though imagination modern developer there is little limitation if it works without one or another content management system.

It's important to keep in mind: JavaScript is inherently distributed algorithms and events. Server languages- these are sequences of operations, algorithms of actions that are performed until the page reaches the browser. The answer to the question "How to connect JavaScript to an HTML document?" will depend not only on the logic of the algorithm, but also on the solution time.

Instructions

Connect the script from external source, addressed to a known URI. Use HTML element with given value src attribute. Edit the document by adding a construct like this:

Here, the script_URI value must be a URI that identifies the resource from which the script data will be loaded.
The value of the charset attribute should be the script's character encoding, if it differs from the document's character encoding. The document encoding is determined based on the Content-Type field of the server's HTTP response header or the content attribute value of a META element with the http-equiv attribute set to Content-Type.
Connecting scripts in this way is often done in the head of the document (SCRIPT elements are located inside the HEAD element) and their immediate execution is not required. In this case, it makes sense to use the defer attribute to defer interpretation of the script text.

Connect the script by embedding it directly into the document. Add a SCRIPT element to your document markup that has content that is JavaScript code. Use a construction like:

// script code text

// script code text

// script code text

Pay attention to the HTML comments surrounding the script code. They are necessary to ensure compatibility with older browser models.

Connect the script by specifying "javascript:" as the protocol descriptor URI of the target anchor of element A. Create a link in the document with an href attribute value of the form:

javascript:

Here, the value should be written as a calculated expression in the language JavaScript scripts. In this case, several language sentences can be combined into one expression using operator brackets, for example:

text

Add scripts to your document as code for built-in element event handlers. To do this, define built-in handlers for the desired events of the selected elements by adding appropriate attributes to these elements. Enter JavaScript code snippets as attribute values. For example, add code as an event handler single click mouse by DIV element, you can do this as follows:

Element Content

A list of element events that must be supported by conforming user agents can be found in the Events sections of the specification object models documents levels 2 and 3 (DOM2 and DOM3) on the W3C consortium website w3c.org.

And today we will start new section, dedicated to the use of scripts in HTML. The section consists of only one video lesson in which we will get acquainted with scripts, learn what a script is, how to use scripts, how to connect a script to HTML, etc. As for the tags we will use. There will be two of them, this is tag and tag.

Also, in this video tutorial we will recap the conversation about image maps. We've been talking about this for quite some time, but visual design I transferred the image objects to the scripts section so that there would be no confusion or misunderstanding in our heads. So here it is. Today we will completely close the question of adding interactive image maps to an HTML document and include scripts that will help highlight objects in the image.

What is a script?

I will not describe any technical and smart concepts. We all have known for a long time what HTML is and that it is needed to create a website framework. But in addition to the frame, to create a website, it must be configured and designed in the appropriate way. CSS can help us with this. And scripts are needed to expand the functionality of sites. In general, to add dynamics to our site.

The scripts we'll talk about are website-specific and use languages ​​like JavaScript and JQuery. I noted this because the concept of scripts is quite broad and is used in different directions, in our case these are websites.

Scripts in HTML.

In our case, we will use two HTML tags that will help us connect scripts.

An HTML tag is intended to connect a script to an HTML page. In this case we can use various ways connections, since the script code can be either in a separate file, which can be located somewhere on a third-party server or on our server, or embedded directly in the HTML code of the document.

The HTML tag is intended to notify the page visitor that script support is disabled in his browser or does not exist at all. This means that he will not be able to use the full functionality of the page on which he is located.

Connecting the script. How to insert a script into HTML? (All connection options)

Let's start with the tag and figure out how to use it in HTML. After all, in order for us to make the page more dynamic, we must be able to connect or implement scripts in HTML. As I mentioned just above, we have several options for connecting scripts in HTML.

Connecting a script from another server.

When using scripts, we do not always need to write them ourselves or download files and place them on our server for connection. The file with the script script can also be located on a third-party server, for example, such as google.

In this example we will connect jQuery support to our document. The script file is located at google server and for its connections we just need to specify correct address file location. It is also worth noting here that when using a tag we are mandatory should use the HTML type attribute, which will help indicate to the web browser what type of document the included file is.

So, to connect, go to the page google developers. To make your search easier, here is the link: https://developers.google.com/speed/libraries/devguide#jquery. Then we simply copy code something like this into our HTML document:

The library version may vary.

Once the code is copied, we paste it into the HTML document before the closing tag. After which we can check whether the library is connected or not. Watch the video tutorial to see how to do this.

This is perhaps the easiest way, since here, apart from copying and pasting the finished code, you don’t need to do anything else. The only thing to add is that we must specify the type attribute with a value. That is, the final code will look something like this:

Connecting the script from our server.

This connection method is similar to the first one, only when connecting a script from our server, that is, the file with the scripts must be located on the hosting that the site itself uses, we must specify the correct path to the file. Also, for a more convenient organization of orientation in the site files, we can create separate folder for scripts and call it, for example js. Then in this folder we must put a file in the .js format, which contains the functionality necessary for connection. And indicate the path to this file in the HTML document before the closing head tag.

In the example that I will give below, we will try to connect a script that will help create highlighting for image maps. At the same time, when connecting the script, I use the relative path to the .

You can download the script file itself on the additional materials page for the Video Course on this page.

How to check the script's operation is shown in the video clip.

Embedding a script script into an HTML document. How to insert a script into HTML?

The last method does not consider the connection separate files, but suggests embedding the script script directly inside the HTML document. But here it is worth noting that if the script is not large, then we can easily implement it into the document. If this is a huge functionality or a whole library, you should use one of the listed methods higher.

So, let's assume that we have a certain script that needs to be implemented. In our case, this will refer to the highlighting of image map objects. You can find the function in additional materials in the js folder. In the same place where the script file is located there is a regular one text file, in which it is written required code. You can also copy the script code on this page:

$(function() ( $(".map").maphilight(); $("#squidheadlink").mouseover(function(e) ( $("#squidhead").mouseover(); )).mouseout( function(e) ( $("#squidhead").mouseout(); )).click(function(e) ( e.preventDefault(); ));

After which it must be inserted between the tags. That is, some individual functions, we can add directly to the HTML document before the tag:

It is also worth noting here that in order for the image map highlighting to work, you must add all the proposed scripts. That is jQuery library, connect the file that is in the additional materials and add the function to the HTML document. If at least one of the steps is not completed, the backlight will not work.

HTML tag.

As for the tag, everything is simple. This tag will be enabled if the user's web browser does not support scripts or is disabled. This is a paired tag. Between the opening and closing tags, we must specify information that will be displayed to the user if his browser does not support scripts. For example, like this:

Your script is not working...

This tag must be included after the opening tag.

Video lesson: Connecting scripts in HTML. Turn on the image map backlight.

The HTML directory and other materials can and should be downloaded!

IN next video We will continue our acquaintance with scripts in HTML and begin to get acquainted with another concept, these are objects in HTML, such as video, audio and flash banners. First, let's figure out how to insert a video into HTML and get acquainted with HTML tags and

Scripts are another important factor For correct operation pages. If HTML is assigned the role of forming its structure, and styles are responsible for appearance, then scripts are responsible for the behavior of the document. They allow you to create all sorts of moving elements on pages. The most striking example would be animation. But there are many other effects. A language such as JavaScript is used to create scripts.

The process of connecting scripts to a page is exactly the same as adding styles. That is, there are two options. The first is to write script code inside the page itself. The second involves connecting them using external files.

Inline scripts

To write a script inside a page, you should use the . Here's an example:

JavaScript code

By by and large it doesn't matter where exactly in the HTML document the tag is used. However, I recommend placing it at the end of the page code, just before the tag that closes the document.

It should be noted that over time, certain opportunities JavaScript language go to CSS. An example is the possibility of specifying a smooth change in property values.

External scripts

As a rule, files with the .js extension are used to connect external scripts. Implemented this action using the tag followed by src attribute, where the path to the file itself is set. For example:

Please note that the tag is paired. Therefore in in this case, When we're talking about O external scripts, you don't need to write anything inside the tag.

It is best to connect scripts from a file before the tag that closes the document.