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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

21539閲覧

「window.onload」の使い方がまだよくわかりません

satopon

総合スコア12

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2016/11/07 14:41

###前提・実現したいこと
Javascriptを勉強し始めたところです。
「window.onload」という命令文?がどういう場面で使うのかと疑問に思いました。

###該当のソースコード

<head> <meta charset="UTF-8"> <script> window.onload = function () { var str = ""; var day = new Date().getDay(); switch (day) { case 0: str = "日"; break; case 1: str = "月"; break; case 2: str = "火"; break; case 3: str = "水"; break; case 4: str = "木"; break; case 5: str = "金"; break; case 6: str = "土"; break; } document.getElementById("day").textContent = str; } </script> </head> <body> <h1>今日は<span id="day"></span>曜日</h1> </body> </html>

###試したこと
これは教本のソースなのですが、
そのまま立ち上げると「今日は月曜日」と表示され
window.onloadを抜いみると「今日は曜日」となり<span id="day">の部分が消えました。

他のソース(変数を足して表示するような初歩的なもの)ではwindow.onloadが無くても正常に表示されていたので、なぜこのソースではwindow.onloadが必要なのでしょうか?
条件式が絡んでいるからでしょうか?

まだ勉強しはじめなのでレベルの低い質問かもしれませんが、簡単にでいいので教えていただけると幸いです。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/11/08 17:15

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況をお教えください。
satopon

2016/11/23 15:40

まだこのサイトの使い方に慣れてないので締め切るのを忘れていました。ありがとうございました。
guest

回答2

0

HTMLは上から順に処理されていきます。
headの中にスクリプト書くと、headが読まれる時点でスクリプトが実行されます。その時点ではまだbodyは存在しないので、document.getElementById("day").textContent = str;を実行するとエラーになります。
その後で、bodyが解釈されて「今日は曜日」と表示されます。

window.onload = function()~~~と書くことで、headの解釈時点で、「htmlの解釈が全部終わってページが表示されてからfunctionを実行する」というのを予約することになります。この場合、functionの中身が実行される時点ですでに「今日は曜日」と表示されているので、document.getElementById("day").textContent = str;が成功します。

投稿2016/11/07 15:13

otn

総合スコア84423

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

satopon

2016/11/07 19:02

予約するということですね。 教本ではまだwindow.onloadの詳しい説明がされていないところなので納得できました。 ありがとうございました
guest

0

ベストアンサー

まず
document.getElementById("day").textContent = str;
が何をしているかはわかりますか?

id="day"が指定されている要素のにstrを書くという事ですよね?

つまりこれが実行されたら

<h1>今日は<span id="day"></span>曜日</h1>
だったものが(もしstrが水という文字だったら)
<h1>今日は<span id="day">水</span>曜日</h1>
なるわけですよね?

そのように曜日を割り込ませるのをいつしているか?というタイミングが
window.onload
なわけです。

つまり
ウィンドウがロードされたら、funcitonの部分を実行しているわけです。

参考http://qiita.com/cervomansan/items/0873026853686503fc3a

例えば
// window.onload = function () {
の部分を

var youbi = function () { var str = "";

のように変えて

<button onClick="youbi();">押す</button> <h1>今日は<span id="day"></span>曜日</h1> </body>

な風にすると今度はボタンが押されたタイミングで曜日を表示するようにかわるはずです。
という事で今の所はようはいつやるの?という事だと思っていたらいいんじゃないでしょうか

投稿2016/11/07 14:53

編集2016/11/07 15:00
hiim

総合スコア1689

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

satopon

2016/11/07 19:00

まさにwindow.onloadが必要不要なプログラムはどう違うんだろうということが知りたかったんです。 ウィンドウがロードされたら、ボタンが押されたら、という説明で理解が進んだような気がします。 とりあえず今のところはどのタイミングでidを読みに行くのかということで保留しておこうと思います。 ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問