言語」カテゴリーアーカイブ

ソフトウェア開発における言語について記述します。

2.jQueryを使う

1.jQueryのライブラリを取得

jQueryを使うには、jQueryの元となるライブラリを読み込む必要があります。
ライブラリは、基本的に1ファイルのみです。インターネット上にいろいろ転がっていますが、
最新はhttp://jquery.com/download/から取得してください。
※記述中の最新のバージョンは「3.2.1」でした。
jquery-3.2.1.js
がライブラリになります。
少し外れますが、たまに「jquery-3.2.1.min.js」と、「min」が付くファイルがあります。
jquery-3.2.1.jsとjquery-3.2.1.min.jsは全く同じ内容のコードが書かれたファイルで、改行があるかないかだけの違いです。
なぜ2つに分けたのか理由は知らないですが、改行が無いとネットワークの転送速度がいささか早くなるためと、改行が無いと読みづらくなるためセキュリティが向上するからだとも考えられます。
また、jquery-3.2.1.jsは「jQuery.js」と記述しても使用はできます。ただのライブラリなので、結果的にライブラリを読み込んでjQueryが動作すればOKです。

jQueryを使うには、jquery-x.x.x.jsやjquery-x.x.x.min.jsが必要
※注意
「x.x.x」はバージョンとマイナーバージョンとリビジョンを表しています。
数値が大きいほど最新ですが、リリース(インターネット上に公開されていること)されているライブラリは数値で管理されていると覚えておいてください。

2.jQueryのライブラリを設定

ダウンロードしてきたjquery-3.2.1.jsを任意のフォルダに置きます。

c:\test\
  jquery-3.2.1.js
  test.html

test.htmlファイルの中身

<html>
<head>
<script type="text/javascript" src="jquery-3.2.1.js" ></script>
</head>
<body>
<script>
  jQuery(document).ready(function($){
    var value= $("[name=test]").val();
    alert(value);
  });
</script>
<input type="text" name="test" value="XYZ" />
</body>
</html>

inputの値 XYZ を画面表示時に取得し、ダイアログボックスで表示しているだけのものです。
▼scriptでjquery-3.2.1.jsファイルの読込をしています。

<script type="text/javascript" src="jquery-3.2.1.js" ></script>

▼画面表示時の処理です。nameがtestというinputの値 XYZ を取得し、alertでダイアログボックスの表示をしています。

  jQuery(document).ready(function($){
    var value= $("[name=test]").val();
    alert(value);
  });

