Лабораторные работы МИРЭА JavaScript (1017114), страница 5
Текст из файла (страница 5)
//Выводим содержимое переменной var2
document.write(var2);
}
</script>
</head>
<!-- Вызовем функцию func2() после полной загрузки документа -->
<body onload='func2()'>
</body>
</html>
Обратите внимание: при выводе на экран переменная var2 будет иметь пустое значение, так как func1 оперирует с локальной "версией" переменной var2.
Использование анонимных функций
Функции, которые не содержат имени при объявлении называются анонимными. Анонимные функции в основном объявляют не для последующего их вызова из кода как обычные функции, а для передачи другим функциям в качестве параметра.
Пример
function arrMap(arr,func){
var res=new Array;
for (var i=0;i<arr.length;i++)
res[i]=func(arr[i]);
return res;
}
var arr=new Array(3,5,1,4);
document.write(arrMap(arr,function(g){return g+1;})+"<br />");
Все функции JavaScript рекомендуется помещать в контейнер <HEAD>...</HEAD>. Тем самым вы обеспечите их гарантированную доступность при обработке HTML-документа.
Лабораторная работа №3
Объекты javaScript
Цель работы: Изучение основ языка JavaScript
Краткие теоретические сведения.
Объекты JavaScript
Язык JavaScript является объектно-ориентированным. Объекты JavaScript представляют собой наборы свойств и методов. Можно сказать, что свойства объектов - это данные, связанные с объектом, а методы - функции для обработки данных объекта.
В языке JavaScript имеется три вида объектов: встроенные объекты, объекты брaузера и объекты, создаваемые программистом.
JavaScript поддерживает следующий набор встроенных объектов: Array, Boolean, Date, Global,Function, Math, Number, String.
Встроенный объект Array.
Массивы в JavaScript
Массив в JavaScript является экземпляром встроенного объекта Array. Нумерация элементов в массиве начинается с нуля. Создать массив можно тремя способами:
var a1 = new Array();
var a2 = new Array(3);
var a3 = new Array('раз','два','три');
a1 - массив, в котором нет ни одного элемента.
a2 - массив из трех элементов с неопределенным (undefined) значением.
a3 - массив, заданный списком своих элементов.
Число элементов в массиве можно изменить, просто задав значение соответствующего элемента:
a3[5]='шесть';
Типы данных элементов массива в JavaScript могут быть различными:
a3[3]=4; a3[4]=5; a3[7]=false;
Разумеется, необходимо предусмотреть корректную работу с массивом, содержащим элементы с разными типами данных.
Для создания многомерного массива каждому элементу массива нужно присвоить другой массив:
var myArray = new Array(2);
for (i=0; i<3; i++){myArray[i] = new Array(2);}
Так можно создать массив, состоящий из трех строк и трех столбцов.
Свойство объекта Array
length. Число элементов массива.
Методы объекта Array
concat( ). Слияние двух массивов. Через параметр передается имя второго массива:
c=a.concat(b);
Здесь элементы массива b добавляются к элементам массива a.
join( ). Слияние элементов массива в строку. Через параметр передается разделитель элементов. По умолчанию разделителем служит запятая.
s=c.join('; ');
reverse( ). Меняет порядок элементов массива на обратный.
slice( ). Выделяет часть из массива. В качестве параметров передаются значения начального и конечного индексов, между которыми происходит выделение. При этом элемент массива с конечным индексом в результат не войдет. Следует помнить, что индексы отсчитываются от нуля.
Встроенный объект Date
С помощью методов встроенного объекта Date можно выполнять различные действия с часами компьютера. Для использования большинства методов объекта Date необходимо создать экземпляр этого объекта:
var today = new Date();
Методы объекта Date
-
getYear. Возвращает год:
-
var nYear = today.getYear();
-
getMonth. Возвращает номер месяца:
-
var nMonth = today.getMonth(); Имейте в виду, что январь - это 0, февраль - 1 и т.д.
-
getDate.Возвращает значение календарной даты в диапазоне от 1 до 31:
-
var nDate = today.getDate();
-
getDay. Возвращает номер дня недели (для воскресенья - 0, для понедельника - 1 и т.д.):
-
var nDay = today.getDay();
-
getHours. Возвращает количество часов, прошедших после полуночи:
-
var nHours = today.getHours();
-
getMinutes. Возвращает количество минут, прошедших с начала часа:
-
var nMinutes = today.getMinutes();
-
getSeconds. Возвращает количество секунд, прошедших с начала минуты:
-
var nSeconds = today.getSeconds();
-
getTime. Возвращает количество миллисекунд, прошедших с 00 часов 00 минут 1 января 1970 года:
-
var nMillisec = today.getTime();
-
getTimeZoneOffset. Возвращает смещение локального времени относительно времени по Гринвичу в миллисекундах:
-
var nOffsetMillisec = today.getTimeZoneOffset();
-
parse. Возвращает количество миллисекунд, прошедших с 00 часов 00 минут 1 января 1970 года по время, указанное в параметре функции. Для вызова этого метода можно просто сослаться на имя класса Date, а создавать объект класса Date не надо:
-
var nMS = Date.parse(prm);
-
Параметр prm может принимать значения: локальные дата и время ("21 Apr 2001 18:00:00");дата и время по Гринвичу ("21 Apr 2001 14:00:00 GMT"); дата и время по Гринвичу cо смещением ("21 Apr 2001 18:00:00 GMT+0400").
-
UTC. Преобразовывает дату, заданную параметрами метода, в количество миллисекунд, прошедших с 00 часов 00 минут 1 января 1970 года. Для вызова этого метода, так же как и методаparse можно просто сослаться на имя класса Date:
-
var nMSec = Date.UTC(year, month, date, hours, min, sec, ms);
-
Имейте в виду, что январь - это 0, февраль - 1 и т.д.
-
setYear. Устанавливает год в объекте класса Date:
-
today.setYear(nYear);
-
setMonth. Устанавливает номер месяца:
-
today.setMonth(nMonth);
-
setDate. Устанавливает значение календарной даты в диапазоне от 1 до 31:
-
today.setDate(nDate);
-
setDay. Устанавливает номер дня недели (для воскресенья - 0, для понедельника - 1 и т.д.):
-
today.setDay(nDay);
-
setHours. Устанавливает количество часов, прошедших после полуночи:
-
today.setHours(nHours);
-
setMinutes. Устанавливает количество минут, прошедших с начала часа:
-
today.setMinutes(nMinutes);
-
setSeconds. Устанавливает количество секунд, прошедших с начала минуты:
-
today.setSeconds(nSeconds);
-
setTime. Устанавливает дату, соответствующую количеству миллисекунд, прошедших с 00 часов 00 минут 1 января 1970 года:
-
var nMillisec = today.setTime();
-
toGMTString. Преобразует дату в строку, записанную в стандартном формате времени по Гринвичу:
-
"Sat, 21 Apr 2001 14:00:00 GMT"
-
toLocaleString. Преобразует дату в строку, записанную в стандартном формате локального времени:
-
"04/16/2001 18:00:00".
Объекты брaузера
Объекты брaузера являются тем интерфейсом, с помощью которого сценарий JavaScript взаимодействует с посетителем и HTML-документом, загруженным в окно брaузера, а также с самим брaузером. Обращаясь к свойствам и методам этих объектов, можно выполнять различные операции над окном брaузера, загруженным в это окно HTML-документом, а также над отдельными объектами, размещенными в HTML-документе.
Практически в любом сценарии JavaScript необходимы такие объекты, как окно - window и документ -document.
Свойства объекта window
-
name. Имя окна, указанное при его открытии методом open, а также в атрибуте TARGET тега <A>или в атрибуте NAME тега <FORM>.
-
self, window. Синонимы имени окна. Относятся к текущему окну.
-
top. Синоним имени окна. Относится к окну верхнего уровня.
-
parent. Синоним имени окна. Относится к окну, содержащему набор фреймов.
-
frames. Массив всех фреймов данного окна.
-
length. Количество фреймов в родительском окне.
-
status. Текущее сообщение, отображаемое в строке состояния окна брaузера.
Методы объекта window
-
alert. Отображение диалоговой панели Alert с сообщением и кнопкой OK. Через параметр передается сообщение, отображаемое в диалоговой панели. После вызова этого метода выполнение сценария задерживается до тех пор, пока посетитель не нажмет кнопку OK, расположенную в диалоговой панели.
Пример
<html>
<head>
<meta http-equiv=Content-Type
content="text/html; charset=windows-1251">
</head>
<body lang=RU>
<script type="text/javascript">
<!--
alert("Рад видеть Вас на моем сайте! Пошли дальше?");
//-->
</script>
</body>
</html>
-
confirm. Отображение диалоговой панели Confirm с кнопками OK и Отмена. В зависимости от того, какая кнопка будет нажата, метод возвращает соответственно значение true или false.
Пример
<html>
<head>
<meta http-equiv=Content-Type
content="text/html; charset=windows-1251">
</head>
<body lang=RU>
<script type="text/javascript">
<!--
if(confirm("Рад видеть Вас на моем сайте! Пошли
дальше?"))
{document.write("Пошли!");}
else
{document.write("Не хочешь - не надо... ");}
//-->
</script>
</body>
</html>
-
prompt. Отображение диалоговой панели Prompt с полем ввода и кнопками OK и Отмена. В зависимости от того, какая кнопка будет нажата, метод возвращает соответственно введенную строку или значение null. Метод имеет два параметра. Первый - сообщение над полем ввода. Второй (необязательный) - начальное значение строки ввода.
Пример
<html>
<head>
<meta http-equiv=Content-Type
content="text/html; charset=windows-1251">
</head>
<body lang=RU>
<script type="text/javascript">
<!--
var yourName=prompt("Как Вас зовут?", "Маша"))
if(yourName=="Маша")
{document.write("Угадал!");}
else
{document.write("Не угадал. Вас зовут " + yourName);}
//-->
</script>
</body>
</html>
-
open. Открытие окна. Метод имеет три параметра. Первый задает URL HTML-документа, предназначенного для загрузки в новое окно. Второй определяет имя окна для использования в атрибуте TARGET тега <A> или в атрибуте NAME тега <FORM>. Третий (необязательный) задает в виде текстовой строки параметры, определяющие внешний вид открываемого окна.
| toolbar | Отображение стандартной инструментальной линейки [=yes|no] | [=1|0] |
| location | Отображение поля ввода адреса документа [=yes|no] | [=1|0] |
| status | Отображение строки состояния [=yes|no] | [=1|0] |
| menubar | Отображение линейки меню [=yes|no] | [=1|0] |
| scrollbars | Отображение полос прокрутки [=yes|no] | [=1|0] |
| resizable | Изменение размеров нового окна [=yes|no] | [=1|0] |
| width | Ширина окна в пикселах |
| height | Высота окна в пикселах |
| fullscreen | Полноэкранный режим |
| copyhistory | Сохранение истории загрузки документов в данное окно [=yes|no] | [=1|0] |
| directories | Наличие в данном окне кнопок групп новостей [=yes|no] | [=1|0] |
Пример
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
