4339
Использование JavaScript в HTML
Лекция
Информатика, кибернетика и программирование
JavaScript в HTML Основные тезисы: Не тоже самое, что и Java, хотя синтаксис немного схож. Скриптовый (облегченный) интерпретируемый язык без строгой типизации. Внедряется в HTML-код Поддерживается всеми ...
Русский
2012-11-16
64.5 KB
10 чел.
Основные тезисы:
Что можно делать с помощью JavaScript:
document.write("<h1>" + name + "</h1>")
например, при нажатии кнопки или подведении курсора на ссылку
например, можно изменить размер шрифта при нажатии на кнопку
Простой пример:
<html><head>…</head><body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body></html>
Варианты внедрения:
<html>
<head>
<script type="text/javascript">
....
</script>
</head>
<html>
<head>
<script type="text/javascript" src="xxx.js"></script>
</head>
<body>…
Операторы:
Функции:
Условия:
Циклы:
Объекты:
Набор объектов, их методов и свойств, доступных 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>
Объекты браузера:
К document можно обращаться опуская префикс window.
Кроме перечисленных объектов window, document, history и проч. имеются также объекты, соответствующие HTML-элементам: anchor (ссылка), image (изображение), table (таблица) и проч. Эти элементы можно получить через window.document (например, с помощью window.document.getElementById). У document и всех этих объектов есть свойство style (тип Style), с помощью которого можно изменить любые стили отображения элемента: цвет, размер шрифта, отступы и проч. Эти стили практически совпадают с CSS-стилями, только в названиях нет «-» (например, paddingLeft).
<h1 id=header onclick="document.getElementById(header).style.color='red'">Нажмите здесь</h1>
<script type="text/javascript">
function changecolor() {
document.getElementById('header').style.color="red"
}
</script>
<h1 id="header" onclick="changecolor()">Нажмите здесь</h1>
<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>
<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>
<input type="button" onclick="window.alert('Нажали!')" value="Вывести окно">
<input type=button onclick="document.location.href='http://edu.krasu.ru/'" value="открыть edu.krasu.ru">
<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 = 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 змінна... | |||