• 締切済み

【JavaScipt】日時取得と表示方法の概要

一般的な日時表示をしようと思うなら、 Date オブジェクトで取得した値をgetDate()のようなメソッドを使って変換して使うものらしいということはわかりました。しかし、いろいろと種類があるうえに用語が多く、自分の場合に優先して学び始める部分を探すことから難儀しています。大まかな検討を付けたいため、取得や表示にざっくりどういう分類があると考えたらいいのか教えていただけませんか。書いた通り、なじみのない言葉が多くて難儀しているので、子どもにでもわかるような説明を希望します。このような知識の身に付け方が適切でない・理解しがたいと思われる場合は、回答をしていただく必要はありません。 よろしくお願いします。

みんなの回答

  • asciiz
  • ベストアンサー率70% (6821/9700)
回答No.4

>取得できる情報の選択肢と内容の理解です。 >時刻関与情報としてどんな情報を抽出できるのか、何を参照した結果出力される >(何を基準とした)時刻を使えるのかを知りたいのです。 そういったJavaScript自体の知識や、用意されている標準的なオブジェクトに関しては、回答No.2さんのページから1つ上がったこちらのページにほぼすべての解説があります。 >とほほのJavaScriptリファレンス - とほほのWWW入門 >http://www.tohoho-web.com/js/index.htm で、 >「自分の都合の良い方法を使えばいい」の「自分の都合の良い方法」を >イメージできない状態を克服したいがための質問だと思っていただければ。 その部分に関してはHTMLの知識が必要になります。 JavaScriptはHTMLに組み込んで記述し、実行され、その出力も基本的にはHTMLの一部となって、ブラウザに渡されて表示されます。 ですから、ブラウザでできる表示方法ならば、どんなことでもできるのです。 でもそれを知りたいと思っても、JavaScriptの本にはほとんど書いていません。 HTMLの教本を読んでください。 そしてCSSの教本を読んでください。 それらの教本に載っているHTMLファイルを書き、CSSで修飾したものをブラウザで表示させ、どのような表現方法ができるが理解できていくのです。 そのように実際に手を動かすことが重要です。 例えばテニスがうまくなりたいと言っても、テニスのルールブックを読み、プロプレイヤーのビデオを何度見返そうとも、自分でできるようにはなりません。 自分でラケットを振り玉を打って、どういう感じかわかってきたら、改めて参考書を見てみれば、自分にとって効果のある練習法に気づいたりします。 私が例に出した4つのHTMLファイルも、実際にファイルとして保存し、表示してみてください。 そうすれば表示の違いなんか、一発でわかるでしょう。 そしてHTMLでできることは何だってできますから、全てを網羅した解説なんてものは存在しません。 その点では、あなたのお望みになっている「目次や要約が欲しい」という願いをかなえるのは不可能です。 それは、この世界にあるすべてのHTML表現方法を解説せよ、と言っているわけで、無限の時間が必要になります。 HTML教本や解説Webにあるサンプルを読み、自分で打ち込んで実行し、改造してみては実行し、理解していくんです。 私だって自分でプログラムを賭けるようになるまでは、100本や200本どころじゃないプログラムを組んできました。(もちろん超簡単なものも複雑なものも1本として数えてですが) 方法論ばかりを探し続けても、一歩も進みません。 実際に手を動かして、やってみてください。 そして改造してみてください。 それがゼロを1にする一歩です。 1になれば、すぐに10にも20にも、100にもなると思います。

noname#247225
質問者

お礼

ありがとうございました。

noname#247225
質問者

補足

念の為に繰り返すなら、html/cssは実際に使っています。そして一応実践、つまり具体的に必要性があって学ぼうとしているわけですから、質問前から学習も試行も当たり前に継続しています。それでも質問が理解しがたいという姿勢で進まれる方は、質問文の「回答していただく必要はない」の対象です。たとえそれによってすれ違いが解決する可能性があっても、ここで質問から大きく外れた問答を行う予定はありませんので、ご了承願います。

  • asciiz
  • ベストアンサー率70% (6821/9700)
