Добавление сценариев Javascript в HTML

Javascript — скриптовый интерпретируемый язык программирования, интерпретатор встроен непосредственно в браузер. Поэтому обработка скрипта происходит на стороне клиента без обращения к серверной стороне

Для добавления сценария на страницу HTML используется дескриптор:

<sсript type="text/javascript"></sсript>

Атрибуты дескриптора:

  • language — отвергнутый в настоящее время; использовался для определения языка и версии;
  • type атрибут, пришедший на замену language; он сообщает браузеру, какой язык используется внутри дескрипторов;
  • src — атрибут определяет URL внешнего исходного JavaScript-файла, сценарий которого прикрепляется к html-странице.
Варианты тега script:
  1. Устаревший вариант: 
    <sсript language="javascript">...</sсript>
  2. Действующий вариант: 
    <sсript type="text/javascript">...</sсript>
  3. Вариант с прикрепленным файлом скрипта: 
    <sсript src="/jscripts/myscript.js">
</sсript>

Итак, тег script обычно помещается в html-страницу в область head. Этот тег говорит о том, что внутри находится сценарий, в нашем случае скрипт на языке javascript. Браузер «понимает», что это уже не html-код, поэтому, когда html-парсер браузера доходит до тега script, то он передает инициативу интерпретатору javascript.

Закрывающий тег script говорит о том, что далее уже опять следует html-код.

Встраивание javascript в html происходит двумя основными способами, которые рассмотрим на примере:

Пример: Вывести в браузере сообщение «Это JavaScript!», используя скрипт на языке JavaScript

Встраивание JavaScript непосредственно в HTML-страницу:

    <body>
<sсript type="text/javascript">
	document.write("Это JavaScript!");
</sсript>Это обычный HTML документ.

    В данном примере дескриптор script может находиться как в теле документа, т.е. теге body(как в примере), так и в области head.

  1. Размещение сценария во внешнем файле:

    При прикреплении внешнего файла со скриптом тег script следует размещать в области head.

    В файле с расширением js (в данном конкретном примере — myscript.js) код выглядит так:

    document.write("Это JavaScript!")

В примере имеется в виду, что файл со скриптом находится в каталоге jscripts. При прикреплении в html-файле надо указывать относительный путь к файлу со скриптом.

Важно:

  • Функция document.write() используется для вывода информации на экран.
  • Тогда как document.writeln() — используется для перевода на новую строку, если используется тег форматирования pre.
  • alert() — это метод для вывода модального (диалогового) окна с сообщением

    •  

    Выполните следующий пример, чтобы увидеть особенности работы метода alert():

    Пример: Поменяйте местами alert и document.write

     

    <sсript type="text/javascript"> 
  alert ("Hello?"); 	
  document.write("Hello!");
</sсript>
    Важно: особенность модального окна alert состоит в том, что пользователь не может продолжить работу, пока не нажмет на кнопку

    Пример: Перенести скрипт в BODY после тега H1

     

      document.whrit("Проблемы?");
    1. alert(Hello);

    Синтаксис javaScript, основные понятия

    JavaScript – язык интерпретируемый, но также оснащен JIT-компиляцией.

    JIT или компиляция «на лету» (Just-in-time compilation) — технология увеличения скорости работы программных систем, использующих байт-код, путём компиляции байт-кода в машинный код непосредственно во время работы программы.

    Рассмотрим некоторые понятия, относящиеся к синтаксису языка:

    Сценарий — текст, состоящий из:

    • операторов,
    • блоков, т. е. взаимосвязанных наборов операторов, и
    • комментариев.

    Операторы могут содержать:

    • переменные,
    • константы и
    • выражения.

    Важно: Язык JavaScript чувствителен к регистру
    Идентификаторы (identifiers) — имена переменных, методов и объектов:

    • состоят из комбинации букв и цифр;
    • должны начинаться либо с буквы, либо с символа подчеркивания;
    • не должны содержать пробелов.

    «Верблюжья нотация» в записи идентификаторов:

    Есть определенные устоявшиеся среди программистов правила для идентификаторов переменных, функций, массивов и классов. Рассмотрим их:
    • num_docs — знак подчеркивания между словами — хорошо, но есть способ лучше
    • numDocs — вот такой «верблюжий» стиль превосходно подходит для именования переменных:
      • все имена строчными буквами,
      • на стыке слов — большая буква,
      • переменные и свойства — называем именами существительными,
      • массивы и коллекции — называем существительными во множительном числе,
      • функции и методы — называем глаголами,
      • азвание классов — с заглавной буквы.

    верблюжья нотация

    var myCounter=1; // просто переменная
var userNames = new Array(); // массив
function getUserCounter(){}// функция

    Ключевые слова (keywords) — предварительно определенные идентификаторы, составляющие основу языка программирования. Ключевые слова нельзя использовать для имен переменных, функций, объектов и методов.

    Литералы (literals) — это постоянные значения JavaScript. Это значения, которые не изменяются во время выполнения сценария (целочисленные литералы, литералы с плавающей точкой, логические литералы (true и false), строковый литерал — это ноль и более символов, заключенных в двойные («») или одиночные (») кавычки).

    ПРАВИЛА ОФОРМЛЕНИЯ СКРИПТА JAVASCRIPT

    • каждый оператор JavaScript начинается с новой строки
    • каждый оператор заканчивается точкой с запятой
    a=5;
document.write(a);
    • блок — это набор операторов (составной оператор), заключенный в фигурные скобки { }
    {
 document.write(a);
 alert(b);
}

    JAVASCRIPT КОММЕНТАРИИ

    В JavaScript допустимы два вида операторов комментария:

    1. // — одна строка символов, расположенная справа от этого оператора, считается комментарием;
    2. /*...*/ — все, что заключено между /* и */, считается комментарием; с помощью этого оператора можно выделить несколько строк в качестве комментария.
    // проверка
 
/* здесь может быть ошибка
a=5;
document.write(a);
*/

    Второй способ комментирования обычно используется при поиске ошибок: тот блок сценария, в котором может находиться потенциальная ошибка, комментируется.

    Объявление переменных в javaScript и оператор присваивания

    Переменная (variable) — это имя, присваиваемое ячейке памяти компьютера, которая хранит определенные данные.

    JavaScript — нетипизированный язык. Это значит, что переменные принимают тот тип данных, который в них присваивается. Напрямую задавать тип переменной не надо.

    Объявление переменной происходит при помощи служебного слова javascript var:


    var + имя переменной + ;
     
     

    Пример объявления переменной:

    var i;

    Оператор присваивания:

    i=0;

    Можно объявление переменной объединить с присваиванием:


    var + имя переменной + = + значение + ;
      

    Переменная всегда слева, справа – литерал (значение переменной).

    Таким образом, выделим три варианта объявления с присваиванием:

    1. var hello;
hello="привет";

      или

    2. hello="привет";
      Еще пример с объявленной переменной:
    var myVal; // объявляем переменную myVal 
myVal = "Pi"; /* присваиваем myVal некоторое значение */
alert (myVal); // используем ее

    Пример с необъявленной переменной:

    myVal = "Pi"; /* присваиваем myVal некоторое значение */
alert (myVal); // используем ее


     
     

    КОНСТАНТЫ В JAVASCRIPT


    const + имя константы + = + значение + ;
      

    Данные, присвоенные константе, в течение программы не меняются!

    const MyX=2;
alert(MyX);

    Javascript типы данных

    Определение типа данных необходимо для установления операций, которые можно выполнить над переменными этого типа данных.

    Но необходимо помнить, что в javascript типы переменных явно не указываются, т.к. это динамически типизированный, а не строго типизированный язык программирования.

    Интерпретатор определяет тип переменной по правой части (по присвоенному ей значению).

    Объявление локальных переменных осуществляется при помощи ключевого слова var

     

    ЛОГИЧЕСКИЙ ТИП (BOOLEAN)

    Пример использования логического типа:

    var a = true;
