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

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

投稿日:

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

関連する記事

サムネイル

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

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

jQueryのinArray()で配列内を検索する方法【要素……

2023年05月01日
最終更新日:2023年05月31日
jQueryのinArrayメソッドは、配列の中に特定の要素が含まれているかどうかを検索することができるメソッドです。
サムネイル

JavascriptのindexOfで文字列を検索する方法【……

2023年05月01日
最終更新日:2023年05月31日
indexOfメソッドを使用すると、テキストや配列の中に指定の文字列が含まれているかどうかを検索することができます。条件分岐に利用することで、ある文字が含まれている時といない時とで処理を分けることが可能になります。
サムネイル

jQueryのclosest()で最も近い親要素を取得する方……

2023年05月01日
最終更新日:2023年04月17日
jQueryのclosest()は、要素から最も近い親要素を取得(指定)できるメソッドです。要素の親要素を辿っていき、該当するセレクターを持つものを見つけ出してくれます。
サムネイル

jQueryのprop()メソッドで属性値を取得・設定する方……

2023年04月04日
prop()は要素の属性値を取得したり、追加・変更することができるメソッドです。attrメソッドとの違いには「返り値が異なる」といった点があります。
サムネイル

jQueryでラジオボタンの値を取得や操作する方法【チェック……

2023年04月04日
jQueryを使えばHTMLのラジオボタンでユーザーが選択した(チェックされた)値を取得・操作することができます。propメソッドを使用して行います。
サムネイル

jQueryでaタグのhref(リンク先)を書き換える方法【……

2023年04月04日
最終更新日:2023年05月31日
aタグのhref(リンク先のURL)を書き換えたい場合は、attrメソッドを使用します。リンク先のURLの一部だけを書き換えたい時は、replaceメソッドで文字の置き換えを実行してからattrメソッドで書き換えるという方法になります。