Презентация Модуль 5. Кастомизация при помощи скриптов

1. Кастомизация при помощи скриптов

TypeScript, SDK ELMA365, основы HTML и CSS

2. Сценарии: когда и где

Low-code не хватает
Сложные вычисления
Сложное адаптивное поведение форм
Реализация своих интерфейсов (CSS + JS)
Интеграции (REST API)

3. Сценарии: когда и где

4. Сценарии: когда и где

5. Сценарии: когда и где

6. Сценарии: когда и где

7. Введение в TypeScript

let \ var

8. Введение в TypeScript

let \ var

9. Введение в TypeScript

Типы данных: boolean, number, string, Array, Any, null,
undefined и другие
Управляющие конструкции: if, for, while, switch
Типы и интерфейсы

10. Введение в TypeScript

Boolean

11. Введение в TypeScript

Number

12. Введение в TypeScript

String

13. Введение в TypeScript

Null, undefined…

14. Введение в TypeScript

Non-null assertion operator

15. Введение в TypeScript

Функции

16. Введение в TypeScript

Async function

17. Введение в TypeScript

async/await

18. Введение в TypeScript

if…else

19. Введение в TypeScript

if…else / тернарный оператор

20. Введение в TypeScript

switch

21. Введение в TypeScript

Циклы for и while
1
2
3

22. Введение в TypeScript

Циклы for и while

23. TypeScript SDK

Демонстрация работы со сценариями в ELMA365.

24. Виджет Код

Основы HTML, CSS

25. Основы HTML

26. Основы HTML

HTML – (от англ. HyperText Markup Language – язык разметки
гипертекста) – это код, который используется для
структурирования и отображения веб-страницы и её
контента. HTML не является языком программирования; это
язык разметки, и используется, чтобы сообщать вашему
браузеру, как отображать веб-страницы, которые вы
посещаете.

27. Что можно делать с помощью HTML и CSS

28. Что можно делать с помощью HTML и CSS

29. Что можно делать с помощью HTML и CSS

30. Что можно делать с помощью HTML и CSS

31. Что можно делать с помощью HTML и CSS

32. Что можно делать с помощью HTML и CSS

33. Основы HTML

34. Основы HTML

Тэг (дескриптор)
Открывающий тэг - состоит из имени элемента, который заключен в угловые скобки. Указывает где
начинается элемент.
Закрывающий тэг - то же самое что и открывающий тег, только содержащий косую черту. Указывает
где элемент заканчивается.
Содержимое тэга - будет отображаться пользователю
Элемент - это все вместе - открывающий тэг + содержимое + закрывающий тэг

35. Основы HTML

Атрибуты
Атрибут должен иметь:
Пробел между атрибутом и именем элемента
Имя атрибута и следующий за ним знак равенства
Значение атрибута, заключенное в кавычки

36. Основы HTML

Структура HTML

37. Основы HTML

Вложенные элементы
Неправильно
Правильно

38. Основы HTML

Пустые элементы

39. Основы HTML

Заголовки
Абзацы

40. Основы HTML

Списки
Ссылки

41. Основы HTML

Блочные элементы
<div>
<p>
<pre>
<hr/>
<br/>
<blockquote>
<h1-6>

42. Основы HTML

Строчные элементы
<a href=“” name=“” >
<span>
<code>
и другие…
● Строчные элементы могут содержать только данные и другие
строчные элементы.
● Блочные размещаются с новой строки, строчные же такого
эффекта не имеют.
● Ширина строчных элементов определяется по их
содержимому, отступам и границам.

43. Основы HTML

Атрибуты

44. Основы HTML

HTML комментарии

45. Основы HTML

Изображения в HTML
Элемент имеет следующие атрибуты:
● src – содержит путь к графическому файлу.
● alt – устанавливает альтернативный текст для
изображения.
● title – устанавливает текст всплывающей подсказке.
● width , height – атрибуты задают ширину и высоту
изображения.
● usemap – связывает между собой картинку и картуизображение, задаваемую с помощью контейнера
<map>

46. Основы HTML

Изображения в HTML

47. Основы HTML

HTML таблицы

48. Основы HTML

HTML таблицы

49. Основы CSS

50. Основы CSS

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

51. Основы CSS

Способы подключения

52. Основы CSS

Селекторы
Селектор элемент
Селектор класс
Селектор идентификатор
Сложные селекторы
Псевдоклассы и псевдоэлементы

53. Основы CSS

Селектор элемент

54. Основы CSS

Селектор класс

55. Основы CSS

Селектор идентификатор

56. Основы CSS

Сложные селекторы
Контекстные
Соседние
Дочерние
Селекторы атрибутов

57. Основы CSS

Контекстный селектор

58. Основы CSS

Соседние селекторы

59. Основы CSS

Дочерние селекторы

60. Основы CSS

Селектор атрибута

61. Основы CSS

Псевдоклассы и псевдоэлементы

62. Основы CSS

Псевдоклассы и псевдоэлементы

63. Основы CSS

Псевдоклассы и псевдоэлементы

64. Основы CSS

Псевдоклассы и псевдоэлементы

65. Часто используемые свойства

Примеры

66. Виджет-код

Практика на ELMA365

67. Спасибо за внимание!