JS
JavaScript (не путать с Java) - это высокоуровневый,
динамический, многопарадигменный, объектно-ориентированный, основанный на
прототипе, слабо типизированный язык, используемый как для клиентских, так
и для серверных сценариев. Его основное использование заключается в
рендеринге и выполнении манипуляций с веб-страницами.
см, подробее в http://qaru.site/questions/tagged/javascript
Этот же файл, от 2014 года
Содержание:
jQueryJavaScript: Инструкция debugger
ERROR - Перехват ошибок, "try..catch"
Сервер сценариев Windows
Выражения и Операторы
Объекты
объект WINDOW
объект DOCUMENT
Встроенные объекты.
Объект Array
Объект Function
Методы, Функции
Определение геттеров и сеттеров
Встроенные функции.
Код свежих анекдотов для сайта.
СТАРТ - Как запустить скрипт в документе.
Табло, со звуком. Вычисления -
Рисунок. Изменить Цвет/Размер.
Дата и время. - вывод в форме
Устный счет
Формула Герона в скрипте
Написать число.
Всплывающее окно при входе на сайт.
Бегущая строка или картинка.
Форма Текстового ввода
Вставка адреса.
Сноски в тексте и Спойлер.
Пример скрипта - Запуск кнопкой.
Новые окна Браузера.
Запись в реестр.Стартовая страница, Браузера.
Новые.
INDEX
Учебники:
«Для тех, кто в танке»
по Web-дизайну(ч.1)
JS - учебник.
CSS - СТИЛИ, Таблица стилей.
События Dinamic HTML - для запуска скрипта.
Form
Примеры:
...на этой странице.Страница с Горизонтальным меню. Для сайта.
Читай!!
https://puzzleweb.ru/javascript/12_functions.php
Строки - https://learn.javascript.ru/string#metody-i-svoystva
JavaScript: Инструкция debugger
Инструкция debugger представляет собою точку останова, устанавливаемую непосредственно в коде программы. Точка останова - это преднамеренное прерывание выполнения программы, в определённый момент с целью исследовать в отладчике состояние программы (передвижение по сценарию, просмотр стека вызовов, значения переменных и т. д.) и тем самым определить, правильно ли программа себя ведёт. Инструкция имеет следующий синтаксис:debugger;
Инструкцию debugger можно устанавливать в любом месте исходного кода.
Работу инструкции debugger можно увидеть только, если в браузере имеется и запущен отладчик кода (например, консоль браузера). Поэтому, чтобы увидеть, как работает инструкция debugger, на уже открытой веб-странице нужно открыть консоль браузера и обновить страницу:
var a = 1;
var b = a;
debugger;
console.log(b);
JavaScript: Метки инструкций
В JavaScript любая инструкция может быть помечена предшествующим ей идентификатором, чтобы затем на неё можно было ссылаться. Такой идентификатор называется меткой инструкции. Синтаксис меток: метка: инструкция;// Метку и инструкцию допускается размещать на разных строках
метка:
инструкция;
Несмотря на то, что пометить можно любую инструкцию, помечать имеет смысл только инструкции, имеющие тело.
Использовать метки можно только внутри тех инструкций, к которым они применяются. Метки работают только совместно с инструкциями break и continue. Имя метки указывается после инструкции
break или continue:
break имя_метки; continue имя_метки; С помощью меток можно явно указывать, к какому циклу или к какой другой инструкции они относятся. Пример работы инструкции break с меткой в составной инструкции: var x = 10; test: { x = 15; break test; x = 20; // Не выполнится } alert(x); // 15 Пространство имён для меток отличается от пространства имён для переменных и функций, поэтому в качестве меток допускается использовать идентификаторы, совпадающие с именами переменных или функций:
var test = 10;
test: {
if (test == 10) break test;
test = 25;
}
alert(test); // 10
Вложенные инструкции не могут помечаться теми же идентификаторами, что и вмещающие их инструкции, но две независимые инструкции могут помечаться одинаковыми именами меток.
Любая инструкция может иметь множество меток, в этом случае метки просто указываются друг за другом:
var x = 10;
test1: test2: {
if (x == 15) break test1;
x = 20;
if (x == 20) break test2;
x = 25;
}
alert(x); // 20
Обычно метки используются только при работе с вложенными циклами:
test:
for (var i = 0; i < 5; i++) {
for (var j = 0; j < 5; j++) {
if (j == 3) break test; // Если переменная j равна 3, то завершаем
// итерацию внутреннего цикла
// и выходим из внешнего цикла
}
}
document.write("i: " + i + "<br>j: " + j);
================================
-*-
jQuery
ПОДКЛЮЧЕНИЕ БИБЛИОТЕКИ JQUERY.
===
Скачать себе на комп - тут можно.
Способ 1. Идем по адресу и жмем большую желто-оранжевую кнопку Download jQuery. Переходим на страницу где выбираем версию jQuery. Желательно выбирать последнюю из доступных (на момент написания статьи - это 2.2.3). Обозначение compressed - означает, что библиотека минимизирована, т.е. занимаем минимум места, но, к сожалению, читать исходных код трудно.
Качаем! После сохранения подключаем файл библиотеки.
Для моей структуры (все скрипты лежат в папке js),
код выглядит следующим образом:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!--Подключаем библиотеку--> <script src="js/jquery-2.2.3.min.js"></script> </head> <body> </body> </html>
Способ 2. Подключаем напрямую с CDN.
Данный способ хорош тем, что библиотека подключается с сайта и не валяется на жестком диске. Особенно это актуально при большом количестве маленьких проектов и для обучения.
Для подключения рекомендую использоваться подключение от Google Developers, обычно я нахожу данную страницу по ссылке jquery google. Наша задача скопировать строку:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"> </script>и подключить ее в файл. Выглядит это так:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!--Подключаем библиотеку--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> </head> <body> </body> </html>
Второй способ подключения, перед закрывающимся тегом body:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!--Подключаем библиотеку--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> </body> </html>
Содержание:
----- WINDOW
----- DOCUMENT
----- WshShell
----- String
----- Array
----- Boolean
----- Date
----- Function
----- Arguments
----- Math
----- Number
this - описание и примеры.
·СТАРТ - Как запустить скрипт из документа.
·Табло, со звуком. Вычисления -
·Рисунок. Изменить Цвет/Размер.
·Замена рисунка
·Дата и время. - вывод в форме
·Устный счет-Случайные числа.
·Формула Герона в скрипте
·Написать число.
·Бегущая строка.
·Форма - Текстового ввода
·Вставка адреса.
·Сноски в тексте и Спойлер.
·Примеры - .
·Запись в реестр. Новые окна Браузера.
· Определить и показать тип и версию Браузера.
Для сайтов начального уровня, чей бесплатный хостинг не дает, как правило, ни PHP, ни CGI.
JavaScript почти незаменимое средство сделать сайт поживее, динамичнее.. Визуальный редактор(IE)-переделка.
| Работу скрипта проверяй на HH.exe
- другие браузеры не показывают код,ошибки. А просто не выполняют неправильный скрипт. |
anchor (массив anchors) Applet Area Array button checkbox
массив elements FileUpload frame(массив frames) Function
hidden history Image link(массив links) location Math radio
mimeTypes navigator Option password Plugin массив plugins reset
select (массив options) string submit text textarea
|
|
break comment continue for for...in function
if...else return var while with
!!! Осознай, что JS — объектно-ориентированный язык. ( в инете более подробнее см. ) И здесь подстерегают некоторые опасности, происходящие от непонимания того факта, что JS — язык не классов (как Pascal или C++ ), а прототипов...( читать далее в инете....)
-*-
Выражения и Операторы
Справочник, по выражениям.
A = (Условие)? a1: a2Если условие истинно, то выражение A имеет значение a1,
иначе имеет значение a2. Например,
status = (age >= 18) ? "adult" : "minor"Это утверждение присваивает значение "adult" переменной status,
если age равно 18 или больше чем 18.
Иначе, приписывает значение "minor" переменной status.
Словарь по скриптам,
в файле - C:\Me\DIC\JS.dic
для макро myQdic.s
Числа- 0xD4 -16; 045 -8; 12879 -10 если вне функ - glvar=6; - глоб.перем
fuvar = 5; ИЛИ
так- var fuvar = 5; - локальная перем. внутри функ.
Строки - "one line \n another line"
число в стороку - Строку в число eval(N) - 1.0*N Все инструкции программного кода заканчиваются точкой с запятой.
Об этом надо помнить.
ПОДРОБНЕЕ В ИНЕТЕ
Методыосновы языка - JS
спавочник по JS
Расширения для Хрома =
https://chrome.google.com/webstore/category/home.
Скрипты в теле ХТМЛ-
Итак, для полноценной работы над страницами понадобятся:текстовый редактор, графический редактор, графический конвертер, конвертер для русских текстов, FTP-клиент, разные браузеры. Ну, и еще много чего по мелочам - таблица безопасных цветов, конвертор RGB ->HEX, TELNET-клиент и т.д
Предположим мы хотим написать сценарий, который будет вычислять площадь треугольника по трем его сторонам.Для этого нам потребуется использовать формулу Герона:
function areaOfTriangle(obj){
var a=1*obj.st1.value;
var b=1*obj.st2.value;
var c=1*obj.st3.value;
var p=(a+b+c)/2;
var s=Math.sqrt(p*(p-a)*(p-b)*(p-c));
obj.res.value=s;
}
Здесь мы использовали объект Math и его метод sqrt для извлечения квадратного корня. Выражение, из которого извлекается корень, должно быть взято в скобки.<br>
------
Дополнительные файлы -
В старых версиях IE встроенный отладчик бывает неудобен, а в IE<8 его вообще нет.
Зато есть очень мощное универсальное средство:
Visual Studio. Которое работает и с JavaScript.
Есть два основных отладчика для IE, кроме встроенного:
Microsoft Script Editor поставляется вместе с Microsoft Office. Есть бесплатная версия — это не то. Нужна именно та, которая в поставке (см.в инете)Microsoft Office***, причем она не ставится по умолчанию. Для установки нужно найти и включить соответствующий пункт в меню.
После этого, при стандартных путях, редактор/отладчик Microsoft Script Editor(MSE) будет установлен в
C:\Program Files\Common Files\Microsoft Shared\OFFICE12\MSE7.EXE.
В javascript-коде поставить в нужное место оператор debugger. Например:
1 ... 2 var i = 5 3 debugger; 4 i++ 5 ...
Когда выполнение дойдет до строки debugger — вызовется отладчик точно также, как в пункте 1. Этот способ, вообще говоря, входит в стандарт языка и работает со всеми отладчиками.
Вызов отладчика этим способом осуществляется через окошко с выбором:
-*-
Объекты
Объект - это самостоятельная единица,имеющая свойства и определенный тип.
Сравним например с чашкой.
У чашки есть цвет, форма, вес, и материал из которого она сделана и т.д.
Точно так же, объекты JavaScript имеют свойства которые
определяют их характеритики.
Объект это набор свойств, и свойство состоит из имени и значения ассоциированного и с этим именем. Значением свойства может быть и функция, которую можно назвать методом объекта.
-----
В дополнение к встроенным в браузер объектам, вы можете опеределать свои собственные объекты.
Объект Object создается с помощью выражения:
var переменная =new Object([значение])
Значением может быть любой тип данных: строка, число, булево значение.
var myObj1 = new Object("Привет!"); // создаётся строка
var myObj2 = new Object(7); // создаётся число
var myObj3 = new Object(true); // создаётся булево значение
Квадратные скобки в примере, как обычно, означают,
что оно может оставаться пустым (в реальном коде они не ставятся).
Пустому объекту впоследствии можно присвоить любое значение.
var myObj4 = new Object();
myObj4 = "Доброе утро!"
// Значением нашего объекта стала строка "Доброе утро!".
Свойства объекта Object есть и у всех остальных объектов JavaScript,
поскольку они как дочерние объекты наследуют свойства родителя. Этих
свойств два: constructor и prototype.
В javascript определены некоторые стандартные объекты и функции.
На самом верхнем уровне находится объект window,
представляющий окно браузера и являющийся "родителем"
всех остальных объектов.
Пример - window.open - открывает новое окно браузера.
или пример - window.external.AddFavorite( bookmarkurl, bookmarktitle ) - Добавить закладку в браузер
Расположенные ниже могут иметь свои подчиненные объекты.
1. Все объекты имеют методы (отделяются от объекта точкой), например:
document.write
позволяет писать текст в текущую страницу,
document.write('<a href="javascript:addbookmark()"> Нажми и скрипт запустится.</a>')
2. Также объекты имеют свойства, например:
document.bgcolor содержит значение фонового цвета текущей страницы,
document.title содержит заголовок страницы.
-*-
объект WINDOW
Подробнее про window,
Окна с сообщениями.
window.open - открывает новое окно браузера.
Пример:
<A HREF="#nul" ONCLICK="window.open('j.htm','','Toolbar=1,Location=1,Directories=0,Status=0,
Menubar=0,Scrollbars=0,Resizable=0,Width=850,Height=400');">Новое окно.</A>
Показать файл Memo.htm в Новом ОКНе. 500х500 ОКНА ... в БраузереЗакрыть.Удалить ОКНО.
Любой из следующих примеров закрывает текущее окно:
<a href="#nul" onclick="window.close()">Пример: Показать Окно-подтверждение, на переход : *^* Код:
<a href="#nul" onclick="self.close()">
<a href="#*" onClick="return window.confirm('Уходить по адресу #*')"><b>*^*</b></a><hr>
Пример:window.print() - Печать этого файла. Установки принтера
<A HREF="#nul" ONCLICK="window.print()">Печать этого файла.</A>
или пример - window.external.AddFavorite( bookmarkurl, bookmarktitle ) - Добавить закладку в браузер
Пример: Переадресация на другую страницу БРАУЗЕРА
Скрипт срабатывает автоматически и не спрашивает разрешения у пользователя.
Допустим, через если (условие== 1), то перейти на страницу... разные
Замените адрес http://www.softtime.ru на адрес страницы,
куда необходимо сделать переадресацию.
<script language="JavaScript"> window.location.href = "http://www.softtime.ru" </script>
Пример: Метод «Drag and Drop»
Скрипт передвижения изображений в окне браузера
с помошью мыши методом «Drag and Drop».
Изображение, которое вы будете двигать должно находится в той же папке,
что и сама страничка со скриптом.
В примере изображение имеет имя - 100х100.jpg.
см. File:"DragDrop.htm";
Пример: Скрипт "Падающий снег"
Устанавливается прозрачность снежинок или символов, оттенок цвета.
Регулируются скорость падения, минимальный и максимальный размеры.
Указывается расположение и ширина колонки в окне, в которой будет виден снег.
Буквы или текст тоже красиво выглядит.
Снежинки кружатся по собственным случайным законам. Процесс
устойчив к прокрутке и изменению размеров окна. Чем меньше
снежинок, тем меньше нагрузка процессора при просмотре окна.
Пример: Скрипт «Добавить в избранное»
<script language="JavaScript">
var bookmarkurl="http://www.softtime.ru/"
var bookmarktitle="IT-студия SoftTime"
function addbookmark()
{
if (document.all)
window.external.AddFavorite(bookmarkurl,bookmarktitle)
}
if (document.all)
document.write('<a href="javascript:addbookmark()">
Нажмите на ссылку, чтобы добавить этот сайт в закладки')
</script>
Пример: Выход.
<script type="text/javascript">
window.domReady.push(function() {
confirm_deletion('Вы действительно хотите выйти?', 'confirm_site_exit');
});
</script>
-*-
объект DOCUMENT
Как запустить скрипт в документе.
Объект text - в форме ввода.
-*-
Встроенные объекты.
JavaScript предлагает для работы с различными типами данных ряд встроенных объектов, каждый из которых имеет свой собственный набор свойств и методов, доступных в коде JavaScript.
-
Объект String
Беру отсюда:
В JavaScript любые текстовые данные являются строками.и далее пробую сделать File:"C:\ME\Help\HlpJS001.htm";
из него надо лишнее удалить - Вот он .
==============
Имеються и Встроенные функции
Объект String дает вам набор методов для работы с текстом.
Для создания объекта String используется такой синтаксис:
MyString = new String ( [значение] )
где значение - необязательный параметр:
текст, представляющий собой начальное значение строковой переменной.
Если это число, оно сначала преобразуется в строковый формат.
Цвета - Цвет в JS
Объект Array
Объект Array определяет метод создания массивов и способ работы с ними.Для создания нового массива используется такая конструкция:
|
x=new ArrayO; // создание нового массива x=new Array(lO); //создание массива из 10 элементов // создание массива и одновременно заполнение его значениями x=new Array("Мурка", "Васька", "Толстопуз",."Барсик"); |
Свойство Описание
length Целое число с возможностью изменения,
указывающее количество элементов массива
Метод Описание
join ( [строка] ) Возвращает строку, содержащую все элементы массива,
строка в скобках — необязательный разделитель
reverse () Изменяет на обратный порядок следования элементов
sort ([функция]) Сортирует массив;
если в скобках указана функция — по результатам ее вычислени
-*--
Объект Boolean
Объект Boolean предназначен для хранения простых значений типа да/нет,true/false. Чтобы создать новый объект типа Boolean, используется такой
синтаксис:
|
MyAnsver=new Boolean([ значение}); |
новый объект будет иметь начальное значение false. Все другие значения
этого аргумента, включая строку false, приведут к созданию объекта,
имеющего значение true.
Метод Описание toStrlng() Возвращает значение объекта как строку true или false valueOf() Возвращает численное значение объекта-*-
-
Объект Date
Объект Date поддерживает метод для работы с датами и временем вJavaScript. Новые экземпляры объектов Date создаются так:
newDateObject = new Date([значение]) Значение — необязательные установки даты и времени для нового объекта. Если они не заданы, используются текущие дата и время. Значение может иметь такой вид: миллисекунды — начиная с полуночи по Гринвичу 1 января 1970 года; год, месяц, день (например, 2014,0,6 — 6 января 2014); год, месяц, день, часы, минуты, секунды; месяц день, год, часы:минуты:секунды (например, September 23,1997 08:25:30). Метод Описание getDate ( ) Возвращает число месяца как целое числоот 1 до 31 getDay () Возвращает день недели как целое число от 0 (воскресенье) до 6 (суббота) getHours ( ) Возвращает часы как целое от 0 до 23 getMlnutes ( ) Возвращает минуты как целое от 0 до 59 getMonthO Возвращает месяц как целое от 0 (январь) до 1 1 (декабрь) getSeconds ( ) Возвращает секунды как целое от 0 до 59 geTime ( ) Возвращает количество миллисекунд между 1 января 1970 года в 00:00:00 по Гринвичу и текущим объектом Date как целое число getTimeZoneOf f set ( ) Возвращает разницу в минутах между местным и гринвичским временем как целое число getYear ( ) Возвращает год без первых двух разрядов как целое число parse (дата) Возвращает количество миллисекунд между 1 января 1970 года в 00:00:00 по Гринвичу датой (дата; setDate ( значение) Устанавливает день месяца с помощью целого числа значение от 1 до 31 setHours ( значение) Устанавливает часы с помощью целого числа значение от 0 до 23 setMinutes ( значение) Устанавливает минуты с помощью целого числа значение от 0 до 59 setMonth ( значение) Устанавливает месяц с помощью целого числа значение от 0 до II setSeconds ( значение) Устанавливает секунды с помощью целого числа значение от 0 до 59 setTime ( значение) Устанавливает значение объекта Date с помощью целого числа значение, которое отражает количество миллисекунд между 1 января 1970 года в 00:00:00 по Гринвичу set Year ( значение) Устанавливает часы с помощью целого числа значение, большего 1900 toGMTStringO Преобразует данные местного времени во время по Гринвичу и возвращает как строку toLocaleString ( ) Преобразует время по Гринвичу в данные местного времени и возвращает как строку UTC( год, месяц) Возвращает количество миллисекунд между 1 января 1970 года в 00:00:00 по Гринвичу и текущим объектом Date как целое число [, часы] [, минуты] [, секунды])
-*-
Объект Function
Объект Function предоставляет механизм для компиляции кода JavaScript в виде функции. Новая функция создается так:|
functionName = new Function(аргумент1, аргумент2, ... код функции),
где аргумент1, аргумент2 и т. д. — аргументы для создаваемого объекта Function, а код функции — строка, содержащая тело функции. Это может быть несколько выражений JavaScript, разделенных точкой с запятой. |
Свойство Описание arguments [ ] Ссылка на массив Arguments, содержащий аргументы вызванной функции caller Определяет функцию, вызываемую объектом Function prototype Предоставляет способ для добавления свойств объекту Function
-*-
-
Объект Arguments
Объект Arguments — список (массив) аргументов объекта Function.
Свойство Описание
length Целое число, определяющее количество аргументов,
необходимых вызванной функции
-*--
Объект Math
В отличие от других глобальных объектов, Math не является конструктором. Все свойства и методы Math статичны.
объект Math и его методы(из инета).
Объект math работает с математическими функциями,
а его методы можно использовать для вызова этих функций.
Ниже представлены некоторые методы объекта math:
�
|
Предоставляет набор свойств и методов для работы с математическими константами и функциями. Для их использования нужна сначала ссылка на объект Math, затем — на требуемые метод или свойство:
|
MyArea= Math.PI * MyRadiuS * MyRadius; MyResult = Math.floor(MyNumber); X=Math.sin(6.28) |
-
Объект Number
Объект Number предоставляет набор свойств, полезных при работе с числами.
Свойство Описание
MAX_VALUE Максимальное численное значение в JavaScript (~1,79Е+308)
MIN_VALUE Минимальное численное значение в JavaScript (~2,22Е-308)
NaN Значение, не являющееся числом
NEGATIVE_INFINITY Минус бесконечность
POSITIVE_INFINITY Плюс бесконечность
Метод Описание
oString( [основание] ) - Преобразует число в десятичную систему счисления.
(или в число в системе по основанию основание,) и
возвращает в виде строки
valueof ( ) - Возвращает двоичное численное значениечисла
-*-
Методы, Функции
Определение геттеров и сеттеров.
Методы
document.write позволяет писать текст в текущую страницу,
-*-
В JavaScript есть специальное слово, this, которое можно использовать внутри метода, чтобы ссылаться на текущий объект. Пример 1: Подсказка будет только после клика. alert to the opportunity <A ONCLICK="this.title='ожидающий удобного случая'">alert to the opportunity</a> Пример 2:Увеличение картинки при наведении курсора - 
<img width="25" height="25" src="100х100.jpg"
title="Увеличение"onmouseover="this.width=100;this.height=100"
onmouseout="this.width=25;this.height=25">
Пример 3: Наведи мышку
<b onmouseout="this.style.color='black'" onmouseover="this.style.color='red'">Пример 3: Наведи мышку</b></a> Пример 4: Например, предположим у вас есть функция называемая validate, которая проверяет свойство объекта value, переданного ей, и если не соблюдены условия, то табло об ошибке:
<script language="javascript">
function validate(obj, lowval, hival) {
if ((obj.value < lowval) || (obj.value > hival))
alert("Число должно быть от 5-ти до 10-ти !");
}
</script>
Вводи число -
<input type="text" name="age" size="10"
onChange="validate(this, 5, 10)">
Когда вызывается validate в каждой из форм в обработчике события onchange, используется this, чтобы передать этот элемент. Обрати внимание - значение в поле сохраняется при перезагрузки страницы! В общем, this ссылается на объект вызвавший метод. Значение this в JavaScript не зависит от объекта, в котором создана функция. Оно определяется во время вызова. - для ссылки на объект. Пример 4: применения this для FORM - указываею но то что функции "местные", "здешние" - применяются к полям этой формы (объекта). |
Определение геттеров и сеттеров
См. в инете -- Определение геттеров и сеттеров
Геттер (от англ. get получить - это метод которые получает значениме определенного свойства.Сеттер (от англ. set - присвоить) - это метод который присваивает значение определенному свойству объекта.
Можно определить геттеры и сеттеры для любых из встроенных или определенных объектов, которые поддерживают добавление новых свойств.
Синтаксис определения геттеров и сеттеров пользуется синтаксисом литеральных объектов.
Следующая сессия в JS шеле иллюстрирует как геттеры и сеттеры работают с объектом o определенным пользователем. JS шелл это приложение которое позволяет разработчику тестировать код JavaScript интерактивно или выполнить группу инструкций.1
9 js> var o = {a: 7, get b() {return this.a + 1;}, set c(x) {this.a = x / 2}};
[object Object]
js> o.a;
7
js> o.b;
8
js> o.c = 50;
js> o.a;
25
Свойства объекта o это:
o.a — число
o.b — геттер который возвращает o.a плюс 1
o.c — сеттер который присваивает значение o.a половине значения которое передано o.c
-*-
Встроенные функции.
В JavaScript существует набор встроенных функций, доступных при выполнении кода:
escape (символ) Возвращает строку в виде % XX , где XX —код ASCII символа в скобках
eval (выражение) Возвращает результат вычисления выражения в скобках
isNaN (значение) Возвращает True, если значение в скобках не является числом
parseFloat (строка) Преобразует строку в число с плавающей запятой
typeOf (объект) Возвращает тип указанного объекта как строку,
например boolean, function и т. д.
parselnt (строка, основание) Преобразует строку в целое число в
системе счисления с указанным основанием
ERROR - Перехват ошибок, "try..catch"
Или, как их иначе называют, «исключительные ситуации» (исключения).Обычно скрипт при ошибке, как говорят, «падает», с выводом ошибки в консоль.
Но бывают случаи, когда нам хотелось бы как-то контролировать ситуацию, чтобы скрипт не просто «упал», а сделал что-то разумное.
Для этого в JavaScript есть замечательная конструкция - try..catch
Она состоит из двух основных блоков: try, и затем catch:
try {
// код ...
} catch (err) {
// обработка ошибки
}
|
try..catch подразумевает, что код синтаксически верен.
Если грубо нарушена структура кода, например не закрыта фигурная скобка или где-то стоит лишняя запятая, то никакой try..catch здесь не поможет. Такие ошибки называются синтаксическими, интерпретатор не может понять такой код. |
Работает она так: Выполняется код внутри блока try.
Если в нём ошибок нет, то блок catch(err) игнорируется, то есть выполнение доходит до конца try и потом прыгает через catch.
Если в нём возникнет ошибка, то выполнение try на ней прерывается, и управление прыгает в начало блока catch(err).
При этом переменная err (можно выбрать и другое название) будет содержать объект ошибки с подробной информацией о произошедшем.
Таким образом, при ошибке в try скрипт не «падает», и мы получаем возможность обработать ошибку внутри catch.
==
Посмотрим это на примерах.
Пример без ошибок:при запуске сработают alert (1) и (2):
try {
alert('Начало блока try'); // (1) <-- // .. код без ошибок
alert('Конец блока try'); // (2) <--
} catch(e) {
alert('Блок catch не получит управление, так как нет ошибок'); // (3)
}
alert("Потом код продолжит выполнение...");
Пример с ошибкой: при запуске сработают (1) и (3):
try {
alert('Начало блока try'); // (1) <--
lalala; // ошибка, переменная не определена!
alert('Конец блока try'); // (2)
} catch(e) {
alert('Ошибка ' + e.name + ":" + e.message + "\n" + e.stack); // (3) <--
}
alert("Потом код продолжит выполнение...");
Здесь же мы рассматриваем ошибки семантические, то есть происходящие в корректном коде, в процессе выполнения.
try..catch работает только в синхронном коде Ошибку, которая произойдёт в коде, запланированном «на будущее», например в setTimeout, try..catch не поймает:
try {
setTimeout(function() {
throw new Error(); // вылетит в консоль
}, 1000);
} catch (e) {
alert( "не сработает" );
}
На момент запуска функции, назначенной через setTimeout, этот код уже завершится, интерпретатор выйдет из блока try..catch.
Чтобы поймать ошибку внутри функции из setTimeout, и try..catch должен быть в той же функции.
Объект ошибки
В примере выше мы видим объект ошибки. У него есть три основных свойства:name - Тип ошибки.
Например, при обращении к несуществующей переменной:
"ReferenceError".
message - Текстовое сообщение о деталях ошибки.
stack - Везде, кроме IE8-, есть также свойство stack,
которое содержит строку с информацией о последовательности вызовов, которая привела к ошибке.
В зависимости от браузера у него могут быть и дополнительные свойства, см. Error в MDN и Error в MSDN.
Пример использования
В JavaScript есть встроенный метод JSON.parse(str), который используется для чтения JavaScript-объектов (и не только) из строки.
Обычно он используется для того, чтобы обрабатывать данные, полученные по сети, с сервера или из другого источника.
Мы получаем их и вызываем метод JSON.parse, вот так:
var data = '{"name":"Вася", "age": 30}'; // строка с данными, полученная с
// сервера
var user = JSON.parse(data); // преобразовали строку в объект
// теперь user -- это JS-объект с данными из строки
alert( user.name ); // Вася
alert( user.age ); // 30
Более детально формат JSON разобран в главе Формат JSON, метод toJSON.
В случае, если данные некорректны, JSON.parse
генерирует ошибку, то есть
скрипт «упадёт».
Устроит ли нас такое поведение? Конечно нет!
Получается, что если вдруг что-то не так с данными, то посетитель никогда (если, конечно, не откроет консоль) об этом не узнает.
А люди очень-очень не любят, когда что-то «просто падает», без всякого объявления об ошибке.
Бывают ситуации, когда без try..catch не обойтись, это - одна из таких.
Используем try..catch, чтобы обработать некорректный ответ:
var data = "Has Error"; // в данных ошибка
try {
var user = JSON.parse(data); // <-- ошибка при выполнении
alert( user.name ); // не сработает
} catch (e) {
// ...выполнится catch
alert( "Извините, в данных ошибка, мы попробуем получить их ещё раз" );
alert( e.name );
alert( e.message );
}
Здесь в alert только выводится сообщение,
но область применения гораздо шире:
можно повторять запрос, можно предлагать посетителю использовать
альтернативный способ, можно отсылать информацию об ошибке на сервер… Свобода
действий.
Генерация своих ошибок
Представим на минуту, что данные являются корректным JSON… Но в этом объекте нет нужного свойства name:
var data = '{ "age": 30 }'; // данные неполны
try {
var user = JSON.parse(data); // <-- выполнится без ошибок
alert( user.name ); // undefined
} catch (e) {
// не выполнится
alert( "Извините, в данных ошибка" );
}
Вызов JSON.parse выполнится без ошибок, но ошибка в данных есть. И, так как
свойство name обязательно должно быть, то для нас это такие же некорректные
данные, как и "Has Error".Для того, чтобы унифицировать и объединить обработку ошибок парсинга и ошибок в структуре, мы воспользуемся оператором throw.
Оператор throw
Оператор throw генерирует ошибку.Синтаксис:
throw <объект ошибки>;. Технически в качестве объекта ошибки можно передать что угодно, это может быть даже не объект, а число или строка, но всё же лучше, чтобы это был объект, желательно - совместимый со стандартным, то есть чтобы у него были как минимум свойства name и message.
В качестве конструктора ошибок можно использовать встроенный конструктор: new Error(message) или любой другой.
В JavaScript встроен ряд конструкторов для стандартных ошибок: SyntaxError, ReferenceError, RangeError и некоторые другие. Можно использовать и их, но только чтобы не было путаницы.
В данном случае мы используем конструктор new SyntaxError(message). Он создаёт ошибку того же типа, что и JSON.parse.
var data = '{ "age": 30 }'; // данные неполны
try {
var user = JSON.parse(data); // <-- выполнится без ошибок
if (!user.name) {
throw new SyntaxError("Данные некорректны");
}
alert( user.name );
} catch (e) {
alert( "Извините, в данных ошибка" );
}
Получилось, что блок catch - единое место для обработки ошибок во всех случаях: когда ошибка выявляется при JSON.parse или позже.
Проброс исключения
В коде выше мы предусмотрели обработку ошибок, которые возникают при некорректных данных. Но может ли быть так, что возникнет какая-то другая ошибка?
Конечно, может! Код - это вообще мешок с ошибками, бывает даже так, что библиотеку выкладывают в открытый доступ, она там 10 лет лежит, её смотрят миллионы людей и на 11-й год находятся опаснейшие ошибки. Такова жизнь, таковы люди.
Блок catch в нашем примере предназначен для обработки ошибок, возникающих при некорректных данных. Если же в него попала какая-то другая ошибка, то вывод сообщения о «некорректных данных» будет дезинформацией посетителя.
Ошибку, о которой catch не знает, он не должен обрабатывать.
Такая техника называется «проброс исключения»: в catch(e) мы анализируем объект ошибки, и если он нам не подходит, то делаем throw e.
При этом ошибка «выпадает» из try..catch наружу. Далее она может быть поймана либо внешним блоком try..catch (если есть), либо «повалит» скрипт.
В примере ниже catch обрабатывает только ошибки SyntaxError, а остальные - выбрасывает дальше:
var data = '{ "name": "Вася", "age": 30 }'; // данные корректны
try {
var user = JSON.parse(data);
if (!user.name) {
throw new SyntaxError("Ошибка в данных");
}
blabla(); // произошла непредусмотренная ошибка
alert( user.name );
} catch (e) {
if (e.name == "SyntaxError") {
alert( "Извините, в данных ошибка" );
} else {
throw e;
}
}
Заметим, что ошибка, которая возникла внутри блока catch, «выпадает» наружу, как если бы была в обычном коде.
В следующем примере такие ошибки обрабатываются ещё одним, «более внешним» try..catch:
function readData() {
var data = '{ "name": "Вася", "age": 30 }';
try {
// ...
blabla(); // ошибка!
} catch (e) {
// ...
if (e.name != 'SyntaxError') {
throw e; // пробрасываем
}
}
}
try {
readData();
} catch (e) {
alert( "Поймал во внешнем catch: " + e ); // ловим
}
В примере выше try..catch внутри readData умеет обрабатывать только SyntaxError, а внешний - все ошибки.
Без внешнего проброшенная ошибка «вывалилась» бы в консоль с остановкой скрипта.
Оборачивание исключений
И, для полноты картины - последняя, самая продвинутая техника по работе с ошибками. Она, впрочем, является стандартной практикой во многих объектно-ориентированных языках.
Цель функции readData в примере выше - прочитать данные.
При чтении могут
возникать разные ошибки, не только SyntaxError, но и, возможно, к примеру
URIError (неправильное применение функций работы с URI) да и другие.
Код, который вызвал readData, хотел бы иметь либо результат, либо информацию об ошибке.
При этом очень важным является вопрос: обязан ли этот внешний код знать о всевозможных типах ошибок, которые могут возникать при чтении данных, и уметь перехватывать их?
Обычно внешний код хотел бы работать «на уровень выше», и получать либо результат, либо «ошибку чтения данных», при этом какая именно ошибка произошла - ему неважно. Ну, или, если будет важно, то хотелось бы иметь возможность это узнать, но обычно не требуется.
Это важнейший общий подход к проектированию - каждый участок функционала должен получать информацию на том уровне, который ему необходим.
Мы его видим везде в грамотно построенном коде, но не всегда отдаём себе в этом отчёт.В данном случае, если при чтении данных происходит ошибка, то мы будем генерировать её в виде объекта ReadError, с соответствующим сообщением. А «исходную» ошибку на всякий случай тоже сохраним, присвоим в свойство cause (англ. - причина).
Выглядит это так:
function ReadError(message, cause) {
this.message = message;
this.cause = cause;
this.name = 'ReadError';
this.stack = cause.stack;
}
function readData() {
var data = '{ bad data }';
try {
// ...
JSON.parse(data);
// ...
} catch (e) {
// ...
if (e.name == 'URIError') {
throw new ReadError("Ошибка в URI", e);
} else if (e.name == 'SyntaxError') {
throw new ReadError("Синтаксическая ошибка в данных", e);
} else {
throw e; // пробрасываем
}
}
}
try {
readData();
} catch (e) {
if (e.name == 'ReadError') {
alert( e.message );
alert( e.cause ); // оригинальная ошибка-причина
} else {
throw e;
}
}
Этот подход называют «оборачиванием» исключения, поскольку мы берём ошибки «более низкого уровня» и «заворачиваем» их в ReadError, которая соответствует текущей задаче.
Секция finally
Конструкция try..catch может содержать ещё один блок: finally.Выглядит этот расширенный синтаксис так:
try {
.. пробуем выполнить код ..
} catch(e) {
.. перехватываем исключение ..
} finally {
.. выполняем всегда ..
}
Секция finally не обязательна, но если она есть, то она выполняется всегда:
*) после блока try, если ошибок не было,
*) после catch, если они были.
Попробуйте запустить такой код:
try {
alert( 'try' );
if (confirm('Сгенерировать ошибку?')) BAD_CODE();
} catch (e) {
alert( 'catch' );
} finally {
alert( 'finally' );
}
У него два варианта работы:
1) Если вы ответите на вопрос «сгенерировать ошибку?» утвердительно,
то
try -> catch -> finally.2) Если ответите отрицательно, то
try -> finally.Секцию finally используют, чтобы завершить начатые операции при любом варианте развития событий.
Например, мы хотим подсчитать время на выполнение функции sum(n), которая должна возвратить сумму чисел от 1 до n и работает рекурсивно:
function sum(n) {
return n ? (n + sum(n - 1)) : 0;
}
var n = +prompt('Введите n?', 100);
var start = new Date();
try {
var result = sum(n);
} catch (e) {
result = 0;
} finally {
var diff = new Date() - start;
}
alert( result ? result : 'была ошибка' );
alert( "Выполнение заняло " + diff );
Здесь секция finally гарантирует, что время будет подсчитано в любых ситуациях: при ошибке в sum или без неё.
Вы можете проверить это, запустив код с указанием n=100 - будет без ошибки, finally выполнится после try, а затем с n=100000 - будет ошибка из-за слишком глубокой рекурсии, управление прыгнет в finally после catch.
finally и return
Блок finally срабатывает при любом выходе из try..catch, в том числе и return.
В примере ниже из try происходит return, но finally получает управление до того, как контроль возвращается во внешний код.
function func() {
try {
// сразу вернуть значение
return 1;
} catch (e) {
/* ... */
} finally {
alert( 'finally' );
}
}
alert( func() ); // сначала finally, потом 1
Если внутри try были начаты какие-то процессы, которые нужно завершить по окончании работы, то в finally это обязательно будет сделано.
Кстати, для таких случаев иногда используют try..finally вообще без catch:
function func() {
try {
return 1;
} finally {
alert( 'Вызов завершён' );
}
}
alert( func() ); // сначала finally, потом 1
В примере выше try..finally вообще не обрабатывает ошибки. Задача в другом: выполнить код при любом выходе из try - с ошибкой ли, без ошибок или через return.
Последняя надежда: window.onerror
Допустим, ошибка произошла вне блока try..catch или выпала из try..catch наружу, во внешний код. Скрипт упал.Можно ли как-то узнать о том, что произошло? Да, конечно.
В браузере существует специальное свойство
window.onerror,
если в него записать функцию,
то она выполнится и получит в аргументах сообщение ошибки,
текущий URL и номер строки, откуда «выпала» ошибка.Необходимо лишь позаботиться, чтобы функция была назначена заранее.
Например:
<script>
window.onerror = function(message, url, lineNumber) {
alert("Поймана ошибка, выпавшая в глобальную область!\n" +
"Сообщение: " + message + "\n(" + url + ":" + lineNumber + ")");
};
function readData() {
error(); // ой, что-то не так
}
readData();
</script>
Как правило, роль window.onerror заключается не в том,
чтобы оживить скрипт - скорее всего, это уже невозможно,
а в том, чтобы отослать сообщение об ошибке
на сервер, где разработчики о ней узнают.
http://www.muscula.com/.
Итого
Обработка ошибок - большая и важная тема.
В JavaScript для этого предусмотрены:
Конструкция try..catch..finally - она позволяет обработать произвольные ошибки в блоке кода.
Это удобно в тех случаях, когда проще сделать действие и потом разбираться с результатом, чем долго и нудно проверять, не упадёт ли чего.
Кроме того, иногда проверить просто невозможно, например JSON.parse(str) не позволяет «проверить» формат строки перед разбором. В этом случае блок try..catch необходим.
Полный вид конструкции:
try {
.. пробуем выполнить код ..
} catch(e) {
.. перехватываем исключение ..
} finally {
.. выполняем всегда ..
}
Возможны также варианты try..catch или try..finally.Оператор throw err генерирует свою ошибку, в качестве err рекомендуется использовать объекты, совместимые с встроенным типом Error, содержащие свойства message и name.
Кроме того, мы рассмотрели некоторые важные приёмы:
Проброс исключения - catch(err) должен обрабатывать только те ошибки, которые мы рассчитываем в нём увидеть,
остальные - пробрасывать дальше через throw err.
Определить, нужная ли это ошибка, можно, например, по свойству name.
Оборачивание исключений - функция, в процессе работы которой возможны различные виды ошибок, может «обернуть их» в одну общую ошибку, специфичную для её задачи, и уже её пробросить дальше. Чтобы при необходимости можно было подробно определить, что произошло, исходную ошибку обычно присваивают в свойство этой, общей. Обычно это нужно для логирования.
В
window.onerror можно присвоить функцию,
которая выполнится при любой «выпавшей» из скрипта ошибке. Как правило, это используют в информационных целях, например отправляют информацию об ошибке на специальный сервис.
Задачи
Finally или просто код?
важность: 5
Сравните два фрагмента кода.
Первый использует finally для выполнения кода по выходу из try..catch:
try {
начать работу
работать
} catch (e) {
обработать ошибку
} finally {
финализация: завершить работу
}
Второй фрагмент просто ставит очистку ресурсов за try..catch:
try {
начать работу
} catch (e) {
обработать ошибку
}
-*-
Сервер сценариев Windows
- (WSH) позволяет сценариям выполняться непосредственно
в Windows, дважды щелкните файл сценария или введите имя файла сценария
в командной строке.
Как Microsoft Internet Explorer сервер сценариев
Windows служит в качестве контроллера ActiveX обработчиков сценариев.
WSH имеет очень много памяти и является идеальным средством для интерактивный и неинтерактивный потребности в написании сценариев (например, сценарий входа в систему и сценарий администрирования). Для запуска сценариев с помощью сервера сценариев для Windows (Wscript.exe)
ВВЕДЕНИЕ В СЕРВЕР СЦЕНАРИЕВ WINDOWS
В командной строке введите wscript.exe и нажмите клавишу ВВОД.
Свойства сценария узла и нажмите кнопку ОК.
В проводнике Windows или окне Мой компьютер дважды щелкните файл сценария,
который требуется выполнить.
1) Есть в реестре такой раздел (создать его, если вдруг нету) HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows Script Host\Settings и в нем параметр "Enabled" (тип REG_SZ). Значение параметра должно быть равно единице, чтобы сервер сценариев был доступен. Общие сведения о сервере сценариев Windows в Windows support.microsoft.com/kb/232211/ru? Сервера сценариев Windows (WSH) разрешает выполнение сценариев непосредственно в Windows, дважды щелкнув файл сценария или введите имя ... Сервер сценариев WINDOWS - Волшебный форум dev.mista.ru/topic.php?id=283976? - при установке программы выдает : отключен доступ к серверу сценариев WINDOWS. что это такое? и как этот самый доступ включить ...-*-
Код свежих анекдотов для сайта.
Код для вставки свежих анекдотов на сайт: <p style="text-align: center;"> <script language="JavaScript" type="text/javascript" src="http:// www.prikolnianekdot.ru/0_joke/insert20.js"></script> <script type="text/javascript">// <![CDATA[ document.write(text) // ]]></script> </p>-*-
СТАРТ - Как запустить скрипт в документе.
Удалить
<a href="delete.php" onclick="return confirm('Вы уверены?');">Удалить</a>
Пример 1: -
<script language="javascript">
function TTTT(){
return 'ФУНКЦИЯ';
}
document.write( 'Это пишет ' + TTTT() + ', согласен? <br>');
</script>
или так - Пример 2 - не сразу выполняется,
<script language="JavaScript">
if (document.all)
document.write('<a href="JavaScript:TTTT()">Нажми и скрипт запустится в новом окне.</a><br>')
</script>
-*-
Табло, со звуком. Вычисления -
-*-
Рисунок. Изменить Цвет/Размер.
Идея - пишем функции,Пример 1: Мышкой указал-цвет поменял, как пример скрипта...
<h4 onmouseout="this.style.color='black'" onmouseover="this.style.color='red'">Пример 1: Мышкой указал-цвет поменял, как пример скрипта...</h4>
Пример 2: Установи мышку на
Заголовок |
...двигай...
Пример на выбор показа изображения
Пример 3: Оживить рисунок или кнопку. ( Не работает в ХРОМЕ! )
Пример 4:
Замена рисунка, после наведения на него мышкой.
Заголовок 1 |
|
|
Заголовок 2 |
||
| Когда указатель мыши оказывается над одним из рисунков, он заменяется. Но для каждого объекта можно использовать и по три рисунка. | ||
Увеличение картинки при наведении курсора
<img width="47" height="46" src="" title="Увеличение"
onmouseover="this.width=64;this.height=64"
onmouseout="this.width=47;this.height=46">
при увеличении картинки - сдвигается весь контент страницы. Для устранения этой проблемы существует простое ("оригинальное") решение.
Создать таблицу и создать в ней ячейку,
которая будет чуть больше увеличенной картинки, и,
собственно, загрузить в эту ячейку нужную картинку
 |
