WEB start

Компьютеры. Интернет. Заочное профессиональное обучение. 055-966-10-17

Обучение

Широкий спектр программ и различных форм обучения

Возможность заочного, дистанционного обучения
  • Программирование. Современные языки и технологии.
  • Обслуживание персональных компьютеров.
  • Компьютерные сети. Защита информации.
  • Интернет. Планирование, создание WEB-сайтов. Дизайн, программирование. CEO, продвижение сайтов в интернет.
  • Основы современных IT - технологий.

Наши преимущества

  • Наши программы обучения ориентированы на конкретного слушателя. Вы можете обучаться по одной из предложенных Вам программ, а можете самостоятельно составить, откорректировать, откорректировать свою персональную программу обучения. Преподаватель, консультант помогают Вам сориентироваться в материале курса при выборе программы обучения.
  • Обучение индивидуальное. Преподаватель проводит занятие только для Вас, ориентируясь на Ваши возможности, предыдущие знания и опыт, скорость восприятия нового материала.
  • Вы учитесь в удобное для Вас время, в удобной для Вас форме, может быть выбран гибкий график занятий, в соответствии с Вашими возможностями и пожеланиями.
  • Обучение проводится дистанционно. Вы можете обучаться, сидя за Вашим компьютером дома или на работе, не тратя время на поездки к месту обучения.


Курсы WEB

Закончив наш курс, вы научитесь самостоятельно строить коммерческие интернет сайты любой сложности, управлять их размещением на WEB - хостинге, оптимизировать их и "продвигать" в Интернете.

Начав работать по окончании курса и зарабатывать в этой области, Вы сможете сориентироваться, что именно Вам нужно для дальнейшего успешного продвижения в выбранной специальности и пройти у нас более основательные курсы по WEB-программированию, WEB-дизайну, рекламе и продвижению сайтов в интернет. 

hit 
counter

Узнать подробнее


Введите текст с картинки

Регистрация на сайте

JavaScript - AJAX

Технология AJAX (Asynchronous JavaScript and XML)  - это способ создания быстрых и динамичных веб-страниц. AJAX позволяет обновлять веб-страницы асинхронно, обмениваясь небольшими объемами данных с сервером в фоновом режиме. Это означает, что можно обновлять части веб-страницы без перезагрузки всей страницы.

AJAX используется для решения следующих задач: 

  • Чтение данных с веб-сервера - после загрузки страницы
  • Обновление веб-страницы без перезагрузки страницы
  • Отправка данных на веб-сервер - в фоновом режиме

Ключевым элементом AJAX является объект DOM - XMLHttpRequest.

Все современные браузеры поддерживают этот объект.

Этот бъект (XMLHttpRequest)  использоваться для обмена данными с веб-сервером в фоновом режиме. 

Создать объект XMLHttpRequest

var xhttp = new XMLHttpRequest();
В старых версиях Internet Explorer (5/6) вместо объекта XMLHttpRequest используется объект ActiveX:

Пример:

if (window.XMLHttpRequest) { // Для современных браузеров xmlhttp = new XMLHttpRequest(); } else{ // Для старых версий IE xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

Доступ из разных доменов

По соображениям безопасности современные браузеры не разрешают доступ из разных доменов.

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

XMLHttpRequest - методы

abort()

Отменяет текущий запрос.

getAllResponseHeaders()

Возвращает полный набор заголовков HTTP в виде строки.

getResponseHeader( headerName )

Возвращает значение указанного HTTP-заголовка.

open( method, URL )

open( method, URL, async )

open( method, URL, async, userName )

open( method, URL, async, userName, password )

Указывает метод, URL и другие необязательные атрибуты запроса.

Параметр method может иметь значение «GET», «POST» или «HEAD». Могут быть и другие HTTP-методы, такие как «PUT» и «DELETE» (в основном используемые в приложениях REST).

Параметр «async» указывает, следует ли обрабатывать запрос асинхронно или нет. «true» означает, что обработка сценария продолжается после метода send (), не дожидаясь ответа, а «false» означает, что скрипт ожидает ответа до продолжения обработки скрипта.

send( content )

Отправляет запрос.

setRequestHeader( label, value )

Добавляет пару label / value в HTTP-заголовок, который нужно отправить.

XMLHttpRequest - свойства

Свойство XMLHttpRequest.readyState возвращает состояние, в котором находится клиент XMLHttpRequest. Клиент существует в одном из следующих состояний:

Значение  Состояние Описание
0 UNSENT Клиент создан. open () еще не вызыван.
1 OPENED open() вызван.
2 HEADERS_RECEIVED send () был вызван, заголовки и статус доступны.
3 LOADING Загрузка; responseText содержит частичные данные.
4 DONE Операция завершена.
UNSENT
Клиент XMLHttpRequest был создан, но метод open () еще не был вызван.
OPENED
Вызывается метод open(). Во время этого состояния заголовки запросов могут быть установлены с использованием метода setRequestHeader(), и может быть вызван метод send(), который инициирует выборку.
HEADERS_RECEIVED
send () был вызван, и заголовки ответов были получены.
LOADING
Текст ответа принимается. Если responseType - это «текст» или пустая строка, responseText будет иметь частичный текстовый ответ при загрузке.
DONE
Операция выборки завершена. Это может означать, что передача данных была успешно завершена или не выполнена.

Имена состояний в Internet Explorer различны. Вместо UNSENT, OPENED, HEADERS_RECEIVED, LOADING и DONE используются имена READYSTATE_UNINITIALIZED (0), READYSTATE_LOADING (1), READYSTATE_LOADED (2), READYSTATE_INTERACTIVE (3) и READYSTATE_COMPLETE (4).

onreadystatechange

Обработчик событий который срабатывает при любом изменении состояния. 

responseText

Возвращает ответ как текстовую строку.

responseXML

Возвращает ответ как XML. Это свойство возвращает DOM - объект XML, который может быть проанализирован и проанализирован с использованием методов и свойств W3C DOM.

status

Возвращает статус как число (например, 404 для «Не найдено» и 200 для «ОК»).

statusText

Возвращает статус как строку (например, «Не найдено» или «ОК»).

AJAX - отправка запроса на сервер

Чтобы отправить запрос на сервер, используются  методы open () и send () объекта XMLHttpRequest:

xhttp.open ("GET", "ajax_info.txt", true);

xhttp.send ();

Метод Описание
open(method, url, async) Создаёт запрос
method: тип запроса: GET или POST
url: расположение сервера (файла)
async: true (асинхронный) или false (синхронный)
send() Отправляет запрос на сервер (используется для GET)
send(string) Отправляет запрос на сервер (используется для POST)

GET или POST?

GET проще и быстрее, чем POST, и может использоваться в большинстве случаев.

POST-запросы используются, если:

  • Не может быть использован эшированный файл (нужно обновлять файл или базу данных на сервере).
  • Отправка большого количества данных на сервер (POST не имеет ограничений по размеру).
  • Отправка пользовательского ввода (который может содержать неизвестные символы), POST более надежный и безопасный, чем GET.

Примеры использования

Чтение файла с сервера

  • Создаём объект типа XMLHttpRequest (в переменной httpRequest)
  • Задаём функцию, которая запускается при любых изменениях состояния этого объекта (привязываем её к событию onreadystatechange созданного объекта). Эта функция при каждом изменении состояния:

проверяет, завершена ли передача данных (XMLHttpRequest.DONE) и завершена успешно (status === 200)

если - да, то свойство responseText прописывается в DIV с ID="outdiv"

если - нет, то в этот DIV прописывается сообщение об ошибке

  • Вызываем метод open() объекта XMLHttpRequest, который создали в переменной httpRequest (httpRequest.open('GET', 'AjaxTest.txt', true)). Этот метод создаёт асинхронный запрос на сервер, по методу GET, для получения с сервера файла с именем AjaxTest.txt
  • Методом send() отправляем запрос на сервер. 
  • Наша функция постоянно анализирует состояние запроса, и в случае его успешного завершения, содержимое текстового файла будет находиться в переменной httpRequest.responseText


// Create XMLHttpRequest object // Old compatibility code, no longer needed. if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ... httpRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE 6 and older httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } httpRequest.onreadystatechange = function() { // process the server response if (httpRequest.readyState === XMLHttpRequest.DONE) { if (httpRequest.status === 200) { document.getElementById("outdiv").innerHTML=httpRequest.responseText; } else { document.getElementById("outdiv").innerHTML = 'A problem encountered processing HTTP request.'; } } }; httpRequest.open('GET', 'AjaxTest.txt', true); httpRequest.send(null);



JS регулярные выражения

Регулярное выражение - это объект, который описывает шаблон символов.

Класс JavaScript RegExp представляет собой регулярные выражения. Как String, так и RegExp определяют методы, которые используют регулярные выражения для выполнения разных функций сопоставления, поиска и замены текста.

Синтаксис

Регулярное выражение может быть определено с помощью конструктора RegExp ()

var pattern = new RegExp(pattern, attributes);

или

var pattern = /pattern/attributes;

Описание параметров:

  • pattern − Строка, которая задает шаблон регулярного выражения или другое регулярное выражение.
  • attributes − Необязательная строка, содержащая любые атрибуты «g», «i» и «m», которые определяют глобальные, не зависящие от регистра и многострочные совпадения, соответственно.

Скобки

Скобки ([]) имеют особое значение при использовании в контексте регулярных выражений. Они используются для поиска диапазона символов.

  Выражение и описание
1

[...]

Любой символ между скобками.

2

[^...]

Любой символ, не находящийся между скобками.

3

[0-9]

Он соответствует любой десятичной цифре от 0 до 9.

4

[a-z]

Соответствует любому символу от a в нижнем регистре до z в нижнем регистре.

5

[A-Z]

Соответствует любому символу от A в верхнем регистре до Z.

6

[a-Z]

Соответствует любому символу от a в нижнем регистре до Z в верхнем регистре.

Диапазоны, показанные выше, являются общими; также можно использовать диапазон [0-3] для соответствия любой десятичной цифре в диапазоне от 0 до 3 или диапазон [b-v], для соответствия любому строчному символу в диапазоне от b до v.

Квантификатор

Частоту или положение заключенных в скобки символьных последовательностей и одиночных символов можно обозначить специальным символом. Каждый такой символ имеет конкретную коннотацию. Все символы +, *,? И флаг $ следуют за последовательностью символов.

  Выражение и описание
1

p+

Соответствует любой строке, содержащей один или несколько p.

2

p*

Соответствует любой строке, содержащей ноль или более p.

3

p?

Соответствует любой строке, содержащей не более одного p.

4

p{N}

Соответствует любой строке, содержащей последовательность из N p

5

p{2,3}

Соответствует любой строке, содержащей последовательность из двух или трех p.

6

p{2, }

Соответствует любой строке, содержащей последовательность не менее двух p.

7

p$

Соответствует любой строке с p в конце ее.

8

^p

Соответствует любой строке с p в начале ее.

Примеры

Следующие примеры объясняют подробнее процесс сопоставления символов.

  Выражение и описание
1

[^a-zA-Z]

Соответствует любой строке, не содержащей ни одного символа в диапазоне от a до z и от A до Z.

2

p.p

Соответствует любой строке, содержащей p, за которой следует любой символ, в свою очередь, за которым следует другой p.

3

^.{2}$

Соответствует любой строке, содержащей ровно два символа.

4

<b>(.*)</b>

Соответствует любой строке, заключенной внутри <b> и </ b>.

5

p(hp)*

Соответствует любой строке, содержащей p, за которой следуют ноль или более экземпляров последовательности hp.

Буквенные символы

  Выражение и описание
1

алфавитно-цифровой

Сам символ

2

\0

Символ NUL (\ u0000)

3

\t

Tab (\u0009

4

\n

Newline (\u000A)

5

\v

Vertical tab (\u000B)

6

\f

Form feed (\u000C)

7

\r

Carriage return (\u000D)

8

\xnn

Латинский символ, заданный шестнадцатеричным числом nn; например, \ x0A совпадает с \n

9

\uxxxx

Символ Юникода, заданный шестнадцатеричным числом xxxx; например, \ u0009 совпадает с \t

10

\cX

Управляющий символ ^ X; например, \cJ эквивалентно символу новой строки \n

Метасимволы

Метасимвол - это просто алфавитный символ, которому предшествует обратная косая черта, которая действует, чтобы придать комбинации особое значение.

Например, вы можете искать большую сумму денег, используя метасимвол '\ d': / ([\ d] +) 000 /, Здесь \ d будет искать любую строку числового символа.

В следующей таблице приведен список метасимволов, которые могут использоваться в регулярных выражениях стиля PERL.

  Выражение и описание
1

.

один символ

2

\s

символ пробела (space, tab, newline)

3

\S

не пробел

4

\d

цифра (0-9)

5

\D

не цифра

6

\w

словарный символ (a-z, A-Z, 0-9, _)

7

\W

не словарный

8

[\b]

литерал -  backspace (special case).

9

[aeiou]

matches a single character in the given set

10

[^aeiou]

соответствует одному символу не из заданного набора

11

(foo|bar|baz)

соответствует любой из указанных альтернатив

Модификаторы

Доступны несколько модификаторов, которые могут упростить работу с регулярными выражениями, например, чувствительность к регистру, поиск по нескольким строкам и т. Д.

  Выражение и описание
1

i

Выполняет поиск, нечувствительный к регистру.

2

m

Указывает, что если строка имеет символы новой строки или символа возврата каретки, операторы ^ и $ теперь будут сопоставляться с границей новой строки, а не с границей строки

3

g

Выполняет глобальное соответствие, которое соответствует всем совпадениям, а не остановке после первого совпадения.

RegExp свойства

 

  Выражение и описание
1 constructor

Указывает функцию, которая создает прототип объекта.

2 global

Указывает, установлен ли модификатор «g».

3 ignoreCase

Указывает, установлен ли модификатор «i».

4 lastIndex

Индекс, с которого нужно начать следующее сравнение.

5 multiline

Указывает, установлен ли модификатор «m».

6 source

Текст шаблона.

 

RegExp методы

 

  Выражение и описание
1 exec()

Выполняет поиск соответствия в своем строковом параметре.

2 test()

Тесты для соответствия в параметре строки.

3 toSource()

Возвращает литерал объекта, представляющий указанный объект; это значение можно использовать для создания нового объекта.

4 toString()

Возвращает строку, представляющую указанный объект.

 

JavaScript - объекты 

 

Кроме встроенных объектов, таких как:

  • Number Object
  • Boolean Object
  • String Object
  • Array Object
  • Date Object
  • Math Object
  • RegExp Object

 JavaScript позволяет создавать и использовать пользовательские объекты.

Терминология

  • Пространство имен (Namespace)

Контейнер, который позволяет разработчикам объединять все функциональные возможности под уникальным, специфичных для приложения имя.

  • Класс (Class)

Определяет характеристики объекта. Класс представляет собой определение шаблона свойств и методов объекта.

  • Объект (Object).

Экземпляр класса.

  • Свойство (property).

Характеристика объекта, такая как цвет.

  • Метод (method).

Функционал  объекта, возможность производить действия с ним. Это подпрограммы или функции, связанные с классом.

  • Конструктор (Constructor).

Метод, который вызывается в момент создания экземпляра объекта. Он, как правило, имеет то же имя, что и класс, который его содержит.

  • Наследование (Inheritance).

Класс может наследовать свойства и методы из другого класса.

 

Объекты. Свойства. Методы.

Создание объекта.

 

 

Инициализатор объекта.

literal notation (initializer notation)

Прототип 

 

Конструктор.

Constructor function

 

Задание, удаление, изменение свойств объекта. 

Использование ключевого слова this. 

 

 

 

 

 

 

Методы конструктора объектов*

Object.assign()
Copies the values of all enumerable own properties from one or more source objects to a target object.
Object.create()
Creates a new object with the specified prototype object and properties.
Object.defineProperty()
Adds the named property described by a given descriptor to an object.
Object.defineProperties()
Adds the named properties described by the given descriptors to an object.
Object.entries() 
Returns an array of a given object's own enumerable property [key, value] pairs.
Object.freeze()
Freezes an object: other code can't delete or change any properties.
Object.getOwnPropertyDescriptor()
Returns a property descriptor for a named property on an object.
Object.getOwnPropertyDescriptors()
Returns an object containing all own property descriptors for an object.
Object.getOwnPropertyNames()
Returns an array containing the names of all of the given object's own enumerable and non-enumerable properties.
Object.getOwnPropertySymbols()
Returns an array of all symbol properties found directly upon a given object.
Object.getPrototypeOf()
Returns the prototype of the specified object.
Object.is()
Compares if two values are distinguishable (ie. the same)
Object.isExtensible()
Determines if extending of an object is allowed.
Object.isFrozen()
Determines if an object was frozen.
Object.isSealed()
Determines if an object is sealed.
Object.keys()
Returns an array containing the names of all of the given object's own enumerable properties.
Object.preventExtensions()
Prevents any extensions of an object.
Object.seal()
Prevents other code from deleting properties of an object.
Object.setPrototypeOf()
Sets the prototype (i.e., the internal [[Prototype]] property)
Object.values() 
Returns an array of a given object's own enumerable values.

 

* По материалам сайта developer.mozilla.org

 

 

 

 

 

DOM объекты браузера

Объект - navigator

Объект навигатора содержит информацию о браузере.

Объект Navigator можно получить, используя свойство объекта window - window.navigator.

window.navigator

или (для текущего окна)

navigator

Получить в цикле все свойства объекта navigator

function displProp(){ document.open(); for(let prop in window.navigator){ myString = eval("window.navigator." + prop); document.write("

" + prop + " : " + myString + "

"); } document.close(); }

Основные свойства объекта navigator 

Свойство  Описание
appCodeName Возвращает кодовое имя браузера
appName Возвращает имя браузера
appVersion Возвращает информацию о версии браузера
cookieEnabled Определяет, включены ли cookie в браузере
geolocation Возвращает объект Geolocation, который можно использовать для определения местоположения пользователя
language Возвращает язык браузера
onLine Определяет, находится ли браузер в сети
platform Возвращает, для какой платформы скомпилирован браузер
product Возвращает имя движка браузера
userAgent Возвращает заголовок пользовательского агента, отправленный браузером на сервер

Методы объекта navigator

Метод Описание
javaEnabled() Указывает, поддерживает ли браузер Java
taintEnabled() Удалено в версии 1.2 JavaScript. Указывает, включен ли браузер в tainting


Посмотреть список плагинов браузера

for (i=0; i<navigator.plugins.length; i++) { document.write("<tr><td>"); document.write(navigator.plugins[i].name); document.write("</td><td>"); document.write(navigator.plugins[i].filename); document.write("</td><td>"); document.write(navigator.plugins[i].description); document.write("</td></tr>"); } 


Объект - location

Свойство объекта window - location используется для доступа к URL-адресу документа, загруженного в настоящее время в окне, а также предоставляет информацию об общих функциональных возможностях навигации документа.

Его уникальность заключается в том, что он является свойством как объекта window, так и документа, поэтому window.location и document.location указывают на тот же объект.

Объект location может даже анализировать текущий URL-адрес на дискретные сегменты, которые затем могут быть доступны и обработаны как набор свойств.

Объект - location: свойства

Свойство Описание
hash Хеш URL-адреса, часть - anchor.
host Имя сервера и номер порта.
hostname Имя сервера без номера порта
href Полный URL-адрес загруженной страницы.
pathname Каталог и имя файла URL.
port Номер порта
protocol Используемый протокол.
search Строка запроса URL-адреса, начиная с вопросительного знака.

Объект - location: методы

Метод Описание
assign() Загружает новый документ
reload() Перезагружает текущий документ
replace() Заменяет текущий документ новым

Получить все свойства location


window.frames["out"].document.open(); for(let prop in window.location){ myString = eval("window.location." + prop); window.frames["out"].document.write("

" + prop + " : " + myString + "

"); } window.frames["out"].document.close();


Объект screen

Содержит информацию об экране посетителя.

Основные методы

Свойства Описание
availHeight Возвращает высоту экрана (исключая панель задач Windows)
availWidth Возвращает ширину экрана (исключая панель задач Windows)
colorDepth Возвращает глубину бит цветовой палитры для отображения изображений
height Возвращает общую высоту экрана
pixelDepth Возвращает разрешение цвета (в битах на пиксель) экрана
width Возвращает общую ширину экрана

Пример. Открыть новое окно, размеры которого рассчитываются в зависимости от размеров экрана.

winHeight = window.screen.availHeight/2; winWidth = window.screen.availWidth/2; // Строка - параметры нового окна newWinParams = "fullscreen=no, scrollbars=no, menubar=no, location=no, titlebar=no, toolbar=no, resizable=no, status=no, left=0, top=0, height=" + winHeight + ", width=" + winWidth ; win1 = window.open("","",newWinParams); // Вписать в новое окно кнопку "ЗАКРЫТЬ" win1.document.write("");

Объект history

Объект history содержит URL-адреса, которые посетил пользователь (в окне браузера).

Объект history является частью объекта window и доступен через свойство window.history.

Основные свойства

Свойства Описание
length Возвращает количество URL-адресов в списке

Основные методы

Метод Описание
back() Загружает предыдущий URL-адрес по списку адресов посещённых страниц
forward() Загружает следующий URL-адрес по списку адресов посещённых страниц
go() Загружает определенный URL из списка адресов посещённых страниц

Пример: перейти на страничку назад

window.history.back()



JavaScript - объект Math

В отличие от других глобальных объектов, объект Math не является конструктором. Все свойства и методы объекта Math являются статическими. Вы ссылаетесь на константу "ПИ" через Math.PI и вызываете функцию синуса через Math.sin(x), где x является аргументом метода. Константы в JavaScript определены с полной точностью действительных чисел.

Методы объекта Math

Функция Описание
Math.abs Возвращает абсолютное значение числа.
Math.acos Возвращает арккосинус числа.
Math.acosh Возвращает гиперболический арккосинус (или обратный гиперболический косинус) числа.
Math.asin Возвращает арксинус числа.
Math.asinh Возвращает ареа-синус числа.
Math.atan Возвращает арктангенс числа.
Math.atan2 Возвращает угол (в радианах) от оси X до точки, соответствующей указанным координатам X и Y.
Math.atanh Возвращает ареа-тангенс числа.
Math.ceil Возвращает наименьшее целое число, которое больше заданного числового выражения или равно ему.
Math.cos Возвращает косинус числа.
Math.cosh Возвращает гиперболический косинус числа.
Math.exp Возвращает число e (основание натуральных логарифмов), возведенное в степень.
Math.expm1 Возвращает результат вычитания 1 из e (основания натуральных логарифмов), возведенного в степень.
Math.floor Возвращает наибольшее целое число, которое меньше заданного числового выражения или равно ему.
Math.hypot Возвращает квадратный корень из суммы квадратов аргументов.
Math.imul Возвращает произведение двух чисел, которые обрабатываются как 32-разрядные целые числа со знаком.
Math.log Возвращает натуральный логарифм числа.
Math.log1p Возвращает натуральный логарифм 1 плюс числа.
Math.log10 Возвращает логарифм с основанием 10 числа.
Math.log2 Возвращает логарифм с основанием 2 числа.
Math.max Возвращает большее из двух заданных числовых выражений.
Math.min Возвращает меньшее из двух заданных чисел.
Math.pow Возвращает значение базового выражения, возведенного в заданную степень.
Math.random Возвращает псевдослучайное число от 0 до 1.
Math.round Возвращает указанное числовое выражение, округленное до ближайшего целого числа.
Math.sign Возвращает знак числа, указывающий, является ли число положительным, отрицательным или равным 0.
Math.sin Возвращает синус числа.
Math.sinh Возвращает ареа-синус числа.
Math.sqrt Возвращает квадратный корень числа.
Math.tan Возвращает тангенс числа.
Math.tanh Возвращает гиперболический тангенс числа.
Math.trunc Возвращает целую часть числа, отбросив все цифры дробной части.


Свойства объекта Math

Константа Описание
Math.E Математическая константа e. Это число Эйлера, основа натуральных логарифмов.
Math.LN2 Натуральный логарифм числа 2.
Math.LN10 Натуральный логарифм числа 10.
Math.LOG2E Логарифм числа e по основанию 2.
Math.LOG10E Логарифм числа e по основанию 10.
Math.PI Число Пи.Отношение длины окружности к ее диаметру.
Math.SQRT1_2 Квадратный корень из 0,5 или единица, деленная на квадратный корень числа 2.
Math.SQRT2 Квадратный корень из 2.

Примеры

Простые примеры использования

Math.abs(-7.25); var x = Math.PI; // Возвращает число PI var y = Math.sqrt(16); // Квадратный корень 16 Math.random();
var x = -25;
document.write(Math.abs(x)); // 25
var z = Math.tan(Math.PI/4); // 0.9999999999999999
Math.max(0, 150, 30, 20, -8, -200); // возвращает 150;

Площадь треугольника

HTML код: 

<form name="forma3"> Сторона 1 <input type="text" size="8" name="st1"> Сторона 2 <input type="text" size="8" name="st2"> Сторона 3 <input type="text" size="8" name="st3"><br> <input type="button" value="Считать" onClick="countTr(forma3);"> <input type="reset" value="Отменить"><br> Результат <input type="text" size="8" name="res"> </form>

Форма на экране:



Программа на JavaScript
function countTr(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; }


Простой таймер (JS + SVG)

В этом примере используется HTML5 тэги SVG и LINE для векторной графики.

И объект JavaScript Math (Math.PI, Math.cos, Math.sin) для расчёта координат рисуемой линии. 

<!DOCTYPE html> <html> <head> <script> var int1; secCounter = y2 = 0, grad = -90 arrLength = x1 = y1 = x2 = 200; rad = grad * (Math.PI / 180); x2 = x1 + Math.cos(rad)*200; y2 = y1 + Math.sin(rad)*200; // Draw line function draw(){ grad += 6; secCounter += 1; rad = grad * (Math.PI / 180); x2 = x1 + Math.cos(rad)*arrLength; y2 = y1 + Math.sin(rad)*arrLength; document.getElementById("myArrow").setAttribute("x2",x2); document.getElementById("myArrow").setAttribute("y2",y2); } </script> </head> <body> <BUTTON onclick="int1 = setInterval(draw,1000)">Start</BUTTON> <BUTTON onclick="clearInterval(int1)">Stop</BUTTON> <svg id="myTimer" width="400px" height="400px" style="border:1px solid red; border-radius:50%;"> <line id="myArrow" x1="200px" y1="200px" x2="200px" y2="0px" stroke-width="2px" stroke="#F00"/> </svg> </body> </html>

Результат - таймер с секундной стрелкой