2

3

Гламурное программирование

Программа на языкеJavaScript

var Speed;var Msg;Speed = 120;Msg = 'Скорость мотоцикла';

window.alert([Msg,Speed,'км/час'].join(''));

4

Программирование блок-схем программирования

5

WEB-Интерфейс Blockly

6

Папки Blocklycoredemosgeneratorstestsmedialanguage

7

Папка core1. Папка содержит основные механизмы

визуализации блоков блок-схем.

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

3. Форматом хранения готовых схем Blockly является XML.

8

XML-описание блок-схемы

9

10

Масштабирование SVG изображения блоков в браузерах

11

Папка demosВ папке находятся директории:

blockfactory – проектирование пользовательских блоков;

code – среда разработки блок-схем и генерации скриптов;

maze – предметный язык робота, с визуализацией прохождения клеточного 2D лабиринта. Присутствует три команды: «движение», «поворот влево», «поворот вправо». Логические переменные и условные операторы ветвления: «стена <впереди, слева, справа, сзади>», «условное ветвление IF», «повторят шаг пока не достигнута конечная цель», логические операции: «and» и отрицание «not».

myblock – пример блока созданного в редакторе blockfactory с именем «programm» и генерирующего JS-текст «…;» ;

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

12

Блок «programm» размещается в файле goo.js

'use strict';

if (!Blockly.Language) Blockly.Language = {};

Blockly.Language.math_foo = { category: 'Math', helpUrl: 'http://www.example.com/', init: function() { this.setColour(65); this.setTooltip('Good function'); this.setOutput(true, null); this.setNextStatement(true); this.appendValueInput("VALUE") .setCheck(null) .appendTitle("programm");// .appendTitle(new Blockly.FieldImage("../../media/goo.jpg", 45, 30)); }};

Blockly.JavaScript.math_foo = function() { // TODO: Assemble JavaScript into code variable. var code = '...' return code;};

13

Папка generators

dart.js – Генератор программ языка DART по блок-схемам Blockly;

javascript.js – Генератор JS;

python.js – Генератор python.js;

dart – Папка содержит файлы с библиотеками функций, разбитых по категориям. Каждый блок имеет одну функцию генерации на языке DART;

javascript – библиотеки генерации функций на языке JS;

python – библиотеки для языка python.

14

Папки tests, language, mediaplayground.html - Проверка работы среды проектирования блок-схем из папки tests;

blockly_test.html – Тестирование работы операций рисования блоков: добавление блока, связывание двух блоков, удаление вложенных блоков и т.д.

Папка «language» содержит описание сообщений на английском языке;

Папка «media» содержит:

таблицу стилей CSS; графические изображения - кавычек текста, «мусорного ведра»; курсоров - «открытой руки» и «сжатой руки»; гламурных звуков - «удаления блока» и «склеивания двух блоков».

15

Аналоги (прототипы первопроходцы)

16

17

18

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