Question

我下面的代码（JavaScript +一点Html）摘自使用Python和JavaScript进行数据可视化的b b Kyran Dale（我是有关网络的 total 新手-花费了很长时间作为一名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和c。感激不尽，但也请您快速解释。我需要在div或其他部分中调用我的代码吗？

Answer 1

从您发布的代码来看，有几个问题。

除非您自己构建DOM元素并将其附加到已安装的DOM节点上，否则从do_student_data.js或在脚本标签中调用该函数不会有任何不同。
如果您不从服务器接收数据，则无需运行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>

Answer 2

您不会在任何地方调用您编写的函数，请尝试将其添加到.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());
    });
}

processStudentData(studentData);

<!-- 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>

现在，只需双击您的.html文件，即可在Chrome中打开一个页面。打开控制台。现在，您将看到console.log结果！

JavaScript-我似乎无法正常工作的简单示例

2 个答案: