• 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年11月07日
表示中のsource要素のファイルパスをJSで取得したい picture要素(video)要素とsource要素を使って画像(動画)を表示させている時に、Jav […]
サムネイル

JSで入力値が英数字や半角かどうか即時文字チェックする【ma……

2024年10月02日
JavaScriptのmatch()は、正規表現を使って対象の文字列の中に一致するものがあるか検索できるメソッドです。このページではテキストボックスに入力された文字が数字や半角かどうかチェックする機能をmatchメソッドを使って実装する方法ついてご紹介します。
サムネイル

JSでHTMLのデータ属性を取得・更新する方法【datase……

2024年10月02日
JavaScriptのdatasetで要素のdata属性を操作する JavaScriptのdatasetは、HTML要素に設定されたデータ属性(data-*** […]
サムネイル

JavaScriptでラジオボタンの値(value)を取得す……

2024年10月02日
JSでラジオボタンの値を取得・操作する JavaScriptによるラジオボタンの操作(値の取得やチェックの切り替え)の方法を備忘録として残しておきます。 JSで […]
サムネイル

JSで大文字から小文字(小文字から大文字)へ変換する方法

2024年10月02日
JavaScriptで大文字と小文字を変換する JavaScriptを使った文字検索フォームを作るにあたり、大文字小文字どちらで入力されても良いよう、変換処理を […]
サムネイル

JSのclassList.toggleでクラスの付け外しを行……

2024年09月04日
classList.toggleとは? まず「classList」とは要素のクラス属性の情報を参照するプロパティで、「classList.add()」や「cla […]
サムネイル

JSで要素が特定のクラスを持つか調べる【classList.……

2024年09月04日
JSで要素が特定のクラスを持つか調べるには? JavaScriptで要素が特定のクラスを持つか調べるには「classList.contains」を使います。 「 […]