【学習におすすめ】JavaScriptで使えるサンプル集

JavaScriptはweb制作で使用できる言語で、動きのあるサイトや機能性があるサイトを作ることができます。

JavaScriptの学習を進めてきた方であれば「そろそろJavaScriptも使ったwebサイトを制作してみたい！」と思っている方もいるのではないでしょうか。

ただ、いざJavaScriptを使ってwebサイトを作ろうとしても「具体的にどんなふうにコードを書けばいいんだろう？そもそもJavaScriptは何ができるんだろう…」と疑問に感じてしまいますよね。

そんな時は、JavaScriptのサンプルコードに目を通してみるのがおすすめです。

JavaScriptのサンプルコードを読んでみれば「どんな場面でJavaScriptが使えるか」「どんなコードを書けばいいのか」がわかるので、webサイト制作もしやすくなります。

この記事では、JavaScriptで使えるサンプルコードを用途別に紹介します。

サンプルコードに目を通せば、JavaScriptの勉強にもなるので、ぜひ読んでみてください。

【用途別】JavaScriptで使えるサンプル(リンク・ウインドウ編)

実はwebサイト内のリンクや、ブラウザのウインドウに関する機能は、JavaScrptで実装できます。

具体的には、以下のような機能が実装できます。

【JavaScrptで実装できる機能(リンク・ウインドウ編)】

ボタン型リンクの設置
クリックしたら新しいタブ/ウインドウが開く
戻る（進む）のボタンの設置
ウインドウを閉じるボタンの設置
ポップアップウインドウの表示
ページの更新

それぞれの機能はどんなコードを書けば実装できるのか、サンプルコードを見ていきましょう。

ボタン型リンクの設置

以下のようなボタン型リンクは、inputタグとonclickを用いて実装します。

HTMLに以下のようなコードを書きましょう。

HTML

onclickの中身次第で、様々な機能を実装できます。

クリックしたら新しいタブ/ウインドウが開く

リンクをクリックしたら新しいタブ（ウインドウ）が開く機能は、JavaScriptのwindow.openメソッドで実装可能です。

一つ目に、新しいタブを開く機能の実装方法を解説します。

まずはHTMLにコーディングをしてリンクを作成しましょう。

リンクをクリックしたら新しいタブが開くようにしたいので、ここではonclickを使い、onclick属性の値にはnew_pageという関数を使ってみます。

HTML

次に、new_pageという関数の中身を設定します。

ここで、window.openメソッドの出番です。

JavaScriptのファイルに以下のようなコードを書き、new_page関数の中身を決めます。

JavaScript

function new_page(){

window.open(“url”,””,”“);

};

これで、リンクをクリックしたら新しいタブが開くようになりました。

window.openの引数は以下の通りです。

window.openの引数

window.open(“任意のurl”,”ウインドウ名”,”プロパティ”);

プロパティは、リンクを新しいウインドウで開きたい時に設定するもので、新しいウインドウで開いた時のサイズなどを指定できます。

プロパティを設定するかどうかで、新しいタブで開くか新しいウインドウで開くかが決まります。

ウインドウのサイズ指定は”width=800,height=600″というふうに書きましょう。

新しいタブで開きたい時

→プロパティを設定しない

新しいウインドウで開きたい時

→プロパティを設定する（ウインドウのサイズなど）

window.openを用いれば、新しいタブで開くことも、新しいウインドウで開くことも可能です。

戻る（進む）のボタンの設置

一つ前のページに戻る（or一つ後のページに進む）ボタンを設置したい時は、history.back（history.forward）メソッドを使います。

一つ前のページに戻らせたい時は、以下のようなコードを書きましょう。

HTML

<form>

</form>

JavaScript

function back_page(){

history.back();

};

一つ後のページに進みたい時は、history.forwardを用いて以下のように書きます。

HTML

JavaScript

function next_page(){

history.forward();

};

ウインドウを閉じるボタンの設置

ウインドウを閉じるボタンを設置する場合、window.closeを使いましょう。

HTML

JavaScript

function close_page(){ window.close(); };

ただしこのコードだと、ブラウザによっては動作しない場合があります。

動作しない場合は、以下のコードを試してみましょう。

HTML

JavaScript

function close_page(){ window.open(“”,”_self”).close(); };

ポップアップウインドウの表示

ポップアップウインドウとは、表示されているウインドウとは別に表示される小さなウインドウのことです。

例えばSNSなどで投稿を削除する時に「本当に削除しますか？」と小さなウインドウで表示されるものがポップアップウインドウにあたります。

ポップアップウインドウを実装したい場合は、aleatで実装可能です。

HTML

JavaScript

function pop_window(){ alert(“ボタンが押されました”); };

このコードでボタンをクリックすると、以下のようなポップアップウインドウが表示されます。

ページの更新

現在表示されているページを更新するボタンを実装したい場合は、window.location.reloadを利用します。

以下のようなコードを書きましょう。

HTML

JavaScript

function reload_window(){ window.location.reload(); };

【用途別】JavaScriptで使えるサンプル(画像編)

JavaScriptは画像に関する機能も実装できます。

【JavaScrptで実装できる機能(画像編)】

画像の切り替え
画像の移動
画像の拡大
画像の回転

