- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试构建一个演示站点来帮助其他人学习编码。我在评估用户从代码输入时遇到问题。我知道我可以使用 eval()
函数,但我会举出很多例子,而且有很多 eval()
函数似乎不是最佳选择或简洁的。如果我要使用 eval()
,那么最佳实践的最佳实现方式是什么?
或者,有没有一种方法可以实现一个简单的编译器或一个通用函数,并分配一个按钮单击以运行所述函数,该函数将在编辑器中评估代码并将其显示在页面上的某个位置。
我目前正在使用 Ace给我的编辑。也许他们的 api 中有一个函数可以执行此操作,但我找不到它。我也知道我可以使用代码镜像,但也不确定他们的解决方案。任何帮助将不胜感激。
Here是 JSBIN 的链接(注意:代码编辑器不会显示在这里,因为我不需要库。
Here是指向我拥有功能版本的网站的链接。
如果您需要查看我在下面发布的代码:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Learn to Code with Codesmith</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<link href='style.css' rel='stylesheet'>
<style type="text/css" media="screen">
</style>
</head>
<body>
<!-- <div class="page-wrapper">
<a class="btn trigger" href="javascript:;">Click Me!</a>
</div> -->
<div class="modal-wrapper">
<div class="modal">
<div class="head">
<a class="btn-close trigger" href="javascript:;"></a>
</div>
<div class="content">
<form class="" action="" method="post">
<input id="username" type="text" name="name" value="" placeholder="Username">
<input id="password" type="text" name="name" value="" placeholder="Password">
<button id="login-submit" type="button" name="button">LOGIN</button>
</form>
</div>
</div>
</div>
<div class="menu">
<!-- Menu icon -->
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<!-- Menu -->
<ul>
<li class="main-cat"><a href="#">FOUNDATIONS</a></li>
<ul>
<li class="sub-cat"><a href="#">Intro to Javascript</a></li>
<li class="sub-cat"><a href="#">Algorithms</a></li>
<li class="sub-cat"><a href="#">Data Structures</a></li>
<li class="sub-cat"><a href="#">Data Types</a></li>
<li class="sub-cat"><a href="#">Syntax</a></li>
<li class="sub-cat"><a href="#">Variables</a></li>
<li class="sub-cat"><a href="#">Strings</a></li>
<li class="sub-cat"><a href="#">Arrays</a></li>
<li class="sub-cat"><a href="#">Objects</a></li>
<li class="sub-cat"><a href="#">Functions</a></li>
<li class="sub-cat"><a href="#">Scope</a></li>
</ul>
<li class="main-cat"><a href="#">Intermediate</a></li>
<li class="main-cat"><a href="#">Advanced</a></li>
</ul>
</div>
<!-- Main body -->
<div class="nav">
<button class="sign-up" type="button" name="button" onclick="">SIGN UP</button>
<!-- <a class="btn trigger" href="javascript:;">Click Me!</a> -->
<!-- <button class="login trigger" type="button" name="button" onclick="">LOGIN</button> -->
<a class="login trigger" type="button" name="button" onclick="" href="javascript:;">LOGIN</a>
<div class="icon-menu">
<i class="fa fa-bars"></i>
Menu
</div>
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/JeyH_8pWVJ4" frameborder="0" allowfullscreen></iframe>
</div>
<div class="code-snippet sandbox">
<pre id="editor"> // Write your code here and when finished, click the run button below...
<!-- function greeting() {
console.log("Hello, World!");
} -->
</pre>
<div id="run-code">
<button class="run-code" type="button" name="button" onclick="evaluate()" >RUN</button>
</div>
</div>
<!-- <textarea class="code-eval" name="output" rows="8" cols="40"></textarea> -->
<!-- <a class="jsbin-embed" href="http://jsbin.com/iwovaj/73/embed?html,output&height=315px&width=700px"></a>
<script src="http://static.jsbin.com/js/embed.js"></script> -->
<script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/chaos");
editor.session.setMode("ace/mode/javascript");
editor.session.getLength(true);
document.getElementById('editor').style.fontSize='14px';
editor.getSession().setUseWrapMode(true);
editor.setHighlightActiveLine(true);
</script>
<script src="sandbox.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script></script>
<script src="app.js"></script>
</body>
</html>
CSS
html, body{
width:100%;
height:100%;
margin:0;
}
body {
overflow: hidden;
left: 0;
margin: 0;
overflow: hidden;
position: relative;
}
#editor {
margin: 0;
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 700px;
height: 315px;
}
.code-snippet {
margin:0 auto;
display: block;
float: right;
padding: 40px 40px;
}
.run-code {
background-color: #1fbad6;
border: 3px solid #1fbad6;
padding: 10px 20px;
margin-top: 40px;
margin-bottom: 40px;
outline: none;
font:1.125em 'Arial', sans-serif;
font-weight:700;
text-align:center;
text-decoration:none;
color:#fff;
border-radius:5px;
float: right;
}
.video {
position: relative;
float: left;
padding: 40px 40px;
}
/*.jsbin-embed {
position: relative;
float: right;
width: 700px;
height: 315px;
padding: 40px 40px;
}*/
/* Initial menu */
.menu {
background: #202024 url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top;
left: -285px; /* start off behind the scenes */
height: 100%;
position: fixed;
width: 285px;
}
/* Basic styling */
.nav {
/*background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png');*/
background-color: #202020;
height: 75px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.menu ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.main-cat {
border-bottom: 1px solid #636366;
color: #03A3EA;
}
.sub-cat li {
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
.icon-menu {
color: #1fbad6;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
padding-bottom: 25px;
padding-left: 25px;
padding-top: 25px;
text-decoration: none;
text-transform: uppercase;
}
.icon-menu i {
margin-right: 5px;
}
.login {
position: relative;
float: right;
margin-top: 18px;
margin-right: 20px;
padding: 5px 15px;
font-size: 18px;
color: #1fbad6;
background: none;
border: 3px solid #1fbad6;
font:1.125em 'Arial', sans-serif;
font-weight:700;
text-align:center;
text-decoration:none;
border-radius:5px;
}
.sign-up {
position: relative;
float: right;
margin-top: 18px;
margin-right: 20px;
padding: 5px 15px;
font-size: 18px;
color: #1fbad6;
background: none;
border: 3px solid #1fbad6;
font:1.125em 'Arial', sans-serif;
font-weight:700;
text-align:center;
text-decoration:none;
border-radius:5px;
}
/* ============ MODAL ========== */
.page-wrapper{
width:100%;
height: 100%;
/* //background:url(http://i.imgur.com/2ZgHKbQ.jpg) center no-repeat;
//background-size:cover;*/
}
.blur{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
a.btn{
width:150px;
display:block;
margin:-25px 0 0 -75px;
padding:1em 0;
position:absolute;
top:50%; left:50%;
font:1.125em 'Arial', sans-serif;
font-weight:700;
text-align:center;
text-decoration:none;
color:#fff;
border-radius:5px;
background:rgba(217,67,86,1);
}
.modal-wrapper{
width:100%;
height:100%;
position:fixed;
top:0; left:0;
background:rgba(64,64,64,1);
visibility:hidden;
opacity:0;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
z-index: 999;
}
.modal-wrapper.open{
opacity:1;
visibility:visible;
}
.modal{
width:600px;
height:400px;
display:block;
margin:50% 0 0 -300px;
position:relative;
top:50%; left:50%;
background:#fff;
opacity:0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.modal-wrapper.open .modal{
margin-top:-200px;
opacity:1;
}
.head{
width:90%;
height:32px;
padding:1.5em 5%;
overflow:hidden;
background:#01bce5;
}
.btn-close{
width:32px;
height:32px;
display:block;
float:right;
}
.btn-close::before, .btn-close::after{
content:'';
width:32px;
height:6px;
display:block;
background:#fff;
}
.btn-close::before{
margin-top:12px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.btn-close::after{
margin-top:-6px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.content{
padding:5%;
}
#username {
width: 95%;
background: none;
border: 3px solid #1fbad6;
padding: 12px;
margin-bottom: 40px;
outline: none;
font:1.125em 'Arial', sans-serif;
font-weight:700;
text-decoration:none;
border-radius:5px;
color: #202020;
}
#password {
width: 95%;
background: none;
border: 3px solid #1fbad6;
padding: 12px;
margin-bottom: 40px;
outline: none;
font:1.125em 'Arial', sans-serif;
font-weight:700;
text-decoration:none;
border-radius:5px;
color: #202020;
}
#login-submit {
background-color: #1fbad6;
border: 3px solid #1fbad6;
padding: 10px 20px;
margin-bottom: 40px;
outline: none;
font:1.125em 'Arial', sans-serif;
font-weight:700;
text-align:center;
text-decoration:none;
color:#fff;
border-radius:5px;
float: right;
}
JavaScript
var main = function() {
/* Push the body and the nav over by 285px over */
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 100);
$('body').animate({
left: "285px"
}, 100);
});
/* Then push them back */
$('.icon-close').click(function() {
$('.menu').animate({
left: "-285px"
}, 100);
$('body').animate({
left: "0px"
}, 100);
});
};
/* ========== Evaluate Code ========== */
var app = {};
// go through the application and find every single instance of a div
// with the class of 'sandbox'
app.bootstrap = function() {
var sandboxes = document.getElementsByClassName('sandbox');
// for each sandbox, run the createSandbox function
[].forEach.call(sandboxes, app.createSandbox);
};
// given a parent element, find the first textarea inside and
// create a sandbox around it
app.createSandbox = function(parent) {
var textarea = parent.getElementsByTagName('textarea')[0],
// create an instance of Sandbox using this textarea
sandbox = Sandbox(textarea);
parent.appendChild(sandbox.label);
};
// when the DOM loads bootstrap the application
window.addEventListener('load', app.bootstrap);
// Sandbox class
// This class is based around a textarea element, which will contain
// the code. However, it could just as easily be the DOM element for
// an Ace/Codemirror editor.
function Sandbox(textarea) {
var sandbox = {};
// create a label to show output
sandbox.label = document.createElement('label');
sandbox.label.setAttribute('class', 'output');
sandbox.label.addEventListener('click', evaluate);
// evaluate code whenever there is input into the textarea
textarea.addEventListener('input', evaluate);
sandbox.textarea = textarea;
// initial resize and evaluation
resize();
evaluate();
// resize to within the appropriate height for the textarea
function resize() {
var scrollHeight = textarea.scrollHeight;
if(scrollHeight > Sandbox.MAX_HEIGHT) {
height = Sandbox.MAX_HEIGHT;
} else if(scrollHeight < Sandbox.MIN_HEIGHT) {
height = Sandbox.MIN_HEIGHT;
} else {
height = scrollHeight;
}
textarea.style.height = height + 'px';
}
// evaluate the code within the textarea
function evaluate() {
// get the code
var src = textarea.value,
// create a console proxy (for logging to the label)
console = Sandbox.consoleProxy(sandbox.label);
// clear the output first
sandbox.label.innerText = '';
// try the eval and catch errors to send to the console
try {
/* jshint ignore:start */
eval(src);
/* jshint ignore:end */
} catch(err) {
console.error(err);
}
}
return sandbox;
}
// config
Sandbox.MAX_HEIGHT = 500;
Sandbox.MIN_HEIGHT = 50;
// A function which spoofs the native console object, by writing
// text to output elements, rather than the dev tools console.
Sandbox.consoleProxy = function(element) {
return {
log: function(message) {
message = [].join.call(arguments, ' ');
element.innerText += (message + '\n');
element.setAttribute('disabled', false);
// write to the original console too
console.log.apply(console, arguments);
},
error: function(message) {
element.setAttribute('disabled', true);
element.innerText = message;
}
};
};
/* ========== Modal ========== */
$('.trigger').click(function() {
$('.modal-wrapper').toggleClass('open');
$('.page-wrapper').toggleClass('blur');
return false;
});
$(document).ready(main);
最佳答案
eval
是运行代码的实际方式。由于与安全漏洞有关,它的名声不太好,但是,如果这不是问题并且用户将在沙箱中运行他们自己的代码,那正是 eval
旨在做到这一点,而且做得很好。
为 Javascript 实现一个简单的编译器并非易事,但是如果您确信这是正确的方法,您可以使用开源项目,例如 esprima。在解析和评估代码时为您完成一些繁重的工作。
我为过去从事的项目开发了一个通用代码评估小部件,只需使用 <textarea>
和 eval
.它支持控制台的日志和错误沙盒。浏览 the code 可能会有所帮助.
关于javascript - 如何评估我的 Web 应用程序中的用户代码输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33507292/
我正在通过 labrepl 工作,我看到了一些遵循此模式的代码: ;; Pattern (apply #(apply f %&) coll) ;; Concrete example user=> (a
我从未向应用商店提交过应用,但我会在不久的将来提交。 到目前为止,我对为 iPhone 而非 iPad 进行设计感到很自在。 我了解,通过将通用PAID 应用放到应用商店,客户只需支付一次就可以同时使
我有一个应用程序,它使用不同的 Facebook 应用程序(2 个不同的 AppID)在 Facebook 上发布并显示它是“通过 iPhone”/“通过 iPad”。 当 Facebook 应用程序
我有一个要求,我们必须通过将网站源文件保存在本地 iOS 应用程序中来在 iOS 应用程序 Webview 中运行网站。 Angular 需要服务器来运行应用程序,但由于我们将文件保存在本地,我们无法
所以我有一个单页客户端应用程序。 正常流程: 应用程序 -> OAuth2 服务器 -> 应用程序 我们有自己的 OAuth2 服务器,因此人们可以登录应用程序并获取与用户实体关联的 access_t
假设我有一个安装在用户设备上的 Android 应用程序 A,我的应用程序有一个 AppWidget,我们可以让其他 Android 开发人员在其中以每次安装成本为基础发布他们的应用程序推广广告。因此
Secrets of the JavaScript Ninja中有一个例子它提供了以下代码来绕过 JavaScript 的 Math.min() 函数,该函数需要一个可变长度列表。 Example:
当我分别将数组和对象传递给 function.apply() 时,我得到 NaN 的 o/p,但是当我传递对象和数组时,我得到一个数字。为什么会发生这种情况? 由于数组也被视为对象,为什么我无法使用它
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界. 这篇CFSDN的博客文章ASP转换格林威治时间函数DateDiff()应用由作者收集整理,如果你
我正在将列表传递给 map并且想要返回一个带有合并名称的 data.frame 对象。 例如: library(tidyverse) library(broom) mtcars %>% spl
我有一个非常基本的问题,但我不知道如何实现它:我有一个返回数据框,其中每个工具的返回值是按行排列的: tmp<-as.data.frame(t(data.frame(a=rnorm(250,0,1)
我正在使用我的 FB 应用创建群组并邀请用户加入我的应用群组,第一次一切正常。当我尝试创建另一个组时,出现以下错误: {"(OAuthException - #4009) (#4009) 在有更多用户
我们正在开发一款类似于“会说话的本”应用程序的 child 应用程序。它包含大量用于交互式动画的 JPEG 图像序列。 问题是动画在 iPad Air 上播放正常,但在 iPad 2 上播放缓慢或滞后
我关注 clojure 一段时间了,它的一些功能非常令人兴奋(持久数据结构、函数式方法、不可变状态)。然而,由于我仍在学习,我想了解如何在实际场景中应用,证明其好处,然后演化并应用于更复杂的问题。即,
我开发了一个仅使用挪威语的应用程序。该应用程序不使用本地化,因为它应该仅以一种语言(挪威语)显示。但是,我已在 Info.plist 文件中将“本地化 native 开发区域”设置为“no”。我还使用
读完 Anthony's response 后上a style-related parser question ,我试图说服自己编写单体解析器仍然可以相当紧凑。 所以而不是 reference ::
multicore 库中是否有类似 sapply 的东西?还是我必须 unlist(mclapply(..)) 才能实现这一点? 如果它不存在:推理是什么? 提前致谢,如果这是一个愚蠢的问题,我们深表
我喜欢在窗口中弹出结果,以便更容易查看和查找(例如,它们不会随着控制台继续滚动而丢失)。一种方法是使用 sink() 和 file.show()。例如: y <- rnorm(100); x <- r
我有一个如下所示的 spring mvc Controller @RequestMapping(value="/new", method=RequestMethod.POST) public Stri
我正在阅读 StructureMap关于依赖注入(inject),首先有两部分初始化映射,具体类类型的接口(interface),另一部分只是实例化(请求实例)。 第一部分需要配置和设置,这是在 Bo
我是一名优秀的程序员,十分优秀!