JavaScriptコードが書かれたファイルはどうすればブラウザ表示できるの

HTMLコードの中にJavaScriptコードを書いて.htmlで保存し、ファイルをクリックしてブラウザ表示しようとしても何も表示されません
どういう対処をすれば表示されるのでしょうか

あと、JavaScriptコードだけ書いたコードをブラウザ表示する際も(.jsで保存等)、どうすれば表示されるようになるのかも合わせて教えていただけますか

追記
調べてみるとconsole.logでの出力方法としてブラウザのコンソールを起動すれば出力されると説明があったんですが、実行しても何も出力されません
何を出力したいかちゃんとコードに書いてるにも関わらず出力されないのは何故でしょうか

HTML
1<!DOCTYPE html>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5	</head>
6	<body>
7		<script>
8			var x;
9			x = 10 * 2;
10			x = 10 % 3;
11			x += 5;
12			x++;
13			x--;
14			console.log(x);
15		</script>
16	</body>
17</html>

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

回答6件

コンソールに表示していますね。
ブラウザ上に表示したいのであれば

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <script>
            var x;
            x = 10 * 2;
            x = 10 % 3;
            x += 5;
            x++;
            x--;
            document.write(x);
        </script>
    </body>
</html>

っていうか、表示するのはxの内容でいいんですよね？
JavaScriptのコードをそのまま表示とかいうオチじゃないですよね・・・？

投稿2016/08/17 07:44

jm1156

総合スコア866

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8">
5    </head>
6    <body>
7        <script>
8            var x;
9            x = 10 * 2;
10            x = 10 % 3;
11            x += 5;
12            x++;
13            x--;
14            console.log(x);
15            document.write(x);
16        </script>
17    </body>
18</html>

投稿2016/08/17 07:40

退会済みユーザー

総合スコア0

ベストアンサー

Webの情報を読む前に、一度本屋で何冊か本を買って読むと今後の理解が進むと思います。

【JavaScriptの基本をサルでもわかるようにまとめた【入門用】 - いつ俺〜いつから俺ができないと錯覚していた？〜】
http://www.ituore.com/entry/javascript-basic

【JavaScriptの外部ファイル－JavaScript入門】
http://www.pori2.net/js/kihon/16.html

投稿2016/08/17 08:02

kei344

総合スコア69400

これってxの値がいくつになっているか確認したいだけ、でしょうか？
console.log(x);の結果を確認したいだけであれば次のやり方で確認できます。
ブラウザはGoogleChromeとかで確認ください。
(以下のショートカット,項目名はGoogleChromeのものです)

1.WindowsOSであればF12(MacOSであればalt(option)+command+iキー)
を押下するとデベロッパーツールを開くことができます。

2.表示されたツールの上部にElements,Console,Sources....とメニューがあるので、
Consoleを開くとconsole.log(x);の結果が表示されます。
(ソースを見たい！であればElementsがそれに該当します)

そうではなく、xの値をブラウザ、もといbody内に出力させる場合は、
以下のようにしてあげれば表示させることができます。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8">
5    </head>
6    <body>
7        <script>
8            var x;
9            x = 10 * 2;
10            x = 10 % 3;
11            x += 5;
12            x++;
13            x--;
14            console.log(x);
15            //bodyの中に足すだけならこちらです。
16            document.body.appendChild(x);
17            //例えば、コメントアウトのようにすると、div要素の中に追加したりすることができます。
18            //var element = document.createElement('div');
19            //element.appendChild(x);
20            //document.body.appendChild(element);
21        </script>
22    </body>
23</html>

補足ですが、別回答で出ているdocument.write(x);を使用する場合は,
書き込み開始用methodのdocument.open();とdocument.close();を
例えば以下のように、前後の処理に記述する必要があります。

<script type="text/javascript">
    document.open();
    document.write('文字列とか変数とか');
    document.close();
</script>

投稿2016/08/17 08:33

KWF

総合スコア17

とっても初歩的なのですが
jsのAPI読み込んでますか？
http://jquery.com/

またはデペロッパーツールで、コンソールを選択した時にエラー表示されてませんか？

投稿2016/08/19 06:28

編集2016/08/19 06:38

chiro.0519

総合スコア118

コンソール(開発者ツール)について

もしかしたら、コンソールの場所がわからないのかも...(それはないと思うが)
IEとかの場合は、セキュリティ許可 => 更新でようやく表示されるようですし...

Windows しかもっていないので、Windowsでの開発者ツールの表示の仕方だけです。

▼ IE
[ F12 ]キーまたは [ Ctrl ] + [ Shift ] + [ i ]キー => [ コンソール ]
JavaScript実行時に許可を求められる場合は開発者ツール起動時に更新(F5)が必要です。

▼ Google Chrome
[ F12 ]キーまたは [ Ctrl ] + [ Shift ] + [ i ]キー => [ console ]

▼ Firefox / Firefox Developer Edition
[ F12 ]キーまたは [ Ctrl ] + [ Shift ] + [ i ]キー => [ console ]
デフォルトで[console]になっているはずです

▼ Opera
[ Ctrl ] + [ Shift ] + [ i ]キー => [ console ]
console画面(つまり開発者ツール)はGoogleChromeと同じです。

表示？について

jsファイルの中身を、実行せずに表示するときは、
そのファイルをブラウザに直接ドラックアンドドロップするだけです。

jsファイルの中身つまりソースコードを、何らかの関数やら処理で表示したい場合は、
jQueryでファイルを読みこんでやれば表示できます。

また、実行結果の x の値などを表示したいとき、
ページしたいに表示したい場合は、document.write(x) を、
コンソールの時は、 console.log(x) を、
ポップで表示したいときは、 alert(x) で表示することができます。

具体的には、以下の通りです。

HTML+JavaScript
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8">
5    </head>
6    <body>
7        <script>
8            var x;
9            x = 10 * 2;
10            x = 10 % 3;
11            x += 5;
12            x++;
13            x--;
14            // コンソールに表示
15            console.log(x);
16
17            // ページに表示(書きだし)
18            document.write(x);
19
20            // ポップアップ
21            alert(x);
22        </script>
23    </body>
24</html>

ソースコードの直接描画等は、セキュリティ的に危険なので、
残念ながらローカル空間では行えませんが、
(つまり別途サーバーなりそのあたりが必要)
jQueryを使うことでできます。以下はそのサンプルコードです。

HTML+JavaScript
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8">
5        <script   src="https://code.jquery.com/jquery-3.1.0.min.js"   integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="   crossorigin="anonymous"></script>
6    </head>
7    <body>
8        <textarea id="read_text"></textarea>
9
10        <script>
11            $(function() {
12                // このHTMLファイルとおなじディレクトリに
13                // 質問者様のコードを保存した、main.js があるものとします。
14                //
15                // main.js を読みこんで、<textarea>に表示しています。
16                $("#read_text").load("main.js");
17            }());            
18        </script>
19    </body>
20</html>

JavaScript
1// main.js
2var x;
3x = 10 * 2;
4x = 10 % 3;
5x += 5;
6x++;
7x--;

投稿2016/08/18 11:12

glapd332

総合スコア75

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！