回答No.3

>いろんな条件等から結果として選ぶことになった言語なので、おそらく変わることはありません。 そうですか。 それでは、JavaScriptでの日付表示サンプルをいくつか示します。 サンプルにはHTMLタグが含まれますが、「----ここから----」「----ここまで----」の間を1つのhtmlファイルとして保存し、ブラウザで表示させてみてください。 ●ブラウザ本文に表示する場合 ----ここから---- <html> <head> <title>Date test</title> </head> <body> 現在の日時は: <script> var date = new Date(); document.write(date.toString()); </script> です </body> </html> ----ここまで---- 手抜きして、現在の日時文字列全部を得る Date.toString() を使っています。 それを document.write でHTMLの一部として出力しています。 これを呼び出すのは表示したそのときだけなので、一度表示したら値は変わりません。 [F5]等でリロードすれば、表示が更新されます。 ●alertに表示する場合 ----ここから---- <html> <head> <title>Date test</title> <script> function alertnow() { var date = new Date(); alert("現在の日時は " + date.toString() + "です"); } </script> </head> <body> <button onclick="alertnow()">日時表示</button> </body> </html> ----ここまで---- [日時表示] ボタンを押すと onclick= の関数が動作し、alertダイアログに表示します。 表示するたびに動くので、ボタンを押したときの日時が出ます。 ●コンソールに表示する場合 ----ここから---- <html> <head> <title>Date test</title> </head> <body> 日時はコンソールログを確認してください。 <script> var date = new Date(); console.log("現在の日時は " + date.toString() + "です"); </script> </body> </html> ----ここまで---- このHTMLを表示すると、「日時はコンソールログを確認してください。」としか出てきません。 しかしここで、[F12]キーを押して開発ウインドウを出し、「console」タブを選択すると、日時文字列が出力されているのを確認できます。 ●自動更新表示させる場合 ----ここから---- <html> <head> <title>Date test</title> <script> function updateNow() { var date = new Date(); var form = document.forms['NowForm']; form.elements['YY'].value = date.getFullYear(); form.elements['MM'].value = date.getMonth()+1; // 1~12月=0~11で得られる form.elements['DD'].value = date.getDate(); form.elements['H'].value = date.getHours(); form.elements['M'].value = date.getMinutes(); form.elements['S'].value = date.getSeconds(); } </script> </head> <body> <form action="#" name="NowForm"> 現在日付: <input type="text" name="YY" size="2">/<input type="text" name="MM" size="2">/<input type="text" name="DD" size="2"><br> 現在時刻: <input type="text" name="H" size="2">:<input type="text" name="M" size="2">:<input type="text" name="S" size="2"><br> </form> <script> updateNow(); setInterval(updateNow, 1000); </script> </body> </html> ----ここまで---- フォームで日時の欄を用意し、updateNow() で呼ばれたときに、各欄の数値を入れることで表示します。 さらに intervalSet() 関数で 1000ミリ秒(=1秒)ごとに再度 updateNow() を呼び出すので、表示が更新し続けられます。 -- 表示に何を使わなければいけないか、なんて決まっていませんので、自分の都合の良い方法を使えばいいです。 実行してそのまま結果を見たいのであれば、そのまま出す document.write で良いでしょうし、それだと表示が崩れて困る、と言うときには console.log に出したりします。 ボタンで何かを動作させたときの表示なんかは、alert か console.log が良いでしょうね。 alert は表示が消えてしまいますが、console.log ならばウインドウを閉じるまでずっと残ります。 まあ、日付などの値を得るのは1行ですが、どう表示したいか、って話です。

noname#247225
質問者

お礼

説明下手をお詫びします。この質問を通じて本来解決したい内容から逸れることを防ぐため言及しないだけで、二度のご回答内容は無意味どころか、いろいろと活かさせていただいているので、申し訳ない気持ちです。

noname#247225
質問者

補足

現状として、「取得・表示したい情報を正確に取得できているのかはわからない」が、「一応時刻の取得や表示自体は成功している」。つまり回答を得ることで学習の糸口にしたい知識の一つは、取得できる情報の選択肢と内容の理解です。時刻関与情報としてどんな情報を抽出できるのか、何を参照した結果出力される(何を基準とした)時刻を使えるのかを知りたいのです。もう一つは、可読性配慮です。といっても、ループや条件分岐などの全範囲で共通処理を行うものの話は含めず、メソッド等呼ばれる特有処理を行うものの範囲でです。 「自分の都合の良い方法を使えばいい」の「自分の都合の良い方法」をイメージできない状態を克服したいがための質問だと思っていただければ。ただし、質問文の繰り返しになりますが、この質問が回答として求めているのは自分が習得を目標とする知識自体ではなく、その知識習得を効率良く行うための情報です。 ※逆に誤解を招くかもしれませんが、質問文の内容を言い換えれば、「時刻操作に関するJavaScriptの子ども向けの解説書」じゃなくて、その解説書の子ども向けの目次や要約が欲しいといったところでしょうか……。

  • t_ohta
  • ベストアンサー率38% (5253/13739)
回答No.2

比較的判りやすくまとめられているページ http://www.tohoho-web.com/js/date.htm

noname#247225
質問者

お礼

ありがとうございます。

  • asciiz
  • ベストアンサー率70% (6821/9700)
回答No.1

なぜJavaScriptを覚えようと思ったんでしょうか。 JavaScript自体は、パソコン一つ、ブラウザ一つあれば動くので、お手軽ではあるんですけども。 言語自体の知識の他に、HTMLの知識、ブラウザオブジェクトの知識、オブジェクト指向プログラミングの考え方など、初めて学習するプログラミング言語としては多種多様な知識が必要になり、正直、初心者向けではありません。 これまでにHTMLでWebページを作っていたりして、そこにちょっとした仕組みを加えたいな、なんて時には便利なモノですが。 それはすでにその時点でHTML・CSSなどの前提知識があるから、JavaScriptだけをちょっと覚えれば使えるようになるんです。 一からJavaScriptを覚えようとするなら、Webの仕組みとHTMLタグの種類と書き方から勉強する必要があると思います。 >【2018年版】初心者はどの言語が良い?おすすめプログラミング言語ランキングTOP10 | テックキャンプ ブログ >https://tech-camp.in/note/technology/37745/ 一からプログラミングを初めてみたい、と言うならば、Python か Ruby あたりをお勧めしたいところです。(プログラムの書き方はRubyの方がJavaScriptに近いですかね…) こちらならば、純粋にプログラムのみをテキストファイルに保存し、コマンド名に続けて記述するだけで実行できます。 JavaScriptでは、ブラウザで表示するのに必要なHTMLを書いたり、HTMLの中でタグ閉じを間違えてプログラムが動かなくなったり、プログラムは正しく動いててもHTML側がまずくて実行結果が見えなかったり、というトラブルが山盛りで起きます。 そういう、プログラミング以外の所で気をそがれるのがJavaScriptの欠点です。 PythonやRubyである程度書けるようになったなら、JavaScriptに手をつけても良いかもしれません。

noname#247225
質問者

お礼

ありがとうございます。

noname#247225
質問者

補足

ご回答内容は有り難く参考にさせていただきます。ただ、ご回答内容はご考慮・ご心配いただく内容ではないです。「優先して学び始める部分」云々は、ご心配されているよりは目的を絞った状態での知識習得を目標としているとお考えください。「選んだ」というより、いろんな条件等から結果として選ぶことになった言語なので、おそらく変わることはありません。

関連するQ&A

専門家に質問してみよう