var b = false;
c = a && b; // результат false
c = a || b; // результат true
с = !a; // результат false
     

    СТРОКОВЫЙ ТИП (STRING)

    Строка — набор символов, обрамляется либо "", либо ''

    Три способа создания строкового объекта:

    1. имя_переменной = new String("строковое_значение"); 
      myString = new String ("Hello!");
    2. имя_переменной = "строковое_значение"; 
      myString = "Hello!";
    3. var имя_переменной = "строковое_значение"; 
      var myString = "Hello!";
    Операции над строками

    Специальные символы:
    \n — новая строка
    \t — табуляция

     

    ЧИСЛОВОЙ ТИП (NUMBER)

    Используется неявное объявление, без указания конкретного типа данных:

    var x = 5e3; // 5000
var y = 5e-3; // 0.005

    Префикс 16-ной системы в javascript 0x:

    var x = 0xFF; // 255

    Префикс 8-ной системы в javascript 0:

    var x = 045; // 37
    var x = 0/0; // NaN - не число (not a number)
var x = 1/0; // Infinity (бесконечность)

     

    Арифметические операторы javascript

    Операторы предназначены для составления выражений. Оператор применяется к одному или двум данным, которые в этом случае называются операндами. Например, оператор сложения применяется к двум операндам, а оператор логического отрицания — к одному операнду.

    Операторы присваивания:
    = обычная операция присваивания
    +=, -= присваивание со сложением или вычитанием
    *=, /= присваивание с умножением или делением

    Арифметические операторы:
    + (сложение в javascript)

    X + Y;
у = 5;
х = у + 3; // равно 8

    * (умножение в javascript)

    X * Y;

    / (деление в javascript)

    X / Y;

    % (javascript остаток от деления или деление по модулю )

    X = 8;
Y = 5;
X % Y; // 3

    ++ (javascript инкремент или увеличение на 1)

    Х = 8;
Х++;  // 9
 
/* Префиксный инкремент выполняется перед использованием переменной, пример:*/
 var number = 100; 
 ++number; // примет значение 101
 
/*Постфиксный инкремент выполняется после использования переменной, пример:*/
 var number = 100; 
 number++; // примет значение 100
 alert(number); // выведет число 101

    -- (javascript декремент или уменьшение на 1).

    JavaScript функции для работы с типами данных

    Иногда в программе требуется преобразовать тип переменной. Рассмотрим основные функции, связанные с преобразованием:

    • parseInt(строка, основание) преобразует указанную в параметре строку в целое число. Если есть второй параметр — система счисления — преобразование происходит по указанному основанию системы счисления (8, 10 или 16)
    • parseFloat (строка) преобразует указанную строку в число с плавающей разделительной (десятичной, основание) точкой 
      parseFloat("3.14") 		// результат = 3.14
parseFloat("-7.875") 	// результат = -7.875
parseFloat ("435") 		// результат = 435
parseFloat ("Вася") 		/* результат = NaN, то есть не является числом */
parseFloat ("17.5") 		// результат = 17.5
       

    • Функция javascript isNaN(значение) служит для определения того, является ли значение выражения числом

     

    • Важно: Оба метода и parseInt и parseFloatберут в качестве параметра строку и преобразуют ее в число
      isNaN(123) 		/* результат false (то есть это - число) */
isNaN("50 рублей") 	/* результат true (то есть это - не число) */

      Иногда можно получить такую ошибку JavaScript — NaN— когда значение, не является числом (а ожидается число).

      В качестве значения переменной может быть undefined— не определено. Такое случается когда переменная создана, но значение ей не присвоено.

      Методы javaScript вывода данных и ввода

      1. alert()


        [window.]alert(сообщение) 
         

        alert("сообщение");

        javascript alert

      2. confirm()


        [window.]confirm(сообщение) 
         

        confirm("Вы  действительно хотите завершить работу?");

        javascript confirm

      3. prompt()


        [window.]prompt(сообщение,значение_поля_ввода)
         

        prompt("Как Вас зовут?", "Иван");

        Метод prompt принимает два аргумента: первый выводится в качестве простой строки в модальном окне; второй — значение по умолчанию в текстовом поле для ввода. Оба аргумента заключаются в кавычки.

        Важно: Во всех трех случаях использования методов ввода или вывода объект windowможно опускать. Этот объект означает «окно», и для краткости обращения к методам разрешено его не использовать, поэтому в синтаксисе он выделен квадратными скобками
         

        javascript prompt