JavaScript курс

Введение в мир JS

Dynamic HTML или DHTML — это способ (подход) создания интерактивного веб-сайта, использующий сочетание статичного языка разметки HTML, встраиваемого (и выполняемого на стороне клиента) скриптового языка JavaScript, CSS (каскадных таблиц стилей) и DOM (объектной модели документа). Он может быть использован для создания приложения в веб-браузере: например для более простой навигации или для придания интерактивности форм. DHTML может быть использован для динамического перетаскивания элементов по экрану. Также он может служить как инструмент для создания основанных на браузере видеоигр. DHTML приложения, которые вполне автономны в браузере, без серверной поддержки, такой как база данных, иногда вынуждены обращаться к Single Page Applications, или SPA.

DHTML = HTML + CSS + JavaScript

HTML - язык разметки, он определяет положение контента на странице, используя различные теги (заголовки, параграфы,листы)
CSS - каскадные таблицы стилей. Определяет правила и стили оформления элементов HTML документа (Шрифты, заливку, позицию, отступы, видимость, переходы)
Javascript - определяет динамическое поведение на странице, позволяет интерактивно реагировать на действия пользователя в документе:
- Валидация форм
- Изменение структуры HTML элементов на странице
- Выполнение сложных вычислений
- Обмен информацией с удаленным сервером, без перезагрузки страницы
- Графика В настоящее время активно используется не только на стороне клиента но и на нем часто строится серверная часть приложений.

Возможности языка

подписка на события и их обработка
Манипулировние DOM деревом
Работа с cookies и browser storage
Обработка исключений
Сетевой обмен данными

"Движки" и особенности

Втроен в браузер и зависит от производителя: V8 в Chrome, Chakra в IE, Spidermonkey в Firefox, JavaScriptCore в Safari.

Является объектно-ориентированным языком, только в последней версии использование подхода для работы с объектами соответствует подходу в других языках
Имеет ряд свойств присущих функциональным языкам, позволят использовать функции как объекты первого порядка: передавать как аргументы, возвращать и присваивать переменным
Автоматическое приведение типов
Автоматическая сборка мусора
Анонимные функции
Компилируется в момент исполнения

Первый скрипт

<html>
        <body>
          <scriрt type="text/javascript">
            alert('Hello JavaScript!');
          </scriрt>
        </body>
    </html>

Использование JavaScript на HTML странице

Javascript код должен быть заключен в теги:

в <head> тег <script>
в <body> тег <script>
Во внешних файлах и импортиорован в документ посредждством указания источника
```
<scriрt src="scripts.js" type="text/javascript">

</scriрt>
```

В каких случаях вызывается?

Выполянется во время загрузки страницы или когда браузер запускает событие
- Все инструкции выполняются во время загрузки страницы
- Некоторые операторы определяют функции которые могут быть вызваны позже
Может быть добавлен как обработчик событий через атрибут тегов непосредственно к HTML элементу
- выполняется когда событие вызывается браузером
```
<img src="logo.gif" onclick="alert('clicked!')" />
```

Пример выполнения после возникновения события

<html>
        <head>
            <scriрt type="text/javascript">
              function test (message) {
                alert(message);
              }
            </scriрt>
        </head>

        <body>
          <img src="logo.gif"
            onclick="test('clicked!')" />
        </body>
    </html>

Использование внешних файлов

HTML страница

<html>
  <head>
    <scriрt src="sample.js" type="text/javascript">
    </scriрt>
  </head>
  <body>
    <button onclick="sample()" value="Call JavaScript
      function from sample.js"/>
  </body>
</html>

Внешний файл

function sample() {
  alert('Hello from sample.js!')
}

JavaScript синтаксис

Очень похож на синтаксис C#

Операторы (+, *, = , !=, &&, ++, ...)
Переменные (не типизируются)
Условия (if, else)
Циклы (for, while)
Массивы (array[] и ассоциативные массивы array['abc'])
Функции (могут возвращать значения)

Стандартные всплывающие диалоговые блоки

Блок alert имеет кнопку [OK] - просто показывает уведомление
alert("Какой то текст");
Блок подтверждения confirm - имееет кнопки [OK] и [Cancel]
confirm("Вы уверены?");
Блок ввода - содержит текст поле ввода и значение по умолчанию
prompt ("введите значение", 10);

Встроенные обьекты браузера

Через эти обьекты Javascript получает доступ к браузеру и содержимому веб страницы

window - Верхний уровень DOM дерева, представляет окно браузера
document - содержит информацию о текущем загруженном на странице документе
screen - Хранит параметры дисплея
browser - Содержит информацию о браузере

Объект Math

Объект Math позволяет работать с математическими функциями



In [6]:

    
for (i = 1; i <= 5; i++) {
  var x = Math.random();
  x = 10 * x + 1;
  x = Math.floor(x);
  console.log(
      "Random number (" +
      i + ") in range " +
      "1..10 --> " + x);
}
i









    



Random number (1) in range 1..10 --> 10
Random number (2) in range 1..10 --> 10
Random number (3) in range 1..10 --> 8
Random number (4) in range 1..10 --> 3
Random number (5) in range 1..10 --> 5






    Out[6]:





6

Объект Date

Объект Date() позволяет работать с календарными функциями



In [2]:

    
var now = Date();
var result = "сейчас " + now
result









    Out[2]:





'сейчас Mon Feb 20 2017 21:09:56 GMT+0300 (Russia TZ 2 Standard Time)'

Задержка выполнения



In [7]:

    
function bang() {
    console.log("Прошло 5 секунд")
}

var timer = setTimeout(bang, 5000);









    



Прошло 5 секунд

`clearTimeout(timer);` - останавливает таймер и предотвращает вызов функции

Повтор выполнения через определенные промежутки времени



In [10]:

    
let z = 0
function bang() {
    z++
    console.log("Прошла " + z + " секунда")
}

function clear() {
    clearInterval(timer);
    z = 0;
}

var timer = setInterval(bang, 1000);
// через 5 секунд останавливаем функцию
var stop = setTimeout(clear, 5060);









    



Прошла 1 секунда
Прошла 2 секунда
Прошла 3 секунда
Прошла 4 секунда
Прошла 5 секунда

Пример таймера

<scriрt type="text/javascript">
  function timerFunc() {
    var now = new Date();
    var hour = now.getHours();
    var min = now.getMinutes();
    var sec = now.getSeconds();
    document.getElementById("clock").value =
      "" + hour + ":" + min + ":" + sec;
  }
  setInterval(timerFunc, 1000);
</scriрt>
<input type="text" id="clock" />

Дебажинг

Современные браузеры имеют консоль, в которую вываливается служебная информация и сыпятся ошибки от исполняемых скриптов, ошибки могут отличаться в различных браузерах.
Некоторые системы предоставляют возможность детального отслеживания ошибок, установку контрольных точек и наблюдателей
существует отличное приложение Firebug для Firefox
Node.js позволяет скидывать в лог информацию
Вывод информации в консоль, в зависимости от типа сообщение может быть отформатировано стилистически или скрипт приостановить свое выполнение.
- debug("Сообщение или переменная")
- info("Сообщение или переменная")
- log("Сообщение или переменная")
- warn("Сообщение или переменная")
- error("Сообщение или переменная")



In [7]:

    
console.log("Привет")









    



Привет






    Out[7]:





undefined



In [ ]: