Is there a decent browser-based javascript self-editor? - javascript

Is there a decent browser-based javascript self-editor?
It is obvious one can make a quick js editor with a page containing a form textarea, some buttons and callbacks. I'm wondering if someone has taken that as a beginning and ran with it.
The javascript to be edited could be defined in a global string or it could be a served .js
The ideal editor would show a pretty version inside a browser window and provide some kind of development environment for editing the script.
It is understood that user-written scripts would only exist inside the browser and could not be saved without some additional server-side functionality. The ideal package would discuss and explore this.... but I'd settle for anything that just lets the user make their own simple changes to 100-200 line scripts.

I'm not sure exactly what you're asking for, but does jsbin satisfy your needs?

The hard part of what it sounds like you want to do is going to be parsing the javascript so that you can do intelligent things with it. The CodeMirror library can help you develop something to put on a page.
UPDATE:
Etherpad isn't around anymore but Ace is really nice. It's got a long history and is the engine used by the Cloud9 IDE

There is
http://sourceforge.net/projects/codepress
http://www.cdolivet.com/index.php?page=editArea&sess=4b049cee4477f0820c82231b09e80a91
http://marijn.haverbeke.nl/codemirror/

Do also check out Bespin.

There are also integrated solutions which, in addition to browser-based online editing of JavaScript code, do other things for you, like running the JS code in the browser or hosting it for you.
If you're interested in those, try Erbix.com.

coderun

Related

How to fix these issues in Processing?

I'm a beginner of coding. I have encounter these two problem in learning Processing:
I can't use JavaScript mode in processing.When I change to JavaScript mode in processing, the IDE closed automatically. However, I check the program in task manager, I found that the javaw.exe is still running. I think it maybe the version problem.My processing version is 3.2.1
I can't save my file in processing.The error is that:
image
Can anyone help me to fix these two issues?
If you plan to use p5.js, while the main Processing editor is being developed, I recommend trying the p5.js editor (direct download link for Windows)
It's simpler and iterated much faster than the main Processing IDE, so should be easier to get started.
Additionally, here are few great video tutorial resources for p5.js:
1-6: Foundations of Programming in JavaScript - p5.js Tutorial
Introduction to Programming for the Visual Arts with p5.js
The Nature of Code
Have fun!
JavaScript mode isn't supported in Processing 3 yet. If you want to use the Processing editor, you'll have to download version 2.2.1.
Edit: I thought you were talking about Processing.js, but it looks like you're talking about p5.js. In that case, check out George's answer.
For the saving question: I think that processing always delete all the old files before saving again the new ones. Maybe it could be a problem that you are not running it as administrator. Try that.

Hiding jquery and javascript

I'm working on a mvc application (applies to any website though) and was wondering is it ok to leave exposed jquery and javascript in a view? In other words when i run the program and right click and view source I can see all my jquery and javascript. Is that safe and ok? Is there a way to hide all of that so users can't see that? Thanks for any tips.
There is no way of hiding javascript completely from the user. JavaScript is a client side technology. It executes in the browser. If the browser can execute the script, it can also show it to the user.
You can use JavaScript obfuscator software to make the code harder to read, but you can never hide it completely. See http://www.javascriptobfuscator.com/default.aspx for an online example of this.
JQuery and other libraries are also publicy available so there is no harm in the user being able to access it. There is nothing secret about them.
If you have secrets in the code that you want to protect, you should think about putting the affected code on the server if possible instead of doing the processing on the client.
To make it harder for the interested spy to read you can put your scripts inside .js files and obfuscate them. See How can I obfuscate (protect) JavaScript? for more information.
Javascript is is executed on the client, so no there's not really anything you can do to hide it from the client. All you can really do is make it more difficult for a user to read through your code via obfuscation.
What your are looking for is Obfuscation.
There are very different opinions on why you should or shouldn't use it with Javascript.
See How can I obfuscate (protect) JavaScript?
Nope, you cannot hide your JS - remember that the JS is client side scripting and has to be executable at the client which implies that the browser must have access to it. And when the browser has access to it - the user can see it as well :)
Hiding isn't possible, all your JavaScript is needed client side to make your website functional. However you can obfuscate you JavaScript, in other words make in more ugly so nobody can really understand your code, but the browser will.
To obfuscate you javascript code take a look at:
UglifyJS JavaScript minification
hey you can do one thing onload call an action of server side through Ajax call into by returning javascript it will never show in your view source but it can be visible by firebug but its a way to sequre your javascript protuct from others to use it in a easy way i have done it one of my project even by this method you can hide your html too
There's no way to hide it. Anyway there's no reason to do it. If you want to obfuscate Javascript code, you can find software (obfuscators) that make your code more difficult to understand (for a human) and so called minifiers that make your code smaller.
This is a live example of such tools :
http://closure-compiler.appspot.com/home

JavaScript development - bookmarking lines of code?

I constantly find myself rewriting the same lines of code in the Firebug console to test my application. The application uses UI so much that I don't think unit tests are the solution here? How could I quickly run lines of JavaScript code without typing them again and again?
You can use bookmarklets to do exactly what you're talking about: Running JavaScript in the context of the current window from a bookmark. Bookmarklets need to be fairly short and can be a pain to write (because they're javascript URLs, and so need to be URL-encoded), but you can use a bookmarklet to bootstrap an external script (written normally) into the page and then just call functions in that script, which minimises how much actual bookmarklet code you have to write. More about doing that (including an example) in this answer here on SO.
But in terms of testing: Presumably the UI is underpinned by logic code, it's worth having unit tests for that. There are also unit testing frameworks specifically for web applications that you can use for testing UI features; see this SO question/answer for more. The one you seem to hear about most right now is Selenium.
A couple of others have mentioned GreaseMonkey, and in FF that's certainly an option. The nice thing about bookmarklets is that they work in a wide range of browsers.
To run JavaScript code you have to type it. Or save it somewhere.

how to add text to openwysiwig editor by javascript code outside openwysiwig

I've got page to edit some html code from db, to do that I use openwysiwig http://www.openwebware.com/wysiwyg/demo.shtml which hosts over textarea, functions implemented in editor to insert images and hyperlinks aren't quite suitable for me, so I need to find some piece of code which help me to change/insert text to that area from outside the editor itself.
I've tried to find a solution but I could't find anything valuable; I've only learned that openwysiwig creates iframe over host textarea or something like that; besides that nothing what would solve my problem.
Dunno why FCKEditor got down~voted but it most certainly can do what you need. It has a very usable javascript API which allows you to insert elements into the editor area fairly easily. it integrates well with a wide variety of server tech also and includes a well designed plugin architecture for expansion. Has a lot of support and sample code, and I've used it in tricky ajax-driven environments and am very happy with its capabilities. I can't find any usable Javascript api documents for openwysiwyg. You should be able to get FCK up and running in under an hour I would think
This isn't very helpful perhaps, but something like tinymce or fckeditor is much better documented. I suggest changing.

JavaScript object browser?

I was recently tasked to document a large JavaScript application I have been maintaining for some time. So I do have a good knowledge of the system.
But due the sheer size of the application, it will probably take a lot of time even with prior knowledge around the code and the source code itself in uncompressed form.
So I'm looking for tools that would help me explore classes and methods and their relationships in JavaScript and if possible, document them along the way, is there one available?
Something like object browser in VS would be nice, but any tools that help me get things done faster will do.
Thanks!
Firebug's DOM tab lets you browse the contents of the global window object, and you can inspect a particular object by entering inspect(whatever) in the command line.
You won't be able to use it to detect relationships unless an instance of one object holds an instance of a related object, but it's a start.
You can also use the Options menu on the DOM tab to restrict what's shown to user-defined functions and properties, which should help reduce clutter.
Take a look at Aptana, they have an outline that can help you to determine what are the objects and somtetimes their relationship.
Firebug + uneval(obj) is a simple trick that is often helpful.
I see a lot of people talking about examining the DOM within Firebug. However, from your question it looks like you want something like jsdoc? just add type and class information through comments and jsdoc generates documentation including class relationships. http://jsdoc.sourceforge.net/
Google has a fork of it with added functionality http://code.google.com/p/jsdoc-toolkit/
UPDATE: It's not a fork, it's a rewrite by the developer that wrote jsdoc originally as a perl script. It aims at being more adaptable so you can use whatever js inheritance/events/properties style you'd like. Another feature is that it lets you modify the templates used to generate the HTML in a much simpler way.
We don't know if this JS application is designed to run in a Web browser...
If yes, as advised, Firebug (a Firefox extension) is excellent at debugging JS and exploring Dom.
On the IE side, you have some tools like IEDocMon, Web Accessibility Toolbar (it does more than its name) or Fiddler (unrelated to your question, but still a good tool to have).
Firebug (Firefox) / Dragonfly (Opera) can help you with viewing objects in realtime
Aptana / JS/UML(Eclipse) can help with relationships of objects
This is an old question, but let me answer it anyway.
Use an IDE. Integrated Development Environments were made for jumping around rapidly among the code. The key features you will exercise during exploration are viewing the file structure or outline, jumping to a declaration or usage, and searching the entire project for all instances of a string. If you are using WebStorm, set up a custom scope for files except generated files and node.js to aid in searching.
Run 'npm la | less' which lists all your dependent modules with one line descriptions. You may have never seen moment.js and never need to read the documentation, but taking the time to read a one line summary of it is worthwhile. If you need more information on a tool than one line summary, search for the term on SlideShare. Slides are faster than ReadTheDocs.
Document a little as you go. I'm a fan of forcing people to use notebooks constantly rather than scratch paper. Also, I find adding a one line comment to each JavaScript file is worthwhile. You want to know what should be in each directory of your project. I also recommend building a glossary of the exact meaning of domain terms in your system, e.g., what does "job" in your system.
Finally, you may need to just fire up the application in a debugger and start stepping through parts of it. Most large projects have accreted worth from programmers of various skill levels and motivations.
You are aiming for a level of "conceptual integrity" (to quote Yourdon) or to "grok" the software (to quote Heinlien). It does take some time, cannot be bypassed, and can be done efficiently.

Categories

Resources