Web-технологии Тема 6. Язык JavaScript - "Может показаться, что мы делаем слишком много работы для осуществления чего-то весьма простого " ...
←
→
Транскрипция содержимого страницы
Если ваш браузер не отображает страницу правильно, пожалуйста, читайте содержимое страницы ниже
В. Пикулев, 2018-19
Web-технологии
Тема 6. Язык JavaScript
«Может показаться, что мы делаем слишком много
работы для осуществления чего-то весьма простого…»
Э. Браун. «Изучаем JavaScript»
ОБЩИЕ СВЕДЕНИЯ
2
JavaScript — это язык программирования для Интернета. Это
объектно-ориентированный язык программирования,
используемый для создания динамических интерактивных
HTML-страниц (на стороне клиента). Является универсальным
(многопарадигменным) и лёгким для изучения.
JavaScript был создан Бренданом Айком (Brandan Eich), работавшим в компании Netscape в
1995 году. Изначально он был назван Mocha, потом много раз менял имена, пока не стал
JavaScript. К языку программирования со строгой типизацией Java этот язык не имеет никакого
отношения. Первоначальная версия языка была ограничена только браузером Netscape. В
настоящее время этот язык поддерживается всеми Интернет-браузерами и является составной
частью триумвирата HTML+CSS+JS.
ОСНОВНЫЕ ПРЕИМУЩЕСТВА JS
3 ...хорош в том, для чего предназначен
⚫ Для использования языка не требуется специальный компилятор,
поскольку JS-код исполняется внутри браузера в режиме интерпретации
⚫ В связи с большим количеством примеров и очень широкой
распространённостью язык JS легко изучать и использовать на практике
⚫ Правильно скомпонованная веб-страница будет изображена, даже если в
коде JS имеются ошибки
⚫ JS работает в разных браузерах и на разных платформах
⚫ Создано большое количество библиотек, увеличивающих и без того
достаточно широкие возможности этого языка (например, использование
технологии AJAX)
⚫ JS делает страницы сайта интерактивными, динамичными и
привлекательным для посетителей
СТОИТ ЛИ ИЗУЧАТЬ JS? 4
ПОДКЛЮЧЕНИЕ JAVASCRIPT
1. Программы на языке JavaScript можно вставить в
5
любое место HTML-документа при помощи тега SCRIPT.
Встретив тег SCRIPT, браузер исполняет его содержимое,
и только после этого отображает оставшуюся часть
документа.
2. Если JavaScript-кода много – его выносят в отдельный
файл, который подключается к HTML с помощью строк
вида
Изучаем JavaScript
alert( 'Я - JavaScript!' ); Вместо локального пути можно использовать полный URL
(
ПРИМЕРЫ ФРАГМЕНТОВ НА JS
6 2 function sayHello()
{
1 var now = new Date();
var tit = document.title;
var c = 0; var hours = now.getHours();
var dd = ":";
function writetitle() {
document.title = tit.substring(0,c); if (now.getMinutes() < 10) dd = ":0";
if(c == tit.length) { var time = "" + hours + dd + now.getMinutes();
с = 0; document.write( "Сейчас " + time + " и мы желаем Вам ");
setTimeout("writetitle()", 3000);
} else {
if (hours < 5 || hours > 19)
c++; document.write("доброй ночи!");
setTimeout("writetitle()", 200); else if (hours < 11)
} document.write("счастливого утра!");
}
else document.write("хорошего дня!");
writetitle(); }
...
3
...СИНТАКСИС И СЕМАНТИКА
7
С точки зрения синтаксиса язык напоминает С и Java, однако семантика
построения выражений своя собственная, напоминающая языки Smalltalk
либо Lisp. Не является классическим объектно-ориентированным языком.
В базовой инфраструктуре JаvаSсriрt определен минимальный набор
библиотек для работы с текстом, массивами, датами и регулярными
выражениями, но средства ввода-вывода данных в него не входят.
⚫ Используется набор символов Unicode
⚫ Язык является чувствительным к регистру, все идентификаторы регистрозависимы
⚫ В названиях переменных можно использовать буквы, подчёркивание, символ $, цифры
⚫ Названия переменных не могут начинаться с цифры
⚫ Для оформления однострочных комментариев используются //, многострочные от /* до */
⚫ Символ — разделитель инструкций (точка с запятой) не всегда обязателен. Например, его можно не
ставить, если инструкции находятся на разных строках.ТИПЫ ДАННЫХ 8 Типы JavaScript делятся на две категории: примитивные и var user = 'John', age = 25; объектные. К примитивным относятся числовой тип, строка var message = 'Hello'; текста (строковый тип) и булевый тип, который может принимать значения true и false. alert(message); В отличие от строго типизированных языков, таких как Java message = 3.14; или С#, интерпретатор JavaScript довольно свободно var _ = 1; преобразует типы значений. Например, если программа alert( message + _ ); ожидает строку, но получает число, она автоматически преобразует число в строку. Пepeмeнныe JavaScript нетипизированные. Это означает, что переменной можно присвоить значение любого типа, причем позже этой же переменной можно будет присвоить значение другого типа. Переменная, объявленная внутри функции, видна только для кода функции.
ТИПЫ ДАННЫХ ⚫ Число
⚫ Строка
9 ⚫ Булевый
⚫ Null
В JavaScript не различаются целочисленные ⚫ Объект
значения и значения с плавающей точкой! alert( 1/0 );
alert( "пять" * 2 );
Шестнадцатеричный литерал Восьмеричные официально var checked = true;
начинается с префикса 0х не поддерживаются. var age = null;
Math.round( .6 );
Существуют специальные числовые значения Math.abs( -5 );
Infinity (бесконечность) и NaN (ошибка вычислений).
Можно использовать как В случае переполнения, потери значимости 3.14
одинарные, так и двойные или деления на нуль арифметические Math.PI
кавычки. операторы JavaScript не генерируют ошибку. .7891
6.02e23
Если переменная объявлена, но в 0xff
неё ничего не записано, то её var u; 10000000
значение есть undefined alert(u); -Infinity
Значение NaN не равно u = Math.sqrt( -1 );
никакому другому значению, u != u
включая себя же.o.m() ОБЪЕКТНЫЙ ТИП ДАННЫХ
Объект может быть создан с помощью фигурных скобок {…} с
необязательным списком свойств.
1 Let user = { // объект
name: "John", Примитивные типы данных в JavaScript также обладают свойствами
age: 30, объектов.
"likes birds": true
}; Объекты не сравниваются по значению: два объекта не считаются
равными, даже если они будут иметь одинаковые наборы свойств с
alert( user.name ); одинаковыми значениями.
2 Var s = "helloworld!";
Var word = s.substring( s.indexOf(" ") + 1, s.length);
user["likes birds"] = false;
3 var rabbit = {} Можно сказать, что объекты в JavaScript
rabbit.run = function(n) { фактически реализованы как обычный
alert("Пробежал "+n+" метров!") ассоциативный массив, который хранит
} любые пары "ключ => значение".
rabbit.run(5) // Пробежал 5 метров
rabbit.run(7) // Пробежал 7 метровДАТА И ВРЕМЯ
Тип Date имеет конструктор для создания объектов и методы
для выполнения простых вычислений с участием дат.
var then = new Date(2020, 0, 1); // Первый день первого месяца 2020 года
var now = new Date(); // Текущие дата и время
now.getFullYear(); // Текущий год var d = new Date(2019, 0, 1, 2, 3, 4, 567);
then.getMonth(); // Номер месяца (начиная с нуля) alert( d ); // 1.01.2019, 02:03:04.567
then.getDay(); // Номер дня недели, 0 – воскресенье
now.getDate(); // Номер дня, начиная с 1 var d = new Date(2020, 1, 28);
now.getHours(); // Число часов d.setDate( d.getDate() + 2 );
alert( d ); // какой результат мы получим?
then.toString(); // "Wed Jan 01 2020 00:00:30 GMT+0300"
then.toLocaleDateString(); // "1 Январь 2020 г."
var start = new Date;
for (var i = 0; i < 100000; i++) {
var doSomething = i * i * i;
}
var end = new Date;
alert( "Цикл занял " + (end - start) + " ms" );var str = "Hello \n World"; СТРОКИ
тип символ в JavaScript отсутствует
alert( str + "\u{1F60D}" );
спец. действие
\0 Символ NUL
\t Табуляция
\n Перевод строки
\v Верт. табуляция
\f Перевод страницы
\r Возврат каретки
Знак доллара $ внутри строки используется для перевода строкового
\” Двойная кавычка значения в число и вычисления выражений. Для этого необходимо строку
помещать в одинарные обратные кавычки `...` , а числовое выражение
\’ Одинарная кавычка
заключить в фигурные скобки {}:
\\ Обратный слэш
`2 + 3 = ${2 + 3}` // получим строку '2 + 3 = 5'
\uxn Символ Unicode nМАССИВЫ
Индексация массивов Массивы в JavaScript могут быть негомогенными, т.е. их элементы не
начинается с нуля обязаны иметь одинаковый тип. Элементами массивов могут быть
другие массивы или объекты.
let arr1 = [1, 2, 3.14];
const arr2 = ["one", 2, true];
var fruits = ["Яблоко", "Апельсин", "Слива"]; function sumInput() {
let numbers = [];
var arrObj = [[1,{x:1, y:2}], [2, {x:3, y:4}]];
while (true) {
var arr = new Array(); let value = prompt("Введите число", 0);
if (value === "" || value === null || !isFinite(value))
alert(arr1[0]); break;
alert(fruits) numbers.push(+value); //число
alert(arrObj[1][1].x); // 3 }
a = arr2.length;
let sum = 0;
for (let number of numbers) {
arr2.push('zero'); // массив 'one',2,true,'zero'
sum += number;
arr[3]='новое значение' }
arr[0]='1' // 1,NaN,NaN,'новое значение' return sum;
}
fruits[2] = 'Груша’;
fruits[3] = 'Лимон’; alert( sumInput() );
alert( arr1.pop() ); // 3.14, массив: 1,2ВЫРАЖЕНИЯ И УСЛОВНЫЕ ОПЕРАТОРЫ
14
var i = 0;
var j = i++;
var matrix = [[1,2,3], [4,5,6], [7,8,9]]; alert("i=" + i + ", j=" + j);
alert(matrix[1][2]);
var year = prompt('В каком году появилась спецификация ECMA-262 5.1?', '');
if (year != 2011) {
alert( 'А вот и неправильно!' );
} else {
alert( 'Да вы знаток!' ); var age = prompt('Сколько вам лет?', 0);
} var message = (age < 3) ? 'Здравствуй, малыш!' :
(age < 18) ? 'Привет!' :
== - проверка на равенство (age < 100) ? 'Здравствуйте!' :
!= - проверка на 'Здравствуйте! Какой необычный возраст!';
неравенство alert( message );
&& - логическое AND
|| - логическое OR
var hour = 12, isWeekend = true;
if (hour < 10 || hour > 18 || isWeekend) {
alert( 'К сожалению, офис в указанное время закрыт' );
}ЦИКЛЫ
15
for (var i = 0; i < 3; i++) {
var i = 0; alert( i );
var i = 0; do { }
while (i < 3) { alert( i );
alert( i ); i++;
i++; } while (i < 3); var j = 0;
}
for (; j < 3; j++) {
alert( j );
}
var sum = 0;
while (true) {
for (var i = 0; i < 10; i++)
var value = +prompt("Введите число", '');
{
if (!value) break;
if (i % 2 == 0) continue;
sum += value;
alert(i);
}
}
alert( 'Сумма: ' + sum );ФУНКЦИИ
16 Функции предназначены для удобства структурирования
программы, в первую очередь для выделения действий,
неоднократно повторяющихся при выполнении кода
function min(a, b) {
function checkAge(age) { return a < b ? a : b;
if (age > 18) { }
return true;
} else { // Function Declaration
return confirm('Родители разрешили?'); function sum1(a, b) {
} return a + b;
} }
// Function Expression
var age = prompt('Ваш возраст?'); var sum2 = function(a, b) {
if (checkAge(age)) { return a + b;
alert( 'Доступ разрешен' ); }
} else {
alert( 'В доступе отказано' );
} Функции, объявленные как Function Declaration,
создаются интерпретатором до выполнения кода.ОБЪЕКТНАЯ МОДЕЛЬ ДОКУМЕНТА (DOM) 17 Объектная модель браузера (BOM) — языковая структура, позволяющая управлять окнами Интернет-браузера и обеспечивать их взаимодействие. Основные функции: управление фреймами, системные диалоги, история просмотра страниц, сохранение состояния сеанса и др. Объектная модель документа (DOM) — языковая структура, определяющая интерфейс программирования приложений для управления html и xml-документами. Данный программный интерфейс позволяет на уровне исполняемого кода получить доступ к содержимому html и xml-документов, изменять их содержимое, структуру и оформление. Модель DOM представляет соответствующий документ в виде иерархического дерева узлов. Каждый html-тэг образует узел с типом «элемент». Атрибуты элементов также считаются узлами. Текстовые узлы содержат только текст. У всех элементов DOM есть свойства и методы, которые можно использовать в программе.
ОБЪЕКТНАЯ МОДЕЛЬ ДОКУМЕНТА (DOM) 18
ПОЛУЧЕНИЕ ИНФОРМАЦИИ О DOM
Функция, которая обходит все дерево DOM и выводит
Модель DOM предоставляет
его на консоль, начиная с узла document:
методы-получатели (get ...) , которые
позволяют быстро находить function printDOM (node, prefix) {
определенные элементы HTML. console.log(prefix + node. nodeName);
for (let i=0; iИСПОЛЬЗОВАНИЕ DOM
20
table { border-collapse: collapse; }
td { border: 1px solid black; padding: 3px 5px; }
1:1 2:1 3:1 4:1 5:1
1:2 2:2 3:2 4:2 5:2 1:3
2:3 3:3 4:3 5:3 1:4 2:4
3:4 4:4 5:4 1:5 2:5 3:5
4:5 5:5
var table = document.body.children[0];
for (var i = 0; i < table.rows.length; i++) {
var row = table.rows[i];
row.cells[i].style.backgroundColor = 'red';
}ИСПОЛЬЗОВАНИЕ DOM
21
Обучение JavaScript
Обучение JavaScript
Выделим этот элемент
function go() {
var elem =
document.getElementById('myElement');
elem.style.background = 'red';
}JAVASCRIPT & CANVAS 22 http://beloweb.ru/novichkam/10-krutyih-primerov-rabotyi-html5-canvas.html
Вы также можете почитать
