Изучение JavaScript

Содержание

Слайд 2

Document Object Model -DOM Когда HTML-элементы веб-страницы обрели более четкое, структурированное

Document Object Model -DOM

Когда HTML-элементы веб-страницы обрели более четкое, структурированное определение

в так называемой объектной модели документа — DOM (Document Object Model), язык JavaScript получил еще большие возможности. Объектная модель документа позволила относительно просто добавлять новый абзац или сфокусироваться на какой-нибудь части текста и внести в нее изменения.
Поскольку как в JavaScript, так и в PHP поддерживаются многие элементы синтаксиса структурного программирования, используемые в языке программирования C, эти два языка очень похожи друг на друга. Оба относятся к языкам высокого уровня. К примеру, у них весьма слабая типизация, позволяющая легко приводить переменную к новому типу данных лишь за счет применения ее в новом контексте.
Эта модель разбивает части HTML-документа на отдельные объекты, у каждого из которых есть собственные свойства и методы и каждым из которых можно управлять с помощью JavaScript.
Свойства есть у каждого объекта.
Методы это возможности объектов.
В JavaScript объекты, свойства и методы разделяются с помощью точек. (Write – это метод, а document это объект)
Слайд 3

Возможности JavaScript Чтобы произвести впечатление на посетителей вашего сайта, можно создать

Возможности JavaScript

Чтобы произвести впечатление на посетителей вашего сайта, можно создать

