Javascript - Язык Сценариев

JavaScript - язык
сценариев
JavaScript - язык сценариев предназначенных
для придания веб-страницам интерактивности и
динамичности
• Уникальный язык JavaScript был создан программистом Брендоном Эйхом в 1995 году.
• Сценарий программный код – набор инструкций, который не требует предварительной обработки
• (компиляции) перед запуском.
• Код JavaScript интерпретируется браузером во время загрузки веб- страницы. Интерпретатор браузера
выполняет построчный анализ, обработку и выполнение исходной программы или запроса.
• • JavaScript – объектно-ориентированный язык. Он поддерживает ряд встроенных объектов, а
• также позволяет создавать или удалять пользовательские объекты. Объекты могут наследовать
• свойства непосредственно друг от друга, образуя цепочку «объект-прототип».
• • Программы на JavaScript – обычный текст. Язык не требует специальной среды разработки,
• только удобный текстовый редактор.
JavaScript – полноценный язык программирования высокого
уровня, располагающий всеми необходимыми структурами.
• Синтаксис JavaScript простой и дружелюбный, в части
структурного программирования он похож на синтаксис языков C
и Java. Но объектная модель JavaScript уникальна, она связана с
его применением на веб-страницах.
DHTML и объектная модель документа
• DHTML – динамический HTML – это набор средств, которые позволяют создавать
интерактивные Web-страницы без увеличения загрузки сервера.
• В этой концепции определенные действия посетителя ведут к изменениям
внешнего вида и содержания страницы без обращения к серверу. Это способ
создания интерактивного веб-сайта, использующий сочетание статичной разметки
HTML, стилей CSS и выполняемых на стороне клиента сценариев JavaScript.
• Динамический HTML основан на DOM (Document Object Model) – объектной
модели документа.
• DOM является главным принципом функционирования сценариев (программ)
JavaScript на веб-страницах.
• Объектная модель документа (DOM) – единый для всех браузеров интерфейс
(средство взаимодействия между элементами веб-страницы), позволяющий
программам (не только JavaScript, но и других языков) получать доступ к любому
элементу документа, а также изменять его содержимое, структуру и оформление.
Укрупненное дерево DOM для файла
index.html
• Для интернет-сайтов документом является

содержимое исходного HTML-кода страницы.
• В DOM всё содержимое страницы
рассматривается как объект, у которого есть свои
свойства и методы. С их помощью можно
обратиться к любому отдельному элементу
страницы (который также является объектом со
своими свойствами) или создать новый.
• Такая структура называется деревом DOM.
Укрупненное дерево DOM для файла index.html
тестовой страницы проекта. Формально высшее
положение в иерархии DOM занимает объект
window – окно браузера со своими
специфическими свойствами
• Программы JavaScript изначально назывались сценариями, так
как помещались в виде параметра в какой-либо тег и определяли
дальнейшую реакцию страницы на какое-либо событие элемента,
определенного этим тегом
• Javascript-код может быть
размещен как на самой
<html>
странице, так и во внешнем
файле. <head>
<title>Заголовок документа</title>
Javascript-код на странице <link rel="stylesheet" type="text/css"
href="style.css">
Сценарии, написанные на языке
javascript, могут располагаться на
самой html-странице между <script language="javascript"> </script>
тегами <script></script>, которые
в свою очередь обычно </head>
находятся в тегах <head></head>.
<body>
• У тега <script> должен быть
указан параметр language,
</body>
который и указывает язык </html>
написания скрипта:
Теоретически подключить страницу
теги <script></script> могут script.js к html-странице. Для
располагаться и в теле документа (в этого в html существует
тегах <body></body>). Выполняться тег <script>
такой сценарий будет тогда, когда
браузер "дочитает" страницу до этого
места (до тегов <script></script>). html>
Использовать такой способ сейчас не <head>
принято. <title>Заголовок документа</title>
<link rel="stylesheet" type="text/css"
Javascript-код во внешнем файле href="style.css">
<script type="text/javascript"
Создайте в блокноте страницу (пока src="script.js"></script>
пустую) и сохраните ее как script.js в ту </head>
же папку, где лежит html-страница: <body> </body>
</html>
JavaScript обработчики событий
• При интерпретации html-страницы браузер создает объекты
javascript. Они хранятся в виде иерархической структуры, отражая
структуру документа, например:
JavaScript обработчики событий
• На самом верхнем уровне находится объект window, представляющий окно
браузера и являющийся "родителем" всех остальных объектов. Расположенные
ниже могут иметь свои подчиненные объекты. Так объект document (текущая
страница) может иметь дочерний объект form (форма) и т.д.
Все объекты имеют методы (отделяются от объекта точкой), например:

document.write позволяет писать текст в текущую страницу,
window.open открывает новое окно браузера.
Также объекты имеют свойства, например:

document.bgcolor содержит значение фонового цвета текущей страницы,
document.title содержит заголовок страницы.
Все инструкции программного кода заканчиваются точкой с запятой.

событие когда происходит обработчик события
Blur потеря объектом фокуса onBlur
Change пользователь изменяет значение элемента onChange
Click пользователь щелкает мыщью по объекту onClick
DblClick пользователь делает двойной щелчок мышью по объекту onDblClick
DragDrop пользователь перетаскивает мышью объект onDragDrop
Error возникновение javascript-ошибки onError
Focus окно или элемент формы получает фокус onFocus
KeyDown пользователь нажимает клавишу клавиатуры onKeyDown
KeyPress пользователь удерживает нажатой клавишу клавиатуры onKeyPress
KeyUp пользователь отпускает клавишу клавиатуры onKeyUp
Load документ загружается в браузер onLoad
MouseDown пользователь нажимает кнопку мыши onMouseDown
MouseOut указатель мыши выходит за пределы элемента onMouseOut
MouseOver указатель мыши помещается над элементом onMouseOver
MouseUp пользователь отпускает кнопку мыши onMouseUp
Move пользователь перемещает окно onMove
Reset пользователь нажимает кнопку "reset" формы onReset
Resize пользователь изменяет размеры окна или элемента onResize
Select пользователь выбирает элемент формы onSelect
Submit пользователь нажимает кнопку "submit" формы onSubmit
Unload пользователь закрывает документ onUnload
Создание JavaScript-функций
Функция - это именованная
последовательность операторов html>
(инструкций). <head>
Любая функция имеет следующий <title>Заголовок документа</title>
синтаксис: <link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
function имя (){ </head>
оператор; <body>
....... <div onClick="showMessage();">Щелкни меня</div>
оператор; </body>
} </html>
На странице script.js надо написать саму
функцию
Открываем "showMessage".
страницу script.js и пишем:
function showMessage()
{ alert ("Вы щелкнули по div-у"); }
функция "showMessage" будет выполнять одно действие - отображать окно

предупреждений с текстом "Вы щелкнули по div-у".
alert - это стандартная функция javascript, которая и выводит окно
предупреждений, мы лишь задаем текст для этого окна.
В javascript есть стандартный набор функций, который можно использовать

(например, alert) и так называемые пользовательские функции, т.е. те, которые мы
создаем сами.
Механизм работы обработки событий:
• В html-странице мы привязываем к нужному элементу
обработчик события (onClick, onMouseUp и т.д.), в качестве
значения которого указываем имя функции, которая и должна
сработать, когда настанет событие.
• На странице с расширение .js мы пишем код этой функции, т.е.
инструкции, которые должны быть выполнены, если функция
инициализирована (к ней обратились).
<input type="button" name="button" value="Вычислить"
onClick="areaRectangle();"><br><br>
В страницу script.js и напишем заготовку для функции:

function areaRectangle()
{}
Теперь надо написать тело функции.
Для начала объявим три переменные: a - значение длины прямоугольника, b -
значение ширины прямоугольника, s - площадь прямоугольника:
function areaRectangle(){
var a=document.forma1.t1.value;
var b=document.forma1.t2.value;
var s=a*b;
document.forma1.res.value=s
}
Параметры функции
• function areaRectangle(obj){
• var a=obj.t1.value;
• var b=obj.t2.value;
• var s=a*b;
• document.forma1.res.value=s
...... <input type="button" name="button" value="Вычислить"

onClick="areaRectangle(forma1);"><br><br>
Объект math в javascript
метод описание
abs абсолютное значение
sin, cos, tan тригонометрические функции
log натуральный логарифм
exp экспонента
pow показательная функция
sqrt квадратный корень
min наименьшее значение
max наибольшее значение
Задача
Вычислить площадь треугольника по 3 сторонам
<html> <head> <title>math javascript</title>
<link rel="stylesheet" type="text/css" href="style1.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<form name="forma3"> Сторона 1
<input type="text" size="8" maxlength="8" name="st1">
Сторона 2 <input type="text" size="8" maxlength="8" name="st2">
Сторона 3 <input type="text" size="8" maxlength="8" name="st3"><br><br>
<input type="button" value="Вычислить" onClick="areaOfTriangle(forma3);">
<input type="reset" value="Отменить"> Результат
<input type="text" size="8" maxlength="8" name="res">
</form>
</body>
</html>
obj.res.value=s;
Решение
function areaOfTriangle(obj){ Также обратите внимание на первые три строчки
var a=1*obj.st1.value; функции, они начинаются с 1*, т.е. наши переменные
var b=1*obj.st2.value; a, b, c мы умножили на единицу. Зачем? Помните, в
первом уроке мы говорили о том, что у каждой
var c=1*obj.st3.value; переменной есть тип, который определяется
var p=(a+b+c)/2; автоматически.
var s=Math.sqrt(p*(p-a)*(p-b)*(p-c));
Так как наши переменные приходят из текстового
s=s.toFixed(2); поля, то и тип они имеют string, т.е. они
obj.res.value=s; воспринимаются функцией не как числа, а как буквы.
}
Если бы мы перемножали эти переменные, то их тип автоматически переопределился бы к number, но
мы их складываем, а знак операции + расценивается в данном случае, как конкатенация строк. Чтобы
этого не происходило, мы и умножили наши переменные на единицу, преобразовав их таким образом к
типу number.
Ветвления в программе - оператор if
if B {S1}
else {S2}
где B - выражение логического типа, а S1 и S2 - операторы.

Задание 1
• Открыть файл index.html из каталога test. Оценить

взаимодействие ссылок. Разобраться в сценарии их поведения
Зачем
обращаться
к объекту
(элементу)?
• Чтобы
прочитать
или изменить
значения его
свойства.
• Способ 3. В теге
Возможности отображения JavaScript
• JavaScript может "отображать" данные различными

способами:
• Запись в HTML-элемент с помощью innerHTML.
• Запись в HTML-вывод с помощью document.write().
• Запись в окно оповещения с помощью window.alert().
• Запись в консоль браузера с помощью console.log().
Использование InnerHtml
• Чтобы получить доступ к HTML-элементу, JavaScript может
использовать метод Document. getElementById (ID) .
• Атрибут ID определяет элемент HTML. Свойство InnerHtml определяет
HTML-содержимое:
• Пример
• <!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body> </html>
Использование документа. Write ()
• Для целей тестирования удобно использовать Document. Write ():
• Пример
• <!DOCTYPE html>
<html>
<body>

<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
При полной загрузке HTML-документа с помощью Document.
Write () будет удален весь существующий HTML-код:
• <!DOCTYPE html>
<html>
<body>

<button type="button" onclick="document.write(5 + 6)">Try it</button>
</body>
</html>
Использование окна. Alert ()Для отображения
данных можно использовать окно оповещения:
<!DOCTYPE html>
<html>
<body>

<script>
window.alert(5 + 6);
</script>
</body>
</html>
Использование консоли. log ()
• Для целей отладки можно использовать метод Console. log () для

отображения данных.
• <!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
Ключевое слово Описание
break Завершает переключение или цикл
continue Выскакивает из петли и начинается сверху
debugger Останавливает выполнение JavaScript и вызывает (если доступно)
функцию отладки
do ... while Выполняет блок инструкций и повторяет блок, в то время как
условие истинно
for Помечает блок инструкций для выполнения, если условие истинно
function Declares a function
if ... else Помечает блок инструкций для выполнения в зависимости от
условия
return Exits a function
switch Помечает блок инструкций для выполнения в зависимости от
различных вариантов
try ... catch Реализует обработку ошибок в блоке инструкций
var Объявляет переменную
Арифметические операторы JavaScript
Арифметические операторы используются для вычисления чисел:
.
Оператор Описание
+ Дополнение
- Вычитание
* Умножения
/ Division
% Модуль (остаток деления)
++ Увеличение
-- Уменьшения
Операторы присваивания JavaScript
Операторы присваивания назначают значения переменным JavaScript.
Оператор присваивания сложения (+ =) добавляет значение в
переменную.
Оператор В примере То же, как
= x=y x=y
+= 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
Операторы сравнения JavaScript
== равно
=== равное значение и одинаковый тип
!= не равны
!== не равное значение или не равный тип
> Больше
< Менее
>= больше или равно
<= меньше или равно
? тройной оператор
Логические операторы JavaScript
&& логические и
|| логические или
! Логическое не
Объекты JavaScript
• Переменные JavaScript являются контейнерами для значений данных.
• Этот код присваивает простое значение (Fiat) переменной с именем Car:
• var car = "Fiat";
• Объекты также являются переменными. Но объекты могут содержать много
значений.
• Этот код присваивает переменной с именем Car множество значений (Fiat, 500,
White):
• var car = {type:"Fiat", model:"500", color:"white"};
Значения записываются как Name: пары значений (имя и значение, разделенные

двоеточием).
• Объекты JavaScript представляют собой контейнеры для именованных
значений , называемых свойствами или методами.
Доступ к свойствам объекта
Доступ к свойствам объекта можно получить двумя способами.
objectName.propertyName
or
objectName["propertyName"]
Пример 1
person.lastName;
Пример 2
person["lastName"];
Методы объекта
Объекты могут также иметь методы.
Методы — это действия , которые могут быть выполнены для объектов.
Методы хранятся в свойствах как определения функций.
Свойство Значение свойства
firstName John
lastName Doe
age 50
eyeColor blue
fullName function() {return this.firstName + " "
+ this.lastName;}
Ja vaS crip t М ас си вы Ч то т ак ое ма сс ив?
Массивы JavaScript используются для хранения нескольких

значений в одной переменной.
var cars = ["Saab", "Volvo", "BMW"];
❮ НазадДальше ❯
Массив — это специальная переменная, которая может содержать более одного

значения за раз.
Если у вас есть список элементов (список названий автомобилей, например),
хранение автомобилей в одиночных переменных может выглядеть так:
var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";
Однако, что, если вы хотите, чтобы петля через автомобили и найти конкретный
один? А что, если у вас не 3 машины, но 300?
Решение представляет собой массив!
Массив может содержать много значений под одним именем, и вы можете получить
доступ к значениям, ссылаясь на номер индекса.

Javascript - Язык Сценариев

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Javascript - Язык Сценариев

Загружено:

Авторское право:

Доступные форматы

JavaScript - язык

• Для интернет-сайтов документом является

Все объекты имеют методы (отделяются от объекта точкой), например:

Также объекты имеют свойства, например:

Все инструкции программного кода заканчиваются точкой с запятой.

функция "showMessage" будет выполнять одно действие - отображать окно

В javascript есть стандартный набор функций, который можно использовать

В страницу script.js и напишем заготовку для функции:

...... <input type="button" name="button" value="Вычислить"

где B - выражение логического типа, а S1 и S2 - операторы.

• Открыть файл index.html из каталога test. Оценить

• JavaScript может "отображать" данные различными

<h1>My First Web Page</h1>

<h1>My First Web Page</h1>

<button type="button" onclick="document.write(5 + 6)">Try it</button>

<h1>My First Web Page</h1>

• Для целей отладки можно использовать метод Console. log () для

Значения записываются как Name: пары значений (имя и значение, разделенные

Массивы JavaScript используются для хранения нескольких

Массив — это специальная переменная, которая может содержать более одного

Вам также может понравиться