※「jQuery(document).ready(function($)」以外にもいろいろな書き方がありますが、ここでは長い名前を使ってます。

jQueryのライブラリは「script」を使って読み込むこと。

3.jQueryのライブラリのいろいろな呼出し方法

head内でライブラリを呼出すのがちょっとしたお約束なのですが、別にhead内で呼出す必要はありません。
大事なのは、jQueryのコードが実行される前に、jQueryのライブラリ(jquery-3.2.1.js)が呼び出されているかどうかが大切です。
jQueryもコードの上から下に処理を流して実行させる「インタープリター」だから、直前に必要なライブラリが無いとエラーになります。
▼head内での呼出し

<html>
<head>
<script type="text/javascript" src="jquery-3.2.1.js" ></script>
</head>
<body>
<script>
  jQuery(document).ready(function($){
    var value= $("[name=test]").val();
    alert(value);
  });
</script>
…

▼head外での呼出し

<html>
<head>
</head>
<body>
<script type="text/javascript" src="jquery-3.2.1.js" ></script>
<script>
  jQuery(document).ready(function($){
    var value= $("[name=test]").val();
    alert(value);
  });
</script>
…

他にも、別のサイトから読込むことができます。
以下では、Googleが公開しているGoogle Hosted Librariesから読込みをしています。
信頼できるサイトから読込みを行うのは問題ないのですが、信頼できないセキュリティ上問題あるサイトもありますのでなるべく自分のホームページに近いところにライブラリを置いて使うほうが良いでしょう。

▼Google Hosted Librariesから、ライブラリを読込

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
</head>
<body>
<script>
  jQuery(document).ready(function($){
    var value= $("[name=test]").val();
    alert(value);
  });
</script>
…
jQueryのコードを処理する前に、jQueryのライブラリを必ず読み込むこと
必ずしも、jQueryのライブラリはheda内で詠みこむ必要はない
別のサイトから読込みすることができる

1.jQueryの基本

1.jQueryって何?

jQueryの歴史はそんなに古くはないです。
javaScriptと同じように、HTML上でいろいろな処理を実現することが可能です。
例えば、HTMLで作成されたWEB画面のボタンをクリックされた時、メッセージを表示したり、WEB画面の中に文字を加えたり、それに色を着けたり、あらゆりWEB画面上で、いろいろな「表現」を処理することができます。
詳しく知りたい方は「ウィキペディア」で検索していただくと、その歴史や現状などが事細かく載っています。

HTML上でいろいろな処理を実現することが可能

2.jQueryとjavaScriptと何が違うの?

javaScriptとjQueryは同じです。同一というものではなくjavaScriptでできる処理はjQueryでも同じ処理ができます。同じロジック内で共存も可能です。なぜ共存可能なのかというとjQueryはjavaScriptから作られている「拡張された言語」みたいなもののため、同じ処理、共存が可能な訳です。
javaScriptとjQueryの違いはことわざのようなものです。
jQueryが「五十歩百歩」という意味として、
javaScriptは「違いはあるが、大差はなく、似たり寄ったり」という意味になります。
つまり、jQueryはjavaScriptのコードを簡潔に書くことを目的とした「言語」です。

javaScriptとjQueryは同じ
jQueryはjavaScriptのコードを簡潔に書くことを目的としている

3.jQueryを使うには何が必要?

javaScriptというものは、もともとブラウザに標準で搭載されている言語またはツールです。なのでインストールする必要はありません。
jqueryも同様にインストールする必要はないのですが、jQueryの元となる「ライブラリ」を「jQueryのコードを使う前に」必ず読み込まなくてはなりません。
ライブラリは、基本的に1ファイルのみです。インターネット上にいろいろ転がっていますが、
最新はhttp://jquery.com/download/から取得してください。
※記述中の最新のバージョンは「3.2.1」でした。
jquery-3.2.1.js
がライブラリになります。
少し外れますが、たまに「jquery-3.2.1.min.js」と、「min」が付くファイルがあります。
jquery-3.2.1.jsとjquery-3.2.1.min.jsは全く同じ内容のコードが書かれたファイルで、改行があるかないかだけの違いです。
なぜ2つに分けたのか理由は知らないですが、改行が無いとネットワークの転送速度がいささか早くなるためと、改行が無いと読みづらくなるためセキュリティが向上するからだとも考えられます。
また、jquery-3.2.1.jsは「jQuery.js」と記述しても使用はできます。ただのライブラリなので、結果的にライブラリを読み込んでjQueryが動作すればOKです。

jQueryのコードを使うに前にはライブラリの読込が必要
jquery-3.2.1.jsとjquery-3.2.1.min.jsは同じ内容で、改行があるかないか

jquery

jqueryを使って、一番下に「日本地図」と「3D」を表現してみました。
「日本地図」ではなく、大阪の「地図」を表現するのが次の目標です。
参考
http://takemaru-hirai.github.io/japan-map/

「3D」はWebGLを使ってます。「3D」というと、Flashプラグインだったのですが、最近見ないですね。
「3D」を使うと重たいかもしれないので、どこぞの時点で、消えるかもしれません。消す間は「ぐるぐる」回しておきます。
参考
https://threejs.org/

jqueryのフリーのライブラリーを使ったら、いろんなことが表現できます。

PHP

PHPも久々にすると、つまづきはあるものの、至ってシンプルで面白い。
昔一番好きだった書き方が

$test = 'test';
$test .= 'test2';

と書くと

testtest2

となる。

昨今のプロジェクトで、javaやらsqlやらのソースを眺めると、コードの横の長さがとても長く、視神経がいらつく。
特に、javaのeclipseでcheckstyleのチェックでひっかかるケースが多く。改行しても、これはこれで観難い。
シンプルに簡潔に記述する = 品質(運用的な)向上
と信じている古い世代としては、phpのこういった記述はとても気に入ってしまう。
javaでは、StringBuilderやらStringBufferやらがあるので、これも気に入っているが、今度はステップ数が長くなるので、これまたcheckstyleにかかる恐れがある。
phpが密かに人気があるのは、こんな小手先で、コーダーの心をくすぐる記述ができることなのかもしれない。