外部js内の関数を、html内で実行する事には？

jsファイルをhtml側から読み込み、関数を実行したいです。
randomNum()を実行させ、画面に出力された乱数を表示したいのですが何も表示されません。
よろしければ回答よろしくお願いいたします。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>演習</title>
6</head>
7<body>
8    <script>
9    </script>
10    <script type="text/javascript" src="jsEX.js">
11        randomNum();
12    </script>
13</body>
14</html>

javascript
1let randomNum = () => {
2    let state = true;
3    
4    while(state){
5        // 0～9の乱数を生成する
6        let random = Math.floor(Math.random()*10);
7    
8        // 数値が3になったら繰り返し処理を終了する
9        if(random === 3) state = false;
10    
11        // 乱数をコンソールに出力
12        // console.log(random);
13        document.write(random);
14    }
15};

行動規範の内容に同意します

回答2件

ベストアンサー

src

この属性は外部スクリプトの URI を指定します。文書に直接スクリプトを埋め込む代わりに使用することができます。
引用元: <script>: スクリプト要素 - HTML: HyperText Markup Language | MDN

src属性は「埋め込む代わりに」指定するものですので、外部スクリプトのURIを指定すると同時にその中に直接埋め込むというのは書き方が間違っています。

html
1<script src="jsEX.js"></script>
2<script>
3    randomNum();
4</script>

余談ですがtype属性で指定する値がJavaScriptのMIME Type (application/javascript, text/javascriptなど) の場合は省略することが推奨されています。

これでも正しく実行されない場合は、そもそもjsEX.jsが正しく読み込まれているか確認してください。

投稿2020/07/08 15:24

thyda.eiqau

総合スコア2982

j_yoshigai

2020/07/09 14:23

回答ありがとうございます。 scriptの中身を修正し、コンソールで出力するようにすると正常に動作することが確認できました。ひとつ質問があるのですが、 > 余談ですがtype属性で指定する値がJavaScriptのMIME Type (application/javascript, text/javascriptなど) の場合は省略することが推奨されています。これに関しては異なるタイプのURIを記載すると、正常に動作しなくなるからという認識でよろしいでしょうか？

thyda.eiqau

2020/07/09 14:57

HTMLに読み込ませるスクリプトはJavaSciprtがデファクトスタンダードになっていますので、省略した場合はJavaScriptが指定されているものとして解釈されます。当然、type="application/javascript"を指定した場合もJavaScriptが記述されたものとして解釈されます。つまり書いても書かなくても同じように処理されるわけで、書かないことによって30バイト通信量を抑えることができます。

j_yoshigai

2020/07/09 15:00

勉強になります!! わかりやすい説明ありがとうございました!!

行動規範の内容に同意します