【初級】jQueryから学ぶプログラミング入門

jQuery初級
ボタンをクリックして要素を非表示にする
入力されたテキストをリアルタイムで表示する
入力されたテキストをリアルタイムで表示する
やってみよう！確認テスト

jQuery初級

学習前の記事はこちら！

jQueryは時代遅れの技術であるこの記事はWebデザイナーを目指すみなさんのために、jQueryの技術についての情報を提供します。しかし、そんなみなさんに知っておいて欲しい。jQueryは現在時代遅れの技術だと言われています。jQuery...

次のように学んでいきます。

ボタンをクリックして要素を非表示にする（jQuery）
入力されたテキストをリアルタイムで表示する（jQuery）
リストに項目を追加するボタンを実装する（jQuery）
TOPボタンへ戻る際のアニメーション（jQuery）

まず覚えたい基本の動作とWebサイトでよくみる仕組みのセットになっています。
学習に必要な情報やサンプルコード → 課題
という内容になっています。

課題で内容が理解できているか、実際に作業できるか確認してみましょう。

ボタンをクリックして要素を非表示にする

授業内容

jQueryの導入方法（CDNを使用した簡単な導入）
jQueryセレクターの基本（$()を使った要素の選択）
click()イベントハンドラの使用
hide()メソッドを使った要素の非表示

jQueryの導入方法

まずはjQueryを導入しましょう。
htmlのheadタグに次のコードを記述しましょう。こちらのコードはネット上にあるjQueryのソースを読み込み読み込んだファイルでjQueryが使えるようになります。

CDNは次のページから入手します。
以下の記述をコピペ使用しても問題ありません。

<script
src="https://code.jquery.com/jquery-3.7.1.js"
integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
crossorigin="anonymous"></script>

これで準備は完了です。

<script>
 $(function(){

});
</script>

jQueryのコードを書き始める時に、まずは上記のコードを記入しましょう。
スクリプトを実行するには何かしらの「きっかけ」が必要となります。
これを「トリガー」と読んだりします。

この記述によって「このサイトの読み込みが完了したら」という意味になります。
ほとんどのコードはこの内部に書いて問題ありません。今後のコードはこの中に記述していってください。

jQueryセレクターの基本

jQueryで記述する際にまずは必要なのが「どこに？」という指定です。

 $(".text")

上記のような書き方をします。
「.text」の部分にclassやid名が入ります。

<button class="hideButton">クリックして非表示</button>
<p class="text">このテキストが非表示になります。</p>

上記の例だと「button」と「p」があります。
それぞれに「hideButton」「text」という名称が記載されていますね。

$(".text") //.textに
$("hideButton") //.hideButtonに

このような書き方でそれぞれ「.text」「.hideButton」に対して命令ができます。

click()イベントハンドラの使用 / hide()メソッドを使った要素の非表示

次のような動作を作成します。

.hideButtonがクリックされたら！は次のように書きます。

$("hideButton").click(function(){

});

以下の{}の内側にクリックされた際の指定を行います。
今回は「.text」が非表示になる動作をします。

$("hideButton").click(function(){
     $(".text").hide();
});

このような書き方になります。

実際に動かしてみよう！

<button class="hideButton">クリックして非表示</button>
<p class="text">このテキストが非表示になります。</p>

<script>
$(function(){
      $("hideButton").click(function(){ 
           $(".text").hide(); 
      });
});
</script>

上記のコードを動かしてみましょう。（jQueryのCDN読み込みがないとうごきませんよ！）

Just a moment...

こちらで動作を確認できます。

このようにどの[タイミングで][どこに][どうする]といったことを指定することによりさまざまな動作が行えます。

こんなに書いてこれしかできないの？
と思われた方もいるかも知れません。
プログラミングとはこういうものなのです・・・。

入力されたテキストをリアルタイムで表示する

さて、基本のjQueryの動作は試せました。
さまざまな動作を試して、いろいろな動かし方のパターンを覚えていきましょう！

インプット要素から文字を入力したら、それが画面上に表示されるものを作成してみましょう。

ストに項目を追加するボタンを実装する
val()メソッドを使って入力フィールドの値を取得
text()メソッドを使って要素にテキストを挿入

<input type="text" id="inputBox" placeholder="テキストを入力してください">
<p id="displayText">ここに表示されます</p>

<script>
$(function(){       
$('#inputBox').keyup(function() {
var text = $(this).val();
$('#displayText').text(text);
});
});
</script>

こちらのコードは「keyup」イベントを起点に処理を行います。
これにより、入力内容をすぐに画面上に表示することができます。

サンプル

入力されたテキストをリアルタイムで表示する

append()メソッドを使った要素の追加
click()イベントの再利用
リスト要素（<ul>や<li>）の操作

では次のような動きを実装しましょう。

append()メソッドを使った要素の追加
click()イベントの再利用
リスト要素（<ul>や<li>）の操作

<ul id="itemList">
<li>アイテム1</li>
<li>アイテム2</li>
</ul>
<button id="addItemButton">アイテムを追加</button>

<script>
$('#addItemButton').click(function() {
$('#itemList').append('<li>新しいアイテム</li>');
});
</script>

サンプル