カテゴリー

  • Tech
  • 英語学習
  • セブ島・留学準備
  • キャリア
  • Kredo
KredoのIT留学
スタッフ募集中
留学体験談
無料相談はこちら
セブ島IT留学の「Kredo」が運営するメディア「Kredoblog」
  • TECH Tech
    • Web・プログラミング

      Web・プログラミング

    • テクノロジー

      AI・テクノロジー

  • ENGLISH 英語学習
    • 英語学習法

      英語学習法

    • 英語表現・フレーズ

      英語フレーズ

  • STUDYABROAD セブ島・留学準備
    • 語学留学

      語学留学

    • IT留学

      IT留学

    • セブ島情報

      セブ島情報

  • CAREER キャリア
    • ITキャリア

      ITキャリア

    • 転職・海外就職

      転職・海外就職

    • インタビュー

      インタビュー

  • KREDO Kredo
    • ニュース・キャンペーン情報

      ニュース・キャンペーン情報

    • CEO・STAFFブログ

      CEO・STAFFブログ

    • IT×英語留学体験談

      IT×英語留学体験談
      [Kredo公式サイトへ]

5月申し込み限定授業料半額 kredo it留学オンライン
  • TOP
  • Tech
  • Web・プログラミング
  • 【学習におすすめ】JavaScriptで使えるサンプル集

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

Kredo編集部
Kredo編集部
公開日:2020.02.18
更新日:2020.02.17
Web・プログラミング |
  • ツイート
  • シェア
  • はてな
  • ポケット
 loading

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

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

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

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

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

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

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

記事のもくじ

  • 【用途別】JavaScriptで使えるサンプル(リンク・ウインドウ編)
    • ボタン型リンクの設置
    • クリックしたら新しいタブ/ウインドウが開く
    • 戻る(進む)のボタンの設置
    • ウインドウを閉じるボタンの設置
    • ポップアップウインドウの表示
    • ページの更新
  • 【用途別】JavaScriptで使えるサンプル(画像編)
    • 画像の切り替え
    • 画像の拡大
    • 画像の回転
  • 【用途別】JavaScriptで使えるサンプル(文字列編)
    • 文字列の変更
    • 色や太さを変更する
  • 【用途別】JavaScriptで使えるサンプル(時間編)
    • 年や月日の表示
    • 現在時刻の表示
  • 【用途別】JavaScriptで使えるサンプル(その他)
    • ブラウザの判別
    • OSの判別
  • まとめ:JavaScriptのサンプルを有効活用しよう!

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

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

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

【JavaScrptで実装できる機能(リンク・ウインドウ編)】
  1. ボタン型リンクの設置
  2. クリックしたら新しいタブ/ウインドウが開く
  3. 戻る(進む)のボタンの設置
  4. ウインドウを閉じるボタンの設置
  5. ポップアップウインドウの表示
  6. ページの更新

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

ボタン型リンクの設置

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

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

HTML
<form> <input type=”button” value=”クリックする” onclick=”document.location=’url’;”> </form>

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

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

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

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

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

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

HTML
<form> <input type=”button” value=”こちらをクリック” onclick=”new_page()”> </form>

次に、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″というふうに書きましょう。

  1. 新しいタブで開きたい時

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

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

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

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

戻る(進む)のボタンの設置

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

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

HTML
<form>
<input type=”button” value=”戻る” onclick=”back_page()”>
</form>

 

JavaScript
function back_page(){
    history.back();
};

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

HTML
<form> <input type=”button” value=”進む” onclick=”next_page()”> </form>

 

JavaScript
function next_page(){
    history.forward();
};

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

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

HTML

<form> <input type=”button” value=”閉じる” onclick=”close_page()”> </form>

 

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

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

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

HTML
<form> <input type=”button” value=”閉じる” onclick=”close_page()”> </form>

 

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

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

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

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

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

HTML
<form> <input type=”button” value=”クリックする” onclick=”pop_window();”> </form>

 

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

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

ページの更新

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

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

HTML
<form> <input type=”button” value=”更新する” onclick=”reload_window();”> </form>

 

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

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

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

【JavaScrptで実装できる機能(画像編)】
  1. 画像の切り替え
  2. 画像の移動
  3. 画像の拡大
  4. 画像の回転

画像の切り替え

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

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

HTML
<img src=”画像のパス” id=”任意のid” width=”600px” height=”400px”> <form> <input type=”button” value=”画像の変更” onclick=”change_img();”> </form>

 

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

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

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

画像の拡大

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

HTML
<img src=”画像のパス” id=”任意のid” alt=”” width=”600px” height=”400px”>
<form>
    <input type=”button” value=”画像の拡大” onclick=”big_img();”>
</form>

 

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

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

画像が拡大されます。

画像の回転

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

HTML
<img src=”画像のパス” id=”任意のid” alt=”” width=”400px” height=”400px”> <form> <input type=”button” value=”画像の回転” onclick=”rolling_img(90);”> </form>

 

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

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

画像が回転します。

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

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

【JavaScrptで実装できる機能(文字列編)】
  1. 文字列の変更
  2. 色や太さを変更する

文字列の変更

文字列を変更するには、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で実装できる機能(時間編)】
  1. 年や月日の表示
  2. 現在時刻の表示

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

年や月日の表示

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

HTML
<script language=”JavaScript”> today = new Date(); year = today.getFullYear(); month = today.getMonth() + 1; day = today.getDate(); document.write(“今日は”+year,”年”,month,”月”,day,”日”+”です。”); </script>

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

現在時刻の表示

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

HTML
<script language=”JavaScript”> today = new Date(); hours = today.getHours(); minutes = today.getMinutes(); seconds = today.getSeconds(); document.write(“今は”+hours+”時”+minutes+”分”+seconds+”秒”+”です。”); </script>

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

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

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

