console-like interface on a web page using javascript [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 5 years ago.
Improve this question
I very like MySQLs mysql cli tool and I don't like phpMyAdmin.
[IMHO]It's a nice thing for a Windows user, but its not so good when you've used to console.[/IMHO].
What I want is to build a web page containing element with console-like input (for example something like this) which should get input from user, send it to PHP script on back-end and show back-end response.
Back-end script is done (it was the easiest part), but I can't find any library for JavaScript implementing console-like input.
I've tried to examine and modify for my needs example I've provided, but it's too bloated (because doesn't use any libraries) and implements specific thing. Also I would like this element to provide some auto-completion for input.
Any ideas on such JS library?

I think you are looking for this: jQueryTerminal

there is shellinabox - javascript terminal.
EDIT:
There is also library xterm.js that's real terminal emulator.
EDIT 2:
My jQuery Terminal library is useful when you need custom behavior and you can write your code in JS or as backend code, but backend need to be simple input -> output, if you want to run for instance interactive backend commands, like vi or emacs, you need proper tty, for this use xterm.js (or implement that in JavaScript) for any other usage jQuery Terminal is better. It have lot of features and you don't need to run process on the server (listen on a port) which usually is forbidden on shared hostings or GitHub pages.

instead of using console.log() use document.write()
It will write text on the webpage just like console.log would in the console

I've made a console library called Simple Console (I'll probably rename it because simple-console is taken on npm)
It handles command history and such for you, and you can use it to implement any kind of console.
var handleCommand = (command)=> {
var req = new XMLHttpRequest();
req.addEventListener("load", ()=> {
con.log(req.responseText);
// TODO: use con.error for errors and con.warn for warnings
// TODO: maybe log a table element to display rows of data
});
// TODO: actually pass the command to the server
req.open("GET", "mysql.php");
req.send();
};
var con = new SimpleConsole({
handleCommand,
placeholder: "Enter MySQL queries",
storageID: "mysql-console"
});
document.body.appendChild(con.element);
Check out the documentation on GitHub for more information.

hmm firebug console ?
http://getfirebug.com/commandline

Related

Python backend with JS frontend [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm creating a Python-powered web framework aiming to make use of javascript as minimal as it possible. Need to make something lightweight like uilang to pass events to my Python code. I suppose that should be jQuery solution somehow pinging kind of observer object(?).
I have discovered some efforts to create pure-Python interface like Remi but still have no clue how should I reimplement it in my code.
Let's say I make a class like that:
class WebView():
def __init__(self, template, **callbacks):
"""
Callbacks are dict, {'object': callback}
"""
self.template = template
self.customJS = None
for obj, call in callbacks:
self.setCallback(obj, call)
def __call__():
"""
Here I return template
Assume {{customJS}} record in template, to be simple
"""
return bottle.template(self.template, customJS = self.customJS)
def setCallback(self, obj, call):
"""
Build custom js to insert
"""
self.customJS += ('<script ....%s ... %s' % (obj, call))
So, how could I make JS to pass an event from, say, pressing button back to my callback?
I understand that question might be on the edge of being too broad, but I'm solely trying to be as descriptive as possible because I really don't know JS at all.
Thing is you don't need javascript for a python web framework. You would be fine serving pages with flask or django without the single line of JS.
These pages would be pretty static with a few forms but would work perfectly.
Now if you want to have more dynamic content and interaction you'll probably need JS, and use XMLHttpRequests to asynchronously call your python backend on events. But in order to do so properly, you should start by learning JS.
You could probably do it with websockets too, however i don't think it's the best way. You can use websocket-python library on the python side, and on the website, you just send a websocket message on every button click callback.

How many ajax files should I have? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm starting out php.
I'm wondering how many ajax files should I have. Should I have a seperate one for each operation I want to do? each query insert etc,
Or do I like send something in the data, or maybe request that ID's the request so that the server knows what to do?
Is there a good example for that?
I don't know if it matters but I'm using jQuery.
To answer your question, I personally like having as many files as possible (with fewer lines of code), but keeping related functions groupped in an object inside the same file.
For example, you could have one file called userAjax.js which contains the userAjax object:
var userAjax = {
getUserLevel : function (userId) {
$.get // blah, blah, or any ajax request
},
setUsername : function (userId, username) {
$.get // blah, blah, or any ajax request
}
};
In your app you could then use (after including the userAjax.js):
userAjax.setUsername(37, "John");
I like using this method because it keeps code structured, you do not have too much code for too little functionality. I use it in small to medium sized projects and works great :) (both for production & maintanance).
For the server-side, you could either do the same thing, or simply have a file for each command. I also like file-per-command method because if you structure your files in folders it's very easy to maintain the code (you can go directly to the function you want by navigating through the file tree). But again, for larger projects I think you should use a more OOP-approach, like having a class with many functions in a single file.
To sum it up, it all depends, mostly based on the size of the project.
Well, you can create functions for all operations what you want to do, and handle this functions with one file. Or you can create as many as want files for handling requests. If you are using some framework built on MVC architecture, you will probably use only one file (Controller) or more functions in more controllers, it is really variable, depending on usage.
There is lot of tutorials how to use PHP with AJAX. You just need only search for them.

