下面的代码(JavaScript + 一点 Html)取自 Kyran Dale 的《使用 Python 和 JavaScript 进行数据可视化》(我是一个关于网络的完全新手 - 花了很长时间作为一名不关心互联网问题的 DBA)，但我现在作为一名成熟的学生正在攻读硕士学位，我需要努力学习这些东西! :-) )
JavaScript(do_student_data.js):
var studentData = [
{name: 'Bob', id:0, 'scores':[68, 75, 76, 81]},
{name: 'Bob', id:0, 'scores':[68, 75, 76, 81]},
{name: 'Bob', id:0, 'scores':[68, 75, 76, 81]},
{name: 'Bob', id:0, 'scores':[68, 75, 76, 81]},
];
function processStudentData(data, passThreshold, meritThreshold){
passThreshold = typeof passThreshold !== 'undefined'? passThreshold: 60;
meritThreshold = typeof meritThreshold !== 'undefined'? meritThreshold: 75;
data.forEach(function(sdata){
var av = sdata.scores.reduce(function(prev, current){
return prev + current;
},0)/sdata.scores.length;
sdata.average = av;
if(av > meritThreshold){
sdata.assessment = 'Passed with merit';
}
if(av > passThreshold){
sdata.assessment = 'Passed';
}
else{
sdata.assessment = 'Failed';
}
console.log(sdata.name + "'s (:id " + sdata.id + ") final assessment is: " + sdata.assessment.toUpperCase());
});
}
HTML:
<!-- index.html -->
<!DOCTYPE html>
<meta charset = "utf-8">
<head>
<!-- this head section has to be added otherwise a file not found :8000/favicon.ico:1 error occurs
see here https://stackoverflow.com/questions/31075893/im-getting-favicon-ico-error
-->
<link rel="shortcut icon" href="#">
</head>
<div id = 'viz'></div>
<script type = "text/javascript" src = "./do_student_data.js"></script>
<script>processStudentData(studentData)</script>
我运行
python3 -m http.server
从放置文件的目录中打开 Chrome(Dale 推荐)并按 Ctrl-Shift-J 获取控制台，但那里什么也没有 - 它是空的。
我尝试过
<div id = 'viz'>processStudentData()</div>
有括号和没有括号，但仍然没有快乐!
我也尝试过执行以下操作，但无济于事:
<div id = 'viz'></div> <!-- dummy div -->
<script>processStudentData(sdata)</script> <<---- ADDED LINE!!!
<script type = "text/javascript" src = "do_student_data.js" async></script>
我有 processStudentData(XXXX)，有和没有 StudentData 来代替 XXXX(即否则为空白!)
我想知道
a) 如何让代码工作，更重要的是
b) 浏览器内 JavaScript 的调用约定如下 - 任何引用、URL 等。非常感谢，但如果能快速解释一下，我们也将不胜感激。我需要在 div 或其他部分中调用我的代码吗？
最佳答案
从您发布的代码来看，存在几个问题。
- 从
do_student_data.js调用函数或在脚本标签中不会产生任何影响，除非您自己构建 DOM 元素并将其附加到已安装的 DOM 节点。 - 如果您没有从服务器接收数据，则不需要运行 http 服务器
- 您尝试从尚未加载的脚本调用函数。
在此处查看如何使用 API 动态创建 DOM 元素
如果你不使用任何UI框架你需要自己构建DOM
要在控制台日志中打印，请进行以下更改，它应该可以解决问题
<script src="./do_student_data.js"></script>
<script type="text/javascript">processStudentData(studentData)</script>
var studentData = [
{name: 'Bob', id:0, 'scores':[68, 75, 76, 81]},
{name: 'Bob', id:0, 'scores':[68, 75, 76, 81]},
{name: 'Bob', id:0, 'scores':[68, 75, 76, 81]},
{name: 'Bob', id:0, 'scores':[68, 75, 76, 81]},
];
function processStudentData(data, passThreshold, meritThreshold){
passThreshold = typeof passThreshold !== 'undefined'? passThreshold: 60;
meritThreshold = typeof meritThreshold !== 'undefined'? meritThreshold: 75;
data.forEach(function(sdata){
var av = sdata.scores.reduce(function(prev, current){
return prev + current;
},0)/sdata.scores.length;
sdata.average = av;
if(av > meritThreshold){
sdata.assessment = 'Passed with merit';
}
if(av > passThreshold){
sdata.assessment = 'Passed';
}
else{
sdata.assessment = 'Failed';
}
console.log(sdata.name + "'s (:id " + sdata.id + ") final assessment is: " + sdata.assessment.toUpperCase());
});
}<!-- index.html -->
<!DOCTYPE html>
<meta charset = "utf-8">
<head>
<!-- this head section has to be added otherwise a file not found :8000/favicon.ico:1 error occurs
see here https://stackoverflow.com/questions/31075893/im-getting-favicon-ico-error
-->
<link rel="shortcut icon" href="#">
</head>
<div id = 'viz'></div>
<script type = "text/javascript" src = "./do_student_data.js"></script>
<script>processStudentData(studentData)</script>关于JavaScript - 我似乎无法工作的简单示例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52568174/