FAQ по Javascript

Q: Как подключить разные страницы для тех, у кого включен и у кого выключен JavaScript?

<html>

<head>
	<script language="javascript" type="text/javascript">
	<!--
		/* JavaScript включен - переходим на соответствующую страницу */
		window.location.href = 'url';
	//-->
	</script>
</head>

<body>
	<!-- JavaScript отключен -->
</body>

</html>

Q: Как передать параметры с одной страницы на другую?

--- Файл page1.htm ---

<html>

<head>
	<title>1st page</title>
</head>

<body>
	<!-- 
		передаем параметры со значениями value1 и value2 на страницу 
  page2.htm
		пары параметр-значение разделяются символом &
	-->
	<a href="page2.htm?param1=value1¶m2=value2">Go to 2nd page</a>
</body>

</html>

--- Файл page2.htm ---

<html>

<head>
	<title>2nd page</title>
	<script language="javascript" type="text/javascript">
	<!--
		/* Функция считывает параметр по имени */
		function getPar(name)
		{
			paramStr = window.location.search;
			begin = paramStr.indexOf(name) + name.length + 1;
			end = paramStr.indexOf('&', begin);
			if(end == -1) end = paramStr.length;
			return unescape(paramStr.substring(begin, end));
		}
	//-->
	</script>
</head>

<body>
	<script language="javascript" type="text/javascript">
	<!--
		/* Считываем параметры */
		var s = 'Parameters from 1st page:<br><br>';
		s += 'Param1 = ' + getPar('param1') + '<br>';
		s += 'Param2 = ' + getPar('param2');
		/* Вывод в браузер */
		document.write(s);
	//-->
	</script>
</body>

</html>

Q: Как создать новый документ и открыть его в новом окне?

<html>

<head>
	<title>New Window</title>
	<script language="javascript" type="text/javascript">
	<!--
		function newWin()
		{
			/* В переменной doc находится html-код, 
который будет записан в новое окно */
			var doc = '<html><head><title>New Window</title>
</head><body>New Window</body></html>';
			/* Открываем новое окно */
			var w = window.open('');
			/* Записываем в него новый документ */
			with(w.document)
			{
				open();
				write(doc);
				close();
			}
		}
	//-->
	</script>
</head>

<body>
	<a href="javascript:newWin();">New Window</a>
</body>

</html>

Q: Как сделать предварительную загрузку картинок?

<html>

<head>
	<title>Preload Images</title>
	<script language="javascript" type="text/javascript">
	<!--
		/* Загружаем n картинок в кэш браузера */
		function preloadImages()
		{
			var imgList = preloadImages.arguments;
			var img = new Array();
			for(var i = 0; i < imgList.length; i++)
			{
				img[i] = new Image();
				img[i].src = imgList[i];
			}
		}
	//-->
	</script>
</head>

<body onload="preloadImages('picture1.gif', 
'picture2.gif', 'picture3.gif');">
</body>

</html>

Q: Как вызвать функцию JavaScript, определенную в одном фрейме, из
другого фрейма?

--- Файл index.htm ---

<html>

<head>
	<title>Frames</title>
</head>

<frameset rows="50%, 50%">
	<frame name="frm1" src="page1.htm">
	<frame name="frm2" src="page2.htm">
</frameset>

</html>

--- Файл page1.htm ---

<html>

<head>
	<title></title>
	<script language="javascript" type="text/javascript">
	<!--
		/* Вызываем функцию hello() из нижнего фрейма */
		function call()
		{
			top.window.frames['frm2'].hello();
		}
	//-->
	</script>
</head>

<body>
	<table width="100%" height="100%" cellpadding="0" 
cellspacing="0" border="0">
		<tr><td align="center"><a href="javascript:call();">
Call function from bottom frame</a></td></tr>
	</table>
</body>

</html>

--- Файл page2.htm ---

<html>

<head>
	<title></title>
	<script language="javascript" type="text/javascript">
	<!--
		function hello()
		{
			alert('Hello!');
		}
	//-->
	</script>
</head>

<body>
</body>

</html>

Q: Как проверить формат адреса e-mail?

<html>

<head>
	<title>E-mail Check</title>
	<script language="javascript" type="text/javascript">
	<!--
		/* 
			Функция проверки формата адреса e-mail. 
			Возвращает true, если адрес соответствует формату, 
false - в противном случае.
		*/
		function check(address)
		{
			var re =/^[\w-](\.?[\w-])*@([A-Za-z]{2,}|[\w-](\.?

[\w-])*\.[A-Za-z]{2,})$/i;
			return re.test(address);
		}
		
		function makeCheck(address)
		{
			alert(check(address) ? 'Valid' : 'Invalid');
		}
	//-->
	</script>
</head>

<body>
	<form onsubmit="makeCheck(this.elements.address.value);">
		<input type="text" name="address" size="15" />
		<input type="submit" value="Check Address" />
	</form>
</body>

</html>

Q: Как работать с cookie?

/* 
	Функция записи cookie.
	setCookie(name, value[, expires date, path, domain, secure])
*/
function setCookie(name, value)
{
	var args = setCookie.arguments;
	var expires = args[2] ? '; expires=' + 
 args[2].toGMTString() : '';
	var path = args[3] ? '; path=' + args[3] : '';
	var domain = args[4] ? '; domain=' + args[4] : '';
	var secure = args[5] ? '; secure' : '';
	document.cookie = name + '=' + escape(value) + expires + 
path + domain + secure;
}
		
/* Функция чтения cookie */
function getCookie(name)
{
	name += '=';
	with(document)
	{
		var beg = cookie.indexOf(name);
		if(beg == -1) return false;
		else beg += name.length;
		var end = cookie.indexOf(';', beg);
		if(end == -1) end = cookie.length;
		return unescape(cookie.substring(beg, end));
	}
}
		
/* Функция удаления cookie */
function deleteCookie(name)
{
	var expDate = new Date();
	expDate.setTime(expDate.getTime() - 1);
	setCookie(name, getCookie(name), expDate);
}

joshua5, (joshua5@e-mail.ru).

Думаю, многим пригодятся пара полезных примочек, которые я сам некогда искал в свою базу. Это полезный скрипт для работы с фреймами: дело в том, что основная проблема фреймов - неправильное отображение при индексировании поисковиками - при использовании скрипта при открытии неполного фрейма (то есть, лишь одной части) запускается скрипт и загружает (в данном случае) главную страницу (если нужно - есть другой скрипт - гораздо более сложный, который грузит ту же страницу, но уже во фрейме)

<!--BEST фишка 
для фреймов на случай если поисковик откроет одну часть фрейма-->
<SCRIPT LANGUAGE="JavaScript"><!-- 
setTimeout ("changePage()", 10); function changePage()
 { if (self.parent.frames.length ==0)self.parent.location=
"http://www.andnow.ru/index_ws1.html";}// --></SCRIPT> 
<!--скроллинг цветной -->
<HEAD>
<STYLE TYPE="text/css"><!--
body
{
scrollbar-face-color: #4F70dF;
scrollbar-shadow-color: #333333;
scrollbar-highlight-color: #AC8CAC;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #666666;
scrollbar-track-color: #FFFFCC;
scrollbar-arrow-color: #0Fe640;
}
-->
</STYLE>
</HEAD>

mike, (mike@baumanka.ru).

Комментарии? Поправки? Дополнения? faq@ixbt.com

[ Конференция ] [FAQ] [FAQ/Софт]