У меня есть код (JavaScript + немного Html) ниже, взятый из Визуализации данных с помощью Python и JavaScript b Киран Дейл (я всего новичок в Интернете - долгое время провел в качестве администратора баз данных не занимаюсь вопросами Интернета), но сейчас я получаю степень магистра как зрелый ученик, и мне нужно собраться с силами и действительно изучить этот материал !! :-))

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 (рекомендованный Дейлом) и нажмите 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 (т.е. в противном случае пусто!)

Я хочу знать
а) как заставить код работать, и что более важно
б) соглашения о вызовах для JavaScript в браузере, подобные этому - любые ссылки, URL-адреса и т. д. с благодарностью получен, но хотелось бы получить быстрое объяснение. Нужно ли мне вызывать свой код в div или другом разделе?

0
Vérace 29 Сен 2018 в 15:01

2 ответа

Лучший ответ

Из опубликованного вами кода есть несколько проблем.

  • Вызов функции из do_student_data.js или в тегах сценария не будет иметь значения, если вы сами не создадите элементы DOM и не добавите их к уже смонтированному узлу DOM.
  • Вам не нужен запущенный http-сервер, если вы не получаете данные с сервера.
  • Вы пытались вызвать функцию из скрипта, который еще не загружен.

Узнайте здесь, как динамически создавать элементы DOM с помощью API

Если вы не используете какие-либо 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>
1
Phanindra 29 Сен 2018 в 15:13

Вы нигде не вызываете написанную вами функцию, попробуйте добавить ее в конец вашего .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!

1
Fabien Rajaonarison 29 Сен 2018 в 15:30