JavaScript とは? 何ができる? | WEBデザイナーになるために!技術・デザインのメモ帳

WEBデザイナーになるために!技術・デザインのメモ帳

WEBデザイナーになるため勉強中のZooMが、覚えたことを忘れないように書きとめておくためのブログ。
また、これからWEBデザイナーを目指す人に参考程度に見てもらえたら幸いです。

今日はJavaScriptについて勉強しました。
また新しい単語が出てきて、何がなんだか。(^▽^;)

JavaScript というのは、簡単に言うとプログラミング言語らしいです。

ちなみにプログラミング言語とは、コンピュータに対する一連の動作の指示を記述するための人工言語の総称
。とのこと。
難しい言い方をするとよく分からないので、「コンピュータが理解できる言語。」という風にとらえました。

Javascriptは、ブラウザで表示するウェブページ上でプログラムとして動く。
で、何ができるの?

・ブラウザコントロール(新しいウインドウを開いたり)できる
・マウスのアクションに反応させられる
・パスワードの入力画面をだす
・条件判断によって処理の分岐をさせる
・データ入力用のダイアログを表示する
・背景の色を後で変えられる
・マウスのクリックで画像が切り替えられる
・リアルタイムに時刻を表示できる
                                などのことが、可能。

実際にやってみます。

■色々なウインドウを開く
ウインドを開いてメッセージを表示したり、データを入力させたり、別ウインドウを開いたりします。
HTMLだけだと、マウスのクリックに対する反応といえば、リンクしたページにジャンプすることぐらいしかできません。

・アラートウインドウを開く
ブラウザとは別の小さなウインドウを開いて、その中に文字列を表示させることができる。
これをアラートウインドウと呼ぶ。

alert("メッセージ")
   アラートウインドウを開いてメッセージを表示する。


ーーーHTMLの記述ーーー

<html>
<head>
<title>アラートウインドウ</title>
</head>

<body>
<script type="text/javascript">
window.alert("警告メッセージ")
</script>

</body>

</html>

ーーーーーーーーーーーーー

色のついた部分がJavascriptの記述。
これをブラウザで確認すると

WEBデザイナーになるための技術・デザインまとめブログ

このようなウインドウが表示される。

青文字の部分<script type="text/javascript"></script>で囲うことで、Javascriptです。ということを表している。
パープルの文字window.alert("")がアラートウインドウを開くという意味。
(””)の中の赤文字の警告メッセージは好きなメッセージを記述できる。

と、こんな具合です。
他には、

WEBデザイナーになるための技術・デザインまとめブログ

↑確認ウインドウを開く
アラートウインドウとの違いは「OK」「キャンセル」のどちらかを選べるという点。


WEBデザイナーになるための技術・デザインまとめブログ

↑入力ウインドウを開く
ユーザにデータを入力してもらうための入力ウインドウを開く。

などがあります。
細かいことは、また後日まとめます。