How would i go about creating a CLI like interface in JavaScript?
What i mean is an example like this cmd.fm
I work with a lot of jquery and forgive me if i'm wrong but the only idea i have as to how to build this is by getting what the user typed in and using the switch function and checking if the command exists and then executing the command.
It all depends how complicated you need the commands to be!
I'll assume you you know how to render the page in lines, and capture keypresses (simplest way would be to style a text input, and listen for the return key, rather than trying to decode a key event).
I'd build a data structure like this (in JS):
var commands = {
"doThing": function(args) { /* do stuff with the args */ },
"doAnotherThing": function(args) { /* do other stuff with the args */ }
}
The user would type:
> doThing foo bar blah
In this simple example, you'd split the line by space characters, and treat the first element in the resulting array as your command name. You'd then check to see if commands[commandName] exists, and if so, run it: commands[commandName](args);
If you want to do something more advanced, you're going to need to write a tokeniser (technically the split on space is a simple tokeniser) - then things get more complicated, but the same basic method applies.
I hope that's enough to get you started.
Related
Is it possible to use some custom functions for spell checking in html inputs? For example I have an input where values are divided by spaces (or commas, doesn't matter) and a function which receives tokens from it. That function decides if token is spelled correctly (in my case there would be some regular expression) and returns true/false value and based on that some words would be underlined. In my head it looks something like this:
<input type="text" onCheck="checkToken">
<script>
function checkToken(token) {
const oneCrazyRegex = /[a-b]/;
return oneCrazyRegex.test(token);
</script>
Or taking whole input:
function spellCheckInput(line) {
// line is an array of tokens
return line.map(tok => checkToken(tok));
}
Is it possible to do with js/css/html or not?
P.S. onCheck is example only, I know that this attribute is not valid
Yeah you can use regex for cleaning up text but you have to remember that people can fabricate any kind of input they want since the checks would be happening client-side, and anyone can just pop open a console and send anything they want.
In Sublime or VS Code you can define a special comment (DocBlockr or JSDocs as example) that Intellisense will recognize en give you smart tooltip functionality.
I have a function which takes an options parameter. This is an object and can have several properties that could contain functions, strings, ints etc. An example would be:
function foo(options){
options = options || {};
if(options.foo){
console.log(options.foo);
}
if(options.bar) {
console.log(options.bar());
}
}
foo({foo: 'foo', bar: function(){return 'bar';}});
I could add a DocBlockr comment, but that would only yield a tooltip that shows it needs an object.
Is it possible to make some sort of definition of that options object, so it would popup using intellisense?
For Sublime Text 3, you can use my JavaScript Enhancement plugin (you could find it also on Package Control) that will turn it into a JavaScript IDE like (It uses Flow under the hood). In your case, using Flow type annotations, you could use this code to get what you want:
//#flow
function foo(options /*: { foo: string, bar: function} */){
options = options || {};
if(options.foo){
console.log(options.foo);
}
if(options.bar) {
console.log(options.bar());
}
}
foo()
So, on the Sublime Text 3 editor, you will get something like this:
also on multiple lines (/* : need to be on the same line of the parameter):
Also, the plugin offers not only a smart javascript autocomplete but also a lot of features about creating, developing and managing javascript projects (real-time errors, code refactoring, etc.).
I want to be able to quickly go through all invocations of a function inside a file or outside. Currently i use search in all files method. But is there a way to see where this method was used.
Optional: Also i'd want to go back in other direction as well. Say there is a method call like this:
makeBread();
Now i want to see what the function do. so somehow jump to its declaration.
Find invocation
Trying to use text search to find invocations may easily betray you. Consider this:
function myFunction() {
console.log("Hello :)");
}
document.getElementById("page-title").addEventListener("click", myFunction);
I think you understand where this is going - if you want to get a list of invocations, best bet is to use console.trace at runtime:
function myFunction() {
console.trace();
console.log("Hello :)");
}
Find what the function does
The function can be overriden at runtime. Dynamic languages cannot be analysed like static ones (C++, Java). You wanna know what the function does? Print it in the console at runtime:
console.log(makeBread.toString());
Find declaration
Again, console.trace will tell you the line for every function it came through. You can also get the stack trace as array - but beware that this slows execution a lot, so don't do it in production.
Conclusion
As I said, you cannot inspect dynamic languages where anything can be anything using any IDE reliably. Most IDEs give good hints though, just conbine them with runtime debuging. Consider debuging running application more fun than looking ad the dead code.
More reading
If you want to make some reguler expressions, this is gonna be handy: http://www.bryanbraun.com/2014/11/27/every-possible-way-to-define-a-javascript-function
The console object: https://developer.mozilla.org/en-US/docs/Web/API/Console
Using stack trace: https://stackoverflow.com/a/635852/607407
Not natively, but with plugins, yes
A popular plugin that has this functionality is SublimeCodeIntel:
SublimeCodeIntel will also allow you to jump around symbol definitions even across files with just a click ..and back.
For Mac OS X:
Jump to definition = Control+Click
Jump to definition = Control+Command+Alt+Up
Go back = Control+Command+Alt+Left
Manual Code Intelligence = Control+Shift+space
For Linux:
Jump to definition = Super+Click
Jump to definition = Control+Super+Alt+Up
Go back = Control+Super+Alt+Left
Manual Code Intelligence = Control+Shift+space
For Windows:
Jump to definition = Alt+Click
Jump to definition = Control+Windows+Alt+Up
Go back = Control+Windows+Alt+Left
Manual Code Intelligence = Control+Shift+space
I have pored over the formatting settings on Eclipse for hours and found no solution to this problem:
Video of issue
When I type the opening curly brace on the line immediately following an if, else or function line the ending brace is automatically added, but neither conform to my formatting rules (i.e. the braces should be aligned with the if, else or function text).
The way it looks:
if (a)
{
}
The way it should look (and does after running the formatter):
if (a)
{
}
I would chalk it up to a deficiency in Eclipse except for one thing: when editing PHP, Java or C++ code it works as I'd desire; the braces are un-indented appropriately.
It's because Javascript formatting is exactly like that.
The if statement standards:
if (a) {
// your code
}
And if you use an Array of Objects, for example:
var arr = [
{ prop: 'value', prop2: 5 },
{ prop: 'value', prop2: 5 }
];
It's working exactly as it was intended to. Take a look at this Javascript's style guide.
This is just because the formatter is not applied after you write the code. Here is the way to do it.
On Eclipse, go to Window>Preferences
Under JavaScript>Code Style>Formatter, create a New Profile.
On creation of new profile or on edit, you would be shown with a window to change the format style. Go to Braces.
For Blocks, choose Next Line
Click OK. Confirm the profile and click OK.
Now, after you write the following:
if (true)
{
}
Use formatter to make changes for you, usually by Ctrl+Shift+F or from menu by Source>Format. You may apply formatting to selected piece of code too.
Update
Once you have the above setting, go to Window>Preferences>JavaScript>Editor>Save Actions, enable Perform the selected actions on save and Format source code which would make the this operation better.
I have an issue with JavaScript case sensitivity and I will need your valuable piece of advice here. I have the following object created:
var foo = function () {
this.myColor1 = '#000000';
this.MyColor2 = '#FF2000';
this.MyCOLOR3 = '#FFFFFF';
}
as you can see, each property may come in any case form, lowercase, uppcase, mixed, etc. These values are coming from a database and I don't have control onto them.
I want to be able to call them ignoring the case sensitivity. For example, I would like to be able to call them like this:
console.log(foo.mycolor1);
// or
console.log(foo.myColor1);
I guess my only approach to achieve this, would be to convert everything in, let's say, lowercase when I define those, and then, when I call them back to convert my request into lowercase again.
A little piece of background here; my aim is to provide an SDK to a few developers that they will write their own code for a platform I am working on. These values will be saved by the developers themselves into a database. For some reason, all those values are stored in lowercase. So, I either have to tell them 'no matter how you set them, you should request everything in lowercase', or, ideally, I should find a way to convert everything before their request is post.
An idea would be to write a method, and tell them to make the request like this
foo('mycolor1');
foo, is going to be a function that would handle the case sensitivity easily. But, I would prefer to use the foo.mycolor1 notation, so ... your help is needed :)
FYI, jQuery is available!
Thank you,
Giorgoc
when you render the javascript from DB use toLower() to set the variables names... and then reference them in lower case...