• HOME > 
  • JavaScript > 
  • 簡単Javascript入門【役割と使い方を解説】

簡単Javascript入門【役割と使い方を解説】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

Javascript(ジャバスクリプト)とは?

ブラウザ上の動きを制御することが出来るプログラミング言語です。

HTMLやCSSと連動することで、スクロールやクリックなどのブラウザ上の動きや操作を認識して表示を切り替えたりすることが出来ます。

普段私たちがインターネットを利用している時には必ずといっていいほど、どのサイトでもJavascriptが使われています。

何ができる?Javascriptでできることや作れるもの

ブラウザ上でのスクロールやクリックを感知してHTMLのコードを追記や書き換えたり、CSSのプロパティの値を変更したり といった操作することが出来ます。

そういった処理を組み合わせることで、

  • クリックしたら表示する画像を変更する。
  • スクロールされたら下から浮き上がるように要素を表示する
  • スマホなどでメニューボタンを押したらメニューを表示する。
  • チェックボックスのチェックの有無に応じて表示を切り替える。
  • 時間の経過とともに表示を切り替える。
  • ブラウザのアラート(メッセージ)を表示する

といった機能や表示を行うことが可能です。

また、ライブラリと呼ばれるJavascriiptの高度な処理を簡単なコードで使いまわすせるものがネット上に数多く公開されているので、 WEBサイトに様々な機能や表現を追加することができます。

実際にJavascriptはWEBサイトのみならず、WEBサービスやWEBアプリをはじめブラウザゲームまで作られています。

記述の仕方

Javascriptファイルに記述してサイトに読み込ませるか、HTML内で<script></script>タグで囲んだ中に記述します。

例として以下のようなテキストをJavascriptで追加してみます。

<script>
document.write("おはようございます。");
</script>

よろしくお願いします。

よろしくお願いします。

まとめ

WEBサイトはHTMLとCSSだけでも作れますがJavascriptを使うことで表現の幅は一気に広がり、機能や使いやすさも格段に上がります。 HTMLやCSSと異なりプログラミング言語のため習得のハードルは高くなりますが、 本格的にWEBサイト制作を行うのであればJavascriptは欠かすことができないので是非使えるようになっておきたいです。

広告
広告

関連する記事

サムネイル

JSでセレクト値が変更されたらフォームを送信を実行する方法【……

2024年07月02日
ユーザーがセレクトボックスの値を変更したタイミングでフォームの送信を実行するという処理を実装する機会があったので、その方法を備忘録として残しておきます。
サムネイル

JSでチェックボックスの全選択全解除を行う方法【すべて選択】

2024年07月02日
フォームのチェックボックスの数が多いときにあると便利な、ワンクリックで全選択や全解除できる機能をJavaScriptで作る機会があったので、その方法を備忘録として残します。
サムネイル

JSで配列の重複チェックを行う【Setオブジェクトを利用】

2024年07月02日
JavaScriptで配列の中に重複する値が存在するか判定したい状況があり、その時に調べたことを備忘録として残しておきます。今回は単純に重複しているかどうかだけ分かればよかったので、「Setオブジェクト」を使って重複チェックを行う方法を選びました。
サムネイル

JSのkeyup・keydown・keypressの違い【キ……

2024年06月13日
JavaScriptの「keyup」「keypress」「keydown」はいずれもユーザーのキーボードイベントを処理したい時に使用します。それぞれ処理が発火するタイミングなどに違いがあるので、用途に応じた使い分けが必要です。
サムネイル

JSでテキストボックスに入力された値を即時取得する【this……

2024年06月13日
ユーザーがinputのテキストボックスに入力した値をJavaScriptを使って即時取得して処理させたい状況がありましたので、その方法を備忘録として残しておきます。
サムネイル

JavaScriptで偶数と奇数を判定する方法【テーブルの行……

2024年05月16日
ある数値が偶数か奇数かは、「数値を2で割って余りが0なら偶数」「数値を2で割って余りが0でなければ奇数」という方法で判別を行います。
サムネイル

JSで郵便番号検索を実装できるライブラリ【yubinbang……

2024年04月12日
yubinbango.jsは郵便番号検索(郵便番号を打ち込むと住所が自動入力される)機能を簡単に実装できるのライブラリです。一実装方法がとても簡単なのでメールフォームなどに手軽に郵便番号検索機能を導入したい方におすすめです。