I am trying to make a graph of a simple function y=k*x+b.
A user enters a function into the input field, for example:
1/3*x+3
and when he/she clicks the submit button, a JavaScript function is supposed to take this input value as an actual calculation sequence and assign a variable to it (I only need to get certain y values here, so the x variable has its limits):
for (x=1;x<=40;x++)
{
result = window.document.menu.inputFunction.value;
}
The above code doesn't work. No wonder why - I am just a beginner at this. However, is this really harder than it looks, or am I missing out something? I considered trying regular expressions for this at one point, but my head hurts by even thinking about using them.
Any ideas?
You could eval it:
result = eval(window.document.menu.inputFunction.value);
There are obviously some limitations to this approach:
The user must enter a valid javascript expression
The user must use x as variable name because that's what you are using in the loop
The code is vulnerable because the user can enter and execute any javascript expression he likes
For a more robust solution you might consider using a javascript mathematical expression evaluator.
Related
I'm learning how to integrate Javascript into HTML, and I had an idea for some odd code. I can't say for certain if there is something wrong with it.
My goal was to create a counter that is displayed on the page that starts at 1 and increases every time a function is called.
My original code was something like this:
<p id="counter"></p>
<script>
var turn = 1, turn_counter = document.getElementById('counter');
turn_counter.innerHTML = turn;
function increase() {
turn++
turn_counter.innerHTML = turn;
}
</script>
The variable turn would keep track of a number, and turn_counter would keep track of the <p> tag. The contents of this tag were then set to turn. When the function increase() was called it would increment turn and then adjust the tag to match.
However I realized there was a potential simpler solution:
<p id="counter">1</p>
<script>
var turn_counter = document.getElementById('counter');
function increase() {
turn_counter.innerHTML++
}
</script>
This writes "1" inside the <p> tag and then sets the variable turn_counter to that tag. Then whenever the increase() function is called it simply increases the number inside the tag.
While both solutions work, I feel like there must be some problem with using the second one. Something about storing a variable inside an HTML tag doesn't feel right. So are there any problems with the second solution?
(Also if there are any better ways of doing this I'd be open to them. I'm still very new to this.)
While with the first solution you are actually storing a variable in Javascript in the second example you are making use of Javascript "quirks" but it's probably not what you wanted.
When you read the innerHTML of the counter div, Javascript finds a string number, as "1" but since "1" is shallow equal to 1, Javascript tries to apply mathematics to it and does what you asked.
Is it working? Yes.
Is it bad? Also yes.
But why is it working? It's working because of Javascript's type coercion and type casting based on that.
Why is it bad? It's not bad because of type coercion, it's not good because of the fact that you are saving your application state on the UI layer which is doable but not a good op.
You are not storing a variable in this case, you are just making use of Javascript weird behaviors. You could potentially parse the innerHTML to turn it into a number but it's yet far from a solution as you wouldn't properly save "state" for your javascript application, which is where to logic resides!
You could see HTML as the UI layer (unstyled) but you want to keep the logic (like variable declaration and usage) inside Javascript.
As proposed by #GrafiCode in the comments, you could
const whatAmI_1 = div.innerHTML + 1
const whatAmI_2 = div.innerHTML++
typeof whatAmI_1 // string, 11
typeof whatAmI_2 // number, 2
This is because the increment operator (++) parses the string, casts it to a number and applies the necessary incrementation while the + 1 is seen as a concatenation of strings as the second value (+1) gets parsed and casted to string by Javascript.
#Wiktor Zychla noted that maybe the word "quirks" is not explicative enough about the choices made by Javascript. Type coercion is not something bad or wrong, it's part of Javascript and if you know what it is and how to use it, you can do a lot of things.
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.
I know if I pass {{variable}} (like a {{event.text}}) in args field of action form works fine.
But, when I try concatenate this variable with a another String, this not work.
Result in {{state.api_url}}/users string, and I need http//myapi.com/users
Is it possible?
I may have an extremely kludgy workaround for this based on bad javascript.
I was looking to iterate a temp variable downwards. I did the assignment in the raw code box for a transition
Good code like temp.variable==1 would be a true/false test.
But just using one equals sign performs the assignment.
So temp.variable=temp.variable-1 in the raw code box subtracted one from my (numeric value) variable.
This seems to return False for the purposes of the transition so it doesn't matter where you point it as long as it's in the chain.
It seems to work for me, anyway.
I'm properly not sure what your code would look like, perhaps you make a new variable then do a transition with
temp.variable_you_just_made=state.api_url+'/users'
then call that variable doing your url thing?
[Looking around I come to suspect the correct thing would be to make a new action https://botpress.io/docs/10.0/getting_started/trivia_actions/ but I am new to all this]
I have to explain how a specific Javascript code validates a web form, but I am stuck with what some of the features do, most specifically this section of the code. I understand that the first line defines that the rest of the section should only run if the field Field1 of the form ExampleForm is left empty, but I do not know what purpose the rest of the code serves. All I know is that msg is a variable created earlier in the document with an empty default value, and that result is another variable with a default value of true. Can anyone help me out by explaining what each line does?
if (document.ExampleForm.Field1.value=="") {
msg+="You must enter your name \n";
document.ExampleForm.name.focus();
document.getElementById('Field1').style.color="red";
result = false;
}
In plain english:
If the document form field value is equal to an empty string, set the error message to msg, then focus on the element, and give is a red color so the user knows it's an error, and set the result to false, for whatever you're going to use that for later in your code/function.
So this would in part depend on what other code is on the page. For example document.ExampleForm is not part of the DOM and seems to be something someone kludged onto your page.
Overall I would say this is pretty bad code that makes a ton of assumptions that won't necessarily hold up written by someone who doesn't understand in-browser javascript very well, but let's go with it
//if the value in this variable is falsy (false, empty, or 0)
if (document.ExampleForm.Field1.value=="") {
//Append this to the msg string. Note \n is usually used
//to indicate "new line" but wont' do anything on the web since that's not how line breaks
//work on the web
msg+=”You must enter your name \n”;
//Invoke the `focus` field on this variable. From the context I assume this is
//a DOM node so you are basically focusing it in the browser
document.ExampleForm.name.focus();
//Set the font color of '#Field1' to red
document.getElementById('Field1').style.color=”red”;
//Presumably result is something that tells you true/false did the validation succeed.
//set it to false to indicate failure.
result = false;
}
My guess about what document.ExampleForm is that it depends on some undocumented behavior of an old browser to add anything with id=ExampleForm to the document element. But really I have no idea. Maybe you have some code elsewhere that creates that variable. Either way its a horrible idea and should get someone yelled at.
Basically, I have a user input field where a user can enter a number. They would like to also be able to enter equations in the input field as well.
Something like "874.45 * 0.825 + 4000" and have that converted to its real numeric value.
All the solutions I found point to the dreaded eval() method. Especially with this being a user entered field, I'm concerned about just running eval("874.45 * 0.825 + 4000") and hoping to get a number out the back end.
I suppose I could do a web service call back to the server (ASP.NET), but I'm afraid a slight delay will create some frustration from the user.
Does anyone know of either a good technique or existing libraries?
What you really need here is an "expression parser", because you're trying to allow users to express their values using a small domain-specific language.
The basic mechanics work like this:
Tokenize their expression into operators and operands.
Based on the order of operations (e.g, where multiplication is evaluated with higher priority than addition), push the operators and operands onto a stack.
Pop the operands from the stack and push intermediate results back onto the stack. Repeat until the stack is empty.
I've done this a gazillion times for different "little languages" throughout my projects. But never in javascript. So I can't directly recommend a suitable parsing library.
But a quick googling reveals "PEG.js". Check it out here:
http://pegjs.majda.cz/
All of the examples in their documentation are for exactly the kind of "expression parser" you're trying to build.
Simply multiply it by 1 and it will force javascript to treat it as an integer from then on.
Eg
int = '2343.34' * 1;
int = input * 1;
And what is so wrong about the eval in this case?
As for me it perfectly fits in your task. If you want to shield its execution context then you can define function like:
function calc(str) {
var window = null, self = null, document = null;
// other globals like: $ = null, jQuery = null, etc.
try { return eval(str); } catch(e) {...}
}
and use it where you need to interpret the string. Simple and effective.
I think eval can pose a lesser security risk if you parse the resulting string and validate its content to be only digits and operators and execute the evaluation by faking the outer scope variables like document etc as 'var document = null'.