How to have a user input to Math.js - javascript

I want to be able to convert a user given amount to another quantity on a website using Math.js and an input box but whatever I try will not be able to get the users input from the input box labeled "convert" and change it. How could I achieve this?
http://jsfiddle.net/zFuNs/1/
<!DOCTYPE html>
<html>
<head>
<title>Convert</title>
<script type="text/javascript" src="https://raw.github.com/josdejong/mathjs/master/dist/math.js"></script>
</head>
<body>
<input type="text" id="convert"></input>
<script>
function print(value) {
document.write(math.format(value) + '<br>');
}
print(math.eval('"TEXT IN CONVERT BOX HERE" inch in cm'));
</script>
</body>
</html>

Try learning some basic JS, and some library like jQuery.
jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on
your website.
jQuery takes a lot of common tasks that require many lines of
JavaScript code to accomplish, and wraps them into methods that you
can call with a single line of code.
jQuery also simplifies a lot of the complicated things from
JavaScript, like AJAX calls and DOM manipulation.
here is a working example of your question http://jsfiddle.net/zFuNs/3/
$('#convert').click(function () {
var cm = math.eval( $('#inch').val() + ' inch in cm' );
$('#cms').text(cm);
});

Related

Make an animation with the Glorious JavaScript library

I have been trying to use the library to make material for my students.
https://glorious.codes/demo
I want to make animations, but I cannot understand how to use or where to use the library. I think it is necessary to use it from an html file. install the library but when opening the page it only creates the text that I place as a test.
I am using WebStorm as IDE, creating a node.js project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="node_modules/#glorious/demo/dist/gdemo.min.css">
<script src="node_modules/#glorious/demo/dist/gdemo.min.js"></script>
</head>
<body>
</body>
</html>
Can someone guide me on what program or how to work with the library. It is the first time that I try to perform animation with JavaScript.
If you are new to web technologies, there is a pretty steep curve here. Personally, I'd take a step back and familiarize myself with the tools. If you have a minute, check out W3school's site. There is plenty of information to get you moving quickly with HTML/CSS/JS. Specifically focus on CSS selectors and Javascript and this will make a lot more sense.
Now for the question you asked:
First, NodeJS isn't necessarily required to achieve your goal. You can create a simple HTML file and reference the Glorious libraries directly from the web. See what I did in the <script> and <link> elements below.
Once you have the libraries loaded, you need to:
Instantiate the library and assign it to a variable to use in the future (see const demo = new GDemo(...))
Tell the library where in your HTML you want it to render the animation. In this case it is a <div/> with id='container'.
Tell the library what to render. This is the gDemo.openApp(...) section. I pulled this example directly from this library's GitHub page.
const gdemo = new GDemo('#container');
const code = 'console.log("Hello World!");'
gdemo
.openApp('editor', {
minHeight: '400px',
windowTitle: 'demo.js'
})
.write(code, {
onCompleteDelay: 2000
})
.openApp('terminal', {
minHeight: '400px',
promptString: '$'
})
.command('node ./demo')
.respond('Hello World!')
.command('')
.end();
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/#glorious/demo/dist/gdemo.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/#glorious/demo/dist/gdemo.min.css" rel="stylesheet" />
</head>
<body>
<div id="container"></div>
</body>
</html>
Could you please detail a bit more the problem. From your example you just created an empty page. What are you trying to put in your page ? Tables ?
Also I would suggest the use of framework like Materials (https://material.io/components) within React if you are starting a Js project from scratch except if you have something specific in this lib you really want to display.

HTML will not execute JavaScript functions

I am trying to get a very simple javascript project going, but I cannot get any function to execute. Here is a simple example. It is obviously just an example. I have tried everything I can think of to get the browser to recognize that I am trying to call a function that has been defined, but it never does anything but just display the text, rather than call anything. In the below example, I simply get a page with the text: "varTimesTwo(3);"
<!DOCtype html>
<html>
<body>
<script>
function varTimesTwo(oneVar){
return (oneVar * 2)
}
</script>
varTimesTwo(3);
</body>
</html>
your code is wrong, you have to place varTimesTwo(3); inside the script tag, like this:
<!DOCtype html>
<html>
<body>
<script>
function varTimesTwo(oneVar){
return (oneVar * 2)
}
varTimesTwo(3);
</script>
</body>
</html>
Keep all JavaScript code in the script tags, or better yet, in a file
separate from the html file using <script src="myjsfile.js"></script>
You can use document.write(string) to write a string to the document.
This string is treated as HTML so you need to use <p>text</p> or <br> to get line breaks.
<!DOCtype html>
<html>
<body>
<script>
function varTimesTwo(oneVar){
return (oneVar * 2)
}
document.write("3 times two is "+varTimesTwo(3));
</script>
</body>
</html>
Alternatively, you can use window.alert(string) or simply alert(string) to pop up an alert box. But if you have turned off pop-ups in the browser, these will not pop up.
<!DOCtype html>
<html>
<body>
<script>
function varTimesTwo(oneVar){
return (oneVar * 2)
}
alert("3 times two is "+varTimesTwo(3));
</script>
</body>
</html>
console.log(string) writes to the debugging console, which you can see on many browsers with either control-shift-J or F12.
The javascript debugging console is also useful for learning javascript without messing with input and output. Anything you type in the JS console is immediately executed, so you can define functions there and play with them without having to write additional code to write the output or read input.
Finally, these techniques are insufficient for most websites as they are actually used. Instead, what is done is to define an html container element and change the text or html that is inside. jQuery provides a browser-independent method of manipulating the document to change items on the page.

New to Google Apps Script's HTML service

I'm just starting to use Google Apps Script's HTML service to create a UI. Starting out very basic and Google's documentation seems to be very incomplete (let me know if I missed something). I followed this example: https://developers.google.com/apps-script/guides/html/reference/run#withUserObject(Object) and got it to work, but I don't understand where the "this" came from (in the HTML code) and how the order of operations works there.
In order to wrap my mind around this, I'm trying to make something where I can put in text, push a button, and it will display the same text in all-caps. Here's what I've got so far:
Google Script:
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function capitalize(input){
return input.toUpperCase();
}
</script>
</head>
<body>
Put some text here: <input type="text" name="words"><br>
<input name="button" type="button" value="CAPITALIZE" onclick="google.script.run
.withSuccessHandler(capitalize)
.withUserObject(words)"><br><br>
Here is your text:
</body>
</html>
Any help is GREATLY appreciated!
The documentation for .gs is actually really good. Don't go into any language's docs expecting "full explanations" for every use case though.
google.script.run is only needed when you want to pass data to a server-side .gs function ( as documented at the top of the page you linked to ).
What you're asking for seems to be all client-side manipulation though, with no need to pass data to a .gs function.
try these adjustments:
// get value of a text box and set it into html of a <span> element
function capitalize(){
document.getElementById('userInput').innerHTML =
document.getElementById("words").value.toUpperCase();
}
onclick="capitalize()"><br><br>
Here is your text:<span id="userInput"></span>

Beginner JavaScript: using src

EDIT:[Honestly this works fine you can read my edit comment below.]
So I am very new to JavaScript. This book I have tells me that I can write the script code in another file that has a .js extension. What it doesn't tell me is what should be in that .js extension.
<html>
<head>
<title>Title of Document</title>
<script src="path/to/file/fileName.js"></script>
</head>
<body>
The content of
your page goes here.
</body>
</html>
Lets say I wanted to make an alert message in the java script file. Inside the "fileName.js" would all I write be:
alert("This is an alert box");
and then save it and call it quits? Cause that is what I have so far and nothing doing.
EDIT:
Ok I want to add this in for anyone in trouble like I was. Turns out, this works perfectly. The comments below are a great help for further information. But the thing I did not realize was that on my Mac I needed to start the path to file at /Users. I feel dumb but at least I figured it out. Thanks all for your help.
Use " instead of ”:
<script src="path/to/file/fileName.js"></script>
^ ^
Generally your js files will have objects and Methods that are called/used from you main page.
So you html wiil look like :
<html>
<head>
<title>Title of Document</title>
<script src="path/to/file/fileName.js"></script>
</head>
<body onload="showAlert();">
The content of
your page goes here.
</body>
</html>
and you js will look like:
function showAlert(){
alert("This is an alert box");
}
Look into events and listeners. For example, if you want the alert to come up when the page loads, your html file would have:
<body onload="functionName()">
</body>
And you javascript file would have:
function functionName() {
alert("alert message");
}
Usually you would write your Javascript code as a series of functions that you can call whenever you need. So yes, you can write a single statement the way you did but most times its functions.

Option to display formatted C program in iOS

What are the option that I can use to display formatted C Program in iOS. What I can think of right now is
1. Make a HTML file with code in it, and find some CSS to display in web view. Not a good option as I have to manually handle formatting.
2. Use some kind of parser to convert it in NSAttributedString and then display it in UITextView.
If correct option is one , pointer to any such CSS or java script would be great help, or if option is two is there any such parser available.
Or is there any other option to achieve same.
Lookd in pretty print and looks like it can format cpp see the following example:
You could try to paste your code in here and have it formatted (if you don't need it done dynamically). Then use Firefox with firebug plugin to right click the element, go to the root and copy the thml. Copy the css files as well (under the CSS tab you can find them)
<!DOCTYPE html>
<html>
<head>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Example</title>
</head>
<body>
<pre class="prettyprint lang-cpp">
int
foo(int k)
{
if (k < 1 || k > 2) {
printf("out of range\n");
printf("this function requires a value of 1 or 2\n");
} else {
printf("Switching\n");
switch (k) {
case 1:
printf("1\n");
break;
case 2:
printf("2\n");
break;
}
}
}
</pre>
</body>
</html>
Currently there is no API available for do this.
My suggestion:
Convert your code to html and load it in UIWebView. I know there is a lot of difficulties behind this.
You can use codeformatter for converting your code to html. Hence there is no api's available this is one solution.
I had wrote an open-source library for doing this.
Please check MMP_CodeViewer
iOS port of Vim editor is available here. Not sure if you are looking for code editing as well.

Categories

Resources