JavaScript конзола - в помощ за предстоящите курсове


40

Здравейте,

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

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

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

Виж Демо версия (виж js-кода)
Прочети повече в личния ми блог
Виж проекта в GitHub хранилището

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

Тъй като съдържанието ще стане дълго за да го публикувам като коментар във форума, при избор на линк ще бъдете прехвърлени към блога ми, където съм публикувал информация за конзолата.

Можете да я прочетете съдържанието на английски и в GitHub хранилището ми.

*За всяка функция има примерен код + примерен изход.

**Повече дема можете да намерите в GitHub хранилището ми, където съм решавал част от домашното за JS Part 1. -> ЩРАК (без да е пипано по .html файла)

Съдържание:

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

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

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

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

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

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

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

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

Как изглежда: виж демо версия --- виж js-кода

Продължение...

Ще съм благодарен за предложения за разширяване на конзолата, съобщаване (поправяне) на бъгове, предложение за друг дизайн (Linux style примерно), при натискане на Enter да активира Solve бутона, и всякакви други неща.

Чувствайте се свободни да модифицирате и разширявате конзолата, и споделете, ако ви хареса. :>

Ако имате въпроси, моля задавайте ги тук.

Поздрави!




Отговори



1
Браво, проекта изглежда впечатляващо на фона на нивото на есенния прием :)
Първи стъпки: пуснах демото да се ориентирам за крайния ефект (не сме минали HTML. CSS за JS да не говорим :)). Направи ми впечатление, че след въвеждане на данни и натискане на Enter не минавам на следващия ред. Това става или с мишка или с Tab. Лично съм свикнал да използвам мишката крайно рядко, когато пиша код, така че мога да препоръчам (ако естествено препоръката ми получи необходимото мнозинство) след натискане на Enter да се минава на следваща позиция или на Solve бутона, ако последната позиция е била попълнена.

от redOne (0 точки)


0
Това е добра идея, ще се опитам да го реализирам и ако работи добре направо ще го вкарам в "библиотеката". Ако някой иска да помогне и го имплементира, може да ми сподели решението си (ще го добавя в заслугите). :>

от martin.nikolov (4535 точки)

0
време и желание имам, но не ми достигат знания и опит :) виж в обмислянето на нещата имам опит, така че мога да предложа ако прикачиш в event handler-a условие ако си на поле и то вече е попълнено и се натисне Enter това да изпълнява Tab, а ако си на бутон това да е си е Enter (submit action!). Така би трябвало да стане най-лесно. Ще остане да се добави само една екстра, когато от последната попълнена позиция "табнеш" с Enter към Solve бутона, границите му да се оцветят контрастно за да е ясно че е активен! Сега като натискаш Tab понякога може да минеш през него и да не забележиш, точно защото няма индикация. Това може би в CSS?

от redOne (0 точки)



4
Вдигам темата заради предстоящия JavaScript курс, в случай че темата се е загубила.
А който се интересува и смята да я използва, може да погледне имплементираните функции + демо как да се използват: https://github.com/flextry/jsConsole#pre-implemented-functions

от martin.nikolov (4535 точки)


1
Up-вам темата

от Pavel.Aslanov (428 точки)


6

Супер!

Аз ще се включа с още едно предложение.

WebStorm е едно от най-предпочитаните и добри IDE-та за писане на js. Има 1 месец free trial (разбира се, има заобиколни методи ;)). На страницата на JetBrains е обяснено много подробно как можете да свържете Node.js интерпретатора с IDE-то. Така ще можете да се възползвате както от конзолата на WebStorm, така и от дебъгера. :)


от dentia (12519 точки)


0

Аз също използвам WebStorm да пиша на JS и съм много доволен,освен от конзолата и от това ,че мога да едитвам клавишните комбинаций,да си правя свой комбинаций за циклите и каквото ми хрумне(сам си пишеш клавишната комбинация и кода , който да се дисплейва когато я използваш,не като във VS да използвам дефолтни,понеже е трудно да си направя снипети.

Но аз ъпнах темата заради домашните, конзолата която е в темата е перфектна когато пишеш  домашно.Слагаш една форма в html файла с полета на брой колкото променливи имаш в задачата и един бутон за резултат и ги вързваш към функция играеща ролята на static void Мain в C# и става подобно на C# домашното ти.Полетата са за входните данни да се въвеждат от потребителя, а конзолата да изписва резултата.Това го казвам за колегите,които са като мен нови в JS и ще се чудят как да си пишат домашните.Като си направиш един темплейт,после на всяко домашно само копи пейст на папката и си добавяш кода в съответната задача и готово.


от Pavel.Aslanov (428 точки)


0
Up на тази темичка също :) 

от Nayata (3190 точки)


0
Много добра работа! Браво.