画面サイズを取得するために更新してください
(↓)
更新する
Topページへもどる
前のページへもどる

イラスト javaScriptとは?

(1)「JavaScript(ジャバスクリプト)」とは?

画像
「JavaScript」という言葉で検索してみると次のような記述があります。

JavaScript(ジャバスクリプト) とは、Netscape(ネットスケープ)社によって開発されたスクリプト言語 (簡易プログラミング言語)で、HTML内にプログラムを埋め込む ことで、Webブラウザの動作を定義できる。 (※つまり、静的なページに動きを与えることができるなど、いろんな用途があります。)
Java(ジャバ)という名前が含まれているが、言語の仕様としては異なっており、 全く違う言語だと考えた方がよい。

【備考】 スクリプトとは、 台本・脚本・原稿・手続き、などの意味があります。

 コンピュータプログラムの種類の一つで、 機械語への変換などの過程を自動化し、ソースコードを 「即座に実行できる」ようなプログラムのことを 「スクリプト」 という。
そのようなプログラムを記述できるプログラミング言語のことを 「スクリプト言語」という。

という説明もあります。 イラスト が、上記のような 「むつかしい説明」 イラスト は置いといて具体的な例で説明します。

(2)「ジャバスクリプト」の活用方法

(1)「必要な項目」(※必須項目)を 全部入力しないと次のページに行かせないようにする。
(2)入力した項目が「 形式に合っているか 」をチェックする。例えば、入力してもらったメールアドレスが形式に合致しているか
   「入力された電話番号」が「電話番号の形式」になっているかどうかをチェックする。など
(3)入力されたデータが形式に合致していない入力欄を 指定した背景色で塗りつぶす。など
(4)ユーザーが閲覧している媒体(パソコン、タブレット、スマホ)の 画面サイズを取得する。
(5)マウスの動きを検知する。例えば マウスでクリックした場所を検出する。
  など「JavaScript(ジャバスクリプト)」の機能は 何百種類もあります。

(3)JavaScript(ジャバスクリプト)はどこで働くのか?

 JavaScript(ジャバスクリプト)のプログラムはユーザーの媒体(パソコン、タブレット、スマホ)にダウンロードされて 媒体(パソコン、タブレット、スマホ)上 で働きます。(実行されます。) イラスト

(4)JavaScript(ジャバスクリプト)を使うことのメリット

 JavaScript(ジャバスクリプト)を用いることのメリットは 媒体上でデータのチェック をしてサーバーに送ることにより通信の負荷を軽減する。などです。
例えば、上記の(2)の(2)で説明したようなチェックをサーバー側でやろうとすると、
(1)入力されたデータをサーバーにアップロードする。
(2)サーバー上でチェックする。
(3)チェックの結果をユーザー側の媒体に返す。
(4)また、ユーザー側でデータを入力してもらう。
(5)再度サーバーにアップロードする。
(6)サーバー上でチェックする。
やめてくれ~!イラストエライコッチャ!
など手間と通信の負荷がかかります。
JavaScript(ジャバスクリプト)を用いると一回で済むね! イラストよかったねー!

(5)JavaScript(ジャバスクリプト)のデメリット?

 JavaScript(ジャバスクリプト)を用いることのデメリットは プログラムを隠すことができない!ということでしょうか。
自分が苦労に苦労を重ねて、何百時間も何か月もかけて作ったプログラムを「 見られてしまう。」ということです。
でも、考えようによっては 誰かの役にたっていると思えばすっきりします。
「プログラミングを楽しむ人の誰かの役に立っている」と考えればそう腹も立ちません。
その点、「サーバーサイドプログラミング言語PHP」は 『プログラムを隠すことができる』ので安心です。 が、ひょっとしたら、プログラムを見られているかもしれません。


(6)プログラム中にJavaScript(ジャバスクリプト)を用いる時の注意点

 JavaScript(ジャバスクリプト)を用いる時の注意点・留意点としては、 JavaScript(ジャバスクリプト)は非同期処理をするということです。
非同期処理とは、 例えば  「処理A」 ⇒ 「処理B」 ⇒ 「処理C」  という流れに なっている時に
「処理A」の終了を待たずに 「処理B」の処理を始めたり、 「処理A」の終了を待たずに 「処理C」の処理が始まったりするということです。
「処理A」、「処理B」、「処理C」が瞬時に実行できる場合 や 「処理A」、「処理B」、「処理C」がそれぞれ単独で無関係である場合は何ら問題はありませんが、
「処理A」に時間がかかり、「処理A」の結果を用いて「処理B」が行われる場合にエラーが起きる場合があります。
このサイトの作成者である私は、JavaScript(ジャバスクリプト)を使い始めて20年以上になりますが、初めて 「非同期処理に起因するエラーの克服」に直面しました。
裏を返せば、これまでは「非同期処理」とか「同期処理」とかに注意(留意)する必要がないプログラムしか作ってこなかったということでしょうか。
私が初めて遭遇したJavaScriptの関数は、画像の画素値(ピクセル値)を取得するための関数「getImageData」である。
画素値取得関数「getImageData」は「JavaScriptを用いた画像処理」のカラー反転や明るさ変換などではエラーは出ないが、モザイク処理でエラーに遭遇した。
ピクセル(画素)1個につき「RGB(赤緑青)と透明度」の4つのデータを持つので、画像の横幅を600ピクセル、縦幅を400ピクセルにした場合には、
4×600×400=96万個のデータを取得する。横幅が1200ピクセル、縦幅が800ピクセルの場には、384万個のデータ処理になる。
約100~400万個のデータ取得を待たずに、JavaScriptでは「次の処理」に進むのである。このエラーの克服で数日間苦労した。
ネット検索すると「非同期処理」を制御する「Promise」とか「コールバック関数」とか「async/await」とかいろいろあるが、どれもそう簡単ではない。
数日間の試行錯誤の結果、昔から多用している 「JavaScriptのalert文」で操作者にメッセージを出して「OKボタン」を押したら次の処理に進む という手法でエラー克服することが出来た。業務用プログラム作成では自動処理が必要だろうが、 javaScriptの初歩を学ぶプログラミング教室なのでこれでいいのではと思っている。

(7)JavaScriptのプログラム例
  (このページの上部の時刻表示のJavaScriptのプログラムです。)
画像

上記のJavaScriptのプログラムは、パソコンの場合は「右クリック」→「ページのソースの表示」→ 拡張子が「.js」となっている行を見つけてクリックすると見ることができます。



Topページへもどる
前のページへもどる