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


 

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

42619. ОПРЕДЕЛЕНИЕ ТВЁРДОСТИ МАТЕРИАЛОВ 1.45 MB
  Изучить методы определения твердости материалов устройство и работу твердомеров. Для оценки качества азотированных и цементированных деталей знание твердости является основным. По твердости можно судить о некоторых других механических характеристиках материала модуле упругости Е пределе пропорциональности ПР пределе текучести y пределе прочности Вударной вязкости и др. Например для конструкционных углеродистых сталей при твердости по Бринеллю НВ 1500 4500 МПа можно определить величину предела прочности В из...
42621. ПРОЕКТНЫЙ АНАЛИЗ 494 KB
  Продолжительность капитальных вложений в создание нового производства (новой технологической линии) составляет 3 года с распределением по годам 50% : 25% : 25%. Необходимые объемы капитальных вложений в здания, сооружения и оборудование соответственно равны: $250,000; $240,000; $1,700,000.
42622. Вивчення елементів середовища СУБД MS Access 69.5 KB
  Створити порожнью базу даних СУБД СУБД MS ccess. Вивчити склад та призначення обєктів бази даних СУБД MS ccess. Вивчити функції та призначення командних кнопок вікна управління базою даних СУБД MS ccess.
42623. ДОСЛІДЖЕННЯ ПРОГРАМНИХ ОБ'ЄКТІВ НАПЕРЕДВИЗНАЧЕНИХ ТИПІВ ТА ОПЕРАЦІЙ НАД НИМИ 215.5 KB
  Декларація обєкта включає його ідентифікатор та індикатор типу. Опис програмних обєктів Паскаль: опис константи ::=const ідентифікатор = статичний вираз опис змінної ::= vr ідентифікатор : індикатор типу { базування }01 індикатор типу ::= ідентифікатор індикатор напередвизначеного типу базування ::=bsolute зображення значення вказівного типу bse ідентифікатор Наприклад: const PI = 3.14; опис константи PI vr sum : integer; опис змінної sum опис змінної mult розташованої в тому місті памяті що і sum vr mult: longint bse sum; опис...
42624. ДОСЛІДЖЕННЯ ВИРАЗІВ 139.5 KB
  Таблиця 1 Пріоритет Операції Сі Операції Паскаль Категорія Перший @ ^ Спеціальні операції Другий not Унарні операції Третій nd shl shr Бінарні операції Четвертий or xor Бінарні операції Пятий = = = Бінарні операції Шостий == = = = ^ Бінарні операції Вирази які мають лише константи та літерали називаються R виразами і можуть розташовуватися лише в правий частині оператора присвоєння. Завдання Написати програми на мовах Паскаль та Сі які складаються з...
42625. ДОСЛІДЖЕННЯ СУВОРОЇ ТИПІЗАЦIЇ, ПРИВЕДЕННЯ ТИПIВ ТА МЕХАНІЗМІВ ОБХОДУ СУВОРОЇ ТИПІЗАЦІЇ НА ОСНОВІ НЕТИПІЗОВАНИХ (АДРЕСНИХ) ВКАЗІВНИХ ЗМІННИХ 83.5 KB
  Теоретичні відомості В алгоритмічних мовах всі операції в виразах виконуються з операндами визначених типів. Часто трапляється так що є необхідним конструювати вирази з програмних обєктів різних типів даних або вирази що розташовані праворуч та ліворуч оператору привласнення генерують значення різних типів. В мовах програмування існує явне та неявне приведення типів.
42626. ДОСЛІДЖЕННЯ СТРУКТУРНИХ ОПЕРАТОРІВ ОПЕРАТОРНОГО БАЗИСУ МОВ ПРОГРАМУВАННЯ ПАСКАЛЬ ТА СІ 148 KB
  Теоретичні відомості Оператор Паскаль Сі: оператори базису ::= оператор опису оператор привласнення структурний оператор оператор ::= оператор привласнення структурний оператор Структурні оператори а Складений оператор Паскаль: складений оператор ::= begin{ оператор }2end; Сі: складений оператор ::={{ оператор }2} б Оператор вибору умовна форма Паскаль: оператор вибору ::=if вираз відношення then оператор Наприклад: if flg = true then { flg змінна...