KENスクールブログ | パソコン教室・パソコン講座なら個別指導のKENスクール

BLOGKENスクールブログ

  1. KENスクール TOP >
  2. KENスクールブログ > Web・DTPデザイン > Web制作に必要なもの③ JavaScript

Web・DTPデザイン

Web制作に必要なもの③ JavaScript

KENスクールONLINE

Web制作に携わり始めると次第に「JavaScript」という言葉を耳にすることが増えてきます。

このJavaScriptがWeb制作にどのように必要とされるのか今一つ、ピンとこない方も多いと思います。

今回はJavaScriptについて紹介していきます。

JavaScriptとは?

動的なWebページを作成する事ができるプログラミング言語です。

Webページ上の様々なコンテンツに動き(アニメーション)を設定、制御することができます。

例えば、ボタンにマウスをポイントしたときに、ボタンの色や画像を切り替えたり、下層メニューをドロップ表示したりすることができます。

なぜJavaScriptが必要なの?

HTMLだけでは動的効果が扱えないためです。

Webページは文書コンテンツであると同時にユーザーと対話するためのインターフェースとしての役割も兼ねています。

動きを持たないインターフェースは表示が単調で硬く、どのような操作を行っているのかを視覚的に確認する事が難しく、使いにくいものになってしまいます。

JavaScriptで動きを与えることで操作の流れを表示したり、HTMLだけでは設定できないレイアウトを制御することが可能になったり、視認性や操作性を向上させることができます。

どうやって記述するの?

JavaScriptの基本書式は次の通りです。

JavaScriptの基本書式は、「オブジェクト」の「メソッド」に「引数」を指定する、です。

オブジェクトってなに?

その名の通り「もの」を表します。JavaScriptはブラウザのさまざまな「もの」を扱うことができます。

メソッドってなに?

「オブジェクト」が持っている「自分自身にできる操作」のことです。「引数」を与えることでさまざまな処理を実行します。

引数ってなに?

メソッドなどが実行されるときに渡される「データ」のことです。文字や数値などさまざまな値が使えます。

どこに記述するの?

HTML内に直接記述する方法と、外部ファイルに記述してリンクで読み込む方法があります。

HTMLに直接記述する場合

script要素内にJavaScriptを記述します。

外部JavaScriptを使用する場合

具体的にどう書くの?

次のようにHTMLとJavaScriptを記述してみましょう。

結果は「こんにちは」と表示されます。

「document.write(“こんにちは”);」の内容は「document」オブジェクトの「write」メソッドで「こんにちは」と出力するという処理です。

「document」オブジェクトは頻繁に使用するオブジェクトのひとつで、ブラウザに表示される様々な情報(文字や画像など)を操作できます。

「document」オブジェクトは「write」メソッドを持っています。

「write」メソッドは指定された引数を書き出す(表示)します。

結果は単に文字を表示するだけですが、文字の出力はプログラムで最も基本的な処理の一つです。これにさまざまな処理を組み合わせて機能を作っていきます。

JacaScriptについての概要は以上となります。

最後に

HTML/CSSで基本的なWeb制作ができるようになったら次のスキルアップとしてJavaScriptを学習してプログラミング学習の第一歩としてみましょう。

WEB初心者から最短3ヵ月でWEBデザイナーを目指す

コロナ禍でリモートワークが増え、在宅でできるWEBデザイナーの仕事に人気が集まっています。

そこでKENスクールではニーズの高いオンライン完結のWEBデザインスクールを開校しました。WEBデザイナーになるために必要なカリキュラムを揃え、資格系を除いたすべてのカリキュラムを、通学と同じクオリティで提供致します。

完全マンツーマン授業で毎回先生が変わらないので、生徒の悩み、得手不得手などにいち早く気づき、生徒一人ひとりに合わせた指導をする事が可能です。

最短3ヵ月でWEBデザイナーを目指せる実践レベルで学ぶためのカリキュラムで、就転職のサポートまで付いたコースをご用意しています。

無料カウンセリングも実施していますので、ご興味のある方はこちらよりお問い合わせください。