Debugging dynamically generated/loaded JavaScript code INSIDE the host JavaScript - javascript

The title probably isn't saying much at all, but hopefully it got someone interested.
The actual problem is quite simple.
I want to make a web application that loads JavaScript code dynamically (might even be a hardcoded string) as a string, then I want to run that code line by line and analyze the debug info every step.
Basically, I need a JavaScript interpreter/debugger written in JavaScript.
Hopefully, I'd be able to do something like this
var source = "var a = 5; var b = a; b = 6"
var vm = new VirtualMachine(source);
vm.step();
vm.getDebugInfo();
and it would tell me about the local variables and their values.

This project hasn't been updated in a while but maybe you could build something for your purpose around it
https://github.com/jterrace/js.js/ - A JavaScript JavaScript interpreter

Related

How to get checked property's value from passed control id in javascript function?

So I have this JS script:
<script>
function getCheckedProperty(obj,args)
{
if(document.getElementById("<%=checkbox1.ClientID %>").checked)
return true;
else
return false;
}
</script>
This only works for checkBox1. I want to be able to pass control id from parameters, so that it can return value of passed control. Also, please, respond with the usage.
<asp:CustomValidator runat="server" ClientValidationFunction="getCheckedProperty()></asp:CustomValidator>
TIY. SRJ.
Check this question it might have your answer.
if I get it right you want to get ids dynamically for example checkbox1, checkbox2,...
You can add the dynamic part to the id like this:
for (var i = 1; i < n; i++) {
var id = "checkbox" + i;
var ch = document.getElementById(id);
if (ch.checked == false)
return false;
}
return true;
Unfortantly, this is a real problem. The control name(s) are generated at runtime, and ALSO THIS:
document.getElementById("<%=checkbox1.ClientID %>")
So at page render time, the .net pre-processor will SWAP out the <% %> at render time.
this is also why you can't say have the js code in a external library and expect this to work.
However, your DEAD OBVIOUS question remains. Stuff a name into a simple variable and use that to get the control. After all, we can't and would not want to HARD code the value as per above, and it would be beyond silly to assume we ONLY have a means to HARD code references to controls.
So, you want of course this:
var MyControl = 'Checkbox1';
var ckBox = document.getElementById(MyControl);
if (ckBox.checked)
alert('Check box ' + MyControl + ' is checked!');
else
alert('Check box ' + MyControl + ' is UN-checked');
Now in fact the ABOVE can and will work if you force the control name generation as static.
so, here is the markup:
<asp:CheckBox ID="CheckBox1" runat="server" ClientIDMode="Static" />
So, if you ARE able and ARE willing to use ClientIDMode static, then the .net processing will NOT re-name your control. As a result you can do this:
var MyControl = 'Checkbox1';
var ckBox = document.getElementById(MyControl);
Or, even this (as HARD coded)
var ckBox = document.getElementById('CheckBox1');
Or even this:
var ckbox2 = document.getElementById(<%= CheckBox1.ClientID %>);
Now, the last one above? Well, we ARE useing the .net pre-processor to swap out the name - but it will still work - and clientID will not be changed - but the pre-processor is STILL involved.
AGAIN: the <%= 'SomeControlName.ClientID%> ONLY works because this expression is SWAPPED out at runtime by the .net web page pre-processor. This occures BEFORE the js code is run.
So you can NOT use a variable in the above <%=%> expressions since the js code HAS NOT even run and the new js code has not even been generated at this point in time.
In effect, you would (have to) do a PAGE search for the control. If you can NOT adopt ClientIdMode="static", then you MUST SEARCH the page.
You can write your OWN search routines - kind of like adopting a nice road to world poverty, or you bite the bullet, and adopt a library that WILL do the heavy lifting for you.
So, without using (forcing) StaticID on the control? then you now have to accept the BIG HUGE LARGE MASSIVE decision and introduce jQuery into your application.
jQuery is able to scour and search and look and loop and find that control for you on the web page. This is a cost not without processing cost, and not without a big speed penalty.
So, without staticID's, then you can adopt jquery and do this:
<script src="Scripts/jquery-3.5.1.js"></script>
<script>
// so if you decide and adopt jQuery, then it can do the searching for you
// BUT YOU ARE now adopting and committing to a whole new js library
// so, with jQuery we cna do this:
function jstest2(){
var ckbox2 = $('#CheckBox1');
var ckboxdom = ckbox2[0];
alert('status of check box = ' + ckboxdom.checked);
// of course the above is STILL hard code
// get control by runtime or NON hard code
// get (search) for check box based on control name in
// a variable
var MyCheckBox = 'CheckBox1';
var ckbox3 = $('#' + MyCheckBox);
var ckboxdom3 = ckbox3[0];
alert('status of check box = ' + ckboxdom3.checked);
</script>
I found after doing a nuget of jQuery, the fans on my laptop became too hot to even keep on my lap. But, things did settle down, and eventually the VS editors caught up, and things did settle down.
Also keep in mind that you have to re-learn how to reference a simple control.
eg:
<script>
function getbox() {
var tbox = document.getElementById('TextBox1');
alert(tbox.value);
// jQuery example
var tbox2 = $('#TextBox1');
alert(tbox2.val());
}
</script>
So notice now, how the long time js standard and approach is "value" as a property?
Well, now you using .val() that is a function (method) of that search result. So just keep in mind that by adopting jQuery, then all of your code that needs to get simple values from controls has to under go a syntax change, and you as a developer will have to re-lean how to reference a simple control with new syntax. The check box is a great example - it now becomes a array, and you use that array to get at the checked property.
And same in above for a simple grab of a value from a text box.
Notice how the syntax and approach to getting the value of the text box NOW has changed!!!! So you need a cheat-sheet since simple things like value now become .val().
And the same changes occur for say a label on a web page (again syntax changes).
You will ALSO notice that the results of the check box example are an array!!! So we had to drill down into the resulting array[] to get the "checked" value.
Of course how big of a deal your code changes are by adopting jQuery? Well, it depends, on relative medium sized or even a small project? $20,000 was budgeted and we still changing things.
On larger projects you simply need more manpower and would add another zero to the above cost to adopt jQuery.
However, jQuery is now widespread used, and it will do the "dirty work" of searching the DOM for you, and if you need runtime resolution as opposed to compile time resolution to find a simple control on a web page, then jQuery is probably your best choice. And I find that jQuery is really nice for ajax calls - so while it is a big change, it still well worth the effort to adopt the jQuery library and risk introducing this framework into your existing projects.

Convert a javascript variable to scala in play framework

I have some variables in javascript:
var something = 1;
var url = "#CSRF(routes.Some.thing(something))";
I get an error during compilation because "something" does not refer to the javascript variable, in other words; the compiler can't identify it. Is it possible to convert/inject the javascript variable somehow? Also, does this work in real time in javascript or do I need to prepare an "#CSRF(routes.Some.thing(something))" array containing each possible "something" value?
It's supposed to be a simple rest call, seen in routes file:
/something/:something controllers.Some.thing(something : Long)
An alternative would be to use a form, but I want to try not to.
You need to use a Javascript Routing and add the CSRF token to the request.
Javascript Rounting description: https://www.playframework.com/documentation/2.6.x/ScalaJavascriptRouting
Look at my answer to the question with explanation how to use it for assets("Correct and long solution"), the usage for other activities is the same: How to update src of a img from javascript in a play framework project?
So in your case, the Javascript routes generation can look like:
JavaScriptReverseRouter("jsRoutes")(
routes.javascript.Some.thing
)
And in the JavaScript:
var something = 1;
var url = jsRoutes.controllers.Some.thing(something).url;
The last - do not forget to add Csrf-Token header to the request.

JavaScript: Change objectHTMLScriptElement

I am currently working within a CMS, cleaning up 12 websites.
Currently there are 12 identical JS files each residing within their respective site. Since they are all the same, my first initiative is to point every site to a single JS file that lives on the server.
Because I'm working within a CMS, I would have to open up 200 templates to accomplish this feat manually, so I'd, of course, rather do this dynamically.
Here is what I have done, so far:
var scripts = document.getElementsByTagName ("script");
console.log(scripts[15]);
My console.log statement returns what I'd like to replace, which is this:
<script src="/Assets/AmericanTower.com.br/uploads/content/js/main.js">
When I use alert(); rather than console.log(); I get this:
[object HTMLScriptElement]
I don't really understand why alert and console.log are showing me 2 different results.
So, I gather that I need to find a way to convert this HTMLElement to a string and then replace the string(or part of it) with the path to my new JS file.
Can anyone please shed some light?
Thank you in advance!
Robin
===============================
Thank you, L.C. Echo Chan, for your contribution. Here's how I used your suggestion and it worked like a charm!
var scripts = document.getElementsByTagName("script");
var jsPath=scripts[15].outerHTML;
var changedURL=jsPath.replace(jsPath,"RegionalGlobalAssets");
alert(changedURL);
Using outerHTML property can return the entire element
var scripts = document.getElementsByTagName("script");
alert(scripts[15].outerHTML);
Try to set you code as that
var scripts = document.getElementsByTagName("script");
console.log(scripts[15]);

Unable to create a MozillaBrowserBot object

I tried to get the MozillaBrowserBot object in mozilla js. But it is not giving the object. I used the code as below:
function externalApplication(){
var wm = Components.classes["#mozilla.org/appshell/window-mediator;1"].getService(Components.interfaces.nsIWindowMediator);
alert("wm: "+wm);
var contentWindow=wm.getMostRecentWindow('navigator:browser').getBrowser().contentWindow;
alert("contentWindow: "+contentWindow);
//I am not gettting this pageBot object
var pagebot=new MozillaBrowserBot(contentWindow);
alert(pagebot);
}
I want to add the find option to the xpath checker. If the MozillaBrowserBot is related to selenium IDE then is there any possibility to get the pagebot object?
Judging by Google search results, MozillaBrowserBot is something that's defined by Selenium IDE. Also, it is apparently defined in the content page you got, not in the context where your code executes. That means that the proper invocation would be:
var pagebot = new contentWindow.MozillaBrowserBot(contentWindow);
This is based on a bunch of guesses of course since your question doesn't provide any context information whatsoever.

ASP.NET inline server tags

I'd like to start by saying that my code is working perfectly, this is more a "how best to do it" kind of question.
So I have code like this in my .aspx file:
function EditRelationship() {
var projects=<%= GetProjectsForEditRelationship() %>;
// fill in the projects list
$('#erProjectsSelect').empty();
for(var i in projects)
$('#erProjectsSelect').append('<option value='+projects[i][0]+'>'+projects[i][1]+'</option>');
var rels=<%= GetRelationshipsForEditRelationship() %>;
// etc
}
Again, it's working fine. The problem is that VS2008 kinda chokes on code like this, it's underlining the < character in the tags (with associated warnings), then refusing to provide code completion for the rest of the javascript. It's also refusing to format my document anymore, giving parsing errors. The last part is my worst annoyance.
I could put some of these in evals I guess, but it seems sorta dumb to add additional layers and runtime performance hits just to shut VS up, and it's not always an option (I can't remember off the top of my head where this wasn't an option but trust me I had a weird construct).
So my question is, how do you best write this (where best means fewest VS complaints)? Neither eval nor ajax calls fit this imo.
If your aim is to reduce VS complaints, and if you are running asp.net 4 (supporting Static client Ids), maybe a strategy like the following would be better?
Create a ASP:HiddenField control, set its ClientIdMode to "Static"
Assign the value of GetRelationshipsForEditRelationship() to this field on page load
In your javascript, read the value from the hidden field instead, I assume you know how to do this.
It's more work than your solution, and you will add some data to the postback (if you perform any) but it won't cause any VS complaints I guess :)
You could do this from your page in the code-behind
ClientScript.RegisterArrayDeclaration("projects", "1, 2, 3, 4");
or to construct something like JSON you could write it out
ClientScript.RegisterClientScriptBlock(GetType(), "JSONDeclarations", "your json stuff");
UPDATE Based on my comment
<script id="declaration" type="text/javascript">
var projects=<%= GetProjectsForEditRelationship() %>;
var rels=<%= GetRelationshipsForEditRelationship() %>;
</script>
<script type="text/javascript">
function EditRelationship() {
// fill in the projects list
$('#erProjectsSelect').empty();
for(var i in projects)
$('#erProjectsSelect').append('<option value='+projects[i][0]+'>'+projects[i][1]+'</option>');
}
</script>
I don't have VS2008 installed to test with, so take this with a grain of salt, but have you tried something like this?
var projects = (<%= GetProjectsForEditRelationship() %>);
Something like that might trick the JavaScript parser into ignoring the content of your expression.
For what it's worth, VS2010 correctly parses and highlights your original code snippet.
Is it an option to move this to VS2010? I just copied and pasted your code and the IDE interpreted it correctly.
The best solution is to put javascript in a separate file and avoid this entirely. For this particular function, you're doing server-side work. Why not build the list of options that you intend to add dynamically in codebehind, put them in a hidden div, and then just have jQuery add them from the already-rendered HTML?
If you have a situation where you really want to dynamically create a lot javascript this way, consider using ScriptManager in codebehind to set up the variables you'll need as scripts and register them, then your inline script won't need to escape
ScriptManager.RegisterClientScript("projects = " + GetProductsForEditRelationship());
(Basically, that is not the complete syntax, which is context dependent). Then refer to "projects" in your function.
(edit)
A little cleaner way to do this on a larger scale, set up everything you need like this in codebehind:
string script = "var servervars = {" +
"GetProductsForEditRelationship: " + GetProductsForEditRelationship() +
"GetRelationshipsForEditRelationship: " + GetRelationshipsForEditRelationship() +
"}"
and refer to everything like:
servervars.GetProductsForEditRelationship
If you do this a lot, of course, you can create a class to automate the construction of the script.

Categories

Resources