Phyton обзор

использовать `select box` как навигационное меню

При использовании простого JavaScript, вы можете использовать select box для передвижения по сайту. Рассмотрите этот пример:

	   <FORM name="navForm">
	   <select name="menu"
	   onChange = "self.location =
	   document.navForm.menu[document.navForm.menu.selectedIndex].value;">
	   <option value="home.html">Home</option>
	   <option value="links.html">Links</option>
	   <option value="contact.html">Contact Info</option>
	   </select>
	   </FORM>

Просто сохраните URL различных страниц в option value. Обработчик события OnChange вызовет перенаправление расположения, когда значение в поле изменено.

Вы могли бы использовать этот код, чтобы изменить расположение другого фрейма изменением 'self.location =' на 'top.framename.location ='

использовать картинку для кнопки submit

Часто возникает вопрос: "Как инициировать форму по картинке, а не по кнопке submit?" Решение столь же просто, как этот пример:

	   <form>
	   <input type="image" name="cancel" src="cancel.gif" alt="Cancel!" border=0>
	   <input type="image" name="continue" src="continue.gif"
	   alt="Click to Continue" border=0>
	   </form>

Когда нажимается любая кнопка, форма инициируется и координаты x/y щелчка мыши на кнопке загружаются в объект запроса. Например, если пользователь выбрал Cancel!, объект запроса будет содержать переменные cancel.x и cancel.y. Точно так же щелчок на Continue привел бы к переменным continue.x и continue.y.

Здесь важно отметить, что элементы .x и .y - не переменные объектов continue или cancel, а фактически часть имени "continue.x". Следовательно, нельзя использовать типичный метод для определения существования одного из дочерних объектов запроса:

	   if (request.normalItem)
	   act();
	   if (request.continue.x) // Noooo! Produces horrible error messages!
	   doContinuingThings();

Тем не менее рассмотрите это:

	   if (request['normalItem'])
	   act();
	   if (request['continue.x']) // Much better :)
	   doContinuingThings();

Благодаря названным массивам JavaScript, можно проверить какая картинка инициировала форму.

Для некоторых приложений, полезно знать координаты курсора на нажатой картинке. Эта информация, конечно, содержится в парах image_element.x и image_element.y. Следующий серверный JavaScript мог бы использоваться для этого:

	   x=0;
	   y=0;
	   if ((request['my_submit_image.x']) (request['my_submit_image.y'])) {
	   x = parseInt(request['my_submit_image.x']);
	   y = parseInt(request['my_submit_image.y']);
	   }

Передача данных между формами на различных страницах

В качестве простого примера, предположите, что ваша "домашняя" страница запрашивает имя пользователя, затем использует это имя, чтобы обратиться к пользователю на следующих страницах. Вы можете взять имя, используя форму, затем использовать JavaScript для передачи имени пользователя в следующую страницу, используя URL. Последующая страница могла бы затем анализировать имя пользователя из URL, используя информацию в document.search.

home.html

	   <script language="JavaScript">
	   function nextPage() {
	   self.location = "next.html?name=" +
	   escape(document.theForm.userName.value);
	   // Use escape() any time there might be spaces or
	   } // non-alpa characters
	   </script>
	   <form onSubmit = "nextPage();return false;">
	   Enter your name: <input type=text name=userName>
	   <input type=submit>
	   </form>

next.html

	   userName = document.search;
	   userName = userName.substring(userName.indexOf("=")+1);
	   document.write("Greetings, " + userName + "<P>");

Передача данных между формами. Методonload

Нужно заполнить поля данными, переданными в строке запроса (у нас id). Если использовать только javascript, то у <body> новой страницы нужно добавить событие onload, в котором после загрузки страницы читаем переданные значения параметров и вставляем их в нужные поля.

Первая страница:

<script language="javascript" type="text/javascript">
function goMail() {
if (confirm("Уверены, что хотите отправить сообщение?")) {
document.location = "UserMail.html?id=" + document.getElementById("userName").value;
}
}
</script>
<form>
<p>Ваше имя: </p>
<input id="userName" type="text" name="userName" value="" />
<br/>
<input type ="button" value="Отправить сообщение" onclick="goMail()" />
</form>

