JavaScript - 我似乎无法工作的简单示例答案

【问题标题】：JavaScript - simple example that I can't seem to get workingJavaScript - 我似乎无法工作的简单示例
【发布时间】：2019-03-05 05:01:35
【问题描述】：

我有下面的代码（JavaScript + 一点 Html）取自 Data Visualization with Python and JavaScript b Kyran Dale（我是一个完全网络新手 - 花了很长时间作为一个不关心互联网问题的 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 或其他部分中调用我的代码吗？

【问题讨论】：

你已经声明了一个函数processStudentData，但你从来没有调用过这个函数
好的 - 那我怎么称呼它？我确实说过我是一个完整的 n00b... :-) 我试过把
processStudentData()
（带和不带括号） - 但没有运气！
@Vérace 要运行代码，您需要将其放入<script>，而不是<div>
但它是在脚本中，不是吗？它在 do_student_data.js 中吗？也许一个例子会对我有所帮助 - 我要编写什么实际代码来调用我在 html 文件底部引用的 do_student_data.js 脚本文件中的 processStudentData 函数？

标签： javascript http

【解决方案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>

【讨论】：

我完全按照你的方式输入了代码，但我得到了这个：“do_student_data.js:12 Uncaught ReferenceError: data is not defined at processStudentData (do_student_data.js:12) at (index) :15" 你能告诉我这两个文件应该是如何获得控制台输出的吗？
您是否正在调用类似processStudentData(studentData) 的方法，因为您将变量命名为studentData 而不是sdata
我尝试使用 studentData 和 sdata（sdata 没有意义 - 它只是对在恕我直言中传递的变量的内部引用）。你能告诉我这两个文件的全部内容吗？
我已经添加了完整的工作代码。如果您仍有问题，请告诉我！
感谢您的编辑，但这正是我所拥有的正是，错误是“do_student_data.js:12 Uncaught ReferenceError: data is not defined at processStudentData (do_student_data.js: 12) at (index):14" - 在这种情况下你的 do_student_data.js 文件是什么？

【解决方案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 结果！

【讨论】：

Salut Fabien，我把你的代码放在我的 .js 的末尾（console.log(sdata.name + "'s (:id " + sdata.id + ") 最终评估是：" + sdata.assessment.toUpperCase()); }); } 进程学生数据（学生数据）； ) 我收到错误“(do_student_data.js:12 Uncaught ReferenceError: data is not defined at processStudentData (do_student_data.js:12) at do_student_data.js:33”。你能告诉我确切如何两个文件都应该是？
凑凑！添加了代码片段，我只是在 .js 文件的末尾添加了函数调用:)
是的，我明白了，我已经运行了代码。看起来它正在工作，但我只能看到一条消息（Bob id：0） - 我看不到其他消息 - 它告诉我我有 4 条用户消息 - 这是 Chrome。如果我的问题看起来很基本，我很抱歉，但我是一个新手，我发现它非常令人沮丧！ :-( (puttain !!!). 你知道我怎么能看到我所有的消息 - 否则我不知道我的代码是否有效！
没关系，你必须从某个地方开始啊啊啊。您实际上可以在 console.log 之前看到一个数字，看起来像 (4) Bob 的 (:id 0) 最终评估是：PASSED。 4 代表字符串被输出到控制台的次数。如果你调用你的 processStudentData 函数 2 次，这个数字就是 8。
是的，但我想看看这 4 条消息以知道我的代码已经正常工作了！无论如何，这令人困惑 - 消息 4 应该是 last id 而不是第一个 - 非？