こんばんは、本日はCDNにホストされているjQueryファイルの読み込みについて勉強したので紹介したいと思います。
CDNとjQueryについて
CDNとはContents Delivery Networkの略で、画像などのファイルをインターネット上でやり取りするためのネットワークのことだそうです。
またｊQueryとはjavascriptのライブラリの一つでjavascriptの記述が楽になるそうです。
jQueryファイルを読み込む
jQueryファイルを読み込むためには、ｊQueｒyを使いたいｈｔｍｌのプログラム中に次のコードを書くだけでオッケーです。
<script src=｛"ｊQueryコードの場所"｝></script>
ここで”ｊQueryコードの場所”には二通りの記述方法があり、ウェブ上のアドレスを指定する場合と自分のPC上のアドレスを指定する場合があります。
ウェブ上のアドレスというのには以下に示す3通りのアドレスが存在します。
これらはいずれもｊQueryをホストしているCDNであるそうです。
- jQueryのCDNを使ったjQueryファイルの読み込み方法
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
２. GoogleのCDNを使ったjQueryファイルの読み込み方法
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
３. MicrosoftのCDNを使ったjQueryファイルの読み込み方法。
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
一方、自PC上のアドレスは、ｊQueryの格納場所をそのまま入力すれば良いです。
デモプログラム
今回デモプログラムとしてページの読み込み時にアラートを表示するコードを使用して、ｊＱＵｅｒｙファイルの動作確認をしました。
コードは以下のようになっています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ionic App</title>
<!-- Ajax通信用 テスト -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("通信成功");
});
</script>
<base href="/" />
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<link rel="icon" type="image/png" href="assets/icon/favicon.png" />
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<body >
<app-root></app-root>
</body>
</html>
実行結果
上記プログラムの動作結果は下図のようになりました。 
参考にしたサイト
今回参考にしたサイトです。