активный интерфейс пользователя, используя JavaScript:
Создать динамические (раскрывающиеся) меню - как в верхней части страницы, так и в ее левой части.
Открывать увеличенные графические изображения и фрагменты текстов в отдельных окнах JаvаSсгiрt-а.
Использовать изображения-"ролловеры" (изменяющиеся при наведении на них указателя мыши).
Изменять вид указателя мыши или использовать "шлейф" - картинку, которая "бегает" вокруг него или "тянется" за ним.
Создавать НТМL-страницы на ходу, подстраиваясь под действия пользователя.
Вставлять окна предупреждений и диалоговые окна с пользователем.
Размещать различные сообщения в строке состояния окна браузера, в том числе в (бегущей строке.
Использовать бегущую строку в поле, вставленном на веб-страницу.
Используя набор функций JavaScript для работы с датой и временем, создать часы, календари, вывести на веб-страницу информацию о времени ее последнего изменения.
Использовать JavaScript для проверки правильности информации, вводимой в формы посетителями вашего сайта. Это поможет вам сэкономить время и деньги. Если в пределах формы необходимы вычисления, то их можно выполнить в JavaScript непосредственно на компьютере пользователя, и вам не понадобится полный сервер, поддерживающий CGI (скрипты, которые, в отличие от кодов JavaScript, выполняются на веб-сервере, а не на компьютере пользователя).
Проверять на компьютере пользователя наличие плагинов (специальных программ-надстроек браузера, выполняющих определенную функцию, например, Flash) для просмотра вашей страницы и, если их нет, направлять пользователя на другую страницу для их "закачивания".
Создавать слайд-шоу (в том числе с "зацикленной" демонстрацией или демонстрацией в случайном порядке)
Создавать динамические (анимированные) баннеры.
Использовать динамические фреймы.
Слайд 4

Практика Рассмотрим простейший вариант html документа с включением JavaScript сценария Наберите

Практика

Рассмотрим простейший вариант html документа с включением JavaScript сценария
Наберите код в

блокноте или в DreamWeaver. Сохраните файл с именем 1-1.html
В этом примере следует также обратить внимание на пару тегов . Они используются в том случае, когда вам хочется предоставить альтернативный пользователям, на чьих браузерах JavaScript не поддерживается или отключен. Эти теги применяются по вашему усмотрению и не являются обязательными, но будет лучше, если вы ими воспользуетесь, поскольку предоставить альтернативу в виде статичного HTML тем операциям, для которых применяется JavaScript, обычно не составляет большого труда.
Примечание. Все кавычки в JavaScript прямые (“ ‘ )
Слайд 5

Включение файлов JavaScript В дополнение к внесению кода JavaScript непосредственно в

Включение файлов JavaScript

В дополнение к внесению кода JavaScript непосредственно в HTML-документы

вы можете включать в них файлы с кодом JavaScript или со своего сайта, или из любого места в Интернете. Для этого используется следующий синтаксис:

или
Выполните пример 4.2 из папки урока, загрузив в браузере файл 4.2.html
Слайд 6

Интерактивное приложение Подключение приложения на javascript Выполнить программу из папки 4.2

Интерактивное приложение

Подключение приложения на javascript
Выполнить программу из папки 4.2

Слайд 7

Отладка кода JavaScript Браузер Способ доступа к сообщениям об ошибках JavaScript

Отладка кода JavaScript

Браузер Способ доступа к сообщениям об ошибках JavaScript
Apple Safari В Safari

нет консоли ошибок, включенной по умолчанию, но вы можете включить эту функцию, выбрав в меню пункты SafariНастройкиДополнения и установив флажок Показывать меню "Разработка" в строке меню. Кроме того, предпочтение можно отдать JavaScript-модулю Firebug Lite, который многие считают более простым в использовании
Google Chrome Щелкните на значке меню, который похож на страницу с загнутым углом, и выберите пункт РазработчикамКонсоль JavaScript. Можно также нажать сочетание клавиш Ctrl+Shift+J на PC или Command+Shift+J на Mac
Microsoft Internet Explorer Выберите команду СервисСвойства обозревателяДополнительно, снимите флажок Отключить отладку сценариев и установите флажок Показывать уведомление о каждой ошибке сценария
Mozilla Firefox Выберите команду ИнструментыКонсоль ошибок или воспользуйтесь сочетанием клавиш: Ctrl+Shift+J на PC или Command+Shift+J на Mac
Opera Выберите команду ИнструментыДополнительноКонсоль ошибок
Выполните в консоли браузера Google Chrome отладку команды document.write("Привет мир) – команда вывода на экран текста, исправьте ошибку.
Слайд 8

Переменные В JavaScript нет никаких идентификационных символов переменных, таких как знак

Переменные

В JavaScript нет никаких идентификационных символов переменных, таких как знак доллара

($) в PHP. Вместо этого в отношении имен переменных действуют следующие правила.
Имена переменных могут включать только буквы a–z, A–Z, цифры 0–9, символ $ и символ подчеркивания (_).
Никакие другие символы, включая пробелы или знаки пунктуации, использовать в именах переменных не допускается.
Первым в имени переменной может быть символ из диапазонов a–z, A–Z, символ $ или символ подчеркивания _ (и никаких цифр).
Имена чувствительны к регистру. Имена Count, count и COUNT принадлежат трем разным переменным.
Ограничений на длину имени переменной не существует.
Строковые переменные
warning = 'Осторожно!‘
greeting = "Привет! "
Выполните в консоли команду:
status = "Все системы работают успешно"
document.write(status);
document.write(13 + 2)
Самостоятельно, добавьте перевод строки между этими двумя выводами
Вычислите 44 по модулю 5.

Арифметические операторы
Оператор Описание Пример
+ Сложение j + 12
– Вычитание j – 22
* Умножение j * 7
/ Деление j / 3.13
% Деление по модулю (остаток от деления) j % 6
++ Инкремент ++j (приращения)
–– Декремент ––j (отрицательного приращения)

Слайд 9

Управляющие символы Объединение строк Символ Назначение \f Перевод страницы \n Новая

Управляющие символы Объединение строк

Символ Назначение
\f Перевод страницы
\n Новая строка
\r Возврат каретки
\t Табуляция
Объединение (конкатенация) строк в JavaScript осуществляется

с использованием знака «плюс» (+):
document.write("У вас " + messages + " сообщения.")
name = "James "
name += " Dean "
Выведите полное имя (результат прямо в панели Console)
Проверьте как будет выведена переменная heading = "Name\tAge\tLocation”
Точка с запятой
Между отдельными инструкциями точка с запятой, не требуется.
x += 10
Но при необходимости иметь в строке более одной инструкции их нужно разделить точками с запятыми:
x += 10; y -= 5; z = 0
Последнюю точку с запятой можно опустить, поскольку последняя инструкция будет завершена символом новой строки.
Использование комментариев
// Это комментарий
многострочных комментариев:
/* Это раздел
многострочного комментария,
не подвергаемого
интерпретации */
Слайд 10

Операторы присваивания Эти операторы используются для присваивания значений переменным. Их линейка

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

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

простым знаком равенства (=) и продолжается сочетаниями +=, -= и т. д. Оператор += добавляет значение, находящееся справа, к переменной, находящейся слева, вместо того чтобы целиком заменить значение переменной в левой части.
Поэтому, если изначально значение переменной count было 6, то оператор:
count += 1
установит для нее значение 7 точно так же, как и более привычный оператор присваивания:
count = count + 1