4339

Использование JavaScript в HTML

Лекция

Информатика, кибернетика и программирование

JavaScript в HTML Основные тезисы: Не тоже самое, что и Java, хотя синтаксис немного схож. Скриптовый (облегченный) интерпретируемый язык без строгой типизации. Внедряется в HTML-код Поддерживается всеми ...

Русский

2012-11-16

64.5 KB

10 чел.

JavaScript в HTML

Основные тезисы:

  1.  Не тоже самое, что и Java, хотя синтаксис немного схож.
  2.  Скриптовый (облегченный) интерпретируемый язык без строгой типизации.
  3.  Внедряется в HTML-код тэгом <SCRIPT>
  4.  Поддерживается всеми основными браузерами.

Что можно делать с помощью JavaScript:

  •  Динамически вставлять текст в HTML-код оператором:

document.write("<h1>" + name + "</h1>")

  •  Программно реагировать на события

например, при нажатии кнопки или подведении курсора на ссылку

  •  Получать и изменять состояние HTML-элементов

например, можно изменить размер шрифта при нажатии на кнопку

  •  Проверять корректность форм
  •  Определять тип браузера и перейти страницу, адаптированную под конкретный браузер

Простой пример:

<html><head>…</head><body>

<script type="text/javascript">

document.write("Hello World!")

</script>

</body></html>

Внедрение JavaScript в HTML

Варианты внедрения:

  •  <SCRIPT> внутри <HEAD>:

<html>

<head>

<script type="text/javascript">

....

</script>

</head>

  •  <SCRIPT> внутри <BODY> (можно генерировать HTML)
  •  Из внешнего файла:

<html>

<head>

<script type="text/javascript" src="xxx.js"></script>

</head>

<body>…

  •  В специальных атрибутах HTML-тэгов – обработчиках событий:
    •  общие для всех: onClick, onDblClick, onMouseOver (вход), onMouseOut (выход), onKeyPress
    •  специфичные для элементов: onFocus, onBlur, onSelect, onChange…
    •  например: <INPUT TYPE='submit' ONMOUSEOVER='window.status="Вы заполнили все поля?";' ONMOUSEOUT='window.status="";'>

Основы синтаксиса

  •  Точки с запятой необязательны.
  •  Регистр важен.
  •  Комментарии: // и /* … */
  •  Переменные создаются так: var var = value или просто var = value. Объявленные переменные внутри функций с помощью var будут локальными, иначе – глобальными.
  •  Типы: целый, вещественный, строковый, логическая, объектный.

Операторы:

  •  +, -, *, /, %, ++, --
  •  ==, !=, <, >, <=, >=
  •  =, +=, -=, *=, /=, %=
  •  &&, ||, !
  •  + (конкатенация): document.write('x=' + 5 + "!")

Функции:

  •  Вызов: alert(‘Hello, world!’)
  •  Объявление: function myfunc(var1, …) {….[return value]…}

Условия:

  •  if (…) …;
  •  if (…) … else …
  •  switch(…) {case value1: …; break; … default:….;}
  •  var = expr?value1:value2

Циклы:

  •  while (…) ….
  •  do {…} while(…)
  •  for (…; …; …) …

Объекты:

  •  Создание: o = new Object(….)
  •  Свойства: str.length, document.forms[0]
  •  Методы: str.substring(0,3)

Встроенные объекты JavaScript

  •  String:
    •  поля и методы: length, indexOf(), substring(), toLowerCase(), toUpperCase()
  •  Array:
    •  инициализация: var myarr = new Array(1,2,3), myarr2 = new Array(N); myarr[0] = 3;
    •  поля и методы: length, sort(), join(delim), push(el1,…), …
  •  Date:
    •  например, alert(new Date().getMonth());
  •  Math:
    •  Math.random(), Math.sin(…)…

HTML Document Object Model

Набор объектов, их методов и свойств, доступных JavaScript, внедренном в HTML, стандартизирован W3C и этот стандарт называется HTML DOM. С помощью HTML DOM можно получать и изменять свойства HTML-элементов страницы, открывать новые окна, изменять текущую страницу и проч.

Пример использования HTML DOM:

<html><head>

<script type="text/javascript">

function ChangeColor()

{

document.body.bgColor="yellow"

}

</script></head>

<body onclick="ChangeColor()">

Кликните!

</body></html>

