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> </p>
<p>今回は、「jQuary学習」ということで、モヒカンさんの動画でjQuaryについて勉強したので、そのメモを書いていきたいと思います。</p>
<p>モヒカンさんの動画を元に学習をしています。</p>
<p><span style="color: #ff00ff; font-size: 16pt;">参考動画:</span></p> <p> </p>
<p> </p>
<div class="uk-alert-danger">
<h2><span style="color: #0000ff; font-size: 16pt;">1.jQuaryの準備~実行</span></h2> </div>
<p> </p>
<p> (1)jQuaryのダウンロード(urlの取得)</p>
<p>下記サイトから、jQuaryのurlを取得します。</p>
<p> </p>
<p> (2)jQuaryの書き込み</p>
<p>今回は、「クリック」というボタンをしたら、ポップアップでHellow Worldを表示するようにしました。</p> <p> ・取得したurlをheadタグの中に入れます。</p>
<p> ・CSSのUI-kitも使用するため、UI-kitの呼び出しも書いてあります。</p>
<p> ・javascriptを書くファイルをtest.jsという名前のファイルにしたので、bodyタグの一番最後に読み込む文を書きます。</p>
<p> </p>
<p>HTML側のプログラム:</p>
<pre class="language-markup"><code><!-- 2021/03/27
目的:Javascriptの基礎を作成する。
-->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<!-- CSSの設定 -->
<link
rel="stylesheet"
/>
<!-- UIkit JS -->
<!-- JQuaryの追加 -->
</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>
</html></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">
<p><span style="color: #ff0000; font-size: 16pt;">関連記事:</span></p> </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> </p>
<ul id="Ss4Wbe_ContentScript_QuickSearch_QuickSearchContainer" style="display: block;">
<li id="Ss4Wbe_ContentScript_QuickSearch_QuickSearchContainer_Head">SmaSurf クイック検索</li>
</ul>