画像の切り替え

画像の切り替えができるボタンを実装したい場合は、setAttributeを用います。

変更したい画像を設置する際は、idを必ず設定しましょう。

HTML

JavaScript

function change_img(){ 任意のid.setAttribute(“src”,”変更後の画像のパス”); };

以下のように画像が表示されている際、

「画像の変更」ボタンを押すと、以下のように画像が変わります。

画像の拡大

画像の拡大は、JavaScriptで画像のwidth、heightを変更することで実装可能です。

HTML

<form>

</form>

JavaScript

function big_img(){ 任意のid.style.width=拡大後の数値+”px”; 任意のid.style.height=拡大後の数値+”px”; };

以下のページの「画像の拡大」をクリックすると、

画像が拡大されます。

画像の回転

画像の回転を行いたい時は、transformを使います。

HTML

JavaScript

function rolling_img(x){ 任意のid.style.transform = “rotate(” + x + “deg)”; }

例えば以下のページで「画像の回転」ボタンを押すと、

画像が回転します。

【用途別】JavaScriptで使えるサンプル(文字列編)

ここからは、文字列に関するサンプルを紹介します。

【JavaScrptで実装できる機能(文字列編)】

文字列の変更
色や太さを変更する

文字列の変更

文字列を変更するには、innerTextを利用します。

以下のように記述します。

HTML

<p id=”change”>このテキストが変更されます。</p> <form> <input type=”button” value=”テキストの変更” onclick=”change_txt();”> </form>

JavaScript

function change_txt(){ document.getElementById(“change”).innerText=”テキストが変更されました。”; };

変更したいテキストにはid名をつけ、JavaScriptにて変更したいテキストのidを指定し、innerTextでどのようにテキストを変更したいかを決めます。

上記のコードであれば、以下のサイトのボタンを押すと、

テキストが変更されます。

色や太さを変更する

文字の色や太さを変更する際はstyle.colorとstyle.fontWightを使用します。

JavaScriptでfont-wightと記述することは、よくある間違いなので気をつけましょう。

HTML

<p id=”change”>このテキストが変更されます。</p> <form> <input type=”button” value=”テキストの変更” onclick=”change_stl();”> </form>

JavaScript

function change_stl(){ document.getElementById(“change”).style.color=”purple”; document.getElementById(“change”).style.fontWeight=”bold”; };

以下のサイトのボタンを押すと、

文字が紫になり、太字になります。

【用途別】JavaScriptで使えるサンプル(時間編)

JavaScriptを用いれば、サイトに時間を載せることもできます。

【JavaScrptで実装できる機能(時間編)】

年や月日の表示
現在時刻の表示

それぞれ見ていきましょう。

年や月日の表示

年や月日を表示させたい場合、HTML内に以下のコードを挿入します。

HTML

すると、以下のように年や月日が表示されます。

現在時刻の表示

現在時刻を表示させたい時も、HTMLに以下のコードを書き込みます。

HTML

時間の表示のされ方は以下の通りです。

【用途別】JavaScriptで使えるサンプル(その他)

最後に、JavaScriptで実装できるその他の機能のサンプルコードを紹介します。

【JavaScrptで実装できる機能(その他)】

ブラウザの判別
OSの判別

ブラウザの判別

ページを閲覧している人のブラウザを判別したい時は、window.navigator.appVersionを使用します。

HTML

表示のされ方は以下の通りです。

OSの判別

ページを閲覧している人のブラウザを判別したい時は、window.navigator.platformを使用します。

HTML

表示のされ方は以下の通りです。

まとめ：JavaScriptのサンプルを有効活用しよう！

JavaScriptだけでなくプログラミングの勉強をしていると「この言語はどのように活用すればいいのだろう」と疑問に思うことがあるかもしれません。

しかし、webサイトに使われているサンプルコードに目を通してみると「こんなふうに使えばいいんだろう！」という発見があるはずです。

JavaScriptのサンプルコードは様々な種類があるので、サンプルコードに触れてJavaScriptのスキルを高めていきましょう。

「これからの時代、プログラミングと英語が必要そう…」
それは、間違いではありません。

あと10〜20年の間に、人間が行う仕事の約半分が機械に奪われると言われています。
そのような未来がきたとき、自分自身、そしてあなたの大切な人を守れますか？

セブ島 IT×英語留学の「Kredo」では、
政府公認ITカリキュラム
大学教授レベルのフィリピン人IT教員
スピーキングに特化した英語クラス
日本人スタッフによる学習サポート
などによって、これからの時代に必要なIT×英語のスキルが
初心者からでも最短で身につきます。

KredoのIT留学で人生を変えてみませんか？

＼プログラミングと英語が同時に身につく！／
KredoのIT留学について詳しくみる

Kredo オンラインキャンプなら

プログラミング×英語を身につけてグローバルに活躍しませんか？

当メディアを運営しているKredoでは、プログラミング × 英語が学べる人気オンラインサービス『Kredoオンラインキャンプ』を運営中です。コロナ禍でもオンラインで、プログラミング×英語を身につけた卒業生は海外企業、外資系企業、グローバル企業への就職を果たしています。コロナ禍の今だからこそ、スキルを身につけ転職の準備をしませんか？