Презентация "JavaScript страницы сценариев"

Подписи к слайдам:
  • язык сценариев, или скриптов.
  • Скрипт представляет собой программный код — набор инструкций, который не требует предварительной обработки (например, компиляции) перед запуском.
  • Код JavaScript интерпретируется движком браузера во время загрузки веб-страницы. Интерпретатор браузера выполняет построчный анализ, обработку и выполнение исходной программы или запроса.
  • Объектно-ориентированный язык с прототипным наследованием.
  • Поддерживает несколько встроенных объектов, и позволяет создавать или удалять свои собственные (пользовательские) объекты.
  • Объекты могут наследовать свойства непосредственно друг от друга, образуя цепочку объект-прототип.
РАСПОЛОЖЕНИЕ СЦЕНАРИЕВ

Подключение в любом месте

Размещение сценария в контейнерном теге

<script>

</script>

Вынос скриптов в заголовок Head

Загрузка сценария выполнится после загрузки всех элементов HTML-

документа

Внешние

скрипты (link)

Все описания хранятся в отдельном файле с расширением

.js

Сценарием JavaScript считается фрагмент кода, расположенный между дескрипторами <SCRIPT> и</SCRIPT>.
  • В виде обработчика события
  • Каждый html-элемент имеет JavaScript-события, которые срабатывают в определенный момент. Нужно добавить необходимое событие в html-элемент как атрибут, а в качестве значения этого атрибута указать требуемую
  • функцию.

  • Функция, вызываемая в ответ на срабатывание события, является обработчиком события. В результате
  • срабатывания события исполнится связанный с ним код.

    Этот способ применяется в основном для коротких

    сценариев, например, можно установить смену цвета фона при нажатии на кнопку:

В виде обработчика события

<script> var colorArray = ["#5A9C6E",

"#A8BF5A", "#FAC46E", "#FAD5BB",

"#F2FEFF"]; // создаем массив с цветами

фона

var i = 0; function changeColor(){ document.body.style.background = colorArray[i]; i++; if( i > colorArray.length - 1){ i = 0; } } </script> <button onclick="changeColor();">Change background </button> <html>

<head>

<title>Изучаем JavaScript</title>

</head>

<body>

Текст документа

<script>

...

Код сценария

...

</script>

Текст документа

</body>

</html>

<html>

<head>

<title>Изучаем JavaScript</title>

</head>

<body>

Текст документа

<script>

<!—

...

Код сценария

...

//-->

</script>

Текст документа

</body>

</html>

  • Если скрипт используется после загрузки страницы,
  • например, код счетчика, то его лучше разместить в конце документа:

<footer>

<script> document.write("Введите свое имя");

</script>

</footer>

</body>

Формы

Изображения Ссылки

Документ HTML

и т.д.

ОБЪЕКТ

СВОЙСТВО

МЕТОД

объект.свойство

объект.метод( )

title— заголовок документа.

bgColor— сообщает цвет фона в шестизначном коде. fgColor — сообщает цвет текста в шестизначном коде. linkColor— сообщает цвет ссылки.

alinkColor— сообщает цвет активной ссылки. vlinkColor— сообщает цвет посещенной ссылки.

referrer— сообщает, с какой страницы пришел пользователь

write(значение,[значение, ...])— включает значения параметров в состав

объекта Document

open()— связывает с документом поток, предназначенный для использования, припоследующих вызовах методов write()

close()— закрывает поток, связанный с документом

Окончание загрузки документа в окно. Это событие связано с объектом Window.

Щелчок мышью на объекте

Получение объектом фокуса ввода

Передача на сервер данных, введенных

пользователем с помощью интерактивных элементов. Связывается с формой.

  • <html>
  • <head>
  • <тiтlе>сегодня</тiтlе>
  • </head>
  • <body> <р>
  • <script language="javascript"> var d;
  • d=new date ( ) ;
  • document. write (d.tostring () ) ;
  • </script>
  • </body>
  • </html>