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


 

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

40952. Создание Flash презентации 807.5 KB
  Создание Flshпрезентации Основные принципы создания презентации Способы создания презентации во Flsh Создание презентации Основные принципы создания презентации Способы создания презентации во Flsh Создание презентации Введение Презентация грамотно разработанная с помощью Flsh будет выгодно выделяться среди шаблонных продуктов рожденных в инкубаторе Microsoft Power Point. Основные принципы создания презентации Очень важно чтобы ваша презентация имела цельный законченный вид. После создания структуры...
40953. Программирование в Flash 785.5 KB
  Программирование во Flsh План Введение Знакомство с панелью Действия ctions Работа с действиями объектов Использование действий Возможности управления сценами с помощью сценариев ctionScript События мыши
40954. Объявление и инициализация переменной типа bool. Вывод данных на консоль 97 KB
  Консолью называется окно операционной системы, в котором пользователи взаимодействуют с операционной системой. Приложение может считывать пользовательский ввод из стандартного входного потока, записывать обычные данные в стандартный выходной поток и записывать данные об ошибках в стандартный поток сообщений об ошибках.
40955. Оператор выбора switch 358 KB
  Пример using System; nmespce Consoleppliction5 { clss Progrm { sttic void Minstring[] rgs { int cseSwitch = 5; switch cseSwitch { cse 1: Console. Если за меткой cse нет списка операторов то операторы brek goto cse или goto defult необязательны В примере управление передается списку операторов следующему за меткой cse 2 using System; nmespce Consoleppliction5 {...
40956. Политические идеи современности 75 KB
  В наши дни наблюдается усиление прикладного характера современных политических идей их использования для решения конкретных социальных и экономических проблем. Для него характерно пристальное внимание к вопросам социальных гарантий политической демократии. С одной стороны социальная драма модели государственного социализма догматического марксизма и в то же время успех социалдемократии в решении социальных программ превращение в авторитетную политическую силу современности. Политическая дифференциация России выдвигает проблему...
40957. Пример использования делегата 112 KB
  Сортируемый класс Employee описывает данные о сотрудниках: код фамилия имя дата приема на работу заработная плата. Это реализуется определением в коде программы делегата: delegte bool CompreOpobject lhs object rhs; Сигнатуру метода сортировки Sort определим следующим образом: sttic public void Sortobject[] sortrry CompreOp gtMethod Параметр sortrry задает массив сортируемых объектов в рассматриваемом примере массив экземпляров класса Employee а параметр gtMethod метод принимающий два параметра и возвращающий true если...
40958. Концепция типов данных 121.5 KB
  C поддерживают концепцию соглашение типов данных которая включает следующие договорённости: каждая переменная константа выражение функция относятся к некоторому типу; тип объекта либо определяется по внешнему виду либо задаётся специальным описанием; тип Т определяет множество значений допустимых для данных этого типа множество допустимых операций множество функций определённых для данных этого типа Т. Тип Т = {DomT OPT FunT} { некоторая область памяти её размер способ представления...
40959. Использование двоичного кода 357.5 KB
  Т подходящее имя для обобщенного типа: public clss List T { } public clss LinkedList T { } если к обобщенному типу предъявляются специальные требования например что тип должен реализовывать интерфейс либо наследоваться от определенного класса или же используется два или более обобщенных типа в качестве параметров то следует применять осмысленные имена типов: public delegte void EventHndler TEventrgs object sender TEventrgs e; public delegte TOutput Converter TInput T0utput TInput from; public clss SortedList TKey...
40960. История политической социологии в России 48.5 KB
  Проблемы политического устройства; критика негативов политических отношений в России: произвола и бесправия масс; выдвижение идей демократизации общественнополитической жизни в трудах А. Социальнополитические программы и конституционные проекты демократического преобразования политического строя России политических лидеров и деятелей XIX начала XX веков Т. Основоположение ихлитической социологии как самостоятельной науки в России русский ученый М.