WEB start

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

hit 
counter

Обучение

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

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

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

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


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

JavaScript

  • Angular

    Angular - это фреймворк, разработанный Google для создания клиентских (frontend WEB development) приложений. Прежде всего он предназначен для разработки SPA - проектов (Single Page Application), то есть одностраничных приложений. В этом плане Angular является наследником другого фреймворка AngularJS. В то же время Angular, начиная с версии 2, это не новая версия AngularJS, а принципиально новый фреймворк.

    Последняя версия Angular на момент написания - Angular 6. Официальный репозиторий фреймворка на гитхаб: https://github.com/angular/angular.

    Одной из ключевых особенностей Angular является то, что он использует в качестве языка программирования TypeScript. Можно писать приложения на Angular с помощью таких языков как Dart, ECMAScript или JavaScript. TypeScript является основным языком для Angular.

    Язык TypeScript - это надмножество языка ECMAScript 6 (также известной как ECMAScript 2015, ES2015), которое компилируется в обычный код на JavaScript (ES5) и широко поддерживается современными ОС.

    На настоящий момент браузеры не имеют встроенной поддержки ни TypeScript, ни ECMAScript 6, поэтому для публикации на сервеере код должен быть преобразован в код на JavaScript, поддерживаемый всеми браузерами.

    Установка Angular

    https://angular.io/guide/setup#windows

    NodeJS

    Установка

    NodeJS ( Node.js® - это среда выполнения для языка JavaScript, построенная на платформе JavaScript V8 для Chrome. https://nodejs.org/en/)

    Node.js позволяет запускать JavaScript-код вне браузера.

    Чтобы JavaScript код выполнился вне браузера (на backend), он должен быть интерпретирован и выполнен. Именно это и делает Node.js. Для этого он использует движок V8 VM от Google — ту же самую среду исполнения для JavaScript, которую использует браузер Google Chrome.

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

    Так, например, для 32 bit Windows нужен файл: node-v8.9.4-x86.msi . Программа установки NodeJS для Windows одной из опций предлагает поставить также и npn.

    Проверить версию

    node -v npm

    (npm - это менеджер пакетов для JavaScript и самый большой реестр программного обеспечения https://www.npmjs.com/)

    Если не поставили вместе с NodeJS, то скачать по ссылке https://nodejs.org/en/download/ и поставить дополнительно.

    Некоторые команды

    npm -v

    проверить версию

    p> npm list strong>

    получить перечень локально установленны пакетов

    npm list -g

    список глобально установленных пакетов

    Angular CLI

    Наиболее популярный инструмент для управления пректами Angular.

    https://cli.angular.io/

    На github:

    https://github.com/angular/angular-cli

    установить cli

    npm install -g @angular/cli

    удалить cli

    npm uninstall -g angular-cli

    npm cache clean

    npm cache clean --force

    проверить установленную версию

    ng --version

    Редактор кода

    Для редактирования проектов на Angular удобно пользоваться, например:

    Visual Studio Code

    Notepad++

    Новый проект

    Запустить консоль NodeJS

    Перейти в папку с проектами Angular и запустить создание нового - project1 командой:

    ng new project1

    Перейти в папку созданного проекта

    cd project1

    CLI автоматически создаёт начальную структуру папок и файлов проекта.

    В папке ./src/app находятся, в частности:

    • app.component.ts - первый Angular - компонент, корневой, он называется app-root
    • app.module.ts - исполняемый модуль
    • app.component.css - стили
    • app.component.html - шаблон HTML для вывода в окно браузера

    Запустить проект

    ng serve

    или, указав другой порт и директиву открыть сразу проект в браузере: 

    ng serve --port 3000 --open

    Открыть запущенный проект в браузере

    http://localhost:4200 (или, соответственно http://localhost:3000)

    Редактировать проект

    Файлы запущенного проекта можно редактировать в любом редакторе кодов (например: Notepad++). При сохранении изменений проект автоматически перезапускается и в окне браузера сразу отражаются изменения.

    Отредактируем файл шаблона корневого компонента нашего приложения (), заменим его на:

    <h1> Название проекта: {{ title }}! </h1> <h2> Наш первый проект с Angular 5 </h2>

    Сгенерировать проект для публикации

    ng build --prod

    Проект для публикации (HTML, CSS, JavaScript) по умолчанию создастся в папке dist

    Все команды ng (Angular):

    Wiki https://github.com/angular/angular-cli/wiki

    PDF https://cli.angular.io/reference.pdf

    Angular компоненты (Components)

    Основной составляющий блок проекта на Angular - компонент.

    Создаём новый компонент (Angular component)

    Создаём компонент с именем comp1 в паке существующего проекта

    ng generate component comp1

    По завершении команды в папке app проекта добавилась папка нашего нового компонента - src/app/comp1.

    В файл app.module.ts добавилась строки описания нашего компонента: 

    import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { Comp1Component } from './comp1/comp1.component'; @NgModule({ declarations: [ AppComponent, Comp1Component ], imports: [ BrowserModule ], providers: [], bootstrap: [ AppComponent] }) export class AppModule { }

    По-умолчанию создался компонент с селектором: app-comp1. Используя этот селектор можно добавить новый компонент в наше приложение. Для этого в файле с шаблоном нашего приложения (app.component.html) добавим строки:

    Он примет вид:

    <div style="text-align:center"> <h1> Название проекта: {{ title }}! </h1> <H1> Наш первый проект с Angular 5 </H1> <app-comp1> </app-comp1>


    Шаблон нового компонента находится в его файле с именем:

    src\app\comp1\comp1.component.html

    Отредактируем его, вставив строки:

    <h2> Первый компонент! </h2>

    Запустить наше приложение с новым компонентом, проверить работу:

    ng serve


    Angular 5 web-start.top

    Структура компонента Angular

    Компонет состоит из 3-х секций:

    1. директива - import
    2. декоратор
    3. директива export

    Импортируем из библиотеки '@angular/core' необходимые модули:

    import { Component, OnInit } from '@angular/core';

    Некоторые компоненты могут содержать множество директив import

    Декоратор компонента позволяет менять некоторые свойства нашего компонента (метаданные).

    Приведённый ниже декоратор задаёт свойства компонента (selector, templateUrl, styleUrls).

    @Component({ selector: 'app-comp1', templateUrl: './comp1.component.html', styleUrls: ['./comp1.component.css'] })

    selector - имя тега, использование которого инициирует наш компонент.

    templateUrl - шаблон HTML (может быть именем файла или встроенным набором HTML - свойство template )

    styleUrls - листы стилей (список файлов или встроенный - inline набор описаний стилей - свойство styles )

    В директиве export описаны свойства и методы класса-компонента, которые будут доступны другим компонентам приложения

    export class Comp1Component implements OnInit { public title ; constructor() { } ngOnInit() { this.title = 'Первый компонент запущен.' } }  


    Файл компонента - программа на Typescript :

    import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-comp1', templateUrl: './comp1.component.html', styleUrls: ['./comp1.component.css'] }) export class Comp1Component implements OnInit { public title ; constructor() { } ngOnInit() { this.title = 'Первый компонент запущен.' } }


    Angular 5 web-start.top

    Шаблоны Angular (Angular templates)

    Создадим новый проект (app-my-first-component) и посмотрим, как работать с шаблонами и стилями.

    Встроенные и внешние шаблоны (inline & external Angular templates)

    Параметры templateUrl и styleUrls , заданные в декораторе, определяют путь к внешним файлам, содержащим шаблон.

    Параметры template и style описывают встроенный шаблон (соответственно HTML и CSS ). Если необходимо использовать несколько строк для inline описаний, то вместо ограничителя строки - кавычка (') используется ограничитель строки - backtick (`) 

    Например

    template: '<h1>Inline HTML template</h1>',

    Или:

    import { Component} from '@angular/core'; @Component({ selector: 'app-my-first-component', template: ` <h1>Inline HTML template</h1> <hr> <h2> Встроенный HTML шаблон из трёх строк</h2> `, styles: ['h2 {color:red;}'] })

    При использовании встроенного многострочного шаблона ограничитель строки - кавычка (') нужно заменить на другой символ - ` (backtick symbol слева сверху на клавиатуре)

    Angular 5 web-start.top

    Интерполяция строк (использование динамических данных)

    (Angular string interpolation)

    Свойства , заданные в описании класса компонента, могут быть вставлены в шаблон с использованием синтаксиса:


    {{ИМЯ_СВОЙСТВА}}


    Например, если в компоненте описано свойство title :

    export class FirstComponent{ title = 'Первый тест'; }

    То в шаблоне может быть использовано {{title}}:

    template : '<H1>{{title}}</H1>',

    Можно вставлять в шаблон свойства объекта (пример со встроенными - inline - стилями и шаблоном)

    import { Component} from '@angular/core'; @Component({ selector: 'app-my-first-component', template: ` <h1> Студент </h1> <h2> Имя: {{student.name}}</h2> <h2> Возраст: {{student.age}}</h2> <h2> Курс: {{student.course}}</h2>`, styles: ['h2 {color:red;}'] }) export class MyFirstComponent { // Описание класса student = { name: "Иванов", age: 22, course: "Angular" } }



     Подробнее - Angular components


    Структурные директивы (Angular Structural Directives)

    Структурные директивы отвечают за компоновку HTML - макета. Они формируют или изменяют структуру DOM, как правило, путем добавления, удаления или изменения элементов. 

    Директива ngFor

    Можно в объекте описать массив данных, тогда в шаблон можно вставлять элементы массива или, например, с помощью оператора ngFor пробегать по всему массиву в цикле.

    import { Component} from '@angular/core'; @Component({ selector: 'app-my-first-component', template: ` <h1> Студент </h1> <h2> Имя: {{students[0].name}}</h2> <h2> Возраст: {{students[0].age}}</h2> <h2> Курс: {{students[0].course}}</h2> `, styles: ['h2 {color:red;}'] }) export class MyFirstComponent { students = [ { name: "Иванов", age: 21, course: "'Angular 2'" }, { name: "Петров", age: 22, course: "'Angular 4'" }, { name: "Сидоров", age: 23, course: "'Angular 5'" }, ] }


    Angular 5 web-start.top

    Проход по массиву в цикле

    import { Component} from '@angular/core'; @Component({ selector: 'app-my-first-component', template: ` <h1> Студенты </h1> <ul> <li *ngFor="let item of students; let i = index"> {{i}} <b>{{students[i].name}}</b> {{students[i].age}} {{students[i].course}} </li> </ul> `, styles: ['h2 {color:red;}'] }) export class MyFirstComponent { students = [ { name: "Иванов", age: 21, course: "'Angular 2'" }, { name: "Петров", age: 22, course: "'Angular 4'" }, { name: "Сидоров", age: 23, course: "'Angular 5'" }, ] }



    Подробнее - Angular directives


  • Angular 5 компоненты (Angular components)

    Компонент - базовый элемент структуры Angular - приложения

    • создать компонент
    • зарегистрировать в модуле
    • добавить HTML elelement в шаблон

    Самый простой компонент - один файл:

    import { Component} from '@angular/core'; @Component({ selector: 'comp1', template: '<h1>Comp1Component</h1>' }) export class Comp1Component { }

    Регистрация в модуле

    app.module.ts

    import { Comp1Component } from './comp1/comp1.component';

    и

    @NgModule({ declarations: [ AppComponent, Comp1Component ],


    Дальше в шаблоне можно использовать тег <comp1>

    Создать компонент Angular 5

    Внутри папки app создать папку для компонента

    component2

    В этой папке создать TypeScript файл с описанием класса компонента

    component2.component.ts

    import {Component} from "@angular/core"; @Component ({ selector : 'app-test2', templateUrl: './test2.component.html', styleUrls: ['./test2.component.css'], }) export class Test2Component{ }


    Строка 

    import { Component} from '@angular/core';

    импортирует декоратор компонента из библиотеки Angular core

    Создать файлы шаблона и стиля компонента (test2.component.html и test2.component.css)

    В файле описания модуля (app.module.ts) мпортировать новый компонент, используя имя файла с его описанием без расширения ts 

      (import { Test2Component } from './test2/test2.component';) 

    и зарегистрировать новый компонент в в секции declarations декоратора модуля - @NgModule 


    @NgModule({ declarations: [ AppComponent, Test2Component ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }


    Добавить вызов нашего компонента в шаблон главного компонента приложения (app.component.html)

    <app-test2> </app-test2>

    Компоненты могут быть вложенными.

    Компонент можно использовать несколько раз.

    Например:

    <app-test2> </> <app-test1> </app-test1> <app-test1> </app-test1> </app-test2>

    Селектор компонента

    В декораторе компонента одно из свойств - селектор компонента.

    По этому свойству Angular определяет, в какое место шаблона компонент должен быть помещён.

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

    selector : 'app-test2-component',

    Место компонента в шаблоне в этом случае должно быть задано тегом:

    <app-test2> </app-test2>

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

    selector : '[app-test2]',

    или название класса

    selector : '.app-test2]',

    Место компонента в шаблоне в этом случае может быть задано как :

    <div app-test2> </div>

    или

    <span class="app-test2"> </span>


  • WEB - уведомления (Notifications)

    API уведомлений (notifications) позволяет веб-страницам управлять показом уведомлений конечным пользователям. Они находятся за пределами окна просмотра, поэтому их можно отображать даже тогда, когда пользователь переключает вкладки или перемещается в другое приложение. API разработан с учётом совместимости с существующими системами уведомлений на разных платформах.

    На поддерживаемых платформах показ системного уведомления обычно включает в себя два этапа.

    Во-первых, пользователь должен предоставить разрешение для отображения системных уведомлений, что обычно делается, когда приложение или сайт инициализируются с использованием метода Notification.requestPermission (). Это вызовет диалог запроса , где пользователь может разрешить уведомления из этого источника, блокировать уведомления из этого источника или не выбирать в этот момент. После того, как выбор сделан, настройка обычно сохраняется для текущего сеанса.

    Во-вторых, с помощью конструктора Notification () создается новое уведомление. Ему должен быть передан в качестве аргумента заголовок сообщения и, возможно, - объект options для указания дополнительных параметров, таких как направление текста, основной текст, значок для отображения, звук уведомления для воспроизведения и многое другое.

    Запрос разрешения

    Notification.requestPermission()

    Проверить статус разрешения

    Notification.permission

    Создание уведомления

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

    var notification = new Notification('Need support', {
    body: 'Call us...'
    });

    Методы, свойства и события

    API веб-уведомлений принимает два параметра: строку, содержащую заголовок уведомления, и необязательный объект настроек. Настройки, которые мы можем указать:

    • body: Строка, используемая для дальнейшего уточнения цели уведомления.
    • lang: Указывает язык уведомления. Его значение должно соответствовать стандарту BCP 47. Примеры действительных строк - en-US и it-IT.
    • dir: Определяет направление текста сообщения. Его значение может быть автоматически означающим, что направление основано на настройках браузера, ltr, чтобы указать направление слева направо (для европейских языков) или rtl, чтобы указать направление справа налево (для некоторых азиатских языков).
    • tag: Строка, которая используется как идентификатор, который можно использовать для извлечения, замены или удаления уведомления.
    • icon: Указывает URL-адрес изображения, которое будет использоваться в качестве значка уведомления.

    Чтобы создать экземпляр объекта Notification, мы должны написать инструкцию следующим образом:

    var note = new Notification('Need support', {
    body: 'Call us...'
    });

    Настройки доступны как свойства для чтения экземпляра объекта notification.

    Кроме того, объект Notification предоставляет свойство, называемое разрешением (permission). Разрешение содержит строку, представляющую текущей статус разрешения на отображение уведомлений.

    Его значение может быть одним из следующих:

    • denied, что означает, что пользователь отклонил уведомления
    • granted, что означает, что пользователь дал разрешение
    • default, что означает, что выбор пользователя неизвестен

    Этот API предоставляет два метода: requestPermission() и close(). Как следует из названия, первый используется для запроса разрешения на показ уведомлений пользователю, в то время как последний программно закрывает уведомление.

    requestPermission () - это метод объекта Notification, который принимает необязательный параметр - callback функцию, которая выполняется, когда пользователь принимает или отклоняет разрешение. Выбор пользователя передается в эту функцию в качестве параметра, и значение может быть: granted, denied, default.

    close () является методом, который не принимает никаких параметров.

    Иногда может потребоваться выполнить действие в тот момент, как только изменится статус уведомления. Например, мы можем захотеть узнать, нажал ли пользователь уведомление или когда уведомление закрывается. Для этого мы можем привязать программу-обработчик к одному из четырех событий:

    • onclick: вызывается, когда пользователь нажимает на уведомление.
    • onclose: вызывается, как только пользователь или броузер закрывает уведомление.
    • onerror: вызывается, если с уведомлением возникает ошибка.
    • onshow: вызывается, когда отображается уведомление.

    Пример использования этих событий.

    var note = new Notification('Need support', {
    body: 'Call us...'
    });
    note.onshow = function () {
    console.log ("Отображено уведомление");
    };

  • Масштабируемая векторная графика (SVG)

    SVG (Scalable Vector Graphics) - это язык разметки, построенный на основе XML и предназначенный для описания двумерной векторной графики. SVG – это графическое расширение для языка HTML. То, что HTML  делает с текстом, SVG делает с графикой.

    SVG похож на фирменную технологию Adobe Flash, но это - текстовый открытый веб-стандарт вместо закрытого двоичного формата. Он разработан для работы с другими веб-стандартами, такими как CSS, DOM и SMIL.

    Изображение в формате SVG - это текстовый файл. Этот файл создаётся в формате XML. Поэтому изображения в этом формате можно создавать в текстовом редакторе. 

    Часто удобнее создавать такие изображения, использую специальные программы (например - INKSCAPE ) или экспортируя из популярных графических программ (например - Adobe Photoshop).

     

    Графические элементы, созданные в формате SVG, можно вставить в HTML страничку разными способами:

     

     

     

    • используя теги img, embed, iframe, object (для вставки изображения из отдельного файла)
    • в любой HTML тег в качестве фона
    • используя тег svg (описание изображения непосредственно в документе)

     

     

     

    Синтаксис описания SVG

    Теги <svg>, <g>, <defs>

     

    Пример


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>SVG 1</title>
    <style>
    SVG {
    height :300px;
    width :300px;
    border :1px solid black;
    }
    </style>
    </head>
    <body>
    <svg >
    <line x1="0" y1="0" x2="300" y2="300" stroke-width="10" stroke="rgb(255,0,0)"/>
    </svg>
    <svg>
    <polyline points="0,0 100,0 100,100 200,100 200,200 300,200 300,300" fill="rgb(255,0,0)" stroke-width="2" stroke="rgb(0,0,255)"/>
    </svg>
    <svg>
    <rect width="300" height="300" fill="rgb(0,0,255)" stroke-width="1" stroke="rgb(0,255,0)"/>
    <rect width="200" height="200" fill="rgb(255,0,0)" stroke-width="1" stroke="rgb(0,255,0)"/>
    <rect width="100" height="100" fill="rgb(0,255,0)" stroke-width="1" stroke="rgb(0,255,0)"/>
    </svg>
    <svg>
    <circle cx="150" cy="150" r="150" fill="rgb(255,255,0)" stroke-width="0" />
    <circle cx="150" cy="150" r="100" fill="rgb(0,0,255)" stroke-width="0" />
    </svg>
    <svg>
    <ellipse cx="150" cy="150" rx="150" ry="50" fill="rgb(0,0,255)" stroke-width="1" stroke="rgb(0,255,0)"/>
    </svg>
    <svg>
    <polygon points="0,100 100,100 100,50 300,150 100,250 100,200 0,200" fill="rgb(255,255,0)" stroke-width="1" stroke="rgb(255,0,0)" />
    </svg>
    </body>
    </html>

     

    Результат 

     

    Базовые формы изображений SVG 

    Линия - прямая <line>

    Тег рисует прямую линию. Использует параметры:

    x1, y1 - координаты начала

    x2, y2 - координаты конца

    stroke-width - толщина линии

    stroke - цвет линии

     

    Линия - ломаная  <polyline>

    Тег рисует ломаную линию. Использует параметры:

    points - массив координат узлов линии

    fill - цвет заливки

    stroke-width - толщина линии

    stroke - цвет линии

     

    Прямоугольник <rect>

    Тег рисует прямоугольник. Использует параметры:

    x, y - координаты прямоугольника 

    width - ширина

    height - высота

    fill - цвет заливки

    stroke-width - толщина линии обводки

    stroke - цвет линии обводки

     

    Круг <circle>

    Тег рисует круг. Использует параметры:

    cx, cy - координаты центра

    r - радиус

    fill - цвет заливки

    stroke-width - толщина линии обводки

    stroke - цвет линии обводки

     

     

    Эллипс <ellipse>

    Тег рисует элипс. Использует параметры:

    cx, cy - координаты центра

    rx - ширина

    ry - высота

    fill - цвет заливки

    stroke-width - толщина линии обводки

    stroke - цвет линии обводки

     

    Многоугольник <polygon>

    Тег рисует многоугольник. Использует параметры:

    points - массив координат углов

    fill - цвет заливки

    stroke-width - толщина линии обводки

    stroke - цвет линии обводки

     

    Путь <path>

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

    Атрибут d тегв <path> задаёт набор команд рисования:

    M - переместить курсор в точку (Move)

    L - нарисовать отрезок прямой (Line)

    A - нарисовать дугу (Arc)

    Q - кривая Безье (Quadratic Bezier Curves)

    C - кривая Безье (Cubic Bezier Curves)

    Z - замкнуть путь 

     

    Например:

    <path d="M100,100
    L150,100
    a50,25 0 0,0 150,100
    q50,-50 70,-170
    Z"
    style="stroke: #006666; fill: none;"/>

     

     

     

    Команды, используемые при рисовании линии пути (path)

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

    Команда Параметры Имя Описание
    M x,y moveto Перемещает карандаш в точку с абсолютными координатами x,y без рисования
    m x,y moveto Перемещает карандаш на x точек по горизонтали и на y - по вертикали, без рисования
     
    L x,y lineto Рисует строку из текущего местоположения пера в указанную точку x, y.
    l x,y lineto Рисует прямую от текущего положения до точки x,y относительно текущего положения
     
    H x horizontal lineto Draws a horizontal line to the point defined by 
    (specified x, pens current y).
    h x horizontal lineto Draws a horizontal line to the point defined by 
    (pens current x + specified x, pens current y). The x is relative to the current pens x position.
     
    V y vertical lineto Draws a vertical line to the point defined by 
    (pens current x, specified y).
    v y vertical lineto Draws a vertical line to the point defined by 
    (pens current x, pens current y + specified y). The y is relative to the pens current y-position.
     
    C x1,y1 x2,y2 x,y curveto Draws a cubic Bezier curve from current pen point to x,y. x1,y1 and x2,y2 are start and end control points of the curve, controlling how it bends.
    c x1,y1 x2,y2 x,y curveto Same as C, but interprets coordinates relative to current pen point.
     
    S x2,y2 x,y shorthand / 
    smooth curveto
    Draws a cubic Bezier curve from current pen point to x,y. x2,y2 is the end control point. The start control point is is assumed to be the same as the end control point of the previous curve.
    s x2,y2 x,y shorthand / 
    smooth curveto
    Same as S, but interprets coordinates relative to current pen point.
     
    Q x1,y1 x,y quadratic Bezier curveto Draws a quadratic Bezier curve from current pen point to x,y. x1,y1 is the control point controlling how the curve bends.
    q x1,y1 x,y quadratic Bezier curveto Same as Q, but interprets coordinates relative to current pen point.
     
    T x,y shorthand / smooth quadratic Bezier curveto Draws a quadratic Bezier curve from current pen point to x,y. The control point is assumed to be the same as the last control point used.
    t x,y shorthand / smooth quadratic Bezier curveto Same as T, but interprets coordinates relative to current pen point.
     
    A rx,ry 
    x-axis-rotation 
    large-arc-flag,
    sweepflag 
    x,y
    elliptical arc Draws an elliptical arc from the current point to the point x,y. rx and ry are the elliptical radius in x and y direction.
    The x-rotation determines how much the arc is to be rotated around the x-axis. It only seems to have an effect when rx and ry have different values.
    The large-arc-flag doesn't seem to be used (can be either 0 or 1). Neither value (0 or 1) changes the arc. 
    The sweep-flag determines the direction to draw the arc in.
    a rx,ry 
    x-axis-rotation 
    large-arc-flag,
    sweepflag 
    x,y
    elliptical arc Same as A, but interprets coordinates relative to current pen point.
     
    Z   closepath Closes the path by drawing a line from current point to first point.
    z   closepath Closes the path by drawing a line from current point to first point.
     

     

     

    Текст

     

    <text x="20" y="40" style="fill: #000000; stroke: none; font-size: 48px;"> Fill only </text> <text x="20" y="100" style="fill: none; stroke: #000000; font-size: 48px;"> Stroke only </text> <text x="20" y="150" style="fill: #999999; stroke: #000000; font-size: 48px;"> Fill and stroke </text>

     

     

     

    Оператор - switch

    Этот оператор позволяет использовать разные изображения, в зависимости от языка.

     

     

    <switch>
    <g systemLanguage="en-UK">
    <text x="10" y="20">UK English</text>
    </g>
    <g systemLanguage="en">
    <text x="10" y="20">English</text>
    </g>
    <g systemLanguage="es">
    <text x="10" y="20">Spanish</text>
    </g>
    </switch>

     

     SVG система координат

    В SVG отсчёт координат (точка с координатами х=0, y=0) начинается из левого верхнего угла. Ось y - направление сверху вниз. Ось x - направление слева направо.

     

    Единицы измерения

    Единица измерения указывается после значения. Например:  10cm или 125mm.

    Если единицы измерения не указаны, то имеются в виду пиксели - pixels (px).

    Кроме этого допускается использование:

    Единица Описание
    em Высота букв шрифта по умолчанию.
    ex Высота символа - x
    px Пиксели
    pt Пойнты (1 / 72 дюйма - inch)
    pc Picas (1 / 6 дюйма)
    cm Centimeters
    mm Миллиметры
    in Дюймы

    Единицы, установленные в элементе <svg> для  атрибутов width и height, влияют только на элемент <svg> (viewport - область просмотра).

    Формы, находящиеся  внутри элемента <svg> должны иметь свои собственные единицы.

    Если единицы измерения не указаны, то по умолчанию используются пиксели.

     

    Размеры форм, размер области их размещения

    Область, в которую выводятся SVG - формы, определяется тегом <svg>. Эта область - ViewPort определяется параметрами тега <svg> - width, height и параметром viewPort. 

    Если параметра viewBox в теге svg нет, то width и height определяют абсолютные размерый этой области.

    Это - абсолютные размеры области видимости форм. И параметры размеров самих форм, которые выводятся на экран тоже абсолютные (x, y, r, cx, cy,... ).

    Например, если задано в теге svg  height :500 и width :200, то на экране выделится для вывода изображений область шириной 200 и высотой 500 пикселей. Если в ней определено: 

    <rect   width=50 height=70 fill ="#0b0" stroke-width="1" stroke="#050" />

    то внутри области будет нарисован прямоугольник шириной 50 рикселей и высотой - 100.

    Параметр viewBox пропорционально меняет размеры всех элементов. Эта область имеет координаты (x, y ) и размеры (ширину, высоту).  Например: viewBox="0 0 50 20". Если для нашего примера задать такой viewBox, то реальные размеры всех элементов увеличется по горизонтали на коэффициент 500/50, а по вертикали - на коэффициент 200/20. То есть реальные размеры прясоугольника будут - 500 на 700 пикселей, а размер вилимой области - 5000 на 2000 пикселей.

     

     

    Применение стилей к SVG 

    С SVG можно использовать стили как внутри SVG - тегов, так и отдельно описанныа, аналогично HTML стилям.

    Примеры:

     

    <svg> <rect x="203" width="200" height="200" style="fill:red; stroke:black; stroke-width:3;"/> </svg>

     

    <style type="text/css" media="screen"> rect { fill: green; stroke: black; stroke-width: 3; } rect:hover { fill: green; } </style>

     

     

    <link rel="stylesheet" type="text/css" href="/style.css">

     

     

    <?xml-stylesheet type="text/css" href="/style.css"?>

     

     

    Назначение стилей для всех сгруппированных элементов

    <g style="fill:blue; stroke:black; stroke-width:3; fill-opacity: 0.5;"> <rect x="200" width="200" height="200"/> <circle cx="120" cy="100" r="100"/> </g>

     

     

    Анимация SVGs при помощи CSS

    <svg> <rect x="10" y="10" height="110" width="110" style="stroke:#ff0000; fill: #0000ff"> <animateTransform attributeName="transform" begin="0s" dur="20s" type="rotate" from="0 60 60" to="360 60 60" repeatCount="indefinite" /> </rect> </svg>

     

     

     

     

    <rect x="0" y="0" width="30" height="15" style="stroke: #ff0000; fill: none;"> <animateMotion path="M10,50 q60,50 100,0 q60,-50 100,0" begin="0s" dur="10s" repeatCount="indefinite" rotate="auto" /> </rect>

     

     

     

    Пример: таймер


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>SVG Javascript test1</title>
    <script>
    var x2, y2, grad, clockFace, secCounter, arrLength// Declare globals
    function drawTimer(){
    // Init counter
    x2=0, y2 = 0, grad = -90, clockFace = 400, secCounter = 0, arrLength = 180

    document.getElementById("myTimer").style.width = clockFace + "px";
    document.getElementById("myTimer").style.height = clockFace + "px";
    document.getElementById("myTimer").style.border = "4px solid red";
    document.getElementById("myTimer").style.backgroundColor = "#FFDDDD";
    document.getElementById("myTimer").style.borderRadius = "30%";
    x1 = clockFace/2;
    y1 = clockFace/2;
    x2 = arrLength;
    y2 = 0;
    rad = grad * (Math.PI / 180);
    x2 = x1 + Math.cos(rad)*arrLength;
    y2 = y1 + Math.sin(rad)*arrLength;
    console.log("x1 = " + x1 + ", y1 = " + y1 + ", x2 = " + x2 + ", y2 = " + y2);
    // Draw Line
    document.getElementById("arrow").setAttribute("x1",x1);
    document.getElementById("arrow").setAttribute("y1",y1);
    document.getElementById("arrow").setAttribute("x2",x2);
    document.getElementById("arrow").setAttribute("y2",y2);
    document.getElementById("arrow").setAttribute("stroke-width",2);
    document.getElementById("arrow").setAttribute("stroke","#FF0000");
    // Draw arrow end point
    document.getElementById("arrowEnd").setAttribute("cx",x2);
    document.getElementById("arrowEnd").setAttribute("cy",y2);
    document.getElementById("arrowEnd").setAttribute("r",4);
    document.getElementById("arrowEnd").setAttribute("fill","#FF0000");

    document.getElementById("arrowEnd").setAttribute("stroke-width",0);

    // Draw arrow start point
    document.getElementById("arrowStart").setAttribute("cx",x1);
    document.getElementById("arrowStart").setAttribute("cy",y1);
    document.getElementById("arrowStart").setAttribute("r",15);
    document.getElementById("arrowStart").setAttribute("fill","none");
    document.getElementById("arrowStart").setAttribute("stroke","#F00");
    document.getElementById("arrowStart").setAttribute("stroke-width",2);

    // draw numbers
    document.getElementById("out2").setAttribute("x",x1);
    document.getElementById("out2").setAttribute("y",y1);
    document.getElementById("out2").setAttribute("fill","#FFBBBB");
    document.getElementById("out2").setAttribute("font-size",arrLength);


    }

    function arrowStep(){
    // Move arrow once
    grad += 1;
    secCounter += 1;
    rad = grad * (Math.PI / 180);
    x2 = x1 + Math.cos(rad)*arrLength;
    y2 = y1 + Math.sin(rad)*arrLength;
    document.getElementById("arrow").setAttribute("x2",x2);
    document.getElementById("arrow").setAttribute("y2",y2);
    console.log("x1 = " + x1 + ", y1 = " + y1 + ", x2 = " + x2 + ", y2 = " + y2 + ", angle (degrees) = " + grad);
    console.log(secCounter);
    // Draw arrow top point

    document.getElementById("arrowEnd").setAttribute("cx",x2);
    document.getElementById("arrowEnd").setAttribute("cy",y2);
    document.getElementById("arrowEnd").setAttribute("r",4);
    document.getElementById("arrowEnd").setAttribute("fill","#FF0000");
    document.getElementById("arrowEnd").setAttribute("stroke-width",0);
    document.getElementById("out2").innerHTML = secCounter;
    }
    </script>
    </head>
    <body onload="drawTimer()">
    <svg id="myTimer">
    <text id = "out2" x="" y="" fill="" font-size="" alignment-baseline="middle" text-anchor="middle">0</text>
    <line id="arrow" x1="" y1="" x2="" y2="" stroke-width="" stroke=""/>
    <circle id="arrowStart" cx="" cy="" r="" fill="" stroke-width="" />
    <circle id="arrowEnd" cx="" cy="" r="" fill="" stroke-width="" />
    </svg>

    <button onclick = "arrowStep();">Go one step</button>
    <button onclick = "int1 = setInterval(arrowStep,1000);">Start timer</button>
    <button onclick = "clearInterval(int1);">Stop timer</button>
    <button onclick = "drawTimer();">Reset counter</button>

    </body>
    </html>

     

     

    Результат

     

  • DOM - обработка событий (Events)

    Браузер отслеживает события которые происходят в его окне. События могут быть привязаны к определенному элементу, группе элементов, или к окну браузера. 

    События могут генерироваться как пользователем (например: перемещение мышки) так и системой (например: законцилась анимация )

    События могут быть разных типов, например:

    • нажатия клавиш мыши, перемещение курсора
    • нажатие клавиш клавиатуры
    • изменение размеров окна браузеа (закрытие окна)
    • загрузка страницы в окно
    • заполнение формы
    • воспроизведение видео
    • возникновение ошибок.

    Реакция на события описывается через бработчики событий (events listeners или event handlers).

    Браузер постоянно отслеживает все события, при его возникновении (event firing) он ищет назначенную этому событию фукцию-обработчик события и запускает её (если она найдена).

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

    Типы событий

    События, связанные с мышью (mouse events)

    Событие Описание DOM
    onclick Клик левой кнопкой мыши 2
    oncontextmenu Клик правой кнопкой мышки 3
    ondblclick Два клика подряд левой кнопкой 2
    onmousedown Нажатие левой кнопки мышки 2
    onmouseenter Курсор попал на элемент 2
    onmouseleave Курсор ушёл с элемента 2
    onmousemove Курсор переместился, находясь над элементом 2
    onmouseover Курсор находится над элементом или его дочерними элементами 2
    onmouseout Курсор ушёл с области самого элемента или одного из его дочерних элементов 2
    onmouseup Отпускание левой кнопки мышки 2

    События клавиатуры (keyboard events)

    Событие Описание DOM
    onkeydown Нажатие кнопки клавиатурв 2
    onkeypress Нажатие и отпускание кнопки клавиатуры 2
    onkeyup Отпускание кнопки клавиатуры 2

    События объекта frame (frame/window events)

    Собвтие Описание DOM
    onabort Загрузка документа в фрейм прервана 2
    onbeforeunload Начало загрузки документа в фрейм 2
    onerror Ошибка загрузки файла в фрейм 2
    onhashchange Изменился параметр anchor фрейма 3
    onload Загрузка документа в фрейм 2
    onpageshow Событие происходит, когда пользователь переходит на веб-страницу 3
    onpagehide Событие происходит, когда пользователь уходит с веб-страницы 3
    onresize Событие возникает, когда размер окна документа изменяется 2
    onscroll Событие происходит при прокрутке элемента 2
    onunload Событие происходит после выгрузки страницы (для <body>) 2

    События, связанные с формой (form events)

    Событие Описание DOM
    onblur Событие происходит, когда элемент теряет фокус 2
    onchange Событие происходит, когда изменилось содержимое элемента формы (для <input>, <keygen>, <select> и <textarea>) 2
    onfocus Событие возникает, когда элемент получает фокус 2
    onfocusin Событие возникает, когда элемент собирается получить фокус 2
    onfocusout Событие происходит, когда элемент теряет фокус 2
    oninput Событие возникает, когда элемент получает пользовательский ввод 3
    oninvalid Событие oninvalid происходит, когда элемент <input> недопустим. 3
    onreset Событие происходит, когда форма сбрасывается 2
    onsearch Событие возникает, когда пользователь что-то пишет в поле поиска (для <input = "search">) 3
    onselect Событие происходит после выбора пользователем текста (для <input> и <textarea>) 2
    onsubmit Событие происходит при отправке формы 2

    События drag/drop

    Событие Описание DOM
    ondrag Событие возникает, когда элемент перетаскивается 3
    ondragend Событие происходит, когда пользователь закончил перетаскивание элемента 3
    ondragenter Событие возникает, когда элемент перетаскивания входит в целевую точку  3
    ondragleave Событие происходит, когда элемент перетаскивания оставляет целевую точку 3
    ondragover Событие происходит, когда элемент перетаскивания находится над целевой точкой перетаскивания 3
    ondragstart Событие возникает, когда пользователь начинает перетаскивать элемент 3
    ondrop Событие происходит, когда перетаскиваемый элемент выбрасывается в целевой точке 3

    Clipboard - события

    Событие Описание DOM
    oncopy Событие происходит, когда пользователь копирует содержимое элемента
    oncut Событие происходит, когда пользователь вырезает содержимое элемента
    onpaste Событие возникает, когда пользователь вставляет некоторый контент в элемент

    Print - события

    Событие Описание DOM
    onafterprint Событие происходит, когда страница начала печать, или если диалоговое окно печати закрывается 3
    onbeforeprint Событие происходит, когда страница будет напечатана 3

    Media - события

    Событие Описание DOM
    onabort The event occurs when the loading of a media is aborted 3
    oncanplay The event occurs when the browser can start playing the media (when it has buffered enough to begin) 3
    oncanplaythrough The event occurs when the browser can play through the media without stopping for buffering 3
    ondurationchange The event occurs when the duration of the media is changed 3
    onemptied The event occurs when something bad happens and the media file is suddenly unavailable (like unexpectedly disconnects) 3
    onended The event occurs when the media has reach the end (useful for messages like "thanks for listening") 3
    onerror The event occurs when an error occurred during the loading of a media file 3
    onloadeddata The event occurs when media data is loaded 3
    onloadedmetadata The event occurs when meta data (like dimensions and duration) are loaded 3
    onloadstart The event occurs when the browser starts looking for the specified media 3
    onpause The event occurs when the media is paused either by the user or programmatically 3
    onplay The event occurs when the media has been started or is no longer paused 3
    onplaying The event occurs when the media is playing after having been paused or stopped for buffering 3
    onprogress The event occurs when the browser is in the process of getting the media data (downloading the media) 3
    onratechange The event occurs when the playing speed of the media is changed 3
    onseeked The event occurs when the user is finished moving/skipping to a new position in the media 3
    onseeking The event occurs when the user starts moving/skipping to a new position in the media 3
    onstalled The event occurs when the browser is trying to get media data, but data is not available 3
    onsuspend The event occurs when the browser is intentionally not getting media data 3
    ontimeupdate The event occurs when the playing position has changed (like when the user fast forwards to a different point in the media) 3
    onvolumechange The event occurs when the volume of the media has changed (includes setting the volume to "mute") 3
    onwaiting The event occurs when the media has paused but is expected to resume (like when the media pauses to buffer more data) 3

    Animation - события

    Событие Описание DOM
    animationend The event occurs when a CSS animation has completed 3
    animationiteration The event occurs when a CSS animation is repeated 3
    animationstart The event occurs when a CSS animation has started 3

    Transition - события

    Событие Описание DOM
    transitionend The event occurs when a CSS transition has completed 3

    Server-Sent - события

    Событие Описание DOM
    onerror The event occurs when an error occurs with the event source
    onmessage The event occurs when a message is received through the event source
    onopen The event occurs when a connection with the event source is opened

    Другие события

    Событие Описание DOM
    onmessage The event occurs when a message is received through or from an object (WebSocket, Web Worker, Event Source or a child frame or a parent window) 3
    onmousewheel Deprecated. Use the onwheel event instead
    ononline The event occurs when the browser starts to work online 3
    onoffline The event occurs when the browser starts to work offline 3
    onpopstate The event occurs when the window's history changes 3
    onshow The event occurs when a <menu> element is shown as a context menu 3
    onstorage The event occurs when a Web Storage area is updated 3
    ontoggle The event occurs when the user opens or closes the <details> element 3
    onwheel The event occurs when the mouse wheel rolls up or down over an element 3

    Touch - события

    Событие Описание DOM
    ontouchcancel The event occurs when the touch is interrupted
    ontouchend The event occurs when a finger is removed from a touch screen
    ontouchmove The event occurs when a finger is dragged across the screen
    ontouchstart The event occurs when a finger is placed on a touch screen

    Объект event

    Когда происходит событие, браузер создает объект 'event', помещает в него детали события и передает его в качестве аргумента обработчику.

    пример ниже выводит на консоль все свойства текущего объека event, созданного баузеом при клике мышкой по элементу ELEMENT .

    function myFunc2(evnt){ console.log('Event: ', evnt); }

    ELEMENT.addEventListener('click', myFunc2);


    Константы

    Константа Описание DOM
    CAPTURING_PHASE The current event phase is the capture phase (1) 1
    AT_TARGET The current event is in the target phase, i.e. it is being evaluated at the event target (2) 2
    BUBBLING_PHASE The current event phase is the bubbling phase (3) 3

    Свойства

    Свойство Описание DOM
    bubbles Returns whether or not a specific event is a bubbling event 2
    cancelable Returns whether or not an event can have its default action prevented 2
    currentTarget Returns the element whose event listeners triggered the event 2
    defaultPrevented Returns whether or not the preventDefault() method was called for the event 3
    eventPhase Returns which phase of the event flow is currently being evaluated 2
    isTrusted Returns whether or not an event is trusted 3
    target Returns the element that triggered the event 2
    timeStamp Returns the time (in milliseconds relative to the epoch) at which the event was created 2
    type Returns the name of the event 2
    view Returns a reference to the Window object where the event occured 2

    Методы

    Метод Описание DOM
    preventDefault() Cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur 2
    stopImmediatePropagation() Prevents other listeners of the same event from being called 3
    stopPropagation() Prevents further propagation of an event during event flow 2

    Объект - MouseEvent

    Свойство Описание DOM
    altKey Возвращает, была ли нажата клавиша «ALT» при запуске события мыши 2
    button Возвращает, какая кнопка мыши была нажата при запуске события мыши 2
    buttons Возвращает, какие кнопки мыши были нажаты при запуске события мыши 3
    clientX Возвращает горизонтальную координату указателя мыши относительно текущего окна, когда событие мыши было запущено 2
    clientY Возвращает вертикальную координату указателя мыши относительно текущего окна, когда событие мыши было запущено 2
    ctrlKey Возвращает, была ли нажата клавиша CTRL при запуске события мыши 2
    detail Возвращает число, указывающее, сколько раз щелкнули мышь 2
    metaKey Возвращает, была ли нажата клавиша «META» при срабатывании события 2
    pageX Возвращает горизонтальную координату указателя мыши относительно документа, когда событие мыши было запущено
    pageY Возвращает вертикальную координату указателя мыши относительно документа, когда событие мыши было запущено
    relatedTarget Возвращает элемент, связанный с элементом, вызвавшим событие мыши 2
    screenX Возвращает горизонтальную координату указателя мыши относительно экрана, когда событие было вызвано 2
    screenY Возвращает вертикальную координату указателя мыши относительно экрана, когда событие было инициировано 2
    shiftKey Возвращает, была ли нажата клавиша «SHIFT» при срабатывании события 2
    which Возвращает, какая кнопка мыши была нажата при запуске события мыши 2

    Объект - KeyboardEvent

    Свойство Описание DOM
    altKey Возвращает, была ли нажата клавиша «ALT» при срабатывании  события 2
    ctrlKey Возвращает, была ли нажата клавиша CTRL при срабатывании события клавиатуры 2
    charCode Возвращает код символа Юникода клавиши, которая вызвала событие onkeypress 2
    key Возвращает для нажатой клавиши её значение  3
    location Возвращает местоположение ключа на клавиатуре или устройстве 3
    metaKey Возвращает, была ли нажата клавиша «meta» при запуске  события 2
    shiftKey Возвращает, была ли нажата клавиша «SHIFT» при срабатывании  события 2
    which Возвращает код символа Юникода ключа, вызвавшего событие onkeypress, или код ключа Unicode ключа, вызвавшего событие onkeydown или onkeyup 2

    HashChangeEvent - объект

    Property Описание DOM
    newURL Returns the URL of the document, after the hash has been changed
    oldURL Returns the URL of the document, before the hash was changed

    PageTransitionEvent - объект

    Property Описание DOM
    persisted Returns whether the webpage was cached by the browser

    FocusEvent - объект

    Property Описание DOM
    relatedTarget Returns the element related to the element that triggered the event 3

    AnimationEvent - объект

    Property Описание DOM
    animationName Returns the name of the animation
    elapsedTime Returns the number of seconds an animation has been running

    TransitionEvent - объект

    Property Описание DOM
    propertyName Returns the name of the CSS property associated with the transition
    elapsedTime Returns the number of seconds a transition has been running

    WheelEvent - объект

    Property Описание DOM
    deltaX Returns the horizontal scroll amount of a mouse wheel (x-axis) 3
    deltaY Returns the vertical scroll amount of a mouse wheel (y-axis) 3
    deltaZ Returns the scroll amount of a mouse wheel for the z-axis 3
    deltaMode Returns a number that represents the unit of measurements for delta values (pixels, lines or pages) 3

     

    Регистрация обработчика событий

    Зарегистриовать обработчик событий можно разными способами.

    Присвоить значение специальному атрибуту (onclick, onkeypress, onmouseenter,...) при описании HTMl тега. Например:

    <button id='myButton1' onclick="alert('My event!');">Press me</button>

    Можно его изменить с помощью соответствующего свойства объекта element:

    document.getElementById('myButton1').onclick = 'alert("New action")'

    Можно использовать метод объекта element - addEventListener(event, listener). Например:

    document.getElementById('myButton1').addEventListener('click', click2); function click2(){ alert('Listener 1 - click2()'); }

    или

    document.getElementById('myButton1').addEventListener('click', () => { alert ('Listener 1!!'); });

    Если в этом примере  ипользовать оба способа, то к элементу id=myButton1 , к событию click будут привязаны сразу 2 обработчика.


    Удаление обработчика событий

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

    Привязать обработчик к элементу 

    <button id="myButton1" onclick='alert("Event listener connected")'>Click me</button>

    или

    document.getElementById('myButton1').onclick='alert("Event listener connected")';

    Удалить его

    document.getElementById('myButton1').onclick='';

    Можно использовать метод элемента removeEventListener(событие, имя_обработчика)

    Привязать

    function myFunc2(){ alert("Listener myFunc2() response"); } document.getElementById('myButton1').addEventListener('click', myFunc2);

    Удалить

    document.getElementById('myButton1').removeEventListener('click', myFunc2);


    Удалить все обработчики событий у элемента можно, например, клонировав элемент (метод cloneNode()) , при этом обработчики событий не клонируются. 

    function removeAllEventListeners(elmntID){ var oldElement = document.getElementById(elmntID); var newElement = oldElement.cloneNode(true); oldElement.parentNode.replaceChild(newElement, oldElement); // cleanup out1 out1.innerHTML = ''; }



    Events bubbling, capturing

    event.target - элемент, который инициировал событие.

    event.currentTarget - текущий элемент, обрабатывающий событие.

    event bubbling (event propagation) - обработка события, котоое инициировал элемент, всеми его родительскими элементами (снизу вверх или от дочернего элемента).

    event capturing - 

    event.eventPhase - фаза обработки события (capturing=1, bubbling=3)

    Стандартные события DOM проходят фазы обработки событий (event.eventPhase):

    Константа Значение Описание
    Event.NONE 0 Ни одно событие не обрабатывается
    Event.CAPTURING_PHASE 1 Событие передаётся через объекты-предки целевого элемента (event.target). Этот процесс начинается с объекта Window, затем - Document, затем HTMLHtmlElement и т. д. через элементы до тех пор, пока не будет достигнут непоседственно родительский элемент. Обработчики событий, зарегистрированные для Capturing (при вызове EventTarget.addEventListener (EVENT, HANDLER, useCapture)), запускаются на этом этапе.
    Event.AT_TARGET 2 Событие достигло целевого элемента. В это время вызываются обработчики событий, зарегистрированные для этой фазы. Если Event.bubbles принимает значение false, обработка события завершается после завершения этой фазы.
    Event.BUBBLING_PHASE 3 Событие распространяется к предкам целевого элемента, в обратном порядке, начиная с его непосредственного родителя, и в конечном итоге достигает объекта Window. Этот процесс называется bubbling происходит только в том случае, если Event.bubbles принимает значение true. Обработчики событий, зарегистрированные для этой фазы, запускаются в это время.
    • Capturing phase - событие переходит к элементу
    • Target phase - событие достигло целевого элемента
    • Bubbling phase - событие "поднимается" от элемента




     

  • DOM - объекты CSS

    Определения

    Свойство (property) - название стиля.

    Значение (value) - значение свойства.

    Селектор (selector) - переключатель, идентификатор набора стилей (блока стилей)

    Блок стилей (block) - набор описаний стилей (declarations), который заключается в фигурные скобки ({}).

    Правило (rule или набор правил -rule set)- селектор стиля плюс блок стилей.

    Декларация (declaration ) - строка-описание стиля. Внутри одного блока (между фигурными скобками) может быть находиться одна декларация или несколько, разделённых символом (;). Декларация состоит из свойства (property), после которого ставится двоеточие (:) после этого символа - значение этого свойства (value ), после этого - символ точка с запятой (;).

    Объект DOM - Style

    Отражает свойства стилей элемента (inline styles). Отражает те свойства стилей, которые заданы атрибутом style.

    Задать атрибут style (нужно иметь в виду, что если этот атрибут уже был задан, его старое значение будет удалено)

    element.setAttribute("style", "background-color: red;");

    Удалить атрибут (и все inline стили элемента)

    element.removeAttribute("style")

    Модифицировать параметры атрибута style (изменение свойс объекта style для элемента).

    element.style.backgroundColor = "red";

     

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

     

    Свойство Описание Версия
    CSS
    alignContent Устанавливает или возвращает выравнивание между линиями внутри гибкого контейнера, когда элементы не используют все свободное пространство 3
    alignItems Устанавливает или возвращает выравнивание элементов внутри гибкого контейнера 3
    alignSelf Устанавливает или возвращает выравнивание для выбранных элементов внутри гибкого контейнера 3
    animation Сокращённое свойство для всех свойств анимации, приведённых ниже, за исключением свойства animationPlayState 3
    animationDelay Устанавливает или возвращает, когда анимация начнется 3
    animationDirection Устанавливает или возвращает, должна ли анимация воспроизводиться в обратном порядке на альтернативных циклах 3
    animationDuration Устанавливает или возвращает количество секунд или миллисекунд, которое требуется анимации для завершения одного цикла 3
    animationFillMode Устанавливает или возвращает значения, которые применяются анимацией за пределами времени ее выполнения 3
    animationIterationCount Устанавливает или возвращает количество раз, когда должна воспроизводиться анимация 3
    animationName Устанавливает или возвращает имя для анимации @keyframes 3
    animationTimingFunction Устанавливает или возвращает кривую скорости анимации 3
    animationPlayState Устанавливает или возвращает, работает анимация или приостановлена 3
    background Устанавливает или возвращает все свойства фона в одной директиве 1
    backgroundAttachment Устанавливает или возвращает фиксированное фоновое изображение или прокручивает страницу 1
    backgroundColor Устанавливает или возвращает фоновый цвет элемента 1
    backgroundImage Устанавливает или возвращает фоновое изображение для элемента 1
    backgroundPosition Устанавливает или возвращает начальную позицию фонового изображения 1
    backgroundRepeat Устанавливает или возвращает как повторять (мозаику) фоновое изображение 1
    backgroundClip Устанавливает или возвращает область рисования фона 3
    backgroundOrigin Устанавливает или возвращает область позиционирования фоновых изображений 3
    backgroundSize Устанавливает или возвращает размер фонового изображения 3
    backfaceVisibility Устанавливает или возвращает, должен ли элемент быть видимым, если он не обращен к экрану 3
    border Устанавливает или возвращает borderWidth, borderStyle и borderColor в одном объявлении 1
    borderBottom Устанавливает или возвращает все свойства borderBottom в одном объявлении 1
    borderBottomColor Устанавливает или возвращает цвет нижней границы 1
    borderBottomLeftRadius Устанавливает или возвращает форму границы нижнего левого угла 3
    borderBottomRightRadius Устанавливает или возвращает форму границы нижнего правого угла 3
    borderBottomStyle Устанавливает или возвращает стиль нижней границы 1
    borderBottomWidth Устанавливает или возвращает ширину нижней границы 1
    borderCollapse Устанавливает или возвращает, должна ли граница таблицы быть свернута в одну границу или нет 2
    borderColor Устанавливает или возвращает цвет границы элемента (может иметь до четырех значений) 1
    borderImage Стеновое свойство для установки или возврата всех свойств borderImage 3
    borderImageOutset Устанавливает или возвращает величину, на которую область изображения границы выходит за пределы поля 3
    borderImageRepeat Устанавливает или возвращает, следует ли повторять, округлять или растягивать границу изображения 3
    borderImageSlice Устанавливает или возвращает внутренние смещения границы изображения 3
    borderImageSource Устанавливает или возвращает изображение, которое будет использоваться в качестве границы 3
    borderImageWidth Устанавливает или возвращает ширину границы изображения 3
    borderLeft Устанавливает или возвращает все свойства borderLeft в одном объявлении 1
    borderLeftColor Устанавливает или возвращает цвет левой границы 1
    borderLeftStyle Устанавливает или возвращает стиль левой границы 1
    borderLeftWidth Устанавливает или возвращает ширину левой границы 1
    borderRadius Сокращенное свойство для установки или возврата радиусавсех четырех границ 3
    borderRight Устанавливает или возвращает все свойства borderRight в одном объявлении 1
    borderRightColor Устанавливает или возвращает цвет правой границы 1
    borderRightStyle Устанавливает или возвращает стиль правой границы 1
    borderRightWidth Устанавливает или возвращает ширину правой границы 1
    borderSpacing Устанавливает или возвращает пробел между ячейками в таблице 2
    borderStyle Устанавливает или возвращает стиль границы элемента (может иметь до четырех значений) 1
    borderTop Устанавливает или возвращает все свойства borderTop в одном объявлении 1
    borderTopColor Устанавливает или возвращает цвет верхней границы 1
    borderTopLeftRadius Устанавливает или возвращает форму границы верхнего левого угла 3
    borderTopRightRadius Устанавливает или возвращает форму границы верхнего правого угла 3
    borderTopStyle Устанавливает или возвращает стиль верхней границы 1
    borderTopWidth Устанавливает или возвращает ширину верхней границы 1
    borderWidth Устанавливает или возвращает ширину границы элемента (может иметь до четырех значений) 1
    bottom Устанавливает или возвращает нижнее положение позиционированного элемента 2
    boxDecorationBreak Устанавливает или возвращает поведение фона и границы элемента при разрыве страницы или для встроенных элементов при разрыве строки. 3
    boxShadow Прикрепляет к коробке одну или несколько отбрасываемых теней 3
    boxSizing Позволяет определить для определенных элементов способ размещения в определенной области 3
    captionSide Устанавливает или возвращает позицию заголовка таблицы 2
    clear Устанавливает или возвращает позицию элемента относительно плавающих объектов 1
    clip Устанавливает или возвращает часть видимого элемента 2
    color Устанавливает или возвращает цвет текста 1
    columnCount Устанавливает или возвращает количество столбцов, на которые элемент должен быть разделен 3
    columnFill Устанавливает или возвращает способ заполнения столбцов 3
    columnGap Устанавливает или возвращает промежуток между столбцами 3
    columnRule Стеновое свойство для установки или возврата всех свойств columnRule 3
    columnRuleColor Устанавливает или возвращает цвет линии-разделителя между столбцами 3
    columnRuleStyle Устанавливает или возвращает стиль линии-разделителя между столбцами 3
    columnRuleWidth Устанавливает или возвращает ширину линии-разделителя между столбцами 3
    columns Сокращенное свойство для установки или возврата columnWidth и columnCount 3
    columnSpan Устанавливает или возвращает, сколько столбцов должен занимать элемент 3
    columnWidth Устанавливает или возвращает ширину столбцов 3
    content Используется с: :before and :after псевдоэлементами, для вставки сгенерированного содержимого 2
    counterIncrement Увеличивает один или несколько счетчиков 2
    counterReset Создает или сбрасывает один или несколько счетчиков 2
    cursor Устанавливает или возвращает тип курсора для отображения указателя мыши 2
    direction Устанавливает или возвращает направление текста 2
    display Устанавливает или возвращает тип отображения элемента 1
    emptyCells Устанавливает или возвращает, показывать границу и фон пустых ячеек, или нет 2
    filter Устанавливает или возвращает фильтры изображений (визуальные эффекты, такие как размытие и насыщенность) 3
    flex Устанавливает или возвращает длину элемента относительно остальных 3
    flexBasis Устанавливает или возвращает начальную длину гибкого элемента 3
    flexDirection Устанавливает или возвращает направление гибких элементов 3
    flexFlow Сокращенное свойство свойств flexDirection и flexWrap 3
    flexGrow Устанавливает или возвращает, насколько элемент будет расти относительно остальных 3
    flexShrink Устанавливает или возвращает, как элемент будет уменьшаться относительно остальных 3
    flexWrap Устанавливает или возвращает, устанавливать ли свойство wrap для flex - элементов 3
    cssFloat Устанавливает или возвращает горизонтальное выравнивание элемента 1
    font Устанавливает или возвращает fontStyle, fontVariant, fontWeight, fontSize, lineHeight, and fontFamily в одном объявлении 1
    fontFamily Устанавливает или возвращаетсемейство шрифта 1
    fontSize Устанавливает или возвращает размер текста 1
    fontStyle Устанавливает или возвращает стиль шрифта 1
    fontVariant Устанавливает или возвращает модификацию шрифта 1
    fontWeight Устанавливает или возвращает толщину линии шрифта 1
    fontSizeAdjust Preserves the readability of text when font fallback occurs 3
    fontStretch Выбирает нормальное, сжатое или расширенное написание из семейства шрифтов 3
    hangingPunctuation Указывает, может ли знак пунктуации быть помещен вне блока строки 3
    height Устанавливает или возвращает высоту элемента 1
    hyphens Устанавливает, как разделять слова для улучшения макета абзацев 3
    icon Предоставляет автору возможность стилизовать элемент под иконку 3
    imageOrientation Определяет поворот вправо или в направлении по часовой стрелке, который браузер применяет к изображению 3
    justifyContent Устанавливает или возвращает выравнивание между элементами внутри гибкого контейнера, когда элементы не используют все доступное пространство 3
    left Устанавливает или возвращает левую позицию позиционируемого элемента 2
    letterSpacing Устанавливает или возвращает пробел между символами в тексте 1
    lineHeight Устанавливает или возвращает расстояние между строками в тексте 1
    listStyle Устанавливает или возвращает listStyleImage, listStylePosition и listStyleType в одном объявлении 1
    listStyleImage Устанавливает или возвращает изображение для маркера элемента списка 1
    listStylePosition Устанавливает или возвращает позицию для маркера элемента списка 1
    listStyleType Устанавливает или возвращает типмаркера списка 1
    margin Устанавливает или возвращает внешние отступы элемента (может иметь до четырех значений) 1
    marginBottom Устанавливает или возвращает нижний отступ элемента 1
    marginLeft Устанавливает или возвращает левый отступ элемента 1
    marginRight Устанавливает или возвращает правый отступ элемента 1
    marginTop Устанавливает или возвращает верхний отступ элемента 1
    maxHeight Устанавливает или возвращает максимальную высоту элемента 2
    maxWidth Устанавливает или возвращает максимальную ширину элемента 2
    minHeight Устанавливает или возвращает минимальную высоту элемента 2
    minWidth Устанавливает или возвращает минимальную ширину элемента 2
    navDown Устанавливает или возвращает, куда следует перемещаться при использовании клавиши со стрелкой вниз 3
    navIndex Устанавливает или возвращает порядок табуляции для элемента 3
    navLeft Устанавливает или возвращает, куда следует перемещаться при использовании клавиши навигации со стрелкой влево 3
    navRight Устанавливает или возвращает, куда следует перемещаться при использовании клавиши навигации со стрелкой вправо 3
    navUp Устанавливает или возвращает туда, куда следует перемещаться при использовании клавиши навигации со стрелкой 3
    opacity Устанавливает или возвращает уровень непрозрачности для элемента 3
    order Устанавливает или возвращает порядок гибкого элемента относительно остальных 3
    orphans Устанавливает или возвращает минимальное количество строк для элемента, который должен быть оставлен в нижней части страницы, когда разрыв страницы происходит внутри элемента 2
    outline Устанавливает или возвращает все свойства обводки (контура) в одном объявлении 2
    outlineColor Устанавливает или возвращает цвет контура вокруг элемента 2
    outlineOffset Смещает контур и вытягивает его за пределы края 3
    outlineStyle Устанавливает или возвращает стиль контура вокруг элемента 2
    outlineWidth Устанавливает или возвращает ширину контура вокруг элемента 2
    overflow Устанавливает или возвращает, что делать с содержимым, которое отображается вне поля элемента 2
    overflowX Указывает, что делать с левыми / правыми краями содержимого, если он переполняет область содержимого элемента 3
    overflowY Указывает, что делать с верхними / нижними краями содержимого, если оно переполняет область содержимого элемента 3
    padding Устанавливает или возвращает внутренние отступы элемента (может иметь до четырех значений) 1
    paddingBottom нижний отступ 1
    paddingLeft левый отступ 1
    paddingRight правый отступ 1
    paddingTop верхний отступ 1
    pageBreakAfter Устанавливает или возвращает поведение разрыва страницы после элемента 2
    pageBreakBefore Устанавливает или возвращает поведение разрыва страницы до элемента 2
    pageBreakInside Устанавливает или возвращает поведение разрыва страницы внутри элемента 2
    perspective Устанавливает или возвращает перспективу просмотра 3D-элементов 3
    perspectiveOrigin Устанавливает или возвращает нижнюю позицию трехмерных элементов 3
    position Устанавливает или возвращает тип метода позиционирования, используемый для элемента (статический, относительный, абсолютный или фиксированный) 2
    quotes Устанавливает или возвращает тип кавычек для встроенных котировок 2
    resize Устанавливает или возвращает, может ли пользователь изменять размер элемента 3
    right Устанавливает или возвращает правое положение позиционируемого элемента 2
    tableLayout Устанавливает или возвращает способ компоновки ячеек, строк и столбцов таблицы 2
    tabSize Устанавливает или возвращает длину (колич пробелов) символа табуляции 3
    textAlign Устанавливает или возвращает горизонтальное выравнивание текста 1
    textAlignLast Устанавливает или возвращает, как последняя строка блока или строка прямо перед выравниванием принудительной строки выравнивается, когда выравнивание текста - "justify" 3
    textDecoration Устанавливает или возвращает оформление текста 1
    textDecorationColor Устанавливает или возвращает цвет оформления текста 3
    textDecorationLine Устанавливает или возвращает тип строки в текстовом оформлении 3
    textDecorationStyle Устанавливает или возвращает стиль линии для оформления текста 3
    textIndent Устанавливает или возвращает отступ первой строки текста 1
    textJustify Устанавливает или возвращает метод выравнивания, используемый, когда text-align установлено "justify" 3
    textOverflow Устанавливает или возвращает то, что должно произойти, когда текст переполняет содержащий элемент 3
    textShadow Устанавливает или возвращает теневой эффект текста 3
    textTransform Устанавливает или возвращает капитализацию текста 1
    top Устанавливает или возвращает верхнее положение позиционированного элемента 2
    transform Применяет преобразование 2D или 3D к элементу 3
    transformOrigin Устанавливает или возвращает позицию преобразованных элементов 3
    transformStyle Устанавливает или возвращает способ отображения вложенных элементов в 3D-пространстве 3
    transition Стеновое свойство для установки или возврата четырех свойств перехода (transition) 3
    transitionProperty Устанавливает или возвращает свойство CSS, для которого применяется эффект перехода 3
    transitionDuration Устанавливает или возвращает количество секунд или миллисекунд, которое требуется для перехода 3
    transitionTimingFunction Устанавливает или возвращает кривую скорости эффекта перехода 3
    transitionDelay Устанавливает или возвращает, когда эффект перехода начнется 3
    unicodeBidi Устанавливает или возвращает, должен ли текст переопределяться для поддержки нескольких языков в одном документе 2
    verticalAlign Устанавливает или возвращает вертикальное выравнивание содержимого в элементе 1
    visibility Устанавливает или возвращает, должен ли элемент быть видимым 2
    whiteSpace Устанавливает или возвращает способ обработки вкладок, разрывов строк и пробелов в тексте 1
    width Устанавливает или возвращает ширину элемента 1
    wordBreak Устанавливает или возвращает правила нарушения строки для не-CJK-скриптов 3
    wordSpacing Устанавливает или возвращает расстояние между словами в тексте 1
    wordWrap Позволяет разбивать длинные, неразделяемые слова и перенести на следующую строку 3
    widows Устанавливает или возвращает минимальное количество строк для элемента, который должен быть видимым в верхней части страницы 2
    zIndex Устанавливает или возвращает порядок по вертикали позиционированного элемента 2

     

    Объект styleSheet (CSSStyleSheet)

    Объект «StyleSheet» позволяет просматривать листы стилей документа, добавлять или удалять правила в одном из них.

    Получить перечень листов стилей для документа

    var styleSheetList = document.styleSheets;

    Добавить элемент STYLE - создать из него новый объект CSSStyleSheet

    document.createElement('style'); css1.type = 'text/css'; css1.innerText = 'body { background: #FEE; } '; document.head.appendChild(css1);

    Добавить элемент LINK - добавить из файла стили и на этой базесоздать новый объект CSSStyleSheet

    var s = document.createElement('link'); s.type = 'text/css'; s.rel = 'stylesheet'; s.href = 'file.css'; document.head.appendChild(s); var myCSSStyleSheetObj = Object.create(document.styleSheets[0])

     

    Свойства

    Свойство Описание 
    cssRules[] Возвращает массив, содержащий все правила CSS таблицы
    cssText Свойство Read / Write, содержащее все содержимое таблицы стилей.
    disabled Свойство Read / write, которое указывает, отключена ли таблица стилей или нет. Значение по умолчанию - false.
    href Свойство «Read/write», которое содержит URL-адрес листа стилей
    media Указывает устройство для таблицы стилей. Значение по умолчанию - «экран».
    ownerNode Ссылки на узел дерева документов, который содержит текущую таблицу стилей. Для обычных HTML-страниц ownerNode обычно возвращает элемент LINK или STYLE в таблице стилей.
    ownerRule Для таблиц стилей, которые определяются с помощью правила @import, возвращается объект CSSImportRule.
    owningElement Ссылки на узел дерева документов, который содержит текущую таблицу стилей. IE только свойство. В NS6 + / Firefox эквивалент «ownerNode».
    parentStyleSheet Для таблиц стилей, которые включены на странице с помощью правила @page, @import родительский стиль StyleSheet ссылается на таблицу стилей верхнего уровня. Для стандартных таблиц стилей LINK или STYLE это свойство возвращает null.
    rules[] Возвращает массив, содержащий все правила CSS таблицы стилей. IE только. В NS6 + / Firefox вместо этого используется cssRules []. С помощью правил [] можно добавлять, удалять или изменять существующие правила в таблице стилей.
    title Возвращает значение атрибута title таблицы стилей, если оно определено.
    type Возвращает значение атрибута type таблицы стилей.

    Методы

    Метод Описание
    addRule(selector, declaration, [index]) Метод для IE? который добавляет новое правило в styleSheet/ Параметр selector - селектор правила ("p", "div b"), declaration - набор свойств правила ("background-color: yellow; color: brown"). Необязательный параметр - "index" позволяет указать позицию нового правила в таблице стилей.
    removeRule([index]) Метод, который удаляет первое правило таблицы стилей. Необязательный индекс (целое число) позволяет удалить определенное правило на основе его позиции в коллекции правил [].
    deleteRule(index) Удаляет правило из таблицы стилей, основываясь на его позиции в коллекции cssRules []. Параметр «index» (integer) используется, чтобы указать эту позицию.
    insertRule(rule, index) Вставляет новое правило в таблицу стилей, где параметр «rule» - это строка, содержащая все добавляемое правило (например: #myid {color: red; border: 1px solid black}) и «index» - целое число, определяющее положение внутри cssRules [].

    Объект CSS Rules

    Свойство Описание
    cssText Возвращает содержимое правила css целиком, от селектора до соответствующих объявлений CSS. Полезное свойство для простого поиска внутри правила, позволяющее увидеть как селектор, так и все сразу правила.
    length Возвращает длину объекта CSS Rule (cssRules.length или rules.length), другими словами, количество правил в таблице стилей.
    parentStyleSheet Возвращает объект styleSheet, который содержит текущее правило.
    selectorText Возвращает часть правила - селектор.
    style Даёт доступ для чтения-записи к отдельным атрибутам, заданным в правиле. Аналогично inline объекту "style" элемента DOM.

     

     

  • Обект - Window*

    Property Description
    closed Returns a Boolean value indicating whether a window has been closed or not
    defaultStatus Sets or returns the default text in the statusbar of a window
    document Returns the Document object for the window (See Document object)
    frameElement Returns the <iframe> element in which the current window is inserted
    frames Returns all <iframe> elements in the current window
    history Returns the History object for the window (See History object)
    innerHeight Returns the inner height of a window's content area
    innerWidth Returns the inner width of a window's content area
    length Returns the number of <iframe> elements in the current window
    localStorage Returns a reference to the local storage object used to store data. Stores data with no expiration date
    location Returns the Location object for the window (See Location object)
    name Sets or returns the name of a window
    navigator Returns the Navigator object for the window (See Navigator object)
    opener Returns a reference to the window that created the window
    outerHeight Returns the outer height of a window, including toolbars/scrollbars
    outerWidth Returns the outer width of a window, including toolbars/scrollbars
    pageXOffset Returns the pixels the current document has been scrolled (horizontally) from the upper left corner of the window
    pageYOffset Returns the pixels the current document has been scrolled (vertically) from the upper left corner of the window
    parent Returns the parent window of the current window
    screen Returns the Screen object for the window (See Screen object)
    screenLeft Returns the horizontal coordinate of the window relative to the screen
    screenTop Returns the vertical coordinate of the window relative to the screen
    screenX Returns the horizontal coordinate of the window relative to the screen
    screenY Returns the vertical coordinate of the window relative to the screen
    sessionStorage Returns a reference to the local storage object used to store data. Stores data for one session (lost when the browser tab is closed)
    scrollX An alias of pageXOffset
    scrollY An alias of pageYOffset
    self Returns the current window
    status Sets or returns the text in the statusbar of a window
    top Returns the topmost browser window

    Window Object Methods

    Method Description
    alert() Displays an alert box with a message and an OK button
    atob() Decodes a base-64 encoded string
    blur() Removes focus from the current window
    btoa() Encodes a string in base-64
    clearInterval() Clears a timer set with setInterval()
    clearTimeout() Clears a timer set with setTimeout()
    close() Closes the current window
    confirm() Displays a dialog box with a message and an OK and a Cancel button
    focus() Sets focus to the current window
    getComputedStyle() Gets the current computed CSS styles applied to an element
    getSelection() Returns a Selection object representing the range of text selected by the user
    matchMedia() Returns a MediaQueryList object representing the specified CSS media query string
    moveBy() Moves a window relative to its current position
    moveTo() Moves a window to the specified position
    open() Opens a new browser window
    print() Prints the content of the current window
    prompt() Displays a dialog box that prompts the visitor for input
    resizeBy() Resizes the window by the specified pixels
    resizeTo() Resizes the window to the specified width and height
    scroll() Deprecated. This method has been replaced by the scrollTo() method.
    scrollBy() Scrolls the document by the specified number of pixels
    scrollTo() Scrolls the document to the specified coordinates
    setInterval() Calls a function or evaluates an expression at specified intervals (in milliseconds)
    setTimeout() Calls a function or evaluates an expression after a specified number of milliseconds
    stop() Stops the window from loading

     

    Записаться на курс

     

    * По материалам сайта www.w3schools.com

     

     

     

  • 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()



  • HTML5 canvas

    Элемент HTML <canvas> используется для рисования графики на веб-странице.

    Элемент HTML <canvas> - холст для рисования графики «на лету» с помощью сценариев (обычно JavaScript).

    Элемент <canvas> - это только контейнер для графики. Для рисования внутри него нужно использовать скрипт. Текст внутри элемента canvas игнорируется, если браузер поддерживает элемент <canvas> HTML5. Если он не поддерживается, то текст будет отображаться браузером .

    Canvas имеет несколько способов рисования путей, прямоугольников, кругов, текста и добавления изображений.

    Для элемента <canvas> можно задать размеры, можно задать атрибут style. По-умолчанию его размеры: 300 на 150 пикселей (если они не заданы). 

    Создать canvas :

    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">Your browser does not support HTML5 </canvas>

    При рисовании нужно иметь в виду, что размеры рисуемых элементов - не абсолютные. Они - логические, зависят от размера canvas.

    Одна точка рисуемого элемента соответствует отдному пикселю в том случае, если canvas имеет размеры по-умолчанию (300 на 150 пикселей). Если, например, задать для него размеры 600 на 150, то все горизонтальные размеры рисуемого объекта бутут увеличены в 2 раза.

    Например, при рисовании на наком холсте прямоугольника размером 100 на 100, его изображение будет иметь размер 200 на 100.

    Рисование простых элементов

    Холст изначально пуст. Чтобы отобразить что-то, скрипт (JavaScript) сначала должен получить доступ к нему для рисования. Для этого элемент <canvas> имеет метод getContext (). Метод getContext () принимает один параметр, тип контекста. Для 2D-графики, например, указывается «2d», чтобы получить CanvasRenderingContext2D.

    Инициализация

    Получить доступ к canvas для рисования (контекст)

    var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); 

    По результату выполнения этих команд в переменной ctx находится ссылка на контекст для рисования, расположенный внутри canvas - элемента . Далее можно использовать все методы этого объекта.

    Задать цвет заливки для рисуемого объекта

    ctx.fillStyle = "#FF0000";

    ctx.fillStyle='rgba(0,255,0,0.5)';

    Задать цвет заливки для прямоугольника

    ctx.fillRect(0,0,150,75);

    Задать свойства линии

    ctx.strokeStyle = "#0000ff";

    ctx.lineWidth = 5;

    ctx.strokeRect(10,10, 100,100);

    Нарисовать линию

    Чтобы нарисовать прямую линию на холсте, используются следующие методы:

    moveTo (x, y) - определяет начальную точку линии

    lineTo (x, y) - определяет конечную точку линии

    var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(100,0); ctx.lineTo(200,100); ctx.stroke();  

    Нарисовать дугу

    При рисовании дуги используются методы:

    beginPath() - начинает путь

    arc(x,y,r,startangle,endangle) - рисует дугу (координаты центра, радиус, угол начала дуги, угол конца дуги)

    var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(200,200,50,0,2*Math.PI); ctx.stroke(); 

    Прямоугольник

    fillRect(x, y, width, height); - нарисовать залитый прямоугольник

    strokeRect(x, y, width,height) - рисует контур прямоугольника, не заполняя его. Прямоугольник задаётся координатами левого верхнего угла (x, y), шириной и высотой.

    clearRect(x, y, width, height) - стирает прямоугольник.

    var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(210,110,150,75); 

    Стереть всё, очистить canvas 

    var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.clearRect(0, 0, c.width, c.height);


    Нарисовать текст

    var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World",10,50);
    ctx.strokeText("Hello World",10,50);

    Линейный градиент

    var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10,10,150,80); 

    Радиальный градиент

    var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10,10,150,80); 


    Рисование кривой

    Для рисования различных линий используются методы полученного контекста:

    • beginPath() - начало линии
    • closePath() - конец линии
    • moveTo (x, y) - при рисовании кривой используется виртуальное «перо» или «указатель». Этот виртуальный указатель всегда находится в некоторой точке. Перемещение виртуального указателя выполняется с помощью этой функции
    • lineTo() - рисует линию из места расположения виртуального указатнля в нужную точку, lineTo () также перемещает виртуальный указатель на конечную точку линии
    • stroke() , fill() - описанные выше функции только создают линию, реально не прорисовывая её на экране. Реальное рисование созданной линии производят функции stroke() , fill()
    • arcTo(x1,y1,x2,y2,r); - дуга между двумя касательными (в точке 1 и точке 2) с радиусом r

    Пример:

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath(); // Начали рисовать кривую
    ctx.moveTo(20,20); // Переместили перо в начало линии
    ctx.lineTo(100,20); // Отрезок горизонтальной линии
    ctx.arcTo(150,20,150,70,50); // Дуга
    ctx.lineTo(150,120); // Вертикальная линия
    ctx.stroke(); // Нарисовать созданную кривую


    Кривые Безье

    context.quadraticCurveTo(cpx,cpy,x,y) - Метод quadraticCurveTo () добавляет точку к текущему пути, используя указанные контрольные точки, которые представляют квадратичную кривую Безье. Квадратичная кривая Безье требует двух точек. Первая точка - контрольная точка, которая используется в квадратичном вычислении Безье, а вторая точка - конечная точка кривой. Отправной точкой для кривой является последняя точка в текущем пути. Если путь не существует, используются методы beginPath () и moveTo () для определения начальной точки.

    cpx Х-координата контрольной точки Безье  

    cpy Y-координата контрольной точки Безье 

    x Х-координата конечной точки 

    y У-координата конечной точки

    Пример:

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(20,20);
    ctx.quadraticCurveTo(20,100,200,20);
    ctx.stroke();


    context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) - добавляет точку к текущему пути, используя указанные контрольные точки, которые представляют собой кубическую кривую Безье. Кубическая кривая Безье требует трех точек. Первые две точки - это контрольные точки, которые используются в кубическом вычислении Безье, а последняя точка - конечная точка кривой. Отправной точкой для кривой является последняя точка в текущем пути. Если путь не существует, используются методы beginPath () и moveTo () для определения начальной точки.

    cp1x Х-координата первой контрольной точки Безье  

    cp1y У-координата первой контрольной точки Безье 

    cp2x Х-координата второй контрольной точки Безье 

    cp2y Y-координата второй контрольной точки Безье 

    x Х-координата конечной точки 

    y У-координата конечной точки


    Свойства и методы контекста

    Цвета, стили и тени

    Свойство Описание
    fillStyle Устанавливает или возвращает цвет, градиент или картинку, используемые для заполнения рисунка
    strokeStyle Устанавливает или возвращает цвет, градиент или шаблон, используемый для линии
    shadowColor Устанавливает или возвращает цвет, используемый для теней
    shadowBlur Устанавливает или возвращает уровень размытия для теней
    shadowOffsetX Устанавливает или возвращает горизонтальное расстояние тени от формы
    shadowOffsetY Устанавливает или возвращает вертикальное расстояние тени от формы


    Описание
    createLinearGradient() Создает линейный градиент 
    createPattern() Повторяет указанный элемент в указанном направлении
    createRadialGradient() Создает радиальный / круговой градиент 
    addColorStop() Определяет цвета и позиции остановки в градиентном объекте

    Стили линии


    Описание
    lineCap Стиль окончания линии
    lineJoin Стиль пересечения линий
    lineWidth Толшина линии
    miterLimit Устанавливает или возвращает максимальную длину

    Прямоугольники


    Описание
    rect() Создаёт прямоугольник
    fillRect() Рисует запоненный прямоугольник
    strokeRect() Рисует контурный прямоугольник
    clearRect() Удаляет прямоугольную область

    Линии


    Описание
    fill() Fills the current drawing (path)
    stroke() Actually draws the path you have defined
    beginPath() Begins a path, or resets the current path
    moveTo() Moves the path to the specified point in the canvas, without creating a line
    closePath() Creates a path from the current point back to the starting point
    lineTo() Adds a new point and creates a line to that point from the last specified point in the canvas
    clip() Clips a region of any shape and size from the original canvas
    quadraticCurveTo() Creates a quadratic Bézier curve
    bezierCurveTo() Creates a cubic Bézier curve
    arc() Creates an arc/curve (used to create circles, or parts of circles)
    arcTo() Creates an arc/curve between two tangents
    isPointInPath() Returns true if the specified point is in the current path, otherwise false

    Преобразования


    Описание
    scale() Scales the current drawing bigger or smaller
    rotate() Rotates the current drawing
    translate() Remaps the (0,0) position on the canvas
    transform() Replaces the current transformation matrix for the drawing
    setTransform() Resets the current transform to the identity matrix. Then runs transform()

    Текст


    Описание
    font Sets or returns the current font properties for text content
    textAlign Sets or returns the current alignment for text content
    textBaseline Sets or returns the current text baseline used when drawing text


    Описание
    fillText() Draws "filled" text on the canvas
    strokeText() Draws text on the canvas (no fill)
    measureText() Returns an object that contains the width of the specified text

    Image Drawing


    Описание
    drawImage() Draws an image, canvas, or video onto the canvas

    Pixel Manipulation


    Описание
    width Returns the width of an ImageData object
    height Returns the height of an ImageData object
    data Returns an object that contains image data of a specified ImageData object


    Описание
    createImageData() Creates a new, blank ImageData object
    getImageData() Returns an ImageData object that copies the pixel data for the specified rectangle on a canvas
    putImageData() Puts the image data (from a specified ImageData object) back onto the canvas

    Compositing


    Описание
    globalAlpha Sets or returns the current alpha or transparency value of the drawing
    globalCompositeOperation Sets or returns how a new image are drawn onto an existing image

    Other


    Описание
    save() Saves the state of the current context
    restore() Returns previously saved path state and attributes
    createEvent()
    getContext()
    toDataURL()



    Примеры

    http://corehtml5canvas.com/code-live/

    http://curran.github.io/HTML5Examples/

    https://www.w3resource.com/html5-canvas/

    https://www.sanwebe.com/2015/01/html5-canvas-examples

    http://cssdeck.com/labs/image-nodes





  • Программирование - JavaScript

  • JavaScript - массивы (Array)*

    Объект Array


    Array Properties

    Property Description
    constructor Returns the function that created the Array object's prototype
    length Sets or returns the number of elements in an array
    prototype Allows you to add properties and methods to an Array object

    Array Methods

    Method Description
    concat() Joins two or more arrays, and returns a copy of the joined arrays
    copyWithin() Copies array elements within the array, to and from specified positions
    every() Checks if every element in an array pass a test
    fill() Fill the elements in an array with a static value
    filter() Creates a new array with every element in an array that pass a test
    find() Returns the value of the first element in an array that pass a test
    findIndex() Returns the index of the first element in an array that pass a test
    forEach() Calls a function for each array element
    indexOf() Search the array for an element and returns its position
    isArray() Checks whether an object is an array
    join() Joins all elements of an array into a string
    lastIndexOf() Search the array for an element, starting at the end, and returns its position
    map() Creates a new array with the result of calling a function for each array element
    pop() Removes the last element of an array, and returns that element
    push() Adds new elements to the end of an array, and returns the new length
    reduce() Reduce the values of an array to a single value (going left-to-right)
    reduceRight() Reduce the values of an array to a single value (going right-to-left)
    reverse() Reverses the order of the elements in an array
    shift() Removes the first element of an array, and returns that element
    slice() Selects a part of an array, and returns the new array
    some() Checks if any of the elements in an array pass a test
    sort() Sorts the elements of an array
    splice() Adds/Removes elements from an array
    toString() Converts an array to a string, and returns the result
    unshift() Adds new elements to the beginning of an array, and returns the new length
    valueOf() Returns the primitive value of an array

     

    Записаться на курс

     

    * По материалам сайта www.w3schools.com

     

     

     

     

  • JavaScript - объект Date

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

    Синтаксис

    dateObj = new Date() dateObj = new Date(dateVal) dateObj = new Date(year, month, date[, hours[, minutes[, seconds[,ms]]]])

    Параметры

    dateObj

    Обязательное. Имя переменной, которой присваивается объект Date.

    dateVal

    Обязательное. В случае числового значения параметр dateVal представляет количество миллисекунд в формате UTC между указанной датой и полуночью 1 января 1970 г. В случае строкового значения параметр dateVal анализируется в соответствии с правилами форматирования. Аргумент dateVal также может быть значением VT_DATE, возвращаемым некоторыми объектами ActiveX.

    year

    Обязательное. Полное представление года, например 1976 (а не 76).

    month

    Обязательное. Месяц, представляемый в виде числа от 0 до 11 (с января по декабрь).

    date

    Обязательное. Дата в виде целого числа в диапазоне от 1 до 31.

    hours

    Необязательный параметр. Необходимо задавать, если задается значение minutes. Целое число от 0 до 23 (от полуночи до 23:00), представляющее час.

    minutes

    Необязательный параметр. Необходимо задавать, если задается значение seconds. Целое число от 0 до 59, представляющее минуты.

    seconds

    Необязательный параметр. Необходимо задавать, если задается значение milliseconds. Целое число от 0 до 59, представляющее секунды.

    ms

    Необязательный параметр. Целое число от 0 до 999, представляющее миллисекунды.

    Объект Date содержит число, представляющее определенный момент времени с точностью до миллисекунды. Если значение аргумента превышает верхнюю границу его диапазона или является отрицательным числом, остальные хранящиеся значения изменяются соответственно. Например, если задать 150 секунд, JavaScript переопределит это число как две минуты и 30 секунд.

    Если число равно NaN, объект не представляет конкретный момент времени. Если не передавать параметры объекту Date, он инициализируется текущим временем (UTC). Перед использованием этого объекта ему необходимо присвоить значение.

    Диапазон дат, которые могут быть представлены объектом Date, составляет около 285 616 в каждую сторону от 1 января 1970 г.

    Пример

    В следующем примере показано использование объекта Date.

    var dateString = "Today's date is: "; var newDate = new Date(); // Get the month, day, and year. dateString += (newDate.getMonth() + 1) + "/"; dateString += newDate.getDate() + "/"; dateString += newDate.getFullYear(); document.write(dateString); // Output: Today's date is: <date>


    Свойства

    В следующей таблице перечислены свойства Date Object.

    Свойство

    Описание

    Свойство сonstructor Указывает функцию, которая создает объект.
    Свойство prototype Возвращает ссылку на прототип класса объектов.

    Функции

    В следующей таблице перечислены функции Date Object.

    Функции

    Описание

    Date.now Возвращает число миллисекунд между 1 января 1970 г. и текущими датой и временем.
    Date.parse Выполняет синтаксический анализ строки, содержащей дату, и возвращает количество миллисекунд, истекших с полуночи 1 января 1970 г.
    Date.UTC Возвращает количество миллисекунд, истекших с полуночи 1 января 1970 года до указанной даты, используя время в формате UTC (или время GMT).

    Методы

    В следующей таблице перечислены методы Date Object.

    Метод Описание
    getDate Возвращает значение дня месяца, используя местное время.
    getDay Возвращает значение дня недели, используя местное время.
    getFullYear Возвращает значение года, используя местное время.
    getHours Возвращает значение часов, используя местное время.
    getMilliseconds Возвращает значение миллисекунд, используя местное время.
    getMinutes Возвращает значение минут, используя местное время.
    getMonth Возвращает значение месяца, используя местное время.
    getSeconds Возвращает значение секунд, используя местное время.
    getTime Возвращает значение времени в объекте Date в виде количества миллисекунд, истекших с полуночи 1 января 1970 г.
    getTimezoneOffset Возвращает разницу в минутах между временем на локальном компьютере и временем в формате UTC.
    getUTCDate Возвращает значение дня месяца, используя время в формате UTC.
    getUTCDay Возвращает значение дня недели, используя время в формате UTC.
    getUTCFullYear Возвращает значение года, используя время в формате UTC.
    getUTCHours Возвращает значение часов, используя время в формате UTC.
    getUTCMilliseconds Возвращает значение миллисекунд, используя время в формате UTC.
    getUTCMinutes Возвращает значение минут, используя время в формате UTC.
    getUTCMonth Возвращает значение месяца, используя время в формате UTC.
    getUTCSeconds Возвращает значение секунд, используя время в формате UTC.
    getVarDate Возвращает значение VT_DATE в объекте Date.
    getYear Возвращает значение года.
    hasOwnProperty Возвращает логическое значение, указывающее, содержит ли объект свойство с указанным именем.
    isPrototypeOf Возвращает логическое значение, указывающее, существует ли объект в другом объекте цепочки прототипов.
    propertyIsEnumerable Возвращает логическое значение, определяющее, является ли указанное свойство частью объекта, и является ли оно перечислимым.
    setDate Задает числовой день месяца, используя местное время.
    setFullYear Задает значение года, используя местное время.
    setHours Задает значение часов, используя местное время.
    setMilliseconds Задает значение миллисекунд, используя местное время.
    setMinutes Задает значение минут, используя местное время.
    setMonth Задает значение месяца, используя местное время.
    setSeconds Задает значение секунд, используя местное время.
    setTime Устанавливает значение даты и времени в объекте Date.
    setUTCDate Задает числовой день месяца, используя время в формате UTC.
    setUTCFullYear Задает значение года, используя время в формате UTC.
    setUTCHours Задает значение часов, используя время в формате UTC.
    setUTCMilliseconds Задает значение миллисекунд, используя время в формате UTC.
    setUTCMinutes Задает значение минут, используя время в формате UTC.
    setUTCMonth Задает значение месяца, используя время в формате UTC.
    setUTCSeconds Задает значение секунд, используя время в формате UTC.
    setYear Задает значение года, используя местное время.
    toDateString Возвращает дату в виде строкового значения.
    toGMTString Возвращает дату, преобразованную в строку с помощью времени GMT.
    toISOString Возвращает дату в виде строкового значения в формате ISO.
    toJSON Используется для преобразования данных типа объекта перед сериализацией JSON.
    toLocaleDateString Возвращает дату в виде строки, соответствующей текущему языковому стандарту хост-среды.
    toLocaleString Возвращает объект, преобразованный в строку, используя текущий языковой стандарт.
    toLocaleTimeString Возвращает время в виде строки, соответствующей текущему языковому стандарту хост-среды.
    toString Возвращает строковое представление объекта.
    toTimeString Возвращает время в виде строкового значения.
    toUTCString Возвращает дату, преобразованную в строку с использованием времени в формате UTC.
    valueOf Возвращает примитивное значение указанного объекта.

    Формат даты

    YYYY-MM-DDTHH:mm:ss.sssZ

    В следующей таблице описаны компоненты этого формата.

    Символ Описание Значения
    -, :, ., T Фактические символы строки.   T указывает точку отсчета времени.  
    YYYY Год.  Вместо 4-значного представления года может использоваться расширенное представление.  
    MM Месяц. От 01 до 12
    DD День месяца. От 01 до 31
    HH Часы. От 00 до 24
    mm Минуты От 00 до 59
    ss Секунды.  При задании времени указывать секунды и миллисекунды необязательно.   От 00 до 59
    sss Milliseconds От 00 до 999
    Z Значение в этой позиции может быть одним из указанных ниже.  Если значение не задано, используется время в формате UTC.  

    Z означает время в формате UTC.

    +hh:mm означает, что введенное время представляет собой смещение относительно времени в формате UTC в сторону увеличения.

    -hh:mm означает, что введенное время представляет абсолютное значение указанного смещения относительно времени в формате UTC в сторону уменьшения.

    Строка может содержать только дату, как в следующих форматах: 

    YYYY, YYYY-MM, YYYY-MM-DD.

    В формате ISO имена часовых поясов не поддерживаются.  Для задания смещения относительно времени в формате UTC можно использовать позицию Z.  Если значение в позиции Z не указано, используется время в формате UTC.  

    Полночь можно указать значением 00:00:00 или значением 24:00:00 предыдущего дня.  Следующие две строки определяют одно и то же время: 2010-05-25T00:00 и 2010-05-24T24:00.  

    Чтобы вернуть дату в формате ISO, можно использовать Метод toISOString (Date) (JavaScript).

    Расширенные года

    Расширенный формат года содержит 6 цифр вместо 4 с предшествующим знаком плюс или минус.  Пример расширенного представления года — +002010. Это представление эквивалентно представлению 2010.  Такой расширенный формат можно использовать для представления года до 0-го и после 9999-го.  

    При использовании 6-значного формата должен присутствовать знак плюс или минус.  При использовании 4-значного формата знака быть не должно.  Следовательно, значения 0000 и +000000 допустимы, а значения 000000 и -0001 приводят к ошибке.  Расширенное представление года 0 считается положительным и поэтому в качестве префикса для него используется знак плюс.  

    Для представления года до 0-го и после 9999-го Метод toISOString (Date) (JavaScript) всегда использует расширенный формат.

    Примечание
    Поддерживается в следующих режимах документов: стандартный режим Internet Explorer 9, стандартный режим Internet Explorer 10 и стандартный режим Internet Explorer 11. 

    Не поддерживается в следующих режимах документов: случайный режим, стандартный режим Internet Explorer 6, стандартный режим Internet Explorer 7, стандартный режим Internet Explorer 8.

    Другие форматы даты

    Если строка даты имеет формат, отличный от формата ISO, в JavaScript используются следующие правила ее анализа.

    Краткие форматы даты

    Формат должен быть следующий: месяц/день/год, например 06/08/2010.

    В качестве разделителя может использоваться символ «/» или «-».

    Длинные форматы даты

    Год, месяц и день могут размещаться в любом порядке. "  Например, допустимы значения June 8 2010 и 2010 June 8.  

    Год может содержать две или четыре цифры.  Если год содержит только две цифры, он должен быть не ранее 70-го.  

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

    Если день недели не совместим с остальной частью указанной даты, он игнорируется.  Например, Tuesday November 9 1996 преобразуется в Friday November 9 1996, поскольку правильный день недели для этой даты — пятница.  

    Форматы времени

    Часы, минуты и секунды разделяются символом двоеточия.  Некоторые компоненты можно опускать.  Допустимы следующие значения: «10:», «10:11» и «10:11:12».  

    Если указано PM и задан час не менее 13, возвращается значение NaN.  Например, при задании «23:15 PM» возвращается значение NaN.  

    Общие правила

    Строка, содержащая недопустимое значение даты, возвращает значение NaN.  Например, строка, содержащая два года или два месяца, возвращает значение NaN.  

    В JavaScript поддерживаются все стандартные часовые пояса, время в формате UTC и время по Гринвичу (GMT).  (В формате ISO часовые пояса не поддерживаются.)  

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

    Запятые и пробелы считаются разделителями.  Разрешается использовать несколько разделителей.  

    Пример

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

    document.writeln((new Date("2010")).toUTCString()); document.writeln((new Date("2010-06")).toUTCString()); document.writeln((new Date("2010-06-09")).toUTCString()); // Specifies Z, which indicates UTC time. document.writeln((new Date("2010-06-09T15:20:00Z")).toUTCString()); // Specifies -07:00 offset, which is equivalent to Pacific Daylight time. document.writeln((new Date("2010-06-09T15:20:00-07:00")).toGMTString()); // Specifies a non-ISO Long date. document.writeln((new Date("June 9, 2010")).toUTCString()); // Specifies a non-ISO Long date. document.writeln((new Date("2010 June 9")).toUTCString()); // Specifies a non-ISO Short date and time. document.writeln((new Date("6/9/2010 3:20 pm")).toUTCString()); // Output: // Fri, 1 Jan 2010 00:00:00 UTC // Tue, 1 Jun 2010 00:00:00 UTC // Wed, 9 Jun 2010 00:00:00 UTC // Wed, 9 Jun 2010 15:20:00 UTC // Wed, 9 Jun 2010 22:20:00 UTC // Wed, 9 Jun 2010 07:00:00 UTC // Wed, 9 Jun 2010 07:00:00 UTC // Wed, 9 Jun 2010 22:20:00 UTC

    Если указывается местное время, результат зависит от часового пояса.




  • 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>

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



  • 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

     

     

     

     

     

  • JavaScript - операторы языка

     

    Оператор Описание
    break Выход из оператора switch или из цикла (loop)
    var text = ""
    var i;
    for (i = 0; i < 5; i++) {
        if (i === 3) {
            break;
        }
        text += "The number is " + i + "<br>";
    }
    continue Пропускает текущий проход цикла (если выполняется указанное условие) и переходит к следующему проходу цикла
    var text = ""
    var i;
    for (i = 0; i < 5; i++) {
        if (i === 3) {
            continue;
        }
        text += "The number is " + i + "<br>";
    }
    debugger Останавливает выполнение JavaScript и вызывает (если доступно) функцию отладки
    var x = 15 * 5;
    debugger;
    document.getElementbyId("demo").innerHTML = x
    do... while Выполняет блок операторов и повторяет блок, пока условие истинно
    var text = "";
    var i = 0;
    do {
        text += "The number is " + i;
        i++;
    }
    while (i < 5);
    for Задаёт блок операторов, которые должны выполняться, если условие истинно
    var text = "";
    var i;
    for (i = 0; i < 5; i++) {
        text += "The number is " + i + "<br>";
    }
    for... in Отмечает блок операторов, которые должны выполняться для каждого элемента объекта (или массива)
    var person = {fname:"John", lname:"Doe", age:25}; 

    var text = "";
    var x;
    for (x in person) {
        text += person[x] + " ";
    }
    function Объявляет функцию
    function myFunction() { // Declare a function
        document.getElementById("demo").innerHTML = "Hello World!";
    }
     
    myFunction(); // Call the function
    if... else... else if Отмечает блок операторов, которые должны выполняться в зависимости от условия
    var time = new Date().getHours(); 
    if (time < 20) {
        document.getElementById("demo").innerHTML = "Good day";
    }
    return Останавливает выполнение функции и возвращает значение из этой функции
    function myFunction() {
        return Math.PI;
    }
    switch Помечает блок операторов, которые должны выполняться в зависимости от разных случаев
    var text;
    var fruits = document.getElementById("myInput").value;

    switch(fruits) {
        case "Banana":
            text = "Banana is good!";
            break;
        case "Orange":
            text = "I am not a fan of orange.";
            break;
        case "Apple":
            text = "How you like them apples?";
            break;
        default:
            text = "I have never heard of that fruit...";
    }
    throw Выбрасывает (генерирует) ошибку
    function myFunction() {
        var message, x;
        message = document.getElementById("message");
        message.innerHTML = "";
        x = document.getElementById("demo").value;
        try { 
            if(x == ""throw "is Empty";
            if(isNaN(x)) throw "not a number";
            if(x > 10throw "too high";
            if(x < 5throw "too low";
        }
        catch(err) {
            message.innerHTML = "Input " + err;
        }
    }
    try... catch... finally Отмечает блок операторов, которые должны выполняться при возникновении ошибки в блоке try, и реализует обработку ошибок
    try {
        adddlert("Welcome guest!");
    }
    catch(err) {
        document.getElementById("demo").innerHTML = err.message;
    }

    var Объявляет переменную
    while Помечает блок операторов, которые должны выполняться, пока условие истинно
    var text = "";
    var i = 0;
    while (i < 5) {
        text += "<br>The number is " + i;
        i++;
    }

     

     

     

     

  • JavaScript - работа со строками*


    String Properties

    Property Description
    constructor Returns the string's constructor function
    length Returns the length of a string
    prototype Allows you to add properties and methods to an object

    String Methods

    Method Description
    charAt() Returns the character at the specified index (position)
    charCodeAt() Returns the Unicode of the character at the specified index
    concat() Joins two or more strings, and returns a new joined strings
    endsWith() Checks whether a string ends with specified string/characters
    fromCharCode() Converts Unicode values to characters
    includes() Checks whether a string contains the specified string/characters
    indexOf() Returns the position of the first found occurrence of a specified value in a string
    lastIndexOf() Returns the position of the last found occurrence of a specified value in a string
    localeCompare() Compares two strings in the current locale
    match() Searches a string for a match against a regular expression, and returns the matches
    repeat() Returns a new string with a specified number of copies of an existing string
    replace() Searches a string for a specified value, or a regular expression, and returns a new string where the specified values are replaced
    search() Searches a string for a specified value, or regular expression, and returns the position of the match
    slice() Extracts a part of a string and returns a new string
    split() Splits a string into an array of substrings
    startsWith() Checks whether a string begins with specified characters
    substr() Extracts the characters from a string, beginning at a specified start position, and through the specified number of character
    substring() Extracts the characters from a string, between two specified indices
    toLocaleLowerCase() Converts a string to lowercase letters, according to the host's locale
    toLocaleUpperCase() Converts a string to uppercase letters, according to the host's locale
    toLowerCase() Converts a string to lowercase letters
    toString() Returns the value of a String object
    toUpperCase() Converts a string to uppercase letters
    trim() Removes whitespace from both ends of a string
    valueOf() Returns the primitive value of a String object

    All string methods return a new value. They do not change the original variable.

    String HTML Wrapper Methods

    The HTML wrapper methods return the string wrapped inside the appropriate HTML tag.

    These are not standard methods, and may not work as expected in all browsers.

    Method Description
    anchor() Creates an anchor
    big() Displays a string using a big font
    blink() Displays a blinking string
    bold() Displays a string in bold
    fixed() Displays a string using a fixed-pitch font
    fontcolor() Displays a string using a specified color
    fontsize() Displays a string using a specified size
    italics() Displays a string in italic
    link() Displays a string as a hyperlink
    small() Displays a string using a small font
    strike() Displays a string with a strikethrough
    sub() Displays a string as subscript text
    sup() Displays a string as superscript text

     

    Записаться на курс

     

    * По материалам сайта www.w3schools.com

     

     

     

     

  • 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()

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

     

  • Joomla. Компонент Sourcerer

    Компонент sourcerer позволяет удобно размещать коды программ на PHP, JavaScript, стили CSS внутри статей, модулей сайта Joomla.

    Синтаксис тмрлдбзования довольно прост. Нужно разместить теги {source} и {/ source} в текстовой области, в которой должен появиться код (например, статья или пользовательский HTML-модуль), код программы размещается между тегами.

    Пример вставки HTML кода

    {source}<span style="color:red">This text should be red!</span>{/source}

    HTML-теги (с двойными квадратными скобками)

    С некоторыми редакторами Joomla могут возникнуть проблемы с сохранением тегов, введенных в представлении WYSIWYG (редактор удаляет их при сохранении). В этом случае можно использовать синтаксис с двойной квадратной скобкой для тегов.

    Нужно использовать [[tag]] вместо <tag>

    Пример:

    {source}[[span style="color:red"]]This text should be red![[/span]]{/source}

    Вставка программы на JavaScript

     {source} <script > alert('This text is placed through <strong>JavaScript</strong>!'); </script> {/source}

    Вставка программы на PHP

    {source} <?php echo ('This text is placed through <strong>PHP</strong>!'); ?> {/source}

    Комбинированный код (HTML, JavaScript и PHP)

    {source} <span style="color:red">This text should be red!</span> <br /> <script> document.write('This text is placed through <strong>JavaScript</strong>!'); </script> <?php echo ('<p>'); echo ('This text is placed through <strong>PHP</strong>!'); echo ('</p>'); ?> {/source}

    Вставка php из отдельного файла

    Пример файла PHP:
    www.yourdomain.com/myfiles/file.php

    {source file=myfiles/file.php}{/source}

    Или:

    {source file=myfiles/file.php}<?php echo '<div class="mydiv">' . $var_from_file . '</div>'; ?>{/source}


    Или:

    {source}<?php require_once JPATH_SITE.'/myfiles/file.php'; ?>{/source}


    Вставка текстового или HTML файла 

    {source}<?php echo file_get_contents( JPATH_SITE.'/myfiles/file.txt' ); ?>{/source}


    Использование Joomla framework

    Программа PHP, вставленная через sourcerer, может использовать объекты Joomla framework.

    Например:

    подключиться к базе данных

    {source}<?php $query = "SELECT something from #__mydatabasetable WHERE this = 'that'"; $database->setQuery($query); $result = $database->loadResult(); ?>{/source}

    подключиться к внешней базе данных

    {source}<?php $option = array( 'driver' => 'mysql', // Database driver name 'host' => 'db.myhost.com', // Database host name 'user' => 'fredbloggs', // User for database authentication 'password' => 's9(39s£h[%dkFd', // Password for database authentication 'database' => 'bigdatabase', // Database name 'prefix' => 'abc_', // Database prefix (may be empty) ); $db = JDatabase::getInstance( $option ); ?>{/source}

    добавить Javascript в начало страницы html

    {source}<?php $script = " alert('this is javasript'); "; $doc->addScriptDeclaration( $script ); ?>{/source}

    Чтобы добавить файл js в HEAD, используется:

    {source}<?php $doc->addScript( JURI::root( true ).'/path/to/your/file.js' ); ?>{/source}

    Чтобы добавить несколько таблиц стилей и javascript программ, можно использовать php-код:

    {source}<?php $css = " body { color: red; } "; $doc->addStyleDeclaration( $css ); $doc->addStyleSheet( JURI::root( true ).'/path/to/your/file.css' ); $doc->addStyleSheet( JURI::root( true ).'/path/to/your/file2.css' ); $script = " alert('this is javasript'); "; $doc->addScriptDeclaration( $script ); $doc->addScript( JURI::root( true ).'/path/to/your/file.js' ); $doc->addScript( JURI::root( true ).'/path/to/your/file2.js' ); ?>{/source}




    Глобальные переменные sourcerer

    Компонент sourcerer создаёт и позволяет использовать свои переменные:

    $mainframe или $app

    $document или $doc (не может использоваться в коде Sourcerer в модулях)

    $database или $db

    $user - объект user, содержащий сведения о пользователе guest или текущем пользователе

    $Itemid Идентификатор меню страницы

    $article Объект article (доступен только при использовании кода внутри статей)






  • Работа с DOM с помощью jQuery

    JQuery является библиотекой JavaScript. JQuery значительно упрощает программирование на JavaScript.

     

    Записаться на курс