jQuery構文がJavascript構文と混同しても動くことを今更しった件

jQueryの構文はJavascriptの構文と混同・混在しても動きますという話を書いていきたいと思います。

Jquery構文とJavascript構文が混在したコード
jQueryはJavascriptのライブラリ
jQueryのロード方法
1. jQueryを使うためのJavascriptファイルを読みこむ
2. jQueryのCDNを使う方法

Jquery構文とJavascript構文が混在したコード

とりあえず最初にコードを紹介します。

javascript : (function (d) {
    function l() {
        (function ($) {
            var title = $('#xxx').text();
            var src = $('.yyy').attr('src');
            var source = 'zzz';
            alert(source);
            var ta = document.createElement("textarea")
            ta.value = source
            document.body.appendChild(ta)
            ta.select()
            document.execCommand("copy")
            ta.parentElement.removeChild(ta)
        })(jQuery)
    }
    if (typeof jQuery == 'undefined') {
        var j = d.createElement('script');
        j.type = 'text/javascript';
        j.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
        d.body.appendChild(j);
        j.onload = l
    } else {
        l()
    }
})(document);

こちらはなんらかの情報を取得してクリップボードにコピペするコードになります。上記をみるとjQueryの構文とdocumentなんちゃらがでてきているのでjQueryの構文とJavascriptの構文が混在している形になります。このように混ざっているのですがちゃんと動きます。わたしの知識があさすぎて、なぜかjQueryとJavascriptを一緒に書くと動かないという先入観みたいなものがありました。

「そんなの一緒に書いても動くにきまってんだろ」というツッコミが入りそうな記事ですが、これって当たり前ではあるのかもしれません。次の見出しにつづきます。※上記のようなコードはネットで検索すれば普通に公開されています。

jQueryはJavascriptのライブラリ

jQueryはJavascriptのライブラリになるのでJavascriptの構文をそのまま書いてもコードが動くのは当然かもしれません。ただこのあたり言葉だけ見聞きしても実際にどうなるかはよくわからないので、わたしのように疑問をもったかたは手を動かしてみるのがよいのでは？と思います。

一応「jQuery Javascript 混同」でググってはみたのですが、なんだかパッとしない情報ばかりでてきたので、やけくそでとりあえずこのリンクを貼っておきます→ jQuery – Wikipedia

jQueryのロード方法

このままではコンテンツが少ない気がしたのでJqueryのロード方法を書いておきたいと思います。とはいってもこのあたりもwikipediaに書いてあるんですが。

jQueryを使うためのJavascriptファイルを読みこむ

Jqueryを使うためのJavascriptファイルをサーバーとかにアップしといてそれを直接読みこむ方法ですね。

jQueryは通常単一のJavaScriptファイルとして存在し、その中に全ての共通DOM、イベント、エフェクト、Ajax関数が含まれている。
jQuery – Wikipedia

以下のような構文をbodyの閉じタグ直前で読みこめばOKかと思います。パスは任意のソースに書き換える必要があります。

<script type="text/javascript" src="/path/to/jQuery.js"></script>

jQueryのCDNを使う方法

jQueryのCDNはGoogleとかMicrosoft、その他いろいろが提供しています。CDNってなんです？というふうになるかもしれませんがそこは省略します。

下記のような構文をbodyの閉じタグ直前に読みこめばOKです。以下のような構文は「google jquery cdn」などと検索すれば、どっかのだれかが情報を公開していると思います。内容の誤り等チェックし問題がなければ、それをコピペすればよいかと思います。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

なんだかjQueryとJavascript構文の混同のはなしとものすごくずれてきましたが、とにかく、普通に一緒に使えるってことです。この記事の情報は以上になります。