Frameworks for javascript client side ORM? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
I'm kind of sick of using JSON/Rest services lately and manually typing up methods on the server that do basic CRUD operations on a database.
What I'd like to do, is in javascript (ajax based apps) do something of the form
var allStudents = students.getAllStudents(); // returns all items of the students table
var student = new student();
student.name = "Joe";
student.address = "123 Sesame st";
students.add(student); // commits it to the students table
var student = students.getStudentById(57);
Now as any ORM all these methods would be automated/written for me.
Also note that I'm not saying Javascript should talk directly to a database. It would
still do Restful calls (behind the scenes to a server). But I just want
these crud operations to be automated and transparent to me so that I don't need to
manually write out these on the server.
You guys know any frameworks that would help achieve this?
My primary backend is Java/Spring3MVC. But I'd also like to hear ideas that use
Node.js possibly.
I'm undecided on whether or not this is a time-saver compared to simply writing the RESTful ajax requests out, but Dojo's JsonRest store is one solution I've seen which works similarly to what you're describing. Personally I find it more readable to write the ajax request explicitly, but if you don't mind adhering to Dojo's philosophy on how your requests should be structured you might like this. Anyhow, here's some code from that documentation page:
require(["dojo/store/JsonRest"], function(JsonRestStore){
var store = new JsonRestStore({target: "/Table/" });
store.get(3).then(function(object){
// use the object with the identity of 3
});
store.query("foo=bar").then(function(results){
// use the query results returned from the server
});
store.put({ foo: "bar" }, { id: 3 }); // store the object with the given identity
store.remove(3); // delete the object
});
If you can use something like Backbone.js or Can.js (recommended) to do your interfaces and seamlessly communicate with your database through RESTfull services in a way you will be impressed if you haven't seen it before.
http://backbonejs.org/
http://canjs.us/
Both use a MVC structure that is incredibly easy to setup.
Take a look at the demos and examples.
Looking for the same thing, I have stumbled upon sproutcore records. Look like a javascript orm solution.

