JavaScript Console (Win8 Style)

(Read article in English) Във връзка с курса по JavaScript в Telerik Academy, реших да направя една проста JavaScript конзола (на външен вид подобна на Win8), като целта е писане на JavaScript без да е нужно модифициране на съществуващия HTML и CSS. Структурната логика (HTML), презентационната логика (CSS) и бизнес логиката (JavaScript) са напълно отделени, което предоставя по-голяма компактност.

Предоставил съм и библиотека (console.js) с дефинирани JS-функции, които се грижат за модификацията на HTML-a, симулиране на входно-изходни операции, някои математически операции, методи за лесно “парсване” на масиви и др.

Направил съм асоциация със C# езика – функциите са със C# подобни имена и с главни букви за разделение от JS-функциите, и начална точка (entry point) – Main метод. Подобно на други библиотеки, програмиста не е нужно да знае как работят функциите имплементирани в библиотеката (console.js), а единствено за какво са предназначени и как да ги използва.

Виж Демо версия
Виж проекта в GitHub хранилището

Изтегли jsConsole [HTML + CSS + JS] – последна промяна на 25 януари, 2014
Изтегли последна версия на библиотеката (console.js) – 25 януари, 2014 [версия 0.2]
Изтегли jsConsole Solution приготвен за 10 задачи

Съдържание:
  1. Изисквания за работа с конзолата
  2. Предварително имплементирани функции
  3. Поглед върху най-важните функции

Изисквания за работа с конзолата

Всичко необходимо, което ви трябва е:

HTML-документа структуриращ конзолата, съдържанието се “налива” в div-елемента с id=”content” (ограден в жълто).

CSS-документа с предварително дефинирани стилове.

Библиотека (console.js) с предварително имплементирани JavaScript функции за по-лесна работа с конзолата.

  • премахването на библиотеката не влияе върху HTML и CSS логиката, но в такъв случай сами ще трябва да се грижите за автоматично зареждане на методи, симулирате входно-изходните операции  др.

Скрипт изпълняващ логиката на вашата програма (примерно script.js).

Как изглежда:

Предварително имплементирани функции

/* jsConsole Library © Martin Nikolov - Version [0.2] */

//
// Library Methods ('public methods' you can use)
//
function SetFontSize(pixels) { ... }

function SetConsoleSize(height, width) { ... }

function AccumulatePixels(px1, px2) { ... }

//
// Console Clear Methods
//
function ConsoleClear() { ... }

function ClearElementChildren(htmlElement) { ... }

//
// Console Reading Methods
//
function ReadLine(textMessage, defaultValue, idName) { ... }

function ReadLineFromElement(fromElement, textMessage, defaultValue, idName) { }

//
// Console Writing Methods
//
function Write(message) { ... }

function WriteLine(message) { ... }

function WriteToElement(message, toElement) { ... }

function WriteLineToElement(message, toElement) { ... }

function Format(str) { ... }

//
// Math
//
function GetRandomInt(min, max) { ... }

function GetRandomFloat(min, max, toFixed) { ... }

//
// Collection elements Parser
//
function SplitBySeparator(string, separators) { ... }

function ParseIntCollection(string, separators) { ... }

function ParseFloatCollection(string, separators) { ... }

function ParseElementsToInt(collection) { ... }

function ParseElementsToFloat(collection) { ... }

//
// Set Solve Problems Button Methods
//
function SetSolveButton(events, textMessage) { ... }

function SetSolveButtonToElement(toElement, events, textMessage) { ... }

Поглед върху най-важните функции

  • SetFontSize(pixels)

taskName = "SetFontSize";

function Main(bufferElement) {

    SetFontSize(35);
    WriteLine("Large text!")
}

font-size-demo

  • SetConsoleSize(height, width)

taskName = "SetConsoleSize";

function Main(bufferElement) {

    SetConsoleSize(50, 400);
    WriteLine("Text!")
}

console-size-demo

  • AccumulatePixels(px1, px2)

taskName = "AccumulatePixels";

function Main(bufferElement) {

    var a = AccumulatePixels('20px', 30); // 20 + 30 = 50px
    var b = AccumulatePixels('20px', '30px'); // 20 + 30 = 50px
    var c = AccumulatePixels(20, 30); // 20 + 30 = 50px

    WriteLine('20px + 30 = ' + a);
    WriteLine('20px + 30px = ' + b);
    WriteLine('20 + 30 = ' + c);
    WriteLine();

    var d = AccumulatePixels('-20px', 30); // -20 + 30 = 10px
    var e = AccumulatePixels('20px', -30); // 20 + (-30) = -10px
    var f = AccumulatePixels(-20, -30); // -20 + (-30) = -50px

    WriteLine('-20px + 30 = ' + d);
    WriteLine('20px + (-30) = ' + e);
    WriteLine('-20 + (-30) = ' + f);
}

accumulate-pixels-demo

  • ConsoleClear()

taskName = "ConsoleClear";

