• 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は欠かすことができないので是非使えるようになっておきたいです。

関連する記事

サムネイル

Javascriptのlightboxライブラリの使い方【画……

2023年10月01日
最終更新日:2023年09月12日
lightboxライブラリでできること Webサイトでは、ユーザーがクリックすると大きい画像が開くという表示方法が良く用いられます。 一覧では小さい画像を並べて […]
サムネイル

HTMLのチェックボックスに選択上限を設ける方法【Javas……

2023年10月01日
最終更新日:2023年09月28日
チェックボックスに選択上限を設けるには、JavaScriptを使ってチェックの数をカウントし設定した数を超えたらチェックできないようにします。
サムネイル

横スクロール可能なことを示すヒントを表示するJavascri……

2023年09月01日
Javascriptのライブラリ「ScrollHint(スクロールヒント)」を使えば、ユーザーに対して要素がスクロール可能であることをわかりやすく示すアイコンを表示することができます。
サムネイル

JavascriptでブラウザやOSを判定する方法【plat……

2023年09月01日
Javascriptのplatform.jsというライブラリを利用すれば、簡単にユーザーが使用しているブラウザやOS情報を取得し判別する処理を作ることが可能です。
サムネイル

Javascriptでフォーム送信時に確認ダイアログを出す方……

2023年09月01日
Javascriptでフォーム送信時にダイアログ表示させてユーザーに処理を続行して良いか確認するには「confirmメソッド」と「onsubmit属性」の2つを使用します。
サムネイル

Javascriptで文字のUnicode(UTF-16)を……

2023年09月01日
最終更新日:2023年08月29日
JavascriptのcharCodeAtを使うと、日本語(テキスト)のUnicode(UTF-16)を取得したり、Unicode(UTF-16)をテキストに変換することが可能です。
サムネイル

jQueryのblurでフォーカスが外れた時の処理を行う方法……

2023年05月01日
最終更新日:2023年05月31日
jQueryのblur()メソッドはフォームの入力ボックスなどでフォーカスが外れたときに処理を実行させることができるメソッドです。