jQuary、javascript学習_1

<div class="uk-animation-toggle" tabindex="0">

<div class="uk-alert-danger uk-animation-shake">

</div>

</div>

<p>こんにちは</p>

<p>ユキです。</p>

<p>&nbsp;</p>

<p>今回は、「jQuary学習」ということで、モヒカンさんの動画でjQuaryについて勉強したので、そのメモを書いていきたいと思います。</p>

<p>モヒカンさんの動画を元に学習をしています。</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<div class="uk-alert-danger">

</div>

<p>&nbsp;</p>

<p>　(1)jQuaryのダウンロード(urlの取得)</p>

<p>下記サイトから、jQuaryのurlを取得します。</p>

<p>&nbsp;</p>

<p>　(2)jQuaryの書き込み</p>

<p>　・取得したurlをheadタグの中に入れます。</p>

<p>　・CSSのUI-kitも使用するため、UI-kitの呼び出しも書いてあります。</p>

<p>　・javascriptを書くファイルをtest.jsという名前のファイルにしたので、bodyタグの一番最後に読み込む文を書きます。</p>

<p>&nbsp;</p>

<p>HTML側のプログラム：</p>

<pre class="language-markup"><code>&lt;!-- 2021/03/27

目的：Javascriptの基礎を作成する。

--&gt;

&lt;!DOCTYPE html&gt;

&lt;html lang="ja"&gt;

&lt;head&gt;

&lt;meta charset="UTF-8" /&gt;

&lt;!-- CSSの設定 --&gt;

&lt;link

rel="stylesheet"

/&gt;

&lt;!-- UIkit JS --&gt;

&lt;!-- JQuaryの追加 --&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;h1&gt;Javascript学習&lt;/h1&gt;

&lt;h2&gt;JQuaryの使い方&lt;/h2&gt;

&lt;p&gt;クリックするとアラートが表示されます。&lt;/p&gt;

&lt;a class="test uk-button uk-button-primary"&gt;クリック&lt;/a&gt;

&lt;!-- test.js(javascript)ファイルの読み込み --&gt;

&lt;script type="text/javascript" src="./test.js"&gt;&lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;</code></pre>

<p>Javascript側のプログラム：</p>

<pre class="language-javascript"><code>// 変数の宣言

let moji = 'Hello World';

// JQueryの記述方法

/*

書き方：

$('.セレクタ').コマンド();

$：jQueryを示す

セレクタ：idは#、classは.で表す。

コマンド：jQuaryの命令

*/

//testが実行されると、アラートでmojiを表示

$('.test').click(function(){

alert(moji);

});</code></pre>

<p>　(3)実行結果</p>

<blockquote class="twitter-tweet">

<div class="uk-child-width-expand@s">

<div class="uk-animation-toggle" tabindex="0">

<div class="uk-animation-toggle" tabindex="0">

<div class="uk-alert-primary">

</div>

</div>

</div>

</div>

<div class="uk-animation-toggle" tabindex="0">　<a href="/blog/57956">・初めてのHTMLの前準備と導入(VScodeの導入)</a></div>

<p>　・<a href="/blog/58073">初めてのCSS(nemlogのレイアウトの幅を広げてみよう)</a></p>

<p>　・<a href="/blog/58995">初めてのHTML</a></p>

<div class="uk-animation-toggle" tabindex="0">

<div class="uk-animation-toggle" tabindex="0">　・<a href="/blog/57298">nemlogの装飾に使えるCSSコードサンプル集(外部ページ)</a></div>

</div>

<div class="uk-animation-toggle" tabindex="0">

</div>

<p>&nbsp;</p>

<ul id="Ss4Wbe_ContentScript_QuickSearch_QuickSearchContainer" style="display: block;">

<li id="Ss4Wbe_ContentScript_QuickSearch_QuickSearchContainer_Head">SmaSurf クイック検索</li>

</ul>