【JavaScrptで実装できる機能(その他)】
  1. ブラウザの判別
  2. OSの判別

ブラウザの判別

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

HTML
<script language=”JavaScript”> document.write(window.navigator.appVersion); </script>

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

OSの判別

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

HTML
<script language=”JavaScript”> document.write(window.navigator.platform); </script>

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

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

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

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

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

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

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

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

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

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

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

新規CTA

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

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

Kredo オンラインキャンプへ
  • ツイート
  • シェア
  • はてな
  • ポケット
この記事を書いた人
Kredo編集部
Kredo編集部

Kredo編集部です!Tech、英語学習、キャリア、セブ島留学の情報を発信していきます。

関連記事

  •  loading
    Web・プログラミング

    【IT転職成功した私が語る】progateが終わったらプログラミングスクール受講が効果的

    2022.06.08
  •  loading
    Web・プログラミング

    【2022年最新】フロントエンドエンジニアを目指せるおすすめスクール5選

    2022.05.16
  •  loading
    Web・プログラミング

    転職保証付きプログラミングスクールは危険!?口コミを元にリアルを解説

    2022.05.02
  •  loading
    Web・プログラミング

    主婦・ママが在宅で・スキマ時間でも学べるプログラミングスクール5選

kredo it 英語 留学

よく読まれている記事

  •  loading
    2022.05.25

    【6/23(木)~ 24(金)20:00 ~ 無料オンラインセミナー】プログラミング×英語を身につけろ!アフターコロナ時代を勝ち抜くキャリア戦略

  •  loading
    2022.04.19

    「好きなことを仕事に」IT初心者からプログラミング×英語を身に付けフリーランスエンジニアへ

  •  loading
    2021.07.08

    【7/4(月)~ 7/8(金)20:00 ~ 無料オンラインセミナー】プログラミング×英語習得で時代に左右されない海外フリーランスを目指す方法

  • Kredo CEO横田猛夫さん
    2019.06.26

    IT×英語を学ばなければ取り残される!Kredo CEOが日本衰退とIT業界の未来を解説

  • バックエンドエンジニアのコーディングのイメージ画像
    2019.06.05

    未経験でも習得できる実務レベルのプログラミングを学ぶコツを紹介!

IT留学オンライン
新規CTA

まずはお気軽にカウンセラーへご相談ください!

無料カウンセリングを予約する

IT×英語留学体験談

  • 10代
  • 20代
  • 30代
  • 40代~
  • 1〜4週間の短期留学
  • 5〜23週間の中期留学
  • 24週間以上の長期留学
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース

Kredo Blog

Tech 英語学習 セブ島・留学準備 キャリア Kredo
クレドページ
学校案内
  • Kredoの想い
  • Kredoが選ばれる理由
  • なぜ今、ITと英語なのか
  • 卒業実績
施設案内
  • 校舎・宿泊施設
  • セブ島・生活環境
留学準備
  • お申し込みまでの流れ
  • ご留学までの準備
  • 現地到着後の流れ
  • 留学中の1日のスケジュール
留学コース・料金[コース概要]
  • コース一覧
  • あなたに合ったコース選び
  • ITクラス・カリキュラム・教員
  • 英語クラス・カリキュラム・教員
  • 留学料金一覧
留学コース・料金[各コース一覧]
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース
  • 無料留学プログラム
  • 海外ITインターン留学(LIG)
  • 海外ITインターン留学(Sprobe)
  • 海外ITインターン留学(Alliance)
  • 親子留学 Kredo Kids
その他
  • Kredo Blog
  • Kredoスタッフ
  • 留学体験談
  • よくある質問
  • お問い合わせ
  • 法人のお客様
  • 会社概要
  • KREDO JAPAN株式会社
  • 特定商取引法に基づく表示
  • 採用情報
  • プライバシーポリシー
学校案内
  • Kredoの想い
  • Kredoが選ばれる理由
  • なぜ今、ITと英語なのか
  • 卒業実績
施設案内
  • 校舎・宿泊施設
  • セブ島・生活環境
留学準備
  • お申し込みまでの流れ
  • ご留学までの準備
  • 現地到着後の流れ
  • 留学中の1日のスケジュール
留学コース・料金 [コース概要]
  • コース一覧
  • あなたに合ったコース選び
  • ITクラス・カリキュラム・教員
  • 英語クラス・カリキュラム・教員
  • 留学料金一覧
[各コース一覧]
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース
  • 無料留学プログラム
  • 海外ITインターン留学(LIG)
  • 海外ITインターン留学(Sprobe)
  • 海外ITインターン留学(Alliance)
  • 親子留学 Kredo Kids
その他
  • Kredo Blog
  • Kredoスタッフ
  • 留学体験談
  • よくある質問
  • お問い合わせ
  • 法人のお客様
  • 会社概要
  • KREDO JAPAN株式会社
  • 特定商取引法に基づく表示
  • 採用情報
  • プライバシーポリシー
セブ島IT×英語留学の「Kredo」

14th Floor Central Bloc Corporate
Center Tower 1, Block 10, Geonzon St.,
Cebu IT Park, Apas Cebu City

セブ島医療専門の英語学校・看護留学の「HLCA」(姉妹校)

14th Floor Central Bloc Corporate
Center Tower 1, Block 10, Geonzon St.,
Cebu IT Park, Apas Cebu City

スクールやコースをもっと知りたい人へ 資料請求・お問い合わせ

  • fb
  • tw
  • ig
弊社顧問弁護士

Copyright© 2019 KREDO IT ABROAD INC. All rights reserved.