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


 

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

22579. Проміжний мозок 35 KB
  У таламусі налічують до 40 різноманітних ядер об'єднаних у цілісний морфофункціональний комплекс який складним чином взаємодіє з неокортексом базальними гангліями і структурами лімбічної системи. Звичайно розрізняють шість груп ядер таламуса: передню ядра середньої лінії медіальну вентролате ральну задню і претектальну. Проекційні або перемикальні ядра відносяться до специфічних ядер які організовані за топічним принципом. Серед основних проекційних ядер таламуса слід виділити вентробазальне ядро яке є специфічним ядром...
22580. Базальні ганглії 30.5 KB
  Це свідчить про те що функції неостріатума не можна звести лише до регуляції рухів. Та все ж таки базальні ганглії перш за все пов'язані з регуляцією рухової функції організму особливо початку і припинення повільних рухів. Акінезія або дефіцит рухів. Цей симптом виявляється у скованості рухів нерухомій позі та маскоподібному обличчі з немигаючим виразом очей.
22581. Лімбічна система мозку 29 KB
  Найважливішими структурами лімбічної системи є мигдалевидний комплекс МК гіпокамп і прозора перетинка септум . Для лімбічної системи дуже характерні численні нервові ланцюги наприклад коло Папеца які об'єднують у замкнену мережу різні її утвори що полегшує виконання ними складних інтегративних функцій рис. Інтегративні функції лімбічної системи . Вона забезпечується численними зв'язками різних утворів лімбічної системи з іншими відділами мозку.
22582. Принципи організації аналізаторів 20 KB
  топічний кіркові проекції побудовані таким чином що площа цієї проекції пропорційна щільності рецепторів; багаторівневості можливость спеціалізації різних рівнів ЦНС на переробці окремих видів І що забезпечує більш швидке реагування на прості сигнали що аналізуються на проміжних рівнях; багатоканльності.
22583. Механізм збудження рецепторів 24 KB
  до первинночутливих відносяться тканинні рецептори пропріорецептори терморецептори і нюхові клітини. Первинночутливі рецептори є універсальним типом рецепторних елементів у безхребетних. Вторинночутл є зоровий слуховий вестибулярний рецептори.
22584. Принцип кодування інформації в нервовій системі 26 KB
  На рівні рецепторів відбувається важливі етапи переробки інформації: отримання прийом сигналів трансформація цих різнорідних по своїй природі сигналів в єдиний по своїй природі процес нервовий імпульс. Ця автономність дає змогу організму що володіє спеціальними механізмами відбору запамятовування збереження і відтворення інформації знову звертатись до зафіксоваої а памяті інформації відновлювати минулі подіїзовнішнього світу у вигляді нервових імпульсів і знову практично в будь який відрізок часу використати в переробці нову...
22585. Види памяті 32 KB
  Види памяті Пам'ять це здатність нервової системи зберігати у зако дованому вигляді інформацію яка при певних умовах може бути виведена з цієї системи відтворена. За тривалістю збереження інформації розрізняють безпосередній відбиток сенсорної інформації іконічну короткочасну секундигодини і довготривалу дні й роки пам'ять. Крім того у людини виділяють первинну вторинну і третинну пам'ять. Цей вид памяті має різні параметри у кожної людини змінюється протягом життя індивіда і залежить від функціонального стану організму.
22586. Кримінальне покарання. Поняття та ознаки 42.88 KB
  Поняття та ознаки Кримінальне покарання є необхідним засобом охорони держави суспільства і безпеки особи від злочинів. У боротьбі зі злочинністю кримінальне покарання має кілька функцій. Подруге реальне виконання кримінального покарання впровадження конкретних правообмежувальних процедур до винних осіб чинить сильний вплив як на самого винного так і на його оточення.
22587. Права та обовязки батьків і дітей 41.21 KB
  Це визначається на підставі Свідоцтва про шлюб і документа закладу охорони здоров'я про народження дружиною дитини. Дружина і чоловік мають право подати до державного органу реєстрації актів цивільного стану спільну заяву про невизнання чоловіка батьком дитини. Якщо мати та батько дитини не перебувають у шлюбі між собою походження дитини від матері визначається на підставі документа закладу охорони здоров'я про народження нею дитини а від батька за заявою матері та батька дитини або за заявою чоловіка який вважає себе батьком дитини або...