<table border="1" cellspacing="4" cellpadding="12">
<tr><td align="center" width="78" height="102" >
<img width="47" height="46" src="" title="Увеличение"
onmouseover="this.width=74;this.height=74"
onmouseout="this.width=47;this.height=46"></td></tr></table>
Замена картинок, одного размера, при наведения курсора
<img width="47" height="46" src="1" title="Увеличение"
onmouseover="this.src='2'"
onmouseout="this.src='1'">
-*-
Дата и время. - вывод в форме
Пример библиотеки -
Библ. лежит тут -
https://code-live.ru/media/upload/files/2014/08/25/rus_clock_1.js
скопировал себе в
d:\kHelp\HTML_JS\RussClock.js
var clock = new RussianWordClock(new Date());
// выведет время в устном формате
document.body.innerHTML = clock.toString();
Расчет Даты пасхи - см. на стр. блога.
Надо в начале указать <BODY onload=Timer1()>
Вывод даты в строку -
Или так - (из инета.) -
<script type="text/javascript" src="http://xn--80aafl0ai9f.com/imrld/idata.js"> </script>
Что мне известно о получении даты, с компа.
В разных браузерах по разному отображаеться.
Использование таймера
Запуск функции через время:
<script type="text/JavaScript">
setTimeout('Timer1()',2000);
</script>
Скачки по меткам на странице:
<script type="text/JavaScript">
setTimeout("location.href = '#nn';", 10000);
setTimeout("location.href = '#dd';", 20000);
</script>
|
-*-
Устный счет
| ПРИМЕР |
Приведенный здесь пример содержит датчик случайных чисел (функции init и rand), таблицу, реализующую функции кнопок клавиатуры, и блок проверки результата вычислений. После загрузки программы пользователь должен выбрать тип вычислений (+,-), интервал вычислений (в пределах 10, 20, 100) и нажать кнопку "?" для генерации примера. После ввода с отображаемой клавиатуры числа пользователь нажимает на символ "=", что означает "исполнить", и система проверяет правильность ответа. Если ответ правильный, то программа поздравляет фразой "Молодец!", если нет - "Думай!?". В системе Windows 3.x нет встроенного датчика случайных чисел, поэтому стандартная функция rand в этой версии JavaScript не реализована. Используемый в данной программе датчик был позаимствован из телеконференции по JavaScript. В скрипте кроме этого используются объект типа "дата" и его методы, а также встроенные функции контроля вводимых данных. Как видно из примера обращение к полям HTML-формы представляет из себя обращение к структуре, корнем которой являетс объект окно, в котором определен объект документ, внутри которого определена форма и ее поля и атрибуты полей. Не у всех полей можно менять значения атрибутов, так, например, атрибут VALUE в кнопке не меняет своего значения, если только не перезагрузить страницу
|
-*-
Формула Герона в скрипте
|
Вычисление площади любого треугольника по трем его сторонам.
Эта формула содержится в «Метрике» Герона Александрийского (I века н. э.) и названа в его честь.
Она является частным случаем определителя Кэли — Менгера для вычисления гиперобъёма симплекса.
Герона относят к величайшим инженерам за
всю историю человечества. Он первым изобрёл автоматические двери,
автоматический театр кукол, автомат для продаж, скорострельный
самозаряжающийся арбалет, паровую турбину, автоматические декорации, прибор
для измерения протяжённости дорог (древний одометр) и др. Первым начал
создавать программируемые устройства (вал со штырьками с намотанной на него
верёвкой).
|
-*-
Написать число.
<script language="javascript">
function inpu(F) {
// печатает в отдельном окне. А как в этом печатать?
document.write( F + ', правильно? <br>');
}
</script>
<br>
<INPUT NAME="vv" TYPE=button VALUE="Запуск функции" onClick="inpu('6')">
-*-
Всплывающее окно при входе на сайт.
Вставляем код в позицию баннера
<div id="parent_popup">
<div id="popup">
Тут пишем ваш текст.
Или вставляем HTML код.
<a class="close"title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';"></a>
</div>
</div>
<script type="text/javascript">
var delay_popup = 5000;
setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
</script>
И добавляем стили CSS - Если нет доступа к CSS то вставляем код вместо троеточия <style type="text/css"> ... </style> и получившееся вставляем вместе с кодом выше.
#parent_popup {
background-color: rgba(0, 0, 0, 0.8);
display: none;
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#popup {
background: #fff;
width: 520px;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border: 10px solid #ddd;
position: relative;
/*--CSS3 Тени для Блока--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Скругленные углы--*/
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.close {
background-color: rgba(0, 0, 0, 0.8);
border: 2px solid #ccc;
height: 24px;
line-height: 24px;
position: absolute;
right: -24px;
cursor: pointer;
font-weight: bold;
text-align: center;
text-decoration: none;
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
top: -24px;
width: 24px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background-color: rgba(0, 122, 200, 0.8);
}
Вы можете прочитать более подробно об этом тут
- http://dbmast.ru/sozdaem-vsplyvayushhee
-okno-pri-zagruzke-sajta-s-pomoshhyu-css3
-i-nemnogo-javascript
-*-
Бегущая строка или картинка.
Часть скрипта которую размещается между тегами (<head>………</head>) или в отдельном файле js подключенном к шаблону или странице сайта.
Небольшое пояснение к коду.
1.Функция outmsg() которая имеет
Два параметра:
- msg -текст бегущей строки для вывода циклически,
- ctrlwidth - ширина поля вывода в символах.
Здесь в коде к тексту msg добавлены слева символы --- , просто для того что бы не сливался в один текст, следующей и предыдущей строки.
В переменную newmsg запишем непрерывную последовательность из ctrlwidth экземпляров текста msg.
В форме Outmsg определяем текстовую переменную outmsg длиной ctrlwidth символов и с начальным значением newmsg.
Вызываем программу прокрутки rollmsg().
2. Функция rollmsg() выполняет следующие действия:
- Записать в newmsg текущее содержимое строки текста,
- Самый первый символ текста переставляем в конец(здесь и достигается эффект прокрутки ,
- Полученный текст пересылается назад, в форму.
- Функция setTimeout("rollmsg()",100) выполняет задержку функции rollmsg с интервалом в 100 миллисекунд.
3. Вызываем функцию outmsg с соответствующими параметрами.
Другие примеры
1.Бегущая строка - тип 2.2.Бегущая строка - тип 3.
-*-
Форма Текстового ввода
-*-
Вставка адреса.
Java Script. На месте адреса в страницу
вставляется скрипт, который при помощи процедуры do*****ent.write()
формирует почтовую ссылку в момент показа страницы. Спам-роботы даже
не пытаются обработать этот способ, т. к. доля закодированных таким
образом
Обработка события OnClick. Этот способ основан на
такой особенности Java Script, как возможность перехвата событий от
элементов HTML-страницы. События могут генерироваться при наведении
курсора на элемент, нажатии кнопки мыши, и т.д. Таким образом, при
-*-
Сноски в тексте и Спойлер.
1. В отдельном окне
Текст взял из http://froland.ru/samodel/myart_js7.htmlОснова скрипта:
На страницу помещается невидимый блок-контейнер с position: absolute,
но без указания top и left: это будет указано в скрипте. В этот
контейнер вкладывается ещё один блок, в котором, собственно, и будет
располагаться текст сноски и ссылка «закрыть». Стили обоих блоков
заранее прописываются в тэге <style>. В стилях также указываем
параметры для <span>, в который будем заключать номера сносок и ссылку
«закрыть».
Смотреть,как эта конструкция работает.
Чтобы это работало, необходимо добавить в тэг <body> событие onLoad:
<body onload="move();">
Пояснение некоторых моментов:
document.body.scrollTop и document.body.scrollLeft задают позицию
левой верхней точки экрана браузера независимо от степени прокрутки
страницы. Я поставил смещение на 100 px в обе стороны от угла. Вы
можете настроить по-своему.
В процессе чтения мы прокручиваем текст, а также можем изменить размеры окна. Нужно, чтобы скрипт учитывал и «ловил» эти изменения, то есть реагировал на события window.onscroll и window.onresize.
Но есть одна «закавыка». «Мозилла» 1-й версии (до эпохи «Firefox») не реагирует на window.onscroll при прокрутке колёсиком мышки. Первый комментарий появляется где надо, а последующие (если мы работаем колёсиком, а не правой полосой прокрутки) будут появляться в той же точке, откуда «поезд уже давно ушёл».
Но каждый раз, когда мы вызываем комментарий, мы щёлкаем по сноске, а значит, вызываем событие window.onclick. На это событие реагирует и ранняя «Мозилла». Поэтому добавляем window.onсlick = move.
По функции showrem(fld,txt,rem,nr).
Сноски обычно начинаются с единицы. А элементы массива — с нуля. Чтобы не забивать этим голову при установке каждой конкретной ссылки, вносим эту поправку в функцию:
var explain = rem[nr-1];
Вызов сноски-комментария из текста.
Примечание:при использовании этого способа внутри тэга должно быть только
число! (1,2,3,...), и никаких скобок, звёздочек, и т. п.
Массив текстов сносок. Чтобы не загромождать код web-страницы, имеет смысл вынести его в отдельный файл.js (например, cmnt.js):
<span class="rem" onClick="showrem('cnt', 'text', commtxt1, Number(this.innerHTML))">
1
</span>
Чтобы не писать в каждом вызове события onClick разные параметры для аргумента nr, можно «вытаскивать» нужный номер из содержимого самого тэга:
Number(this.innerHTML))
-*-
2. Использование Спойлера.(Раскрываеться внизу строки )
Первый спойлер - При наведении мышкой срабатывает.Красиво, когда их нескоько лесенкой выстраевается.
Второй, при клике срабатывает.
Пробую применить <SCRIPT language=JavaScript> Использую ID=
-*-
Пример скрипта - Запуск кнопкой.
Ввод:
ПРИМЕРЫ В ИНЕТЕ а это от туда некоторые взял,
•
Скрипт "Движение текста по контуру"
Пример скрипта "Движение текста по контуру".Такого рода скрипты удобно
реализовывать при помощи таймеров, которые автоматически отключаются
после выполнения задачи.
-*-
Новые окна Браузера.
Пример 1:
Который открывает новое окно. Загрузим туда web-страницу, где при нажатие кнопки
оно будет закрыто:
<script language="JavaScript">
function closeIt(){
close();
}
</script>
<input type=button value="Закрыть окно" onClick="closeIt()">
Почему не так?
<input type=button value="Закрыть окно-2" onClick="close()">
Пример 2:
Открыть новое окно ЭТОГО! браузера,и загрузить в него файл с URL.
Этот файл
-*-
Запись в реестр.Стартовая страница, Браузера.
РеестрЕсть сайты, что меняют стартовую страницу в Internet
Explorer, то создайте файл startpage.js
скопируйте туда этот код:
var WSHShell = WScript.CreateObject("WScript.Shell");
//Делаем задержку 10 секунд на случай если
//паразитный сайт добавил что-то в автозагрузку
WScript.Sleep(10000);
//Проверяем что у нас в стартовой странице
StartPage = WSHShell.RegRead("HKCU\\SOFTWARE\\Microsoft
\\Internet Explorer\\Main\\Start Page");
//И если там не то, что мы задумали, то меняем на свое
if (StartPage!="http://www.webhowto.ru/reg") {
WSHShell.RegWrite("HKCU\\SOFTWARE\\Microsoft
\\Internet Explorer\\Main\\Start Page",
"http://www.webhowto.ru/reg");
}
в строке if (StartPage!="http://www.webhowto.ru/reg") и в следующей
поменяйте адрес сайта на нужный вам и добавьте этот файл в
автозагрузку в раздел: HKCU\Software \Microsoft\ Windows\ Current
Version\Run. Бывают ситуации, когда надо запустить на компьютере пользователя
программу в скрытом виде (чтобы не было кнопки программы на панели
задач и иконки в трее, а также чтобы не было видно окна программы),
однако программистами в программе не предусмотрен такой режим
запуска. Примеров можно привести массу, например, запуск какого-то
монитора работы пользователя или клавиатурного шпиона... В этом
случае можно воспользоваться средствами WSH для скрытого запуска
таких программ. Вот пример JS-скрипта, запускающего в таком режиме
обычный виндовый блокнот: <br>
var WSHShell = WScript.CreateObject("WScript.Shell");
WSHShell.Run("notepad",0);
Второй параметр во второй строке, а именно - 0, указывает, что
надо запустить файл в невидимом режиме. Создайте файл с расширением *.
js и пропишите его в автозагрузку. Теперь работа вашей программы
практически незаметна. Окно у нее невидимо, кнопки на панели задач
нет, в диспетчере задач на вкладке "Приложения" она тоже не
светится. |
-*-
