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


 

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

84190. ОПУХОЛИ КРОВЕТВОРНОЙ СИСТЕМЫ, ИЛИ ГЕМОБЛАСТОЗЫ 26.56 KB
  Лимфомы. Принципы классификации лимфом: неходжкинские лимфомы; лимфомы Ходжкина. Лимфомы и лейкемии относят к полиэтиологическим заболеваниям.
84191. РЕВМАТИЧЕСКИЕ БОЛЕЗНИ. РЕВМАТИЗМ. ПОРОКИ СЕРДЦА 28.8 KB
  ПОРОКИ СЕРДЦА Определение Этиология и патогенез Морфогенез Эндокардит Миокардит Перикардит Патаритрит Пороки сердца Системные заболевания соединительной ткани принято называть в настоящее время ревматическими болезнями. Ревматизм болезнь Сокольского Вуйо инфекционноаллергическое заболевание с преимущественным поражением сердца и сосудов волнообразным течением периодами обострения атаки и ремиссии. Важное значение придается антителам перекрестно реагирующим с антигенами стрептококка и антигенами тканей сердца а также клеточным...
84192. ПАТОЛОГИЯ КЛЕТОК КРОВИ И КОСТНОГО МОЗГА. АНЕМИИ 23.96 KB
  АНЕМИИ Анемии Паталогическая анатомия Гемолитические анемии Болезни системы крови разнообразны. Наибольшее развитие имеют анемии гемобластозы тромбоцитопении и тромбоцитопатии. Анемии или малокровие группа заболеваний и состояний характеризующихся уменьшением общего количества гемоглобина. В зависимости от этиологии и патогенеза различают анемии: постгеморрагические; вследствие нарушения кровообразования; вследствие повышенного кроворазрушения гемолитические.
84193. ПАТОЛОГИЯ КЛЕТОК КРОВИ И КОСТНОГО МОЗГА. ЛЕЙКОЗЫ. ЛИМФОГРАНУЛЕМАТОЗ 24.71 KB
  костном мозге бластных клеток. Острый плазмобластный лейкоз возникает из клетокпредшественников Влимфоцитов способных к продукции иммуноглобулинов. При остром эритромиелозе ди Гульелымо в костном мозге происходит разрастание эритробластов и других ядросодержащих клеток эритропоэза миелобластов монобластов и недифференцированных бластов.
84194. БОЛЕЗНИ ОРГАНОВ ПИЩЕВАРЕНИЯ. ГАСТРИТ 24.07 KB
  ГАСТРИТ Острый гастрит Хронический гастрит Болезни органов пищеварения отличаются большим разнообразием. Гастрит воспалительное заболевание слизистой оболочки желудка. Различают острый и хронический гастриты. Воспаление слизистой оболочки может охватывать весь желудок диффузный гастрит или определенные его отделы очаговый гастрит.
84195. БОЛЕЗНИ ОРГАНОВ ПИЩЕВАРЕНИЯ. ЯЗВЕННАЯ БОЛЕЗНЬ 23.74 KB
  ЯЗВЕННАЯ БОЛЕЗНЬ Определение Патологическая анатомия Острая язва желудка Хроническая язва желудка Язвенная болезнь хроническое циклически текущее заболевание основным клиническим и морфологическим выражением которого являются рецидивирующие язвы желудка или двенадцатиперстной кишки. В ходе формирования она проходит стадии эрозии и острой язвы. Но в случаях развития язвенной болезни некоторые эрозии не заживают; некрозу подвергаются не только слизистая но и более глубокие слои стенки желудка развиваются острые пептические язвы. По мере...
84196. БОЛЕЗНИ ОРГАНОВ ПИЩЕВАРЕНИЯ. АППЕНДИЦИТ 22.98 KB
  АППЕНДИЦИТ Определение Патологическая анатомия Морфологические формы острого аппендицита Хронический аппендицит Аппендицит воспаление червеобразного отростка слепой кишки с характерным клиническим синдромом. Аппендицит является энтерогенной аутоинфекцией. Различают две кишечноанатомической формы аппендицита: острую и хроническую. Естрый аппендицит.
84197. РАК ОРГАНОВ ПИЩЕВАРЕНИЯ 28.13 KB
  Рак пищевода чаще всего возникает на границе средней и нижней трахеи его что соответствует уровню бифуркации трахеи. Предрасполагают к развитию рака пищевода хроническое раздражение его слизистых алкоголь курение грубая горячая пища рубцевые изменения после ожога инфекции пект анато мические нарушения дивертикулы этиология эпителия и желез. Среди предраковых изменений наибольшее значение имеют лейкоплания и дисплазия эпителия слизистой оболочки.
84198. БОЛЕЗНИ ПЕЧЕНИ. ГЕПАТИТЫ 26.06 KB
  ГЕПАТИТЫ Определение гепатита Вирусные гепатиты Вирусный гепатит В Болезни печени разнообразны. Возникновение первичного гепатита т. гепатита как самостоятельного заболевания чаще всего связано с воздействием генатотропного вируса вирусный гепатит алкоголя алкогольный или лекарств медикаментозный. Этиология вторичного гепатита т.