
スキルアップ
2021.04.15
社会人におすすめなプログラミングスクールの条件とは?目的別25校と選び方
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
JavaScript
2017.12.20
JavaScript の記述方法のサンプルを挙げてみます。
今回は、JavaScript の 表示関連の記述方法についてのサンプルを紹介します。
1.アラート表示
2.テキストボックスに表示
3.任意の場所に表示
4.時計を表示
このサンプルは、入力内容をアラート表示させるサンプルです。
メッセージを入力して 表示ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript"> <!-- function disp() { alert(document.getElementById("dat").value); } //--> </script> <div style="background-color : #CCC;"> <div style="display:inline-flex; align-items: center;"> <input type="text" id="dat" placeholder="メッセージを入力して下さい。"> <input type="button" value="表示" onClick="disp()"> </div> </div>
固定のメッセージや変数を表示させるだけであれば、「 alert(“メッセージ”); 」「 alert(変数); 」の記述のみでOKです。
このサンプルは、入力内容をテキストボックスに表示させるサンプルです。
上のテキストボックスにメッセージを入力して 表示ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript"> <!-- function disp() { document.getElementById("dat2").value = document.getElementById("dat1").value; } //--> </script> <div style="background-color : #CCC;"> <input type="text" id="dat1" placeholder="メッセージを入力して下さい。"> <input type="button" value="表示" onClick="disp()"> <input type="text" id="dat2" placeholder="ここに表示されます。"> </div>
HTML要素の中身を書き換えることができる innerHTML プロパティを使用して、任意の場所にテキストを表示させることができます。
このサンプルは、入力内容を表示ボタンの下に表示させるサンプルです。
メッセージを入力して 表示ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript"> <!-- function disp() { document.getElementById("dat2").innerHTML = document.getElementById("dat1").value; } //--> </script> <div style="background-color : #CCC;"> <input type="text" id="dat1" placeholder="メッセージを入力して下さい。"> <input type="button" value="表示" onClick="disp()"> <div id="dat2"></div> </div>
デジタル時計を表示してみます。
ソースコードは次の通りです。
<script type="text/javascript"> <!-- function disp() { var fm = function(num) { num += ""; if (num.length == 1) { num = "0" + num; } return num; }; var dt = new Date(); var yea = dt.getFullYear(); var mon = fm(dt.getMonth() + 1); var day = fm(dt.getDate()); var hou = fm(dt.getHours()); var min = fm(dt.getMinutes()); var sec = fm(dt.getSeconds()); document.getElementById("dat").value = yea + "/" + mon + "/" + day + " " + hou + ":" + min + ":" + sec; } setInterval("disp()",1000); // --> </script> <div style="background-color : #CCC;"> <input type="text" id="dat""> </div>
現在日時を取得して表示する disp 関数と 処理間隔1000(ミリ秒)を「 setInterval(“disp()”,1000); 」と指定して、1 秒( 1000ミリ秒 )毎に現在日時を取得して表示しています。
上記 disp 関数の内容については、JavaScript【 Date 】4 ~ setIntervalでリアルタイム表示をご参照下さい。
スキルアップ
2021.04.15
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
スキルアップ
2021.04.15
Webディレクターとは、Webサイト制作や、企画、運用の現場においてリーダーの役割を担う職種です。多くの業務をこなすため大変な仕事ではありますが、その分やりがいや魅力もある仕事です。本記事では、Webディレクターの具体的 […]
スキルアップ
2021.04.14
IT業界やエンジニアという職種に対してなんとなくイメージは持っているものの、具体的にどんな仕事をしているのか詳しく知らないという方もいらっしゃるでしょう。本記事では、IT業界とはどんな業界なのかをわかりやすく解説。各業種 […]
スキルアップ
2021.04.02
IT業界未経験からITエンジニアへ転職しようとするとき、強い味方になってくれるのが資格です。IT系の資格試験には数多くの種類があり、取得することでスキルの証明が可能。本記事では、未経験者が就職を有利にするためのおすすめ資 […]
スキルアップ
2021.04.01
「プログラミングができると就活が余裕らしいけど、大学生のうちにプログラミングを学ぶメリットって何?」と考えている方に向けて、本記事では元エンジニアである筆者がこれまでの経験則をもとに、在学中にプログラミングを学習するメリ […]
スキルアップ
2021.04.01
【2021年最新】いざJava SE 11のBronze資格にチャレンジしようと思っても「申込方法が複雑すぎて難しい…」と困っている方も多いのでは?本記事では、2020年に新しくなったOracle認定Javaプログラマ試 […]
INTERNOUS,inc. All rights reserved.