Вторая страница:

<head>
<title></title>
<script language="javascript" type="text/javascript">
function OnLoad() {
var paramValue = window.location.href.split("?")[1].split("=")[1];
document.getElementById("UsName").innerHTML = paramValue;
}
</script>
</head>
<body onload="OnLoad()">
<font id="UsName">
</font>
</body>

	   
	   получить значение выбранной в данный момент radio button в radio group или группе checkboxes
	   Существует свойство, созданное в объекте form для каждой radio buttons или checkboxes 
	   с тем же самым именем. Например, следующий HTML код:
	   	   <form name='theForm'>
	   <input type=radio name="gender" value="Male">Male
	   <input type=radio name="gender" value="Female">Female
	   <input type=radio name="gender" value="Evasive">Not Specified
	   </form>
	   
	   
	   	
	   
	   Male
	   Female
	   Not Specified
	   	
	   приводит к созданию 3-х элементов массива,
	   вызываемых с помощью document.theForm.gender.
	   Чтобы определить значение выбранной кнопки (или checkbox'а), 
	   вам нужно проверить свойство checked 
	   каждого из элементов. Например:
	   function checkIt() {
	   theGroup = document.theForm.gender;
	   for (i=0; i< theGroup.length; i++) {
	   if (theGroup[i].checked) {
	   alert("The value is " + theGroup[i].value);
	   break;
	   }
	   }
	   }
	   
	   	Для получения и установки значения radio button value
	   на javascript можно использовать следующие функции:
	   	   function getCheckedValue(radioObj) {
	   if(!radioObj)
	   return "";
	   var radioLength = radioObj.length;
	   if(radioLength == undefined)
	   if(radioObj.checked)
	   return radioObj.value;
	   else
	   return "";
	   for(var i = 0; i < radioLength; i++) {
	   if(radioObj[i].checked) {
	   return radioObj[i].value;
	   }
	   }
	   return "";
	   }
	   
	   	   function setCheckedValue(radioObj, newValue) {
	   if(!radioObj)
	   return;
	   var radioLength = radioObj.length;
	   if(radioLength == undefined) {
	   radioObj.checked = (radioObj.value == newValue.toString());
	   return;
	   }
	   for(var i = 0; i < radioLength; i++) {
	   radioObj[i].checked = false;
	   if(radioObj[i].value == newValue.toString()) {
	   radioObj[i].checked = true;
	   }
	   }
	   }
	   
	   получить форму, чтобы инициировать процесс запуска клавишей Enter
	   Форма отправляется, если нажата клавиша enter, 
	   в то время как единственный входной текстовый элемент формы имеет фокус.
	   Вы можете вызывать подобное поведение в форме,
	   имеющей более одного элемента, разбивая форму на ряд отдельных форм,
	   так, чтобы каждая форма имела только один текстовый элемент. 
	   Используйте обработчик события onSubmit (или action="javascript:myFunction();")
	   для накопления данных из других форм в вашей странице и инициируйте их все сразу.
	   
	   
	    отключить поле текстового ввода
	   Используйте обработчик onfocus для вызова функции blur():
	   	   <INPUT TYPE="text" NAME="aTextField" ONFOCUS="this.blur()">
	   
	   
	   
	   
	   динамически отключать/включать поле
	   используйте функцию eskip (e)
	   	   { this.blur(); }
	   <A HREF="javascript:document.formName.aTextField.onfocus = skip; void
	   0">disable text field</A>
	   <A HREF="javascript:document.formName.aTextField.onfocus = null; void
	   0">enable text field</A>
	   
	   
	   { this.blur(); }
	   disable text field
	   enable text field
	   
	    сделать загрузку страницы при выборе флажка
	   Используйте обработчик OnChange для вызова функции submit():
	   	   <form method=get OnChange='this.submit();'>
	   <input type=checkbox name="fnew">Только новые
	   </form>
	   
	   
	   
	   Только новые
	   
	   
	   Сохранение данных в локальное хранилище браузера:
	   sessionStorage — запоминает результат 
	   пока открыт сайт во вкладке(окне), можно свободно перемещаться по сайту,
	   обновлять страницы, но не закрывать окно браузера(вкладку).
	   
	   localStorage — запоминает результат на очень долгое время, 
	   пока пользователь не очистит локальное хранилище браузера. 
	   Можно через несколько дней зайти на сайт и увидеть ранее заполненную форму.
	   	   <style>
	   #idVhod {
	   display: none; /* изначально скрыт */
	   }
	   </style>
	   
	   <button onclick="onclickVhod()">открыть</button> <span id="idVhod">скрытый текст</span>
	   
	   <script>
	   var idVhod = document.getElementById('idVhod');
	   
	   function onclickVhod() {
	   idVhod.style.display = (idVhod.style.display == 'inline') ? '' : 'inline'
	   localStorage.setItem('hide', idVhod.style.display); // сохраняем значение в объект hide
	   }
	   
	   if(localStorage.getItem('hide') == 'inline') { // если значение объекта hide "inline"
	   document.getElementById('idVhod').style.display = 'inline';
	   }
	   //localStorage.removeItem('hide') // удалить один элемент
	   //localStorage.clear() // удалить все элементы
	   
	   </script>
	   
	   
	   
	   
	    скрытый текст
	   
	   
	   
	   Особенности onClick, onSubmit, onReset
	   
	   метод click() у гиперссылки — влечет за собой вызов обработчика onClick этой ссылки
	   метод click() у ЛЮБОЙ кнопки формы — влечет за собой вызов обработчика onClick этой кнопки
	   метод reset() у формы — влечет за собой вызов обработчика onReset у формы
	   метод submit() у формы — НЕ влечет за собой вызов обработчика onSubmit у формы!
	   
	   
	   DOM объект элемента INPUT:
	   	   interface HTMLInputElement : HTMLElement {
	   attribute DOMString accept;
	   attribute DOMString alt;
	   attribute DOMString autocomplete;
	   attribute boolean autofocus;
	   attribute boolean defaultChecked;
	   attribute boolean checked;
	   attribute DOMString dirName;
	   attribute boolean disabled;
	   readonly attribute HTMLFormElement? form;
	   readonly attribute FileList? files;
	   attribute DOMString formAction;
	   attribute DOMString formEnctype;
	   attribute DOMString formMethod;
	   attribute boolean formNoValidate;
	   attribute DOMString formTarget;
	   attribute unsigned long height;
	   attribute boolean indeterminate;
	   readonly attribute HTMLElement? list;
	   attribute DOMString max;
	   attribute long maxLength;
	   attribute DOMString min;
	   attribute boolean multiple;
	   attribute DOMString name;
	   attribute DOMString pattern;
	   attribute DOMString placeholder;
	   attribute boolean readOnly;
	   attribute boolean required;
	   attribute unsigned long size;
	   attribute DOMString src;
	   attribute DOMString step;
	   attribute DOMString type;
	   attribute DOMString defaultValue;
	   attribute DOMString value;
	   attribute Date? valueAsDate;
	   attribute double valueAsNumber;
	   attribute unsigned long width;
	   
	   void stepUp(optional long n);
	   void stepDown(optional long n);
	   
	   readonly attribute boolean willValidate;
	   readonly attribute ValidityState validity;
	   readonly attribute DOMString validationMessage;
	   boolean checkValidity();
	   void setCustomValidity(DOMString error);
	   
	   readonly attribute NodeList labels;
	   
	   void select();
	   attribute unsigned long selectionStart;
	   attribute unsigned long selectionEnd;
	   attribute DOMString selectionDirection;
	   void setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction);
	   };

использовать select box как навигационное меню

использовать картинку для кнопки submit

Передача данных между формами на различных страницах

Передача данных между формами. Методonload

получить значение выбранной в данный момент radio button в radio group или группе checkboxes

получить форму, чтобы инициировать процесс запуска клавишей Enter

отключить поле текстового ввода

динамически отключать/включать поле

сделать загрузку страницы при выборе флажка

Сохранение данных в локальное хранилище браузера:

Особенности onClick, onSubmit, onReset

использовать `select box` как навигационное меню