HTML5の基本的な書き方あっていますか？

下記のような、codeのhtmlファイルをブラウザで実行させたら、

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<title>サイトのタイトル</title>
6<meta name="description" content="">
7<meta name="keywords" content="">
8<link rel="stylesheet" href="sample.css">
9<script src="sample.js"></script>
10</head>
11
12<body>
13
14function print(str){
15  document.write(str + "<br />");
16}
17<!-- // d に現在日時を代入 -->
18var d = new Date();
19<!-- // weekday に日～土までを代入 -->
20var weekdays = ["日", "月", "火", "水", "木", "金", "土"];
21
22<!-- // ドキュメントに<p>を書き込む -->
23document.write("<p>");
24<!-- // 現在日時をドキュメントに書き込み<br> -->
25print(d);
26<!-- // ドキュメントに</p>を書き込む -->
27document.write("</p>");
28<!-- // ドキュメントに<p>を書き込む -->
29document.write("<p>");
30
31print("年:" + d.getFullYear());
32print("月:" + (d.getMonth() + 1));
33print("日:" + d.getDate());
34print("曜日:" + weekdays[d.getDay()]);
35
36document.write("</p>");
37
38</body>
39
40</html>
41

※この場合、htmlかJavaScriptどちらのコードというべきでしょうか？

画像のようにそのままコードが表示されてしまいました。

何が足りないのでしょうか？

宜しくお願いいたします。

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

回答3件

<body>の中に直接何かを書いても、それはただのHTMLです。JavaScriptとして解釈される余地はありません。

JavaScriptは、<script type="text/javascript">の中に書く、あるいは<script src="sample.js"></script>というようにリンクした別ファイルの中に書く必要があります。

また、現代のブラウザ環境ではdocument.write()を使った方法はあまりおすすめできません。DOMでHTMLを書き換える形を取りましょう。

投稿2015/11/11 05:32

maisumakun

総合スコア145183

b1ackc0ffee

2015/11/11 05:41

回答いただき有難うございます＾＾現在は<script src="sample.js"></script>にある、 sample.jsは作成していないのですが、エラー出ないんですね。サンプルコードから拾ったので、何のことかわからず使っていました。 >DOMでHTMLを書き換える私にはまだ理解できなかったので、調べたいと思います。

b1ackc0ffee

2015/11/11 06:29

http://www.htmq.com/js/document_write.shtml この情報ってかなり古いですか？コメントアウトされているのも謎ですが。。。セキュリティ上非推奨なのでしょうか？

maisumakun

2015/11/11 08:02

対応ブラウザがNetScapeですし、かなり古い時代のコードです。昔のブラウザにはJavaScript非対応のものがあったので、コメントで囲って非対応ブラウザでもソースを見えなくする、ということが行われていました。

b1ackc0ffee

2015/11/11 09:48

なるほど、そうなんですね。更新日時の書いていないサイトは、未経験者には判断できないので辛いですね。

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

ベストアンサー

この場合、HTMLにjavascriptを記述する方法が間違っています。
HTML5タグリファレンス
の
script要素内にスクリプトを記述のように、

という形にする必要がありますが、現在は<body></body>に直接かかれているのでjavascriptとして評価されていない状態です。

投稿2015/11/11 05:34

tanat

総合スコア18713

b1ackc0ffee

2015/11/11 05:45

リンクと回答有難うございます＾＾無事解決しました。 PHPと使い方が似ているようで違うんですね！

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

下記のように修正してください。

<body> <script> function print(str){ document.write(str + "<br />"); }  var d = new Date();  var weekdays = ["日", "月", "火", "水", "木", "金", "土"];

document.write("<p>");

print(d);

document.write("</p>");

document.write("<p>");

print("年:" + d.getFullYear());
print("月:" + (d.getMonth() + 1));
print("日:" + d.getDate());
print("曜日:" + weekdays[d.getDay()]);

document.write("</p>");
</script>

</body>

投稿2015/11/11 05:34