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


 

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

33532. Тема любви в лирике В.Маяковского и лирике С.Есенина 20-х гг. 21.61 KB
  Октябрьская революция раскрепостив человека создала условия для торжества любви любви как счастья как радости. Это произведение о человеческой любви во всех ее проявлениях о любви в самом широком смысле этого слова. Утверждая право человека ненавидеть во имя любви Маяковский по ходу эволюции своего лирического героя показывает как его чувства становятся социально осмысленными.
33533. Отражение истории в судьбе Г.Мелехова (по роману М.Шолохова «Тихий Дон») 14.64 KB
  Григорий Мелехов это главный герой романа. На войне герой возмужал заслужил четыре георгиевских креста и четыре медали стал офицером поддержал казачью честь и славу но стал злым. После знакомства с большевистской философией герой чувствует себя зрячим. Трех коней убили под Григорием в пяти местах продырявлена его шинель но геройство оказывается напрасным поток Красной армии затопляет Донскую землю.
33534. Проблематика и жанровые особенности романа М.Шолохова «Тихий Дон» 16.39 KB
  Действительно Шолохов в отличие от автора âВойны и мираâ не дает в романе теоретического обоснования своей исторической концепции несмотря на то что его трактовка исторических событий нередко отличается от главенствовавшей тогда в исторической науке. В своем романе Шолохов рисует жизнь русского донского казачества. В этом романе Шолохов освещает проблемы связанные с войной и революцией начала 20 века. Но есть в романе и другое.
33535. Политическая лирика В.Маяковского 18.44 KB
  Февральская и Октябрьская революции явились для Маяковского началом реального воплощения его идей о новом свободном человеке и счастливом мироустройстве. Отныне романтический индивидуализм присущий лирическому герою Маяковского уступил место соборности единению с миллионами я сменилось на мы конфликт личности и общества был снят самой историей. Футуристическая эстетика Маяковского сменилась доктриной коммунистического футуризма и Левого фронта искусств с его идеями искусства как жизнестроения. Знаменитые Окна РОСТА регулярно...
33536. Идейно-тематические особенности рассказов М.Зощенко. Герои, конфликты 15.7 KB
  Несмотря на то что герой не считает себя удачливым в жизни так как выходит ему время от времени перетык и прискорбный случай он философствует Жизнь штука не простая а сложная имеет на все свои взгляды: и на мужицкую жизнь блекота и слабое развитие техники и на культуру иностранную которую он знает. Я всегда стремился к изображению положительных сторон жизни. которые проповедовали свободу искусства от политики изображали действительность исходя из фактов жизни быта. Главным фактом в то время была революция которую...
33537. Повесть В.Распутина «Прощание с Матерой» как итоговое произведение «деревенской» прозы 17.11 KB
  Жанр повести можно определить как философскую притчу. Таким образом один из основных философских смыслов повести заключается в том что не нами начинается жизнь на земле и не нашим уходом заканчивается. В повести двадцать две главы в которых воспроизводится быт жителей Матеры в последние три месяца их пребывания на острове. Трагическая развязка повести проявляет авторскую позицию.
33538. «Матренин двор» А. Солженицына как начало второго этапа развития «деревенской прозы. Особенности этого этапа 17.23 KB
  Хозяйка дома Матрена одинокая женщина лет шестидесяти. Матрена Васильевна избу не жалела ни для мышей ни для тараканов ибо в шуршании мышей непрерывном как далекий шум океана шорохе тараканов не было ничего злого не было лжи. Матрена отличалась трудолюбием: вставала в четырепять утра тихо вежливо стараясь не шуршать топила русскую печь ходила доить козу по воду ходила и варила в трех судочках . Матрена никому не могла отказать: без нее ни одна пахота не обходилась.
33539. Основные конфликты «деревенской» прозы 50-х гг 15.2 KB
  Деревенская проза ведет свое начало с 50х годов. Очеркистыдеревенщики 50 60х годов не позволяли себе сомневаться в необходимости колхозов не поднимали руку на то как осуществлялось партийное руководство ими но показывали сколько вреда наносят бездумные директивы галочная система. 50е ГОДЫ овечкинский этап МОМЕНТ ПРОЗРЕНИЯ после лакировочнобесконфликтного наваждения 40х годов. Овечкинское направление в литературе 50х годов было: резкой реакцией на литературную мифологию 40х годов; возвращением деревенской прозы...
33540. «Василий Теркин» А.Твардовского. Образ героя, художественные особенности 20.78 KB
  Твардовский возобновил работу над образом Василия Теркина которую он начал еще в 1940 г. Твардовский развертывает биографию Теркина как судьбу многих бойцов как обобщение тяжелого и славного пути всей Советской Армии. Создавая образ Теркина автор типизировал массовые явления действительности и прямо указывал на распространенность таких героев: Парень в этом роде В каждой роте есть всегда Да и в каждом взводе. Твардовский по его признанию освобождал ее от всего что сводит книгу к какойто частной истории мельчит ее лишает ее той...