JavaScript keyboard shortcuts for web application [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I want to develop a web application, which should (ideally) be fully usable via the keyboard. I know how to handle keyboard events in JavaScript, but managing them for a larger application is quite boring.
Is there a library which makes that process easier?
Please note that I'm not interested in a full-blown Web GUI framework. I want to keep control over my webpage/application.
Check out my project:
https://github.com/oscargodson/jkey
And demos:
http://oscargodson.github.com/jKey/
Feel free to use it and if you want, contribute :)
I just developed one of my own called Mousetrap. Check it out.
You can use Hotkeys - a plugin for jQuery. jQuery is a quite lightweight JavaScript library - it is a required JavaScript file for using Hotkeys.
You could start by reading about the accesskey attribute:
This attribute assigns an access key to an element. An access key is a single character from the document character set. Note. Authors should consider the input method of the expected reader when specifying an accesskey.
[...]
The invocation of access keys depends on the underlying system. For instance, on machines running MS Windows, one generally has to press the "alt" key in addition to the access key. On Apple systems, one generally has to press the "cmd" key in addition to the access key.
You can also put the accesskey attribute on <a> elements, an example of this usage can be found on the "Random Article" sidebar link on Wikipedia.
I would strongly encourage you to check out Thomas Fuchs' keymaster for doing keyboard shortcuts in web applications: https://github.com/madrobby/keymaster
It makes it quite simple:
// Define short of 'a'
key('a', function(){ alert('you pressed a!') });
// Returning false stops the event and prevents default browser events
key('ctrl+r', function(){ alert('stopped reload!'); return false });
// Multiple shortcuts that do the same thing
key('⌘+r, ctrl+r', function(){ });
This one is very easy to use.
Example:
shortcut.add("Up", // Key
go_up()); // Function
You could use the accesskey HTML attribute as it would then make your web application accessible.
Use the KeyTips jQuery Plugin to display them to the user in a similar way to Office Ribbon keyboard shortcuts.
Try the Demo. Code on GitHub.
Note that the Wikipedia page on accesskey lists the modifier keys to invoke access keys for different browsers.
See also the A List Apart article: Accesskeys: Unlocking Hidden Navigation

Javascript Console for Windows like JSC [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
I have to work on the Windows platform for a project, and I happen to do that project with server-side javascript (yes, I am actually using server-side javascript). Most of my analysis and research I do by working with JSC on my Mac, which allows me to write code and get back a response from the interpreter and load .js files. Now I have been googling and I find most of the results about Firebug or online tools. However, I am looking for something more commandlinish.
Does anyone have a good recommendation for a JavaScript interpreter/console application for the Windows platform that does not require a browser and can be run from the commandline (and supports the loading of external .js files) ?
Many thanks,
node.js has a Windows version. The installer is completely non-invasive, all it does is copies files to Program Files and adds the path to your system $PATH env. variable. If you then start node.exe without parameters it works as a REPL Javascript console.
You can load a .js file like this:
> .load ./file/to/myscript.js
Check out REPL page in Node.js manual for more info.
If you don't want to install any external tools, you can use Windows built in cscript.exe and a short script to read/eval/print/loop as follows:
try {
throw {};
} catch(repl) {
while (repl.line != '.exit') {
if (repl.line) {
repl.err = null;
try {
repl.out = eval('(' + repl.line + ')');
} catch (e) {
if (e instanceof SyntaxError) {
try {
repl.out = eval(repl.line);
} catch (e) {
repl.err = e;
}
} else {
repl.err = e;
}
}
if (repl.err) {
WScript.stdout.writeLine('Error: ' + repl.err.message);
} else {
WScript.stdout.writeLine(repl.out == null ? String(repl.out) : (typeof repl.out.toString == 'function' ? repl.out.toString() : Object.prototype.toString.call(repl.out)));
}
}
WScript.stdout.write('> ');
repl.line = WScript.stdin.readLine();
}
}
Save that as repl.js and run cscript repl.js to get a console similar to jsc.
if your java runtime >=1.5 ,you can try jrunscript. It is based on java scriptengines, JavaScript is the default language supported.
Not exactly equivalent to JSC, but still..
I use the browser's development tools (F12), and there I enter the Console tab. That's it.
Works with modern browsers, where Firefox usually needs Firebug for this.
The main advantage is to have an interactive interpreter, without the need to load a real file.
http://www.phpied.com/javascript-shell-scripting/ -> this might help your cause.
Rhino Shell - https://developer.mozilla.org/en/Rhino_Shell
Apart from Node.js, JSDB is quite nice. I checked node.js again and I believe it is now available as a single executable, node.exe, which is even more compact than JSDB. So I might be using that instead.
Just check out DeskJS (https://deskjs.wordpress.com). It's exactly what you're looking for! It's a portable Windows console application that lets you run pure JavaScript code and even load any existing JS files. It supports even the basic JS popup boxes implemented in browsers. You can save your commands as JS files that can be run on startup or by dragging-and-dropping them on the app. Plus there's so much more to it like you can create a build system for Sublime Text that can run JS files via cmd, it supports themes and snippets e.t.c...

Categories

Resources