jsをchromeで開くには
当サイトのリニューアル作業に時間をあてるため、掲示板の投稿は当分停止させていただきます。
はじめまして。
今現在「高校生からはじめるプログラミング」という本を使い勉強中なのですが、つまづいています。
まずひとつのHTMLファイルを作成し、もうひとつjsファイルを作成して同じフォルダに保存
↓
作成したHTMLファイルに「script:src」タグを入力し、
jsファイルに「document.write('<h1>JavaScript を学ぼう</h1>')
と入力
↓
するとHTMLファイルに「JavaScriptを学ぼう」という文が表示される
これは
「JavaScriptを別ファイルに書き出して、そのファイルをHTMLから読み込むように構成を変更する」
という練習で、HTMLとJavaScriptを分割して命令することはできたのですが、その次に、jsファイルに入力したdocumentのdを消して「エラーを意図的に起こす」練習で、本来ならエラーを起こし、再読み込みすると何も表示されないのですが、HTMLをchromeで再読み込みしてもどこも問題はないのです。
もしかして、再読み込みするのはHTMLではなくjsファイルで、最初に作成したHTMLファイルはchromeで開くことができますが、jsファイルはアイコンが違うので、chromeでは開けないということでしょうか？
超初心者で申し訳ないのですが、どこの誰に質問したらいいかもわからず・・・
同じ本をよんで実践された方、またそうでなくてもわかる方がいらっしゃいましたら教えていただきたいです。
今現在「高校生からはじめるプログラミング」という本を使い勉強中なのですが、つまづいています。
まずひとつのHTMLファイルを作成し、もうひとつjsファイルを作成して同じフォルダに保存
↓
作成したHTMLファイルに「script:src」タグを入力し、
jsファイルに「document.write('<h1>JavaScript を学ぼう</h1>')
と入力
↓
するとHTMLファイルに「JavaScriptを学ぼう」という文が表示される
これは
「JavaScriptを別ファイルに書き出して、そのファイルをHTMLから読み込むように構成を変更する」
という練習で、HTMLとJavaScriptを分割して命令することはできたのですが、その次に、jsファイルに入力したdocumentのdを消して「エラーを意図的に起こす」練習で、本来ならエラーを起こし、再読み込みすると何も表示されないのですが、HTMLをchromeで再読み込みしてもどこも問題はないのです。
もしかして、再読み込みするのはHTMLではなくjsファイルで、最初に作成したHTMLファイルはchromeで開くことができますが、jsファイルはアイコンが違うので、chromeでは開けないということでしょうか？
超初心者で申し訳ないのですが、どこの誰に質問したらいいかもわからず・・・
同じ本をよんで実践された方、またそうでなくてもわかる方がいらっしゃいましたら教えていただきたいです。
初心者 さん
08月14日 12時12分
初心者さん、はじめまして。
本来であればエラーが発生するところが、発生せずに「JavaScriptを学ぼう」と正常に表示されている……ということでよろしいでしょうか。
エラーを意図的に起こすということですので、再読込するのはHTMLファイルで良いと思われます。
この場合、本来であれば、dを消せば文法エラーになる＝Javascriptで書き出される部分は表示されなくなるのが正常な動作ですね。
確実にdを消していて、ファイルも保存し、再読み込みした上で意図した動作にならないとすると、「キャッシュ」のJavaScriptファイルを読んでしまっているのかもしれません。
キャッシュというのは、一度読み込んだファイルを次回以降高速に読み込めるように、Webブラウザ（Chrome等）が該当ファイルを自身のPCに保存・再利用する機能です。
キャッシュを削除するのが確実ですが、いちいち行うのは面倒なのでキャッシュを無視して強制的に再読み込みする方法をお試しください。
以下の方法で可能です。
■Windows版Chrome:
Shift + F5 または Ctrl + Shift + R
■Mac版Chrome:
⌘ + shift + r
おそらくはこれで改善されると思うのですがいかがでしょうか。
本来であればエラーが発生するところが、発生せずに「JavaScriptを学ぼう」と正常に表示されている……ということでよろしいでしょうか。
エラーを意図的に起こすということですので、再読込するのはHTMLファイルで良いと思われます。
この場合、本来であれば、dを消せば文法エラーになる＝Javascriptで書き出される部分は表示されなくなるのが正常な動作ですね。
確実にdを消していて、ファイルも保存し、再読み込みした上で意図した動作にならないとすると、「キャッシュ」のJavaScriptファイルを読んでしまっているのかもしれません。
キャッシュというのは、一度読み込んだファイルを次回以降高速に読み込めるように、Webブラウザ（Chrome等）が該当ファイルを自身のPCに保存・再利用する機能です。
キャッシュを削除するのが確実ですが、いちいち行うのは面倒なのでキャッシュを無視して強制的に再読み込みする方法をお試しください。
以下の方法で可能です。
■Windows版Chrome:
Shift + F5 または Ctrl + Shift + R
■Mac版Chrome:
⌘ + shift + r
おそらくはこれで改善されると思うのですがいかがでしょうか。
馬場誠 さん
08月14日 16時46分
馬場誠さん、ご返信ありがとうございます。
上記の方法を二つとも試しましたが、やはりうまくいきません・・・
Ctrl+Shift+Rを押したら再読み込みボタンと「JavaScriptを学ぼう」の文字が一瞬読み込んだかのように震えるのですが、何も変化はありません。
ちなみに作成したHTMLファイルとjsファイルです。
↓
「HTML」
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>はじめての JavaScript</title>
</head>
<body>
<script src="myFirst.js"></script>
</body>
</html>
「JavaScript」
document.write('<h1>JavaScript を学ぼう</h1>');
↑消すのはこのdocumentのdの部分です。
何度も申し訳ないです。
上記の方法を二つとも試しましたが、やはりうまくいきません・・・
Ctrl+Shift+Rを押したら再読み込みボタンと「JavaScriptを学ぼう」の文字が一瞬読み込んだかのように震えるのですが、何も変化はありません。
ちなみに作成したHTMLファイルとjsファイルです。
↓
「HTML」
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>はじめての JavaScript</title>
</head>
<body>
<script src="myFirst.js"></script>
</body>
</html>
「JavaScript」
document.write('<h1>JavaScript を学ぼう</h1>');
↑消すのはこのdocumentのdの部分です。
何度も申し訳ないです。
初心者 さん
08月14日 18時48分
ソースを上げていただけたので実際に動作確認をしてみました。
そのままコピーして実行した結果「JavaScriptを学ぼう」という表示がされました。
次にJavaScriptファイル内のdocument.writeのdを削除して保存・再読み込みで、画面が真っ白になり、エラーも確認できました。
これは正常な動作です。
となると、文面では気づきにくいどこかに間違いがあるのだと思います。
こういった時は問題を切り分けることが解決の糸口になります。
いろいろ試して動作を確認してみてください。
例えば、以下の項目です。
※ご投稿された環境からWindowsと仮定して書いています。
※それぞれの段階でHTMLを再読込するときは、先の「Shift + F5」をご利用ください。
■1
dを消した状態でHTMLを表示→（※この時点でなぜか「JavaScript を学ぼう」と表示されている状態）→画面を右クリックして「ページのソースを表示」→「myFirst.js」にアンダーラインが引いてあるのでクリック→myFirst.jsが表示されますがdが消えているか・いないかチェック→消えていなければここでも「Shift + F5」で強制リロードしてみてください→dが消えたかチェック
■2
（dは消さずに）myFirst.js内の「JavaScript を学ぼう」部分の文字を変更・保存して、HTMLを再読み込みしたら表示に反映されるか（もちろん反映されるのが正しい動作）
■3
myFirst.jsの内容を全て消して保存→HTMLを再読み込みするとどうなるか
（真っ白になるのが正しい動作）
上記が正しい動作になれば、JavaScriptにAとだけ入れて保存→HTMLを再読み込みするとどうなるか
（エラーが発生し真っ白になるのが正しい動作。エラー内容はF12を押せば赤字で画面に出ます）
■4
myFirst2.jsというファイルを作り、最初からdを抜いた状態にする。
HTMLのsrc="myFirst.js"のリンクもsrc="myFirst2.js"として保存＆再読み込みするとどうなるか。
（エラーが発生し真っ白になるのが正しい動作。エラー内容はF12を押せば赤字で画面に出ます）
正しい動作になれば、dを入れてみて保存・再起動で「JavaScriptを学ぼう」が表示されるか。
以上になります。
ちょっと面倒ですが、いろいろと試すことで、新たに分ることもあるかもしれません。
そのままコピーして実行した結果「JavaScriptを学ぼう」という表示がされました。
次にJavaScriptファイル内のdocument.writeのdを削除して保存・再読み込みで、画面が真っ白になり、エラーも確認できました。
これは正常な動作です。
となると、文面では気づきにくいどこかに間違いがあるのだと思います。
こういった時は問題を切り分けることが解決の糸口になります。
いろいろ試して動作を確認してみてください。
例えば、以下の項目です。
※ご投稿された環境からWindowsと仮定して書いています。
※それぞれの段階でHTMLを再読込するときは、先の「Shift + F5」をご利用ください。
■1
dを消した状態でHTMLを表示→（※この時点でなぜか「JavaScript を学ぼう」と表示されている状態）→画面を右クリックして「ページのソースを表示」→「myFirst.js」にアンダーラインが引いてあるのでクリック→myFirst.jsが表示されますがdが消えているか・いないかチェック→消えていなければここでも「Shift + F5」で強制リロードしてみてください→dが消えたかチェック
■2
（dは消さずに）myFirst.js内の「JavaScript を学ぼう」部分の文字を変更・保存して、HTMLを再読み込みしたら表示に反映されるか（もちろん反映されるのが正しい動作）
■3
myFirst.jsの内容を全て消して保存→HTMLを再読み込みするとどうなるか
（真っ白になるのが正しい動作）
上記が正しい動作になれば、JavaScriptにAとだけ入れて保存→HTMLを再読み込みするとどうなるか
（エラーが発生し真っ白になるのが正しい動作。エラー内容はF12を押せば赤字で画面に出ます）
■4
myFirst2.jsというファイルを作り、最初からdを抜いた状態にする。
HTMLのsrc="myFirst.js"のリンクもsrc="myFirst2.js"として保存＆再読み込みするとどうなるか。
（エラーが発生し真っ白になるのが正しい動作。エラー内容はF12を押せば赤字で画面に出ます）
正しい動作になれば、dを入れてみて保存・再起動で「JavaScriptを学ぼう」が表示されるか。
以上になります。
ちょっと面倒ですが、いろいろと試すことで、新たに分ることもあるかもしれません。
馬場誠 さん
08月15日 07時49分
ご返信ありがとうございます。いただいた上記方法をすべて試したところ、
■1
dを消した状態でHTMLを表示→（※この時点でなぜか「JavaScript を学ぼう」と表示されている状態）→画面を右クリックして「ページのソースを表示」→「myFirst.js」にアンダーラインが引いてあるのでクリック→myFirst.jsが表示されますがdが消えているか・いないかチェック→消えていなければここでも「Shift + F5」で強制リロードしてみてください→dが消えたかチェック
この部分を試したら確かにdは消えていました。
しかし２からはすべて反映されませんでした。
myFirst.jsのファイルに何を書いて変更・保存しても依然として「JavaScript を学ぼう」という表記に変わりはありません。ということは、myFirst.jsのファイル自体に何か問題があるということなのでしょうか。
■1
dを消した状態でHTMLを表示→（※この時点でなぜか「JavaScript を学ぼう」と表示されている状態）→画面を右クリックして「ページのソースを表示」→「myFirst.js」にアンダーラインが引いてあるのでクリック→myFirst.jsが表示されますがdが消えているか・いないかチェック→消えていなければここでも「Shift + F5」で強制リロードしてみてください→dが消えたかチェック
この部分を試したら確かにdは消えていました。
しかし２からはすべて反映されませんでした。
myFirst.jsのファイルに何を書いて変更・保存しても依然として「JavaScript を学ぼう」という表記に変わりはありません。ということは、myFirst.jsのファイル自体に何か問題があるということなのでしょうか。
初心者 さん
08月15日 15時00分
追記です。
作成したHTMLファイル↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>はじめての JavaScript</title>
</head>
<body>
<script src="myFirst2.js"></script>
</body>
</html>
「ページのソースを表示」して出たコード↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>はじめてのJavaScript</title>
</head>
<body>
<script>
document.write('<h1>JavaScript を学ぼう</h1>');
</script>
</body>
</html>
もしかしてこのふたつは同じコードになっていなければいけないのではないでしょうか？
だとすると私は今別のファイルを開いているので、反映されないという可能性はありますか？
作成したHTMLファイル↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>はじめての JavaScript</title>
</head>
<body>
<script src="myFirst2.js"></script>
</body>
</html>
「ページのソースを表示」して出たコード↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>はじめてのJavaScript</title>
</head>
<body>
<script>
document.write('<h1>JavaScript を学ぼう</h1>');
</script>
</body>
</html>
もしかしてこのふたつは同じコードになっていなければいけないのではないでしょうか？
だとすると私は今別のファイルを開いているので、反映されないという可能性はありますか？
初心者 さん
08月15日 15時06分
何度も申し訳ありません、途中でこんがらがって名前を変更・保存してしまったファイルがいくつもありましたので、練習中に作成したHTMLファイルもjsファイルも、一度全部削除して初めから作り直した結果、正常に作動しました!
たしかにdを消すとページに何も表示されなくなっており、やはり別のファイルを開いていた可能性があるのですが、そうでしょうか？
たしかにdを消すとページに何も表示されなくなっており、やはり別のファイルを開いていた可能性があるのですが、そうでしょうか？
初心者 さん
08月15日 15時28分
■15:00 のご投稿の内容に関して
確実に操作されていると仮定するのであれば、謎としか言えませんね(汗)。
ファイルに問題があるというよりは、意図したmyFirst.jsファイルを読めていないように思えます。
実際に操作を見ていれば分かることですが、残念ながら文面だけでは判断が難しいです。
■15:06 のご投稿内容に関して
ソースの方は、JavaScriptがHTMLに直書きになっていますので明らかにおかしいです。普通にソースを表示した場合、今回のHTMLであれば、ソースと全く同じになるからです。
なんらかの手違いの可能性が考えられます。
■15:28 のご投稿内容に関して
複数の項目をご提案してしまったので、余計に複雑にしてしまい、申し訳ありません。
こんがらがってしまうと正常に検証することが難しくなります。
そんな時は、今回実行されたように、気持ち新たにやり直すのがベストです。
できたようで良かったです。
現在は問題ないようでしたら、想定と違うファイルを参照していたのかもしれませんね。
操作画面を隣で見ていればすぐに答えが分かることなのですが、文字情報だけのやり取りですと正解を導くのが難しいですね。
あまりお役に立てませんでしたが、何はともあれ、今正常に動作していればOKと思います。このようなハードルを何度も超えていくと、自然と原因もすぐに分るようになってくると思いますよ☆
確実に操作されていると仮定するのであれば、謎としか言えませんね(汗)。
ファイルに問題があるというよりは、意図したmyFirst.jsファイルを読めていないように思えます。
実際に操作を見ていれば分かることですが、残念ながら文面だけでは判断が難しいです。
■15:06 のご投稿内容に関して
> もしかしてこのふたつは同じコードになっていなければいけないのではないでしょうか？
> だとすると私は今別のファイルを開いているので、反映されないという可能性はありますか？
ソースの方は、JavaScriptがHTMLに直書きになっていますので明らかにおかしいです。普通にソースを表示した場合、今回のHTMLであれば、ソースと全く同じになるからです。
なんらかの手違いの可能性が考えられます。
■15:28 のご投稿内容に関して
複数の項目をご提案してしまったので、余計に複雑にしてしまい、申し訳ありません。
こんがらがってしまうと正常に検証することが難しくなります。
そんな時は、今回実行されたように、気持ち新たにやり直すのがベストです。
> たしかにdを消すとページに何も表示されなくなっており、やはり別のファイルを開いていた可能性があるのですが、そうでしょうか？
できたようで良かったです。
現在は問題ないようでしたら、想定と違うファイルを参照していたのかもしれませんね。
操作画面を隣で見ていればすぐに答えが分かることなのですが、文字情報だけのやり取りですと正解を導くのが難しいですね。
あまりお役に立てませんでしたが、何はともあれ、今正常に動作していればOKと思います。このようなハードルを何度も超えていくと、自然と原因もすぐに分るようになってくると思いますよ☆
馬場誠 さん
08月15日 19時07分
お返事おそくなりまして申し訳ありません。
相談にのっていただけてよかったです、本当にありがとうございました。
相談にのっていただけてよかったです、本当にありがとうございました。
初心者 さん
08月18日 15時02分