function Main(bufferElement) {

    for (var i = 0; i < 10; i++) {
        WriteLine("SPAM! SPAM!");
        WriteLine("SPAM! SPAM!");
    }

    ConsoleClear();

    WriteLine("Off-topic");
    WriteLine("Off-topic");
}

console-clear-demo

  • ReadLine(textMessage, defaultValue, idName)

taskName = "ReadLine";

function Main(bufferElement) {

    var msg1 = ReadLine("Enter message: ");

    // With default value
    var msg2 = ReadLine("Enter message: ", "Input with text");

    // With default value and set id to the input:text
    var msg2 = ReadLine("Enter message: ",
                        "Input with text and Id", "special-message");
}

  • Write(message) and WriteLine(message)

taskName = "Write and WriteLine";

function Main(bufferElement) {

    WriteLine('JUST');
    WriteLine('EXAMPLE');

    WriteLine();

    Write("ONE ");
    Write("LINE");
}

  • Format(str)

taskName = "Format";

function Main(bufferElement) {

    var firstName = "John";
    var secondName = "Snow";

    WriteLine(Format("Hello, {0} {1}!", firstName, secondName));
}

  • GetRandomInt(min, max)

taskName = "GetRandomInt";

function Main(bufferElement) {

    for (var i = 0; i < 5; i++) {
        WriteLine(GetRandomInt(-10, 10));
    };
}

  • GetRandomFloat(min, max, precision)

taskName = "GetRandomFloat";

function Main(bufferElement) {

    for (var i = 0; i < 2; i++) {
        WriteLine(GetRandomFloat(-10, 10));
    };

    WriteLine();

    for (var i = 0; i < 2; i++) {
        WriteLine(GetRandomFloat(-10, 10, 7));
    };
}

  • SplitBySeparator(string, separators)

taskName = "SplitBySeparator";

function Main(bufferElement) {

    var text = "{ 1, 2, 3, 4, 5 }";

    var separators = [',', ' ', '{', '}'];
    var numbers = SplitBySeparator(text, separators); // Array of strings

    for (var i = 0; i < numbers.length; i++) {
        WriteLine(numbers[i]);
    };
}

  • ParseIntCollection(string, separators)

taskName = "ParseIntCollection";

function Main(bufferElement) {

    var text = "{ 1, 2, 3, 4, 5 }";

    var separators = [',', ' ', '{', '}'];
    var numbers = ParseIntCollection(text, separators); // Array of integers

    for (var i = 0; i < numbers.length; i++) {
        WriteLine(numbers[i] + 1);
    };
}

  • ParseFloatCollection(string, separators)

taskName = "ParseFloatCollection";

function Main(bufferElement) {

    var text = "{ 1, 2, 3, 4, 5 }";

    var separators = [',', ' ', '{', '}'];
    var numbers = ParseFloatCollection(text, separators); // Array of floats

    for (var i = 0; i < numbers.length; i++) {
        WriteLine(numbers[i] + 0.1);
    };
}

  • ParseElementsToInt(collection)

taskName = "ParseElementsToInt";

function Main(bufferElement) {

    var numbers = ['1', '2', '3', '4', '5'];
    numbers = ParseElementsToInt(numbers); // Array of integers

    for (var i = 0; i < numbers.length; i++) {
        WriteLine(numbers[i] + 1);
    };
}

  • ParseElementsToFloat(collection)

taskName = "ParseElementsToFloat";

function Main(bufferElement) {

    var numbers = ['1.1', '2.2', '3.3', '4.4', '5.5'];
    numbers = ParseElementsToFloat(numbers); // Array of floats

    for (var i = 0; i < numbers.length; i++) {
        WriteLine((numbers[i] + 0.1).toFixed(1));
    };
}

  • SetSolveButton(events, textMessage)

– Тъй като не са налични блокиращи операции както при метода Console.ReadLine() в C#, тук се налага алтернативно решение. Ако имаме функции, които трябва да се изпълнят след въвеждане на входни данни, използваме SetSolveButton, като в параметъра events се изброяват функциите, които ще се изпълнят след натискане на бутона.

Забележа: За да достъпим данните въведени от потребителя (или да ги подадем на функция) е необходимо да достъпим свойството value на обекта съхраняващ стойността въведена от потребителя. В примера по-долу за да вземем стойността на променливата firstName, трябва да достъпим свойството valuefirstName.value, което връща обект от тип string.

taskName = "SetSolveButton";

function Main(bufferElement) {

    var firstName = ReadLine("First name: ");
    var secondName = ReadLine("Second name: ");

     SetSolveButton(function () {
        Regard(firstName.value, secondName.value);
        // Function 2
        // Function 3
    });
}

function Regard(firstName, secondName) {
    WriteLine(Format("Hello, {0} {1}!", firstName, secondName));
}

Advertisements

About Martin Nikolov
A highly motivated, enthusiastic and committed individual who has consistently achieved outstanding results in the area of computing.

2 Responses to JavaScript Console (Win8 Style)

  1. Pingback: JavaScript Console (Win8 Style) | Martin Nikolov

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: