実際使える【JavaScript】サンプルコード集
実際使える【Javascript】サンプルコード集
はじめに
・「Javascript」とはWebサイトを表示するブラウザ上で動くプログラム言語です。 JavaScriptというプログラミング言語を使用することで、ブラウザ上で画像を拡大表示し、見やすくしたり、 入力フォームを設置してメッセージを送信することが可能になりWebサイトに動きを加える事ができます。
【Javascript】ダイアログの表示
・ボタンを押下すると「Javascript」のalt() 関数が呼び出されます。 alert("文字列") と記述すると、簡単にダイアログを表示させることが可能となります。 文字列の中で改行を行いたい場合は「\n」改行を行いたい文字列の先頭に使用すると可能になります。
1. ＜form＞＜input type="button" value="Hello" onClick="alt()"＞＜/form＞
2.
3. ＜script type="text/javascript"＞
4. function alt() {
5. alert("Hello world!! ダイアログを表示致します。");
6. }
7. ＜/script＞
2.
3. ＜script type="text/javascript"＞
4. function alt() {
5. alert("Hello world!! ダイアログを表示致します。");
6. }
7. ＜/script＞
【Javascript】フォームへ文字の表示
・リンクへマウスを当てると、フレームの文字枠に文字を表示させることが可能です。 アンカータグの中の「onMouseOver」イベントで、ファンクション「msg」の呼び出しを行っています。 リンクをいくつか用意したい場合はファンクションの名称を変更しなくてはいけません。 呼び出しに必要なファンクションが異なりますので、ファンクションの名称を変更し、必要分ファンクションの作成を行います。 それに伴い対応するアンカータグの中も変更しましょう。
1. ＜input type="text" name="textbox" id="textbox" size="30"＞
2. ＜a href="index.html" onMouseOver="msg1()"＞サンプルページトップページへ＜/a＞／
3. ＜a href="index.html" onMouseOver="msg2()"＞サンプルページ次のページへ＜/a＞
4.
5. ＜script type="text/javascript"＞
6. function msg1() {
7. document.getElementById("textbox").value = "サンプルページトップページへ";
8. }
9.
10. function msg2() {
11. document.getElementById("textbox").value = "サンプルページ次のページへ";
12. }
13. ＜/script＞
2. ＜a href="index.html" onMouseOver="msg1()"＞サンプルページトップページへ＜/a＞／
3. ＜a href="index.html" onMouseOver="msg2()"＞サンプルページ次のページへ＜/a＞
4.
5. ＜script type="text/javascript"＞
6. function msg1() {
7. document.getElementById("textbox").value = "サンプルページトップページへ";
8. }
9.
10. function msg2() {
11. document.getElementById("textbox").value = "サンプルページ次のページへ";
12. }
13. ＜/script＞
【Javascript】フォームから送信する前の確認ダイアログ
・データの送信を行う前に最終確認を行うダイアログを表示し、「ＯＫ」なら送信します。 サンプルコードではPOSTでフォームの送信を行っていますが他にもGETでも送信は可能です。ですがURLに送信内容が表示されます。
1. ＜form method="post" action="../Sample.html" onSubmit="return checkSubmit()"＞
2. ＜input type="text" name="text1" value="データを送信します"＞
3. ＜input type="submit" value="送信する"＞
4. ＜input type="reset" value="クリア"＞
5. ＜/form＞
6.
7. ＜script type="text/javascript"＞
8. function checkSubmit() {
9. return confirm("本当に送信してもよろしいですか？");
10. }
11. ＜/script＞
2. ＜input type="text" name="text1" value="データを送信します"＞
3. ＜input type="submit" value="送信する"＞
4. ＜input type="reset" value="クリア"＞
5. ＜/form＞
6.
7. ＜script type="text/javascript"＞
8. function checkSubmit() {
9. return confirm("本当に送信してもよろしいですか？");
10. }
11. ＜/script＞
【Javascript】現在の日本時間の日時を表示
・「Javascript」のnew Date関数でコンピュータから日本時間の日時を取得し変数nowへ代入し、その後、各変数へ日時などを関数で取得し代入しています。 次に変数と文字を組み合わせて１つの文章を作成し、これを変数mに代入します。 getMonth関数には月を示す数値が入っていますが、実際の月よりも１つ少なく、0～11で表されます。 その為、月を表示させたい場合は、＋１を行う必要があります。
1. ＜span id="view_time"＞＜/span＞
2.
3.
4. ＜script type="text/javascript"＞
5.
6. document.getElementById("view_time").innerHTML = getNow();
7.
8. function getNow() {
9. var now = new Date();
10. var year = now.getFullYear();
11. var mon = now.getMonth()+1; //＋１を行う
12. var day = now.getDate();
13. var hour = now.getHours();
14. var min = now.getMinutes();
15. var sec = now.getSeconds();
16.
17. //表示
18. var m = year + "年" + mon + "月" + day + "日" + hour + "時" + min + "分" + sec + "秒";
19. return m;
20. }
21. ＜/script＞
2.
3.
4. ＜script type="text/javascript"＞
5.
6. document.getElementById("view_time").innerHTML = getNow();
7.
8. function getNow() {
9. var now = new Date();
10. var year = now.getFullYear();
11. var mon = now.getMonth()+1; //＋１を行う
12. var day = now.getDate();
13. var hour = now.getHours();
14. var min = now.getMinutes();
15. var sec = now.getSeconds();
16.
17. //表示
18. var m = year + "年" + mon + "月" + day + "日" + hour + "時" + min + "分" + sec + "秒";
19. return m;
20. }
21. ＜/script＞
まとめ
・いかがでしたでしょうか。今回は「Javascript」で良く使用するサンプルコードについてご紹介いたしました。 もし、サンプルコードの中で気になるものがあればぜひご使用してみてはいかがでしょうか。今回はご紹介したサンプルコード以外にも 便利な関数はたくさんありますので気になる方は勉強してみてはいかがでしょうか。
関連記事一覧