JavaScript
Для добавления сценария на страницу HTML используется дескриптор:
- language — отвергнутый в настоящее время; использовался для определения языка и версии;
- type атрибут, пришедший на замену language ; он сообщает браузеру, какой язык используется внутри дескрипторов;
- src — атрибут определяет URL внешнего исходного JavaScript-файла, сценарий которого прикрепляется к html-странице.
- Устаревший вариант:
Итак, тег script обычно помещается в html-страницу в область head . Этот тег говорит о том, что внутри находится сценарий, в нашем случае скрипт на языке javascript. Браузер «понимает», что это уже не html-код, поэтому, когда html-парсер браузера доходит до тега script , то он передает инициативу интерпретатору javascript .
Закрывающий тег script говорит о том, что далее уже опять следует html-код.
Встраивание javascript в html происходит двумя основными способами, которые рассмотрим на примере:
Встраивание JavaScript непосредственно в HTML-страницу:
В данном примере дескриптор script может находиться как в теле документа, т.е. теге body (как в примере), так и в области head .
При прикреплении внешнего файла со скриптом тег script следует размещать в области head .
В файле с расширением js (в данном конкретном примере — myscript.js) код выглядит так:
В примере имеется в виду, что файл со скриптом находится в каталоге jscripts . При прикреплении в html-файле надо указывать относительный путь к файлу со скриптом.
Выполните следующий пример, чтобы увидеть особенности работы метода alert() :
Пример: Перенести скрипт в BODY после тега H1
Синтаксис javaScript, основные понятия
JavaScript – язык интерпретируемый, но также оснащен JIT-компиляцией.
JIT или компиляция «на лету» (Just-in-time compilation) — технология увеличения скорости работы программных систем, использующих байт-код, путём компиляции байт-кода в машинный код непосредственно во время работы программы.
Рассмотрим некоторые понятия, относящиеся к синтаксису языка:
Сценарий — текст, состоящий из:
- операторов,
- блоков, т. е. взаимосвязанных наборов операторов, и
- комментариев.
Операторы могут содержать:
- переменные,
- константы и
- выражения.
- состоят из комбинации букв и цифр;
- должны начинаться либо с буквы, либо с символа подчеркивания;
- не должны содержать пробелов.
«Верблюжья нотация» в записи идентификаторов:
- num_docs — знак подчеркивания между словами — хорошо, но есть способ лучше
- numDocs — вот такой «верблюжий» стиль превосходно подходит для именования переменных:
- все имена строчными буквами,
- на стыке слов — большая буква,
- переменные и свойства — называем именами существительными,
- массивы и коллекции — называем существительными во множительном числе,
- функции и методы — называем глаголами,
- азвание классов — с заглавной буквы.
Ключевые слова (keywords) — предварительно определенные идентификаторы, составляющие основу языка программирования. Ключевые слова нельзя использовать для имен переменных, функций, объектов и методов.
Литералы (literals) — это постоянные значения JavaScript. Это значения, которые не изменяются во время выполнения сценария (целочисленные литералы, литералы с плавающей точкой, логические литералы (true и false), строковый литерал — это ноль и более символов, заключенных в двойные («») или одиночные (») кавычки).
ПРАВИЛА ОФОРМЛЕНИЯ СКРИПТА JAVASCRIPT
- каждый оператор JavaScript начинается с новой строки
- каждый оператор заканчивается точкой с запятой
- блок — это набор операторов (составной оператор), заключенный в фигурные скобки
JAVASCRIPT КОММЕНТАРИИ
В JavaScript допустимы два вида операторов комментария:
- // — одна строка символов, расположенная справа от этого оператора, считается комментарием;
- /*. */ — все, что заключено между /* и */ , считается комментарием; с помощью этого оператора можно выделить несколько строк в качестве комментария.
Второй способ комментирования обычно используется при поиске ошибок: тот блок сценария, в котором может находиться потенциальная ошибка, комментируется.
Объявление переменных в javaScript и оператор присваивания
Переменная (variable) — это имя, присваиваемое ячейке памяти компьютера, которая хранит определенные данные.
JavaScript — нетипизированный язык . Это значит, что переменные принимают тот тип данных, который в них присваивается. Напрямую задавать тип переменной не надо.
Объявление переменной происходит при помощи служебного слова javascript var :
Пример объявления переменной:
Можно объявление переменной объединить с присваиванием:
Переменная всегда слева, справа – литерал (значение переменной).
Таким образом, выделим три варианта объявления с присваиванием:
Пример с необъявленной переменной:
КОНСТАНТЫ В JAVASCRIPT
Данные, присвоенные константе, в течение программы не меняются!
Javascript типы данных
Определение типа данных необходимо для установления операций, которые можно выполнить над переменными этого типа данных.
Но необходимо помнить, что в javascript типы переменных явно не указываются, т.к. это динамически типизированный, а не строго типизированный язык программирования.
Интерпретатор определяет тип переменной по правой части (по присвоенному ей значению).
Объявление локальных переменных осуществляется при помощи ключевого слова var
ЛОГИЧЕСКИЙ ТИП (BOOLEAN)
Пример использования логического типа:
СТРОКОВЫЙ ТИП (STRING)
Строка — набор символов, обрамляется либо «» , либо »
Три способа создания строкового объекта:
имя_переменной = new String(«строковое_значение»);Специальные символы:
\n — новая строка
\t — табуляцияЧИСЛОВОЙ ТИП (NUMBER)
Используется неявное объявление, без указания конкретного типа данных:
Префикс 16-ной системы в javascript 0x :
Префикс 8-ной системы в javascript 0 :
Арифметические операторы javascript
Операторы предназначены для составления выражений. Оператор применяется к одному или двум данным, которые в этом случае называются операндами. Например, оператор сложения применяется к двум операндам, а оператор логического отрицания — к одному операнду.
Операторы присваивания:
= обычная операция присваивания
+= , -= присваивание со сложением или вычитанием
*= , /= присваивание с умножением или делениемАрифметические операторы:
+ (сложение в javascript)* (умножение в javascript)
/ (деление в javascript)
% (javascript остаток от деления или деление по модулю )
++ (javascript инкремент или увеличение на 1)
— (javascript декремент или уменьшение на 1).
JavaScript функции для работы с типами данных
Иногда в программе требуется преобразовать тип переменной. Рассмотрим основные функции, связанные с преобразованием:
- parseInt(строка, основание) преобразует указанную в параметре строку в целое число. Если есть второй параметр — система счисления — преобразование происходит по указанному основанию системы счисления (8, 10 или 16)
- parseFloat (строка) преобразует указанную строку в число с плавающей разделительной (десятичной, основание) точкой
Иногда можно получить такую ошибку JavaScript — NaN — когда значение, не является числом (а ожидается число).
В качестве значения переменной может быть undefined — не определено. Такое случается когда переменная создана, но значение ей не присвоено.
HTML тег <script>
Тег <script> используется для описания JavaScript кода в HTML документе. Тег <script> может включать в себя как сам JavaScript код, так и ссылку на внешний файл с JavaScript кодом. Путь внешнего файла указывается при помощи атрибута src . Если в теге содержится ссылка на внешний файл, то тег <script> должен быть пустым.
Тег <script> может располагаться как в элементе <head>, так и внутри элемента <body>. Работа скриптов не зависит от их местоположения в HTML-документе, однако скрипты, которые должны быть выполнены в первую очередь, должны быть расположены в заголовке документа.
Тег <script> можно использовать в HTML-документе неограниченное количество раз.
Синтаксис
Тег <script> — парный, закрывающий тег (</script>) обязателен.
Существует несколько способов выполнения внешних скриптов:
- Атрибут async=»async» указывает на то, что скрипт будет выполняться асинхронно, одновременно с загрузкой страницы.
- Если атрибут async не установлен, а атрибут defer=»defer» , то скрипт будет выполняться после загрузки страницы.
- Если атрибуты async и defer не установлены, то скрипт будет выполнен перед загрузкой страницы.
JavaScript Where To
In HTML, JavaScript code is inserted between <script> and </script> tags.
Example
Old JavaScript examples may use a type attribute: <script type="text/javascript">.
The type attribute is not required. JavaScript is the default scripting language in HTML.JavaScript Functions and Events
A JavaScript function is a block of JavaScript code, that can be executed when "called" for.
For example, a function can be called when an event occurs, like when the user clicks a button.
You will learn much more about functions and events in later chapters.
JavaScript in <head> or <body>
You can place any number of scripts in an HTML document.
Scripts can be placed in the <body> , or in the <head> section of an HTML page, or in both.
JavaScript in <head>
In this example, a JavaScript function is placed in the <head> section of an HTML page.
The function is invoked (called) when a button is clicked:
Example
<h2>Demo JavaScript in Head</h2>
JavaScript in <body>
In this example, a JavaScript function is placed in the <body> section of an HTML page.
The function is invoked (called) when a button is clicked:
Example
<h2>Demo JavaScript in Body</h2>
<script>
function myFunction() <
document.getElementById("demo").innerHTML = "Paragraph changed.";
>
</script>Placing scripts at the bottom of the <body> element improves the display speed, because script interpretation slows down the display.
External JavaScript
Scripts can also be placed in external files:
External file: myScript.js
External scripts are practical when the same code is used in many different web pages.
JavaScript files have the file extension .js.
To use an external script, put the name of the script file in the src (source) attribute of a <script> tag:
Example
You can place an external script reference in <head> or <body> as you like.
The script will behave as if it was located exactly where the <script> tag is located.
How To Add JavaScript to HTML
JavaScript, also abbreviated to JS, is a programming language used in web development. As one of the core technologies of the web alongside HTML and CSS, JavaScript is used to make webpages interactive and to build web apps. Modern web browsers, which adhere to common display standards, support JavaScript through built-in engines without the need for additional plugins.
When working with files for the web, JavaScript needs to be loaded and run alongside HTML markup. This can be done either inline within an HTML document or in a separate file that the browser will download alongside the HTML document.
This tutorial will go over how to incorporate JavaScript into your web files, both inline into an HTML document and as a separate file.
Adding JavaScript into an HTML Document
You can add JavaScript code in an HTML document by employing the dedicated HTML tag <script> that wraps around JavaScript code.
The <script> tag can be placed in the <head> section of your HTML or in the <body> section, depending on when you want the JavaScript to load.
Generally, JavaScript code can go inside of the document <head> section in order to keep them contained and out of the main content of your HTML document.
However, if your script needs to run at a certain point within a page’s layout — like when using document.write to generate content — you should put it at the point where it should be called, usually within the <body> section.
Let’s consider the following blank HTML document with a browser title of Today’s Date :
Right now, this file only contains HTML markup. Let’s say we would like to add the following JavaScript code to the document:
This will enable the webpage to display an alert with the current date regardless of when the user loads the site.
In order to achieve this, we will add a <script> tag along with some JavaScript code into the HTML file.
To begin with, we’ll add the JavaScript code between the <head> tags, signalling the browser to run the JavaScript script before loading in the rest of the page. We can add the JavaScript below the <title> tags, for instance, as shown below:
Once you load the page, you will receive an alert similar to this:
If we were modifying what is shown in the body of the HTML, we would need to implement that after the <head> section so that it displays on the page, as in the example below:
The output for the above HTML document loaded through a web browser would look similar to the following:
Scripts that are small or that run only on one page can work fine within an HTML file, but for larger scripts or scripts that will be used on many pages, it is not a very effective solution because including it can become unwieldy or difficult to read and understand. In the next section, we’ll go over how to handle a separate JavaScript file in your HTML document.
Working with a Separate JavaScript File
In order to accommodate larger scripts or scripts that will be used across several pages, JavaScript code generally lives in one or more js files that are referenced within HTML documents, similarly to how external assets like CSS are referenced.
The benefits of using a separate JavaScript file include:
- Separating the HTML markup and JavaScript code to make both more straightforward
- Separate files makes maintenance easier
- When JavaScript files are cached, pages load more quickly
To demonstrate how to connect a JavaScript document to an HTML document, let’s create a small web project. It will consist of script.js in the js/ directory, style.css in the css/ directory, and a main index.html in the root of the project.
We can start with our previous HTML template from the section above:
Now, let’s move our JavaScript code that will show the date as an <h1> header to the script.js file:
We can add a reference to this script to the <body> section, with the following line of code:
The <script> tag is pointing to the script.js file in the js/ directory of our web project.
Let’s consider this line in the context of our HTML file, in this case, within the <body> section:
Finally, let’s also edit the style.css file by adding a background color and style to the <h1> header:
We can reference that CSS file within the <head> section of our HTML document:
Now, with the JavaScript and CSS in place we can load the index.html page into the web browser of our choice. We should see a page that looks similar to the following:
Now that we’ve placed the JavaScript in a file, we can call it in the same way from additional web pages and update them all in a single location
Conclusion
This tutorial went over how to incorporate JavaScript into your web files, both inline into an HTML document and as a separate .js file.
Want to deploy your application quickly? Try Cloudways, the #1 managed hosting provider for small-to-medium businesses, agencies, and developers — for free! DigitalOcean and Cloudways together will give you a reliable, scalable, and hassle-free managed hosting experience with anytime support that makes all your hosting worries a thing of the past. Start with $100 in free credits!
Tutorial Series: How To Code in JavaScript
JavaScript is a high-level, object-based, dynamic scripting language popular as a tool for making webpages interactive.