среда, 23 апреля 2014 г.

Полезные скрипты на JavaScript


Веб-разработчики часто используют JavaScript для выполнения некоторых типичных задач на разрабатываемый веб-сайтах. В данной публикации будут рассмотрены десять наиболее полезных фрагментов  JavaScript, которые можно просто скопировать и использовать как есть в разрабатываемых веб-приложениях.
В данной публикации будут рассмотрены реализации следующих задач:
  1. Отображение даты
  2. Календарь
  3. Закрытие окна
  4. Копирование выделенного текста
  5. Возврат к предыдущей странице
  6. Фокусирование в OnLoad
  7. Разрыв фрейма
  8. Добавление в закладки
  9. IP аддресс
  10. Указание ссылаемой страницы

Отображение Даты

Вы можете использовать данный фрагмент для отображения даты в формате: 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>
Вот и все! Если вы знаете другие полезные скрипты на каждый день, не поленитесь и расскажите всему миру о нет в комментариях ниже.