Объекты браузера:

  •  window (тип Window) – окно браузера:
    •  методы: alert(), confirm(), prompt(), open(), close(), print(), setTimeout(‘javascript…’, ms)
    •  свойства: status, opener (окно, открывшее данное)
    •  свойство document (тип Document) – корень все структуры HTML-документа:
      •  свойства: bgColor, fgColor, linkColor, title, anchors[], forms[], images[]
      •  методы: write/writeln(), getElementById(id), getElementsByName(name)
    •  свойство history (тип History):
      •  свойства: length
      •  методы: back(), forward(), go(n)
    •  свойство location (тип Location):
      •  свойства: href
      •  методы: reload()
    •  screen (нестандартный тип Screen):
      •  свойства: colorDepth, height, width
  •  event (тип Event, доступен только в обработчиках событий типа onClick):
    •  clientX, clientY (координаты мыши)
    •  keyCode (код нажатой клавиши)
    •  button (0 – нет нажатия, 1 – левая, 2 – правая, …)
    •  srcElement (элемент, с которым ассоциировано событие)
    •  type (тип события: ‘mousedown’, …)

К document можно обращаться опуская префикс window.

HTML-элементы и поле STYLE в HTML DOM

Кроме перечисленных объектов window, document, history и проч. имеются также объекты, соответствующие HTML-элементам: anchor (ссылка), image (изображение), table (таблица) и проч. Эти элементы можно получить через window.document (например, с помощью window.document.getElementById). У document и всех этих объектов есть свойство style (тип Style), с помощью которого можно изменить любые стили отображения элемента: цвет, размер шрифта, отступы и проч. Эти стили практически совпадают с CSS-стилями, только в названиях нет «-» (например, paddingLeft).

Примеры

1. Изменение цвета заголовка при клике по нему

<h1 id=header onclick="document.getElementById(‘header’).style.color='red'">Нажмите здесь</h1>

2. То же самое, только изменение цвета вынесено в отдельную функцию

<script type="text/javascript">

function changecolor() {

document.getElementById('header').style.color="red"

}

</script>

<h1 id="header" onclick="changecolor()">Нажмите здесь</h1>

3. Выводит текущий день недели прямо в HTML:

<script type="text/javascript">

var d=new Date()

theDay=d.getDay() // вскр=0, пон=1, втр=2…

switch (theDay) {

case 5:  document.write("Пятница");  break

case 6:  document.write("Субота");  break;

case 0:  document.write("Воскресенье");  break;

default:  document.write("Раб.день");}

</script>

4. Изменение изображения при нажатии на кнопку

<script type="text/javascript">

function setSrc()

{

var x=document.images

x[0].src="hackanm.gif"

}

</script><img src="compman.gif" width="107" height="98">

<form>

<input type="button" onclick="setSrc()" value="Изменить изображение">

</form>

5. Вывод окна с сообщений при нажатии на кнопку

<input type="button" onclick="window.alert('Нажали!')" value="Вывести окно">

6. Переход на другую страницу при нажатии на кнопку

<input type=button onclick="document.location.href='http://edu.krasu.ru/'" value="открыть edu.krasu.ru">

7. Разворачивающееся-сворачивающееся меню

<style>

.submenu {

visibility:hidden;

 position:absolute;  // если этого не сделать, то подменю видно не будет, но место будет зарезервировано

}

</style>

<body>

<script type="text/javascript">

function show_hide(id)

{

style = document.getElementById(id).style;

if (style.visibility == 'visible')

{

 style.visibility = 'hidden';

 style.position = 'absolute';

}

else

{

 style.visibility = 'visible';

 style.position = 'static';

}

}

</script>

<a href=# onClick="show_hide('ch1')">+</a> Часть 1<br>

<div id=ch1 class= submenu>

 <a href="1_1.html">Параграф 1.1</a><br>

 <a href="1_2.html">Параграф 1.2</a>

</div>

<a href=# onClick="show_hide('ch2')">+</a> Часть 2<br>

<div id=ch2 class= submenu>

 <a href="2_1.html">Параграф 2.1</a><br>

 <a href="2_2.html">Параграф 2.2</a><br>

 <a href="2_3.html">Параграф 2.3</a>

</div>

DHTML

DHTML = HTML + JavaScript + DOM HTML + CSS


 

А также другие работы, которые могут Вас заинтересовать

25340. ВЫДЕЛИТЕЛЬНЫЕ ПРОЦЕССЫ 48 KB
  Органами выделения у человека являются почки потовые железы легкие кишечник. Выделительные органы почки легкие потовые железы имеют важное значение и в поддержании постоянства концентрации водородных ионов в организме. Поскольку испарение воды с поверхности кожи и альвеол легких понижает температуру тела потовые железы и легкие имеют значение и в терморегуляции. Особое место среди органов выделения занимают сальные и молочные железы.
25341. ПРОЦЕСС МОЧЕОБРАЗОВАНИЯ И ЕГО РЕГУЛЯЦИЯ 29.5 KB
  Процесс фильтрации воды и низкомолекулярных компонентов плазмы через стенки капилляров клубочка происходит только в том случае если давление крови в капиллярах около 70 мм рт. Из 150180 л первичной мочи реабсорбируется около 148178 л воды. Реабсорбции подвергаются кроме воды многие необходимые для организма органические глюкоза аминокислоты витамины и неорганические ионы К N3 Са2 фосфаты вещества. Импульсы от рецепторов почек по симпатическим нервам поступают в гипоталамус где вырабатывается антидиуретический гормон АДГ...
25342. КОЖА И ЕЕ ПРОИЗВОДНЫЕ 30.5 KB
  Различные воздействия воспринимают расположенные в коже терморецепторы механорецепторы ноцицепторы. Первые воспринимают изменение температуры вторые прикосновения к коже третьи болевые раздражения. Расположенные на разной глубине в коже нервные окончания воспринимают прикосновения температурное чувство чувство боли. Распределены рецепторы неравномерно их много в коже кончиков пальцев рук ладоней подошв губ наружных половых органов.
25343. ОБЩАЯ ХАРАКТЕРИСТИКА ЭНДОКРИННОЙ СИСТЕМЫ 31.5 KB
  действием на соседние клетки в пределах одного органа или ткани биологически активных веществ тканевых гормонов гистамина серотомина кининов простагландинов и продуктов клеточного метаболизма например появление при физических нагрузках молочной кислоты в мышцах ведет к расширению в них кровеносных сосудов и увеличению доставки кислорода. В современных условиях концентрацию гормонов в железах крови или моче изучают биологическими ихимическими методами используют ультразвуковое исследований применяют радиоиммунологический метод....
25344. Гипофиз 36 KB
  В аденогипофизе главную секреторную функцию выделяют 5 групп клеток которые вырабатывают 5 специфических гормонов. Среди них выделяют тропные гормоны лат. направление регулирующие функции периферических желез эффекторные гормоны непосредственно действующие на клеткимишени. К тропным гормонам относят следующие: кортикотропин илиадренокортикотропныйгормонАКТГрегулирующий функции коркового слоя надпочечников; тиреотропный гормон ТТГ активизирующий щитовидную железу; гонадотропныи гормон ГТГ влияющий на функции половых желез.
25345. ФУНКЦИИ ВИЛОЧКОВОЙ ЖЕЛЕЗЫ И ЭПИФИЗА 22.5 KB
  Функции эпифиза верхнего мозгового придатка или шишковидной железы связаны со степенью освещенности организма и соответственно имеют четкую суточную периодичность. Мелатонин угнетает функции гипофиза снижая с одной стороны выработку облегающих его функции гипоталамических либеринов а с другой непосредственно угнетая активность аденогипофиза в первую очередь подавляя образование гонадотропинов.
25346. ФУНКЦИИ ЩИТОВИДНОЙ (ТИРЕОИДНОЙ) ЖЕЛЕЗЫ 27.5 KB
  При недостаточном поступлении в организм йода возникает резкое снижение активности щитовидной железы гипотиреоз. Дефицит гормонов щитовидной железы во взрослом состоянии вызывает слизистый отек тканей микседему. Гипотиреоз может также возникать при генетических аномалиях в результате иммунного разрушения щитовидной железы и при нарушениях секреции тиреотропного гормона гипофиза.
25347. ЭНДОКРИННЫЕ ФУНКЦИИ ПОДЖЕЛУДОЧНОЙ ЖЕЛЕЗЫ 30.5 KB
  Глюкагон вызывает расщепление гликогена в печени и выход в кровь глюкозы а также стимулирует расщепление жиров в печени I жировой ткани. Действуя путем повышения проницаемости клеточных мембран мышечных и жировых клеток он способствует переходу глюкозы внутрь мышечных волокон повышая мышечные запасы синтезируемого в них гликогена а в клетках жировой ткани способствует превращению глюкозы в жир. Продукция гормонов поджелудочной железы регулируется содержанием глюкозы в крови собственными особыми клетками островках Лангерганса ионами Са2...
25348. ФУНКЦИИ НАДПОЧЕЧНИКОВ 34 KB
  Кортикоиды являются жизненно необходимыми для организма гормонами их отсутствие приводит к смерти. все Процессы восприятия переработки информации и управления поведением организма. Нарушение секреции альдостерона может привести к гибели организма. Они угнетают синтез белков в печени и мышцах создают отрицательный азотистый баланс увеличивают выход свободных аминокислот их переаминирование и стимулируют образование из них ферментов необходимых для новообразования глюкозы вызывая при этом мобилизацию жиров из жировой ткани...