Веб-разработчики часто используют JavaScript для выполнения некоторых типичных
задач на разрабатываемый веб-сайтах. В данной публикации будут рассмотрены
десять наиболее полезных фрагментов JavaScript, которые
можно просто скопировать и использовать как есть в разрабатываемых
веб-приложениях.
В данной публикации будут рассмотрены реализации
следующих задач:
- Отображение даты
- Календарь
- Закрытие окна
- Копирование выделенного текста
- Возврат к предыдущей странице
- Фокусирование в OnLoad
- Разрыв фрейма
- Добавление в закладки
- IP аддресс
- Указание ссылаемой страницы
Отображение Даты
Вы можете
использовать данный фрагмент для отображения даты в формате: Friday, June 11, 2010. Просто вставтье данный фрагмент JavaScript на вашу страницу где требуется
отображение даты в подобном виде.
<SCRIPT
LANGUAGE="JavaScript">
var now =
new Date();
var days =
new
Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
var months =
new
Array('January','February','March','April','May','June','July','August','September','October','November','December');
var date =
((now.getDate()<10) ? "0" : "")+ now.getDate();
function
fourdigits(number) {
return (number < 1000) ? number +
1900 : number;
}
today =
days[now.getDay()] + ", " +
months[now.getMonth()]
+ " " +
date
+ ", " +
(fourdigits(now.getYear()))
;
document.write(today);
</script>
Календарь
Ниже
представлена реализация простого календаря который показывает один месяц. Он
отображается с помощью CSS, поэтому его внешний вид можно
легко оптимизировать под каждый конкретный случай. Добавьте фрагмент CSS и JavaScript кода для того что бы использовать данный элемент управдения на вашей странице.
<style
type="text/css">
span.label {color:black;width:30;height:16;text-align:center;margin-top:0;background:#ffF;font:bold 13px Arial}
span.c1
{cursor:hand;color:black;width:30;height:16;text-align:center;margin-top:0;background:#ffF;font:bold
13px Arial}
span.c2
{cursor:hand;color:red;width:30;height:16;text-align:center;margin-top:0;background:#ffF;font:bold
13px Arial}
span.c3
{cursor:hand;color:#b0b0b0;width:30;height:16;text-align:center;margin-top:0;background:#ffF;font:bold
12px Arial}
</style>
<script
type="text/javascript">
function
maxDays(mm, yyyy){
var mDay;
if((mm == 3) || (mm == 5) || (mm == 8)
|| (mm == 10)){
mDay = 30;
}
else{
mDay
= 31
if(mm
== 1){
if
(yyyy/4 - parseInt(yyyy/4) != 0){
mDay = 28
}
else{
mDay
= 29
}
}
}
return mDay;
}
function
changeBg(id){
if (eval(id).style.backgroundColor !=
"yellow"){
eval(id).style.backgroundColor =
"yellow"
}
else{
eval(id).style.backgroundColor =
"#ffffff"
}
}
function
writeCalendar(){
var now =
new Date
var dd =
now.getDate()
var mm =
now.getMonth()
var dow =
now.getDay()
var yyyy =
now.getFullYear()
var arrM =
new
Array("January","February","March","April","May","June","July","August","September","October","November","December")
var arrY =
new Array()
for (ii=0;ii<=4;ii++){
arrY[ii] = yyyy - 2 + ii
}
var arrD =
new
Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat")
var text =
""
text =
"<form name=calForm>"
text +=
"<table border=1>"
text +=
"<tr><td>"
text +=
"<table width=100%><tr>"
text +=
"<td align=left>"
text +=
"<select name=selMonth onChange='changeCal()'>"
for (ii=0;ii<=11;ii++){
if (ii==mm){
text += "<option
value= " + ii + " Selected>" + arrM[ii] + "</option>"
}
else{
text += "<option
value= " + ii + ">" + arrM[ii] + "</option>"
}
}
text +=
"</select>"
text +=
"</td>"
text +=
"<td align=right>"
text +=
"<select name=selYear onChange='changeCal()'>"
for (ii=0;ii<=4;ii++){
if (ii==2){
text += "<option
value= " + arrY[ii] + " Selected>" + arrY[ii] + "</option>"
}
else{
text += "<option
value= " + arrY[ii] + ">" + arrY[ii] + "</option>"
}
}
text +=
"</select>"
text +=
"</td>"
text +=
"</tr></table>"
text +=
"</td></tr>"
text +=
"<tr><td>"
text +=
"<table border=1>"
text +=
"<tr>"
for (ii=0;ii<=6;ii++){
text += "<td
align=center><span class=label>" + arrD[ii] + "</span></td>"
}
text +=
"</tr>"
aa = 0
for (kk=0;kk<=5;kk++){
text += "<tr>"
for (ii=0;ii<=6;ii++){
text += "<td
align=center><span id=sp" + aa + "
onClick='changeBg(this.id)'>1</span></td>"
aa += 1
}
text += "</tr>"
}
text +=
"</table>"
text +=
"</td></tr>"
text +=
"</table>"
text +=
"</form>"
document.write(text)
changeCal()
}
function
changeCal(){
var now =
new Date
var dd =
now.getDate()
var mm =
now.getMonth()
var dow =
now.getDay()
var yyyy =
now.getFullYear()
var currM =
parseInt(document.calForm.selMonth.value)
var prevM
if (currM!=0){
prevM = currM - 1
}
else{
prevM = 11
}
var currY =
parseInt(document.calForm.selYear.value)
var mmyyyy =
new Date()
mmyyyy.setFullYear(currY)
mmyyyy.setMonth(currM)
mmyyyy.setDate(1)
var day1 =
mmyyyy.getDay()
if (day1 == 0){
day1 = 7
}
var arrN =
new Array(41)
var aa
for (ii=0;ii<day1;ii++){
arrN[ii] = maxDays((prevM),currY)
- day1 + ii + 1
}
aa = 1
for (ii=day1;ii<=day1+maxDays(currM,currY)-1;ii++){
arrN[ii] = aa
aa += 1
}
aa = 1
for (ii=day1+maxDays(currM,currY);ii<=41;ii++){
arrN[ii] = aa
aa += 1
}
for (ii=0;ii<=41;ii++){
eval("sp"+ii).style.backgroundColor
= "#FFFFFF"
}
var dCount =
0
for (ii=0;ii<=41;ii++){
if (((ii<7)&&(arrN[ii]>20))||((ii>27)&&(arrN[ii]<20))){
eval("sp"+ii).innerHTML
= arrN[ii]
eval("sp"+ii).className
= "c3"
}
else{
eval("sp"+ii).innerHTML
= arrN[ii]
if
((dCount==0)||(dCount==6)){
eval("sp"+ii).className
= "c2"
}
else{
eval("sp"+ii).className
= "c1"
}
if
((arrN[ii]==dd)&&(mm==currM)&&(yyyy==currY)){
eval("sp"+ii).style.backgroundColor="#90EE90"
}
}
dCount += 1
if (dCount>6){
dCount=0
}
}
}
</script>
После этого
добавте вызов кода с помощью метода представленного ниже.
<script
type="text/javascript">writeCalendar()</script>
Закрытие окна
Возможность
закрытия окна программно полезна если вы используете всплывающие окна на вашей
странице, в данном случае посетитель сможет легко закрыть такое окно. Это
достигается несколькими способами: для использование кнопки, вставтье код
предоставленный ниже:
<form>
<input
type=button value="Close Window"
onClick="javascript:window.close();">
</form>
Для
использования тестовой ссылки, добавтье код представленный ниже:
<a
href="javascript:window.close();">Click to Close Window</a>
Если вы
хотите что бы окно закрылось автоматически по прошествии некоторого времени
можете использовать код, представленный ниже:
<BODY
onLoad="setTimeout(window.close,20000)">
Копирование выделенного текста
Часто на
странице может быть какая то информация, которую посетители захотели бы
скопровать. Вы можете упростить для ваших посетителей эту задачу, предоставив
механизм, который позволяет сделать это по одному нажатию на кнопку. Для этого
вставьте код представленный ниже на вашу страницу:
<SCRIPT
LANGUAGE="JavaScript">
function copyit(theField) {
var selectedText =
document.selection;
if (selectedText.type == 'Text') {
var newRange =
selectedText.createRange();
theField.focus();
theField.value = newRange.text;
} else {
alert('select a text in the page
and then press this button');
}
}
</script>
А внутри
тега body вашей страницы добавьте следующий
код:
<form
name="it">
<div
align="center">
<input
onclick="copyit(this.form.select1)" type="button"
value="Press to copy the highlighted text" name="btnCopy">
<p>
<textarea
name="select1" rows="4" cols="45"></textarea>
</div>
</form>
Кнопка “Назад” на JavaScript
Скрипт
представленный ниже позволяет пользователю нажать на кнопку для возврата на
предыдущую страницу, так же как работает соответствующая кнопка браузера.
Вставьте код представленный ниже на вашу страницу:
<FORM>
<INPUT
TYPE="Button" VALUE="Previous Page" onClick="history.go(-1)">
</FORM>
Если вместо
кнопки вы хотите использовать ссылку, использхуйте следующий фрагмент:
<a
href="javascript:history.back(1)">Previous Page</a>
Предотвращение отображения страницы во фрейме
Для того что бы исключить возможность
отображения вашей страницы на некоторым стороннем фрейме (к счастью это уже не
так популярно как прежде) можно использовать скрипт представленный ниже.
<body
onLoad="if (self != top) top.location = self.location">
Добавление в закладки
Несмотря на
то что этот скрипт работает только в Internet Explorer, о нем
также полезно знать. Разместите данный фрагмент на своей странице для получения
желаемого результата.
<a
href="javascript:window.external.AddFavorite('http://www.yoursite.com',
'Your Site Name')">Add to Favorites</a>
Установка фокуса при загрузке страницы
Вы можете
поместить курсор в требуемое поле ввода (установить фокус на поле ввода) как
только ваша страница будет загружена. Это поможет посетителю сфокусировать свое
внимание и приступить к работе со станицей сразу же после загрузки. Для этого
требуется только одна строкча кода представленная ниже.
<BODY
OnLoad="document.nameform.user.focus();">
После этого
вам нужно только использовать корректное имя для формы и элементов управления (название
формы и элементов могут быть изменены, но тогда необходимо сделать и
соответствующие изменения и в вызове фуникции focus()):
<form
name="nameform">
Name: <input
type=text name=user size=10>
</form>
IP Адресс
Часто
возикает необходимость в получении информации о IP адрессе посетителя. Этого можно
достичь с помощью нескольких строк, показаных ниже. Поместите этот код на вашу
страницу для того что бы отобразить IP адресс.
<SCRIPT
LANGUAGE="JavaScript">
var ip = '<!--#echo
var="REMOTE_ADDR"-->';
document.write("Your
IP address is" + ip);
</script>
Указание ссылаемой страницы
Этот скрипт
позволяет отображать вашу страницу только с того места, которое было вами
указано. Поместите код представленный ниже на вашу страницу для достижения
желаемого результата.
<SCRIPT
LANGUAGE="JavaScript">
var
allowedreferrer = "http://www.yoursite.com/referringpagename.htm";
if
(document.referrer.indexOf(allowedreferrer) == -1) {
alert("You
can only access this page from " + allowedreferrer);
window.location=allowedreferrer;
}
</script>
Вот и все! Если вы
знаете другие полезные скрипты на каждый день, не поленитесь и расскажите всему
миру о нет в комментариях ниже.
Комментариев нет:
Отправить комментарий