jQuary、javascript学習_1

jQuaryの導入と入門

・目次

jQuaryの導入と入門

1.jQuaryの導入

　　jQuaryのurlを取得し、ボタンを押したら[Hellow World]を表示する

　　プログラムを作成する。

　　(1) jQuaryのダウンロード(urlの取得)

　　　・下記サイトから、jQuaryのurlを取得。(urlが分かれば、必要なし)

　　　・https://developers.google.com/speed/libraries#jquery

2.jQuaryでプログラム作成

　・取得したurlをheadタグの中に入れる。

　・test.htmlというhtmlファイルと、test.jsというjsファイルを作成

　・下記プログラムをそれぞれのファイルに記載

HTMLファイル側

<!--   
　　　　目的：Javascriptの基礎を作成する。
       ボタンを押したら[Hellow World]を表示する。
-->

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <!-- UI KITの追加 -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/uikit@3.6.18/dist/css/uikit.min.css"
    />
    <!-- UIkit JS の追加-->
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.6.18/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.6.18/dist/js/uikit-icons.min.js"></script>

    <!-- JQuaryの追加:jQuaryを使用するのに必要-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </head>

  <body>
    <h1>Javascript学習</h1>
    <h2>JQuaryの使い方</h2>
    <p>クリックするとアラートが表示されます。</p>
    <a class="test uk-button uk-button-primary">クリック</a>

    <!-- test.js(javascript)ファイルの読み込み -->
    <script type="text/javascript" src="./test.js"></script>
  </body>

jsファイル側

// 変数の宣言
let moji = 'Hello World';

// JQueryの記述方法
/*
    書き方：
    $('.セレクタ').コマンド();
    
        $：jQueryを示す
        セレクタ：idは#、classは.で表す。
        コマンド：jQuaryの命令
*/

//testが実行されると、アラートでmojiを表示
$('.test').click(function(){
    alert(moji);
});