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
Related
I am trying to build a puzzle game using HTML & JS. This is going to be a standalone HTML page. There isn't going to be a server side for this application.
Obviously, the game has an answer which the application will create at start time. Now, I wish to make this variable completely hidden i.e., not just hidden from user's view but also inaccessible to the user, even if he tries to read the page through Chrome's Developer Tools or such debug tools.
I'm looking for a solution using HTML5, JS ECMAScript 5+ & jQuery.
I remember reading something about Native HTML code (used for HTML File elements) which cannot be rendered/read even through Dev Tools. Is this any help?
Is there any way or strategy to achieve this?
NOTE: I am aware of <input type="hidden">. But that doesn't serve my purpose.
EDIT: As part of the game, the user makes attempts and the application needs to validate the user's input against this somehow-user-hidden answer variable. At this point, I believe there is no solution that's going to be completely airtight in the given constraints. Hence, I'm pursuing this from an academic interest. Does anyone have any other answers ?
Prehash your answer, hard code that into your page.
Then, when they submit their answer, run through whatever hashing pattern you did before hand, and compare the result.
It could theoretically be brute forced, of course.... if you had a few hundred years.
Javascript implementations of:
SHA-1: http://www.webtoolkit.info/javascript-sha1.html
SHA-256: http://www.webtoolkit.info/javascript-sha256.html
MD5: http://www.webtoolkit.info/javascript-md5.html
Edit:
An example would be:
Pattern: SHA-1(SHA-1(SHA-1(answer + salt)))
Salt: 982qx17wef7ddsbtxaewnsdufs (make something up, load it as an input type='hidden')
Result: (load it as an input type='hidden')
Request the answer
If SHA-1(SHA-1(SHA-1(attempt + salt))) === Result, they got it correct
Your can hash your values using MD5.
https://github.com/blueimp/JavaScript-MD5#client-side
I am a beginner in GNOME desktop application development so I am trying to learn about it as much as possible. I have read various tutorials present on developer.gnome.org written for JavaScript. I know that through GObject Introspection I can access C libraries in JavaScript.
As use of JavaScript for desktop applications is new so not many documentations are present. I was wondering if there is any way I can know which functions I can use with what parameters to access some libraries.
For example I can create a button using GTK in JavaScript by:
this.mybutton = new GTK.Button({some code here});
How can I come to know about the name of the functions I can use? Is there any way I can make out the name of the function for JavaScript seeing the documentation written for C?
For some of the libraries I have seen this documentation written for JavaScript. Any help will be appreciated to understand more about GNOME application development.
I agree with you: the documentation is pretty low on the subject.
Most of the time I try to find already written code from other developers and change it to have what I want.
The C documentation is pretty complete on http://developer.gnome.org and most of the time you can use nearly the same methods.
I suggest you to take a look at this web site: http://www.roojs.org/seed/gir-1.2-gtk-3.0/seed/
And also to this one: http://zetcode.com/gui/javascriptgtktutorial/
Good luck with your javascript development !!!
There is new host for Gnome GJS documentation:
https://gjs.guide/
https://gjs-docs.gnome.org/ for API's
You still can get Javascript function mapped to the that C library function by searching though GIR files. Each library should have an XML file containing introspection information.
Example from one question I asked before.
grep -rn gdk_keymap_get_default /usr/share/gir-1.0/
/usr/share/gir-1.0/Gdk-2.0.gir:16781: c:identifier="gdk_keymap_get_default"
/usr/share/gir-1.0/Gdk-3.0.gir:15776: <function name="get_default" c:identifier="gdk_keymap_get_default">
vim /usr/share/gir-1.0/Gdk-3.0.gir +15776
<class name="Keymap"
c:symbol-prefix="keymap"
c:type="GdkKeymap"
parent="GObject.Object"
glib:type-name="GdkKeymap"
glib:get-type="gdk_keymap_get_type">
<doc xml:space="preserve">A #GdkKeymap defines the translation from keyboard state
(including a hardware key, a modifier mask, and active keyboard group)
to a keyval. This translation has two phases. The first phase is
to determine the effective keyboard group and level for the keyboard
state; the second phase is to look up the keycode/group/level triplet
in the keymap and see what keyval it corresponds to.</doc>
<function name="get_default" c:identifier="gdk_keymap_get_default">
<doc xml:space="preserve">Returns the #GdkKeymap attached to the default display.</doc>
<return-value transfer-ownership="none">
<doc xml:space="preserve">the #GdkKeymap attached to the default display.</doc>
<type name="Keymap" c:type="GdkKeymap*"/>
</return-value>
</function>
What would be the simplest and easiest way to
to preload 50 quiz type questions in html for a mobile quiz app?
If the user loses wifi and internet access I wanted them to be able to
press the submit button when they regain wifi/3-4g access again.
I'd preload the questions by including them in the web page as a Javascript object.
var questions = [
{"q": "Why did the Chicken cross the road"},
{a: [
"It was bored",
"It was following the goat."
]
}
}
You can use AJAX to submit the answers. If it errors out, save the answers using localstorage. Uset .setTimeout() to wake up every few seconds and see if submitting works.
Probably a simpler way would be to just put all the questions on the page (in html) and then as your user walks through them you can hide and show them as you need to. When the user submits, if it fails, you can place a waiting icon and keep trying with setTimeout. As Jeremy pointed out you could also store the answers in localstorage in the event the window is closed.
The best answer for you really depends on your overall architecture, but you don't have to use javascript or json to load all the questions depending on your technical level.
A simple mockup (that is not entirely functional):
http://jsfiddle.net/lucuma/naMg5/
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
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
I'm learning JavaScript. However, it's not so convenient to do some experiments. You have to create a template HTML file and then embed your JavaScript code into it, and then use a browser to open the
HTML file, even you just want to see alert("hello world").
I wonder if it's easy to create an online JavaScript editor. The basic idea is: in a HTML text-area, you just type in JavaScript code directly, and it has one button, "Run", below to run the JavaScript code.
If it contains some syntax errors, maybe show the error message out. For example: someone already created one like this: http://www.codehouse.com/webmaster_tools/javascript_editor/
How can I create this? Are there any materials, blog, etc. on how to create this?
Consider http://jsbin.com. It's already equipped with various versions of the most prominent JavaScript frameworks for testing. Furthermore, it stores your code online and creates a short-URL so you can pass examples around, and quickly refer back to previous items of interest. You'll see many of us here using it frequently to help each other.
If you really want to work on your own, you can fork jsbin on GitHub: http://github.com/remy/jsbin
CodeMirror is the syntax highlighting 'engine' that jsbin and jsFiddle use.
Use Firebug.
You can open Firebug in any webpage and then type arbitrary JavaScript at the bottom of the Console tab. It will evaluate the JavaScript and display the result. It's even got basic autocomplete!
However, the real value of Firebug is its DOM tab.
You can look at any JavaScript object and see all of its methods and properties, nested as much as you want. You can inspect the browser's pre-defined objects (window, document, etc), any global variables defined on the page, and even objects you create in the console tab (by clicking an object that you got in the results list).
The DOM tab will show you all information you could possibly want about an object. You can even mouseover the word function in the right side and see the function's body in a tooltip. (And it will be auto-indented, too.)
Once you start writing your own pages, you can use Firebug's JavaScript debugger to help make them work correctly.
I think you can do something like this:
HTML
<textarea id="code"></textarea>
<iframe id="output"></iframe>
<button id="submit-b" onclick="update()">run</button>
JavaScript
function update()
{
var frame = $('#output').get(0);
var frameDoc = frame.contentDocument || frame.contentWindow.document;
var w = document.getElementById("code").value;
document.getElementById('output').contentWindow.document.write(w);
}
jsFiddle [docs] is very powerful and it's the most popular on Stack Overflow.
For interactive explorations I use either this:
http://www.squarefree.com/shell/shell.html
or if I want to type in a whole bunch of code and then run it, I've been using this (from the same site):
http://www.squarefree.com/jsenv/