Основы JavaScript
История языка
Переменные
Выражения
Операции
Логические операции
Тег «script»
Современная разметка
  Необходимо написать сценарий, определяющий площадь прямоугольного треугольника по заданным катетам. Сценарий разместим в
События и обработчики событий
Объект checkbox
Функции
Функции
Возврат значения функциями - оператор return
 События и объекты
Условный оператор
Свойства объектов языка JavaScript
Объекты браузеров
1.17M
Категория: ПрограммированиеПрограммирование
Похожие презентации:
JavaScript. Java-апплет
JavaScript. Java-апплет
Компьютерные языки разметки (ПОиБМС)
Компьютерные языки разметки (ПОиБМС)
Javascript. Data types
Javascript. Data types
Язык программирования JavaScript
Язык программирования JavaScript
Основы языка JavaScript
Основы языка JavaScript
Введение в JavaScript
Введение в JavaScript
Тема 11. Введение в JavaScript
Тема 11. Введение в JavaScript
Язык JavaScript
Язык JavaScript
Функции, события. Тема 1.6
Функции, события. Тема 1.6
JavaScript
JavaScript

JavaScript

1. Основы JavaScript

2. История языка

• Язык основан в 1995 году компанией Netscape. Изначально
предназначался в роли языка сценариев для их браузера
Navigator 2.
• В начале пути носил название LiveScript. Разработчики
воспользовались волной популярность Java и сменили название
на JavaScript.

3.

• JavaScript позволяет создавать приложения, выполняемые как на
стороне клиента, так и на стороне сервера. При разработке
приложений обоих типов используется так называемое ядро, в
котором содержатся определения стандартных объектов. Клиентские
приложения выполняются браузером на машине пользователя.
• Программа (сценарий) на языке JavaScript представляет собой
последовательность операторов. Если несколько операторов
располагаются на одной строке, то между ними следует поставить
знак "точка с запятой" ( ; ). Если каждый оператор размещается на
одной строке, то разделитель можно не писать. Один оператор может
располагаться на нескольких строках.

4.

5. Переменные

Переменные используются для хранения данных. Переменные в сценарии представляются с помощью
идентификаторов. Идентификатор должен начинаться с буквы латинского алфавита, либо с символа
подчеркивания. Далее может указываться последовательность, содержащая буквы латинского алфавита,
цифры или знак подчеркивания, например, testi, _my_test, test_l. Тип переменной зависит от хранимых в
ней данных, при изменении типа данных меняется тип переменной.
Определить переменную можно с помощью оператора var, например:
• var test1
• Оператор var можно использовать и для инициализации переменной, например, конструкцией
• var test2=276
• Оператор присваивания может быть использован в любом месте программы и способен изменить не
только значение, но и тип переменной. Оператор присваивания выглядит так
• а=b
• где а — переменная, которой мы хотим задать некоторое значение; ь — выражение, определяющее
новое значение переменной. Пусть в сценарии описаны следующие переменные
• var n=3725
• var x=2.75
• var p=true
• var s="Выполнение завершено"

6. Выражения

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

7. Операции

Операция
Операции
Название
+
Сложение
-
Вычитание
*
Умножение
/
Деление
%
Остаток от деления целых чисел
++
Увеличение значения операнда на единицу
--
Уменьшение значения операнда на единицу
Сокращенные формы оператора присваивания
Оператор
Эквивалентный оператор присваивания
X += Y
X = X+Y
X -= Y
X = X-Y
X *= Y
X = X*Y
X /= Y
X = X/Y
X %= Y
X = X%Y

8. Логические операции

А
В
A&&B
A||B
true
true
false
false
true
false
true
false
true
false
false
false
true
true
true
False

9. Тег «script»

Программы на JavaScript могут быть
вставлены в любое
место HTML-документа
с помощью тега
<script>.

10. Современная разметка

Тег <script> имеет несколько атрибутов, которые редко используются, но всё ещё могут встретиться в старом
коде:
Атрибут type: <script type=…>
Атрибут language: <script language=…>

11.

JavaScript - новый язык для составления скриптов
Размещение JavaScript на HTML-странице
Результат

12.   Необходимо написать сценарий, определяющий площадь прямоугольного треугольника по заданным катетам. Сценарий разместим в

Необходимо написать сценарий, определяющий площадь прямоугольного
треугольника по заданным катетам. Сценарий разместим в разделе
<BODY> HTML-документа

13.

Все, что стоит между тэгами <script> и </script>, интерпретируется
как код на языке JavaScript.
Команда document.write() - одна из наиболее важных команд,
используемых при программировании на языке JavaScript.
Команда document.write() используется, когда необходимо чтолибо написать в текущем документе (в данном случае таком
является наш HTML-документ).
Так наша небольшая программа на JavaScript в HTML-документе
пишет фразу "А это JavaScript!".

14. События и обработчики событий

• События, главным образом, инициируются теми или иными
действиями пользователя.
• Если он щелкает по некоторой кнопке, происходит событие "Click".
Если указатель мыши пересекает какую-либо ссылку гипертекста происходит событие MouseOver.
• Существует несколько различных типов событий. Мы можем
заставить нашу JavaScript-программу реагировать на некоторые из
них.
• Так, в результате щелчка по кнопке может создаваться выпадающее
окно. Это означает, что создание окна должно быть реакцией на
событие щелка - Click. Программа - обработчик событий, которую мы
должны использовать в данном случае, называется onClick.
• И она сообщает компьютеру, что нужно делать, если произойдет
данное событие.

15.

• Объект button имеет метод click() - о нем будем говорить позже.
• Обработчик событий onClick позволяет выполнить оператор или
вызвать функцию языка JavaScript при щелчке мыши на кнопке,
которой соответствует в программе определенный объект button.
• Пример
• Приведем простой пример, например, выведем текущую дату и
время посредством нажатия кнопки. Будем использовать событие
onClick для вызова метода alert() и конструктора Date()
• <form>
• <input type="button" value="Date and Time" onClick='alert(Date())'>
• </form>
• <form>
• <input type="button" value="Click me" onClick="alert('Yo')">
• </form>

16. Объект checkbox

• Контрольный переключатель - это кнопка (флажок), которую можно
установить в одно из двух состояний: включено или выключено.
Объекты checkbox являются свойствами объекта form и должны быть
помещены в теги <form> . . . </form>. Простой контрольный
переключатель:
• Синтаксис:
• <input name="checkboxName" type="checkbox" value="checkboxValue"
[checked] [onClick="handlerText"]>textToDisplay

17. Функции

• Функции представляют собой лишь способ связать вместе нескольких
команд.
• Пример: Написать скрипт, печатающий некий текст три раза подряд.
Для начала рассмотрим простой подход:
1
2

18. Функции

Основным элементом языка JavaScript является функция.
Описание функции имеет вид
function F (V) {S}
• где F — идентификатор функции, задающий имя, по которому
можно обращаться к функции; v — список параметров функции,
разделяемых запятыми; s — тело функции, в нем задаются
действия, которые нужно выполнить, чтобы получить результат.
Необязательный оператор return определяет возвращаемое
функцией значение.

19.

20. Возврат значения функциями - оператор return

• Синтаксис:
• return (value);
• return value;
• Оператор return завершает выполнение функции и возвращает значение заданного
выражения. Скобки в этом операторе можно не использовать. Оператор return может
отсутствовать в функции, если функция не возвращает значение.
• Оператор return обычно используется для возврата одного значения, однако его можно
применять для возврата массива:
• function retarray() {
• var sarray = new Object();
• sarray[1] = "Java";
• sarray[2] = "Script";
• return (sarray);
• }

21.  События и объекты

События и объекты
Событие
Объекты
Когда происходит событие
Abort
image
Отказ от загрузки изображения
Blur
windows, элементы формы
Потеря объектом фокуса
Change
text, textarea, select
Изменение значения элемента
Click
button, radio, checkbox, submit, reset, link
Щелчок на элементе или связи
DragDrop
windows
Перетаскивается мышью объект в окно браузера
Error
image, windows
Ошибка при загрузке документа или изображения
Focus
windows, элементы формы
Окно или элемент формы получает фокус
KeyDown
document, image, link, textarea
Нажатие клавиши клавиатуры
KeyPress
document, image, link, textarea
Удержание нажатой клавиши клавиатуры
KeyUp
document, image, link, textarea
Отпускаются клавиши клавиатуры
Load
Тело документа
Загружается документ в браузер
MouseDown
document, button, link
Нажатие кнопки мыши
MouseOut
area, link
Перемещение курсора из области изображения или связи
MouseOver
link
Перемещение курсора над связью
MouseUp
document, button, link
Отпускается кнопка мыши
Move
windows
Пользователь или сценарий перемещает окно
Reset
form
Нажатие кнопки Reset формы
Resize
windows
Пользователь или сценарий изменяет размеры окна
Select
text, textarea
Выбирается поле ввода элемента формы
Submit
form
Нажатие кнопки Submit формы
Unload
Тело документа
Пользователь закрывает документ

22. Условный оператор

• При составлении программы часто необходимо выполнение различных
действий в зависимости от результатов проверки некоторых условий. Для
организации ветвлений можно воспользоваться условным оператором,
который имеет вид:
• if В {31} else {32}
• где в — выражение логического типа; si и 32 — операторы. Выполнение
условного оператора осуществляется следующим образом. Вычисляется
значение выражения в. Если оно истинно, то выполняются операторы si,
если ложно — операторы S2. Если последовательность операторов si или
32 состоит лишь из одного оператора, то фигурные скобки можно
опустить. Возможна сокращенная форма условного оператора:
• if В {S}
• где в — выражение логического типа; з — последовательность
операторов. Выполнение краткого условного оператора осуществляется
так: вычисляется значение выражения в, если оно истинно, то
выполняются операторы з.

23. Свойства объектов языка JavaScript

• В объектно-ориентированном программировании используется
также термин свойство. Свойство - это именованное значение,
которое принадлежит объекту. Все стандартные объекты языка JS
имеют свойства. Например, свойство bgColor объекта document.
данное свойство соответствует атрибуту bgColor тега <body>

24. Объекты браузеров

• Объекты браузера, - это объекты, поддерживаемые в среде браузера:
window, location, history, document, navigator. Объекты,
перечисленные в таблице, создаются автоматически при загрузке
документа в браузер.
Имя объекта
Описание
window
Объект верхнего уровня в иерархии объектов языка JavaScript. Фреймосодержащий документ также имеет объект window.
document
Содержит свойства, которые относятся к текущему HTML-документу, например имя каждой формы, цвета, используемые для отображения документа,
и др. В языке JS большинству HTML-тегов соответствуют свойства объекта document.
location
Содержит свойства, описывающие местонахождение текущего документа, например адрес URL.
history
Содержит информацию обо всех ресурсах, к которым пользователь обращался во время текущего сеанса работы с браузером.

25.

Slide title
1
Click to add Title
2
Click to add Title
3
Click to add Title
4
Click to add Title
5
Click to add Title
English     Русский Правила