How to use Skulpt to eval Python line by line - javascript

The example given by Skulpt runs the interpreter on the whole string containing the python program:
https://github.com/skulpt/skulpt/blob/master/example/calling_from_js.html
Is there a possibility to run the interpreter line by line, for example in order to highlight the Python line which is currently executed?
Thank you in advance.

var program = "print('something')\nprint('something else')";
var programs = program.split("\n");
for(var i = 0; i<programs.length; i++){
//skulpt on `programs[i]` and highlight that line
}
Essentially you just want to do something like this:
Split the full program into a series of lines
Run each line through Skulpt individually (highlight this line as needed)
Slightly modified code from your second link:
<script src="../dist/skulpt.min.js" type="text/javascript"></script>
<script type="text/javascript">
function outf(text)
{
var output = document.getElementById("output");
text = text.replace(/</g, '<');
output.innerHTML = output.innerHTML + text;
}
function runit(prog)
{
//changed this so the function accepts an argument
var output = document.getElementById("output");
output.innerHTML = '';
Sk.configure({output:outf});
try {
var module = Sk.importMainWithBody("<stdin>", false, prog);
var obj = module.tp$getattr('a');
var runMethod = obj.tp$getattr('run');
var ret = Sk.misceval.callsim(runMethod, 10);
alert(ret.v);
} catch (e) {
alert(e);
}
}
</script>
<form>
<textarea id="code" rows="24" cols="80">
class Test:
def run(self, b):
self.a = 10 + b
return self.a
print "Hello World"
a = Test()
</textarea><br>
<button onclick="runit()" type="button">Run</button>
</form>
<pre id="output"></pre>
Then just insert this code wherever you want
var programs = document.getElementById("code").value;
for(var i = 0; i<programs.length; i++){
// Whatever code you want to use to highlight the line goes here
runit(programs[i]);
}

Related

Use slice(); method to achieve an arithmetic operation

My aim is to use a single input to collect numbers and strings then use it to determine a math operation.
For example, I parse in values such as √64 intending to find the square root of 64. Knowing that this is no valid javascript, so I decided to get the first character with result[0]; which is "√" and then slice out the remaining values with result.slice(1); which is "64", then when the condition that result[0] == "√" is true then Math.sqrt(sliceVal) . This seems perfect and runs well in a mobile editor, but doesn't run in any web browser.
function actn() {
var input = document.getElementById("input").value;
var display = document.getElementById("display");
var result = input.toString();
var firstVal = result[0];
if (firstVal == "√") {
var sliceVal = result.slice(1);
display.innerHTML = Math.sqrt(sliceVal);
}
}
I do not know why It is not running at your end but It is working perfectly according to your requirement I tested above code :)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function actn() {
var input = document.getElementById("test").value;
var result = input.toString();
var firstVal = result[0];
if (firstVal == "√") {
var sliceVal = result.slice(1);
alert(Math.sqrt(sliceVal));
}
alert("No match found");
}
</script>
</head>
<body>
<input type="text" id="test" />
<button type="button" onclick="actn()">Test</button>
</body>
</html>
Checking ASCII value instead of character comparison should work.
<html>
<body>
<input type="text" id="input" />
<button type="button" id="sqrRoot">Square Root</button>
<h1 id="display"></h1>
<script>
function actn() {
var input = document.getElementById("input").value;
var display = document.getElementById("display");
var result = input.toString();
var firstVal = result[0];
/* Ascii value for √ is 8730 */
if (firstVal.charCodeAt(0) === 8730) {
var sliceVal = result.slice(1);
display.innerHTML = Math.sqrt(sliceVal);
}
}
document.getElementById("sqrRoot").addEventListener("click", function () {
actn();
});
</script>
</body>
</html>

Substring assignment

I have an assignment in school but I'm totally stuck.
My assignment:
Make a program that ask for a text and then write out the text several times. First with just one letter, then with two and so on. For example, if the user write "Thomas", your program should write out "T", "Th, "Tho, "Thom", and so on.
My hopeless attempt
I been trying to use "Substring" and a loop to make it work but I'm not sure I'm on the right path or not. Right now my code look like this:
<head>
<meta charset= "UTF-8"/>
<title> assignment14 - Johan </title>
<script type="text/javascript">
var text= test.length;
for (i=0;i< test.length;i++)
function printit()
{
var str = test;
var res = str.substring (i, 2);
document.getElementById("test").innerHTML = res;
}
</script>
</head>
<body>
<h1>Assignment 14</h1>
<form name="f1">
<input type="text" id="test" value="" />
<input type="button" value="Hämta" onclick="printit(document.getElementById('test'))" />
</form>
</body>
Just need some kind of hint If I'm going in the right direction or not, should I use some other functions? Very thankful for help.
You have to rewrite a script.When you want to extract one by one you can use substring(); function.
How to Call : StringObject.substring (StartPoint,endPoint);
Solution:
<script type="text/javascript">
function printit(){
var test=document.getElementById("test").value;
var text= test.length;
for (i=0;i<= text;i++)
{
var res = test.substring (i, 0);
document.write(res);
document.write("<br/>");
}
}
</script>
You are on the right way. substring(start,end) in javascript gives you the consecutive part of the string letters from start index to end. You just use it in a wrong way for your case. You have to call it like this:
substring(0,i)
You need to make few changes to your code:
1) use document.getElementById('test').value in printit function call at onclick as you have to send the value of the textbox instead of innerHTML.
2) Modify the printif function-
function printit(test)
{
document.getElementById('test').value=''; /*remove existing text from textbox*/
for (i=0;i< test.length;i++) {
var res = str.substring (0, i+1);
document.getElementById("test").value += ' '+res;
}
}
In printit function empty the text box and then append each substring to the existing text to get "T Th Tho Thom.." and so on
Hope this helps.
I don't use for-loop for this (whenever possible, I prefer functional style). Instead, I write a function that returns an array of substrings:
const substrings = string =>
Array.from(string).map((_, i) => string.slice(0, i + 1))
And here's a working codepen
Output several time using substring() method can be done as below, create a function which performs this task of extracting the user inputted string on button click using forloop and substring() method.
var intp = document.querySelector("input");
var btn = document.querySelector("button");
var dv = document.querySelector("div");
btn.onclick = function() {
var b = intp.value;
for (var i = 1; i <= b.length; i++) {
var c = b.substring(0, i);
dv.innerHTML += c + "<br/>";
}
}
div{
width:400px;
background:#111;
color:yellow;
}
<input type="text">
<button>Click</button>
<br/><br/>
<div></div>
You have used a correct way for doing this, but as one of user suggest the start and end value of substring() was not correct.

Search a variable value as ID in html file

I would like to ask for your help in having a web site that uses the following javascript:
<html>
<head>
...
</head>
<body>
...
<script>
$(document).ready(function(){
var pathArray = window.location.pathname.split( '/' );
var secondLevelLocation = pathArray[0];
var newPathname = "";
for (i = 0; i < pathArray.length; i++) {
newPathname += "";
newPathname += pathArray[i];
}
var str = "asd fgh roof_material";
var res = str.match(newPathname);
if (res) {
document.getElementById("demo").innerHTML = res;
} else {
document.getElementById("demo").innerHTML = "Basic text";
}
});
</script>
<div id="demo"></div>
</body>
</html>
Such as my website address is: https://www.mywebsite.com/roof_material
I get a string in a variable (newPathname) which contains the text after the / sign, in this example: roof_material
The problem is:
I would like to find the value of this variable in a text and if you can find it then you can post it on the website. It's works if I put a text in a variable like in the script:
var str = "asd fgh roof_material";
But I would like to find the value of this variable (newPathname) in a separate html file, if it is possible like this:
The newPathname value such as: roof_material
In the separated .html file content:
<div id="protection_material">Line-X material</div>
<div id="roof_material">Roof materials</div>
<div id="pool_material">Swimming pools</div>
In this example I would like to find the roof_material ID in the .html file and get the content of the div: "Roof materials" and I would like to show this text on the page:
<div id="demo">Roof materials</div>
If it has positive match then show the content of the div in other cases, it will print a basic text like in the example: "Basic Text"
Could anyone help to make it happen?
#Terry thanks for your answer!
I think I found a simpler solution, but it's not perfect:
<script>
$(document).ready(function(){
var pathArray = window.location.href.split('=')[1];
var secondLevelLocation = pathArray[0];
var newPathname = "";
for (i = 0; i < pathArray.length; i++) {
newPathname += "";
newPathname += pathArray[i];
}
document.getElementById("demo").innerHTML = newPathname;
});
</script>
<div id="demo">Országosan</div>
If I type it in the browser such as: https://www.mywebsite.com/index then the text that will appear in #demo div is: "Országosan"
It's good, but if I type such as: https://www.mywebsite.com/index?id=Cserkeszőlő
then the result is good but character encoding does not work properly.
The result in the #demo div: Cserkesz%C5%91l%C5%91 , but I would like to show the correct encoded text like this: Cserkeszőlő
Can you give me a solution on this?

Tried writing a do-while loop statement that prints out my statement, but it's not currently printing it

So, I am trying to write a do-while loop statement that prints out the statement of my loop, but my browser isn't printing my text. How can I edit my code to do so?
<!DOCTYPE html>
<html>
<head>
<title>9. Looping Statements in Javascript</title>
</head>
<body>
<h1>9. Looping Statements in Javascript</h1>
<div id="playlist"></div>
<div id="someResult"></div>
<script>
var playlist = [];
playlist[0] = "Willy Wesly";
playlist[1] = "Childish Gambino";
playlist[2] = "Chance The Rapper";
playlist[3] = "Travi$ Scott";
playlist[4] = "Yeezy";
// while
/*
var i = 0;
while (i < playlist.length) {
var element = document.createElement('div');
element.innerHTML = "Now Playing: " + playlist[i];
i++;
document.body.appendChild(element);
}
*/
// do - while
var someResult = false;
do {
var element = document.createElement('div');
element.innerHTML = 'Will print AT LEAST once!';
}
while(someResult);
</script>
</body>
</html>
You need to add the element to the document body.
var someResult = false;
do {
var element = document.createElement('div');
element.innerHTML = 'Will print AT LEAST once!';
//You need to add it to the body for it to show on the page
document.body.appendChild( element );
}
while(someResult);
JSFiddle showing this: http://jsfiddle.net/azgxh59q/

Javascript replace function in same field

My code
<!DOCTYPE html>
<html>
<body>
<input type="text" id="text" value=""><br>
<button onclick="myFunction()">Submit</button>
<script>
function myFunction() {
var str = document.getElementById("text");
var res = str.replace("1", "2");
document.getElementById("text") = res;
}
</script>
in input field i am taking some input from user on (click) submit i want to replace all 1 with 2 and i want to display result in same field but its not working..
You need to get the value
function myFunction() {
//getElementById returns dom object
var el = document.getElementById("text");
//you want to replace its value
var str = el.value;
//use a simple regex to replace all instances
var res = str.replace(/1/g, "2");
//set the value property of the target element
el.value = res;
}
Demo: Fiddle, short version
This is what you want:
function myFunction() {
var inputElt = document.getElementById("text");
var res = inputElt.value.replace("1", "2");
inputElt.value = res;
}
Your line:
document.getElementById("text") = res;
instead, should look like this:
document.getElementById("text").value = res;

Categories

Resources