Студопедия

КАТЕГОРИИ:

АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция

Продолжаем рассматривать работу с окнами.

⇐ ПредыдущаяСтр 2 из 3Следующая ⇒

Скрипт

<SCRIPT LANGUAGE="JavaScript">
function openindex()
{
var OpenWindow=window.open("", "newwin", "height=300,OpenWindow.document.write("<HTML>")
OpenWindow.document.write("<TITLE>Новое окно</TITLE>")
OpenWindow.document.write("<BODY BGCOLOR='white'>")
OpenWindow.document.write("<CENTER>")
OpenWindow.document.write("<font size=+1>Новое окно</font><P>")
OpenWindow.document.write("<a href= 'http://jsp.newmail.ru' target='main window'> Эта ссылка<BR>откроется в главном окне</a><p>")
OpenWindow.document.write("<P><HR><P>")
OpenWindow.document.write("<a href='' onClick='self.close()'> Эта закроет окно</a><p>")
OpenWindow.document.write("</CENTER>")
OpenWindow.document.write("</HTML>")
self.name="main window"
}
</SCRIPT>

...и в строке BODY:

onLoad="openindex()"

Помните, текст в скобках должен находиться на одной строке.
















Разбор скрипта

Главная часть скрипта, содержащая функцию, помещается между командами <HEAD> и </HEAD>, как большинство функций.

По самой обычной схеме функция получает имя openindex(). Теперь подходим к основному моменту. Создаем переменную OpenWindow, под которой скрывается команда window.open(). Вот так:

var OpenWindow=window.open("", "newwin", "height=300,

Смотрите описание выше. Единственная разница в том, что вы не указываете URL. Пустые парные кавычки говорят браузеру, что он должен искать информацию о новом окне. То же самое, что и не ставить URL в ссылку, которая закрывает окно. Оно бы не закрылось, если бы начала загружаться новая страница. Точно так же и тут. Браузер стал бы загружать новую страницу, а не выполнять скрипт.

Теперь начинаем писать страницу HTML, которая будет внутри нового окна. Вот первая строка текста:

OpenWindow.document.write("<HTML>")

Переменная OpenWindow (то есть новое окно) говорит, что этот текст должен быть вписан в документ.

Каждая новая строка следует той же схеме. Можно написать сотню строк, создающих законченную страницу. Скрипт совсем небольшой, так как это наглядное пособие.

Помните: когда вы пишете HTML внутри команды document.write, вместо двойных кавычек с подкомандами ставьте одинарные.

Наконец командой onLoad в строке BODY запускается функция.

Задание

1) Напишите скрипт, который откроет новое окно со всеми характеристиками. Пусть оно будет размером 250 на 300 пикселей и с двумя ссылками:

  • Одна откроет новую страницу в главном окне.
  • Вторая откроет новую страницу в том же окне.
  • Страница, которая откроется в том же маленьком окне, должна содержать ссылку, закрывающую окно.

2) Необходимо написать функцию, которая открыла бы окно с зеленым фоном и приветствием: «Привет, имя пользователя, вот твое окно!» Имя пользователя можно узнать с помощью запроса. Разумеется, допишите еще ссылку, которая закроет окно.



Лабораторная работа № 5

 

Часть 1

Рассматриваются вопросы выполнения вычислений с помощью JavaScript.

Скрипт

<BODY>
<SCRIPT LANGUAGE="javascript">
var numsums = 10 + 2
alert("10 + 2 равно " + numsums)
var x = 10
alert("десять — это " + x)
var y = x * 2
alert("10 X 2 = " + y)
var z = "Привет " + "Пока"
alert(z)
</SCRIPT>
</BODY>












Разбор скрипта

<BODY>
<SCRIPT LANGUAGE="javascript">
var numsums = 10 + 2
alert("10 + 2 равно " + numsums)
var x = 10
alert("десять — это " + x)
var y = x * 2
alert("10 X 2 = " + y)
var z = "Привет " + "Пока"
alert(z)
</SCRIPT>
</BODY>

Скрипт устанавливает переменную numsums. Она равна 12 (10+2). Затем переводит переменную в alert и показывает, что 10 + 2 = переменная или 12.

Другая переменная, х, приравнивается к 10, и alert тоже показывает ее значение.

Следующая переменная, y, равна x, умноженному на 2. Ответ тоже виден в окне alert.

Наконец создается переменная z, которая доказывает, что с помощью знаков исчисления можно соединять текст. И снова метод alert.

Посмотрите еще раз, как работает скрипт.

  • Переменные начинаются с VAR (от слова variable, переменная), следом идет имя, знак = и значение переменной. VAR можно не писать, но я советую вам не отказываться от него, пока вы не набьете руку.
  • Имя переменной может состоять из любого количества букв. Но лучше давать им названия, которые что-то значат. И, ради собственного удобства, не слишком длинные. Не пользуйтесь пробелами.
  • Имена переменных различают регистр! То есть 'Х' и 'х' — это две разные переменные.
  • Значение текстовой переменной ставится в кавычки. Числовые переменные не ставятся в кавычки, иначе скрипт поймет их как текст с числовым значением 0!
  • Сложение, вычитание, умножение и деление выражаются знаками: +, -, *, и / соответственно.
  • Знак плюс (+) выполняет две задачи: складывает числа или печатает вместе два фрагмента текста.
  • Во всех языках программирования есть зарезервированные слова, например, названия команд. В любой книжке есть их перечень. Этими словами называть переменные нельзя. Например, не надо использовать в качестве переменной, скажем, слово onMouseOver.
  • Если необходимо, вместо пробела ставьте знак _ user_name.











Смотрите задание № 1, которое необходимо выполнить.

Часть 2

Вспомним события связанные с кликами мыши. Обратите внимание, что не требуются тэги <SCRIPT> и </SCRIPT>. Обработчики событий onMouseOver и onMouseOut встраиваются в команду HTML <A HREF>.

Скрипт

<a href="http://nonags.online.ru/main.html" onMouseOver="document.pic1.src='a.gif'" onMouseOut="document.pic1.src='b.gif'">

<IMG SRC="b.gif" BORDER=0 NAME="pic1"></a>

Разбор скрипта

<a href="http://nonags.online.ru/main.html" onMouseOver="document.pic1.src='a.gif'" onMouseOut="document.pic1.src='b.gif'">

<IMG SRC="b.gif" BORDER=0 NAME="pic1"> </a>

Вы уже знаете о событиях достаточно, чтобы самостоятельно разобрать скрипт. Когда убираете курсор с картинки, появляется b.gif. Когда наводите на картинку, появляется а.gif.

Обратите внимание, что команда IMG связана с обработчиками onMouse в команде HREF через команду NAME="pic1". Не имеет значения, сколько изображений у вас на странице и в каком порядке они располагаются, если вы присвоили отдельное имя каждой нужной картинке.

  • onMouseOver и onMouseOut различают регистр. Нельзя менять заглавные и строчные буквы.
  • Так как необходимо ставить кавычки после onMouseOver= и onMouseOut=, название файла *.gif ставится в одинарные кавычки.
  • document.pic1.src следует иерархии объектов, о которой мы говорили в Уроке 8. Document относится к объекту документ, a pic1 — это имя объекта изображение (имя можно придумать какое угодно). src (источник) — это свойство объекта изображение, которое указывает файл с картинкой.
  • В этом примере onMouseOver меняет источник изображения на а.gif.
  • ОnMouseOut заставляет объект изображение показывать а.gif.
  • Имейте в виду, что для наилучшего эффекта картинки должны быть одинакового размера.

 

Смотрите задание №2, которое Вам необходимо выполнить.

 

Часть третья

 

Ниже рассматривается еще один пример использования onMouseOver и onMouseOut. На этот раз обработчики событий onMouseOver и onMouseOut вызывают функцию.

В общем, когда вам нужна только одна команда JavaScript, можно включить ее целиком в <A HREF>. Для многократного повторения больше подходит функция.

Скрипт

<HTML>
<HEAD>
<title></title>
<SCRIPT LANGUAGE="JavaScript">
function up()
{
document.mypic.src="up.gif"
}
function down()
{
document.mypic.src="down.gif"
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<h2>Пример анимации</h2>

<A HREF="http://www.jsp.newmail.ru"
onMouseOver="up()" onMouseOut="down()">
<IMG SRC="down.gif" NAME="mypic" BORDER=0>
</BODY>
</HTML>





















Разбор скрипта

  • Не забывайте про регистр и <script language= "javascript">

function up()
{
document.mypic.src="up.gif"
}

function down()
{
document.mypic.src="down.gif"
}

  • Функции выполняют то же, что и команды. Сначала документ, потом имя, присвоенное объекту и наконец SRC. Функции названы up() и down().

<A HREF="http://www.newmail.ru"
onMouseOver="up()" onMouseOut="down()">
<IMG SRC="down.gif" NAME="mypic"
BORDER=0></A>

  • Oбычно функция используется для многократных повторений.
  • Если вы решите использовать многократные смены картинок с помощью JavaScript, помните, что каждый раз нужно давать функции и изображению новое имя. Например: вы хотите поместить на страницу еще один такой же скрипт. Для этого создаем новую функцию, копируя предыдущую и добавляя к ее названию цифру 2. Затем меняем имя рисунка на mypic2. Не забудьте поменять его и в строке img src="*.gif". Получаем следующее:

<SCRIPT LANGUAGE="JavaScript">

function up() {
document.mypic.src="up.gif"
}
function down() {
document.mypic.src="down.gif"
}

function up2() {
document.mypic2.src="up.gif"
}
function down2() {
document.mypic2.src="down.gif"
}

</SCRIPT>

...и две разные картинки:

<A HREF="http://www.htmlgoodies.com"
onMouseOver="up()" onMouseOut="down()">
<IMG SRC="down.gif" NAME="mypic"
BORDER=0></A>

<a href="http://www.htmlgoodies.com"
onMouseOver="up2()" onMouseOut="down2()">
<IMG SRC="down.gif" NAME="mypic2"
BORDER=0></A>

Видите, как новые функции связаны с новыми именами? Делайте это каждый раз при добавлении новой картинки.

 




⇐ Предыдущая123Следующая ⇒






Последнее изменение этой страницы: 2018-04-12; просмотров: 216.

stydopedya.ru не претендует на авторское право материалов, которые вылажены, но предоставляет бесплатный доступ к ним. В случае нарушения авторского права или персональных данных напишите сюда...