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


 

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

54023. I need a book. At the library 101.5 KB
  Teacher: Right you are. A book is a main source of knowledge. It is impossible to imagine our life without books. They play an important role in educating, upbringing and help us to get useful information. Where can we get books?
54024. Life of a Society. Inventors and Inventions 52.5 KB
  First I intended to use canvas to make tents and wagon coverings. But miners complained that their ordinary trousers wore out too quickly. So, I thought and thought and …
54025. Я вибираю життя без шкідливих звичок. Розвиток усного мовлення з теми 81.5 KB
  In 1870 the British Government adopted a law: every packet of cigarette must have a health warning on it. Now we have such a law in Ukraine. But very often a great number of modern advertisements show us beautiful girls or boys who smoke. And many teenagers want to imitate them. There are some rules, which don’t allow people to smoke in public places, such as cinemas, theatres, public transport etc.
54026. Ліквідація Української козацької держави 52.5 KB
  Мета: ознайомити учнів з подіями що передували процесу ліквідації Української козацької держави; розвивати навички роботи з історичною картою; вміння визначати причиннонаслідкові звязки подій; Виховувати в учнів почуття патріотизму інтересу і поваги до історичного минулого своєї держави. Після цього уроку учні зможуть: розкривати зміст термінів Малоросія наказний гетьман кріпацтво; називати прізвища видатних осіб цього часу; показувати на карті підручника територію Гетьманщини Запорозької Січі; розповідати про...
54027. Цікава лінгвістика 31.5 KB
  Другорядні члени речення. Напишіть власний твір про однорідні члени речення уявивши велику світлу споруду в якій дружно живе сімя однорідних членів речення суворо дотримуючись законів співжиття як люди у суспільстві. Другорядні члени речення Плин життя завжди вимагає змін. Ой варто було б побачити що сталося із другорядними членами речення.
54028. Цікаві завдання з української мови для учнів шостого класу 401.5 KB
  Цікаві завдання що включені до розповіді про подорож у пошуках скарбів різноманітні ігрові ситуації допоможуть дітям легше засвоїти граматичні категорії що стосуються зазначених тем. Вступ Призначення цієї книги - сприяти засвоєнню тем Іменник та Прикметник зокрема завдання побудовано таким чином щоб сформувати уміння визначати граматичні категорії слів зазначених частин мови розвивати словниковий запас учня. Завдання побудовано в ігровій формі їх можна виконувати як поодинці так і удвох з товаришем тоді мандрівку сторінками...
54029. Урочиста лінійка присвячена врученню свідотства про базову середню освіту в 9 класі 53 KB
  Хай здійсняться всі ваші бажання Ми ласкаво запрошуєм вас Список учнів ведуча зачитує список виходять діти встають на райдугу СПИСОК УЧНІВ 9 КЛАСУ 1. Класний керівник 9 класу 2. Право підняти державний прапор України надається учням 9 класу та Звучить гімн України. Довгополому надається учням 9 класу та Ведуча.
54030. Розробка уроку з музичного мистецтва для 7 класу 183 KB
  Добрим будь щедрим будь І з мистецтвом в добрий путь Мотивація навчальної діяльності Учитель. Учитель звертає увагу на карту України на якій нотами позначені місця повязані з темою уроку Полтава Львів Запоріжжя Київ карта України. Учитель. Як ви вважаєте які риси характеру Наталки передає її пісня учні за допомогою вчителя дають характеристику образу Наталки одночасно заповнюючи першу графу таблиці Характеристика образу Наталки Полтавки Герой Характеристика образу Музична характеристика героя Наталка Полтавка Проста...