var の役割
[renshu-31.html]
<script>
function aaa(){
var a = 123;
console.log(a);
}
aaa() ;// 関数は呼び出さないと動きません
</script>
ginzo
-
要素の取得
var 変数名
[renshu-3.html]
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="eee"> <ul> <li class="fff">1つ目</li> <li class="fff">2つ目</li> <li class="fff">3つ目</li> </ul> </div> </body> </html> <script> function bbb(){ var fff = document.querySelector(".fff"); console.log(fff); } bbb() ;// 関数は呼び出さないと動きません </script> -
要素の書き換え
var 変数名
[renshu-33.html]
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="eee"> <ul> <li class="fff">1つ目</li> <li class="fff">2つ目</li> <li class="fff">3つ目</li> </ul> <input type="button" id="myfunc" value="ぼたん"> </div> </body> </html> <script> const myfunc = document.getElementById("myfunc"); myfunc.onclick = function (){ var fff = document.querySelector(".fff"); fff.textContent = "11つ目"; } </script> -
クリックイベント
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="eee"> <ul> <li class="fff">1つ目</li> <li class="fff">2つ目</li> <li class="fff">3つ目</li> </ul> <input type="button" id="myfunc" value="ぼたん"> </div> </body> </html> <script> const myfunc = document.getElementById("myfunc"); myfunc.onclick = function (){ var fff = document.querySelector(".fff"); fff.textContent = "11つ目"; } </script> -
ライブラリの代表 jQueryとは
ほとんどのWEBサイトで利用されてます.
ブラウザがhtmlを読み込んでから,タグ要素を追加,削除,変更が生のjavascriptよりも1/3以下のコード量でできてしまいます.
また,ユーザーの操作をキャッチして状況に応じた処理を行うことができます
phpとの連携ができるので,DB操作を呼び出すことができる万能なライブラリです.コードの書き方はCSSと共通した部分があるので馴染みやすいはずです.
jQueryを利用する方法は一般的に外部サイトからの読み込みで行います.このことをCDNといいます.
早速ファイルを作ってCDNで読み込んでみましょう
minified です
コピーして [jq–1.html]にペーストしてください
コンソールで読み込まれていることを確認しましょう
-
DOMの階層構造とは
jQueryを使うとDOMの操作が簡単にできます
カラのbody内に<h1>要素を追加してみましょう[jq-2.html]
<body> </body> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script> $('body').append('<h1>みだし</h1>'); </script> 文の書式は,常にこのパターンです $(要素).関数名(引数) ; -
様々なメソッド (関数)
[jq-3.html]
text メソッドは要素の中の文字列のみ付与,取得する事ができます.
<body> <h1>最初の見出し</h1> <input type="button" value="rewrite" onclick="changeText()"> <input type="button" value="getText" onclick="geteText()"> </body> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script> function changeText(){ $('h1').text('書き換えた見出し'); } function geteText(){ var text = $('h1').text(); console.log(text); } </script>（）の中に引数があれば付与,なければ取得に自動的に切り替わります
-
様々なメソッド2
[jq-4.html]
html メソッドは要素にhtmlを付与,取得する事ができます.
<body> <div id="main"></div> <input type="button" value="rewrite" onclick="changeText()"> <input type="button" value="getText" onclick="geteText()"> </body> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script> function changeText(){ $('#main').html('<h2>埋め込んだ見出し</h2>'); } function geteText(){ var text = $('#main').html(); console.log(text); } </script>CSSを与えるメソッドは css()
クラスを与えるメソッドは addClass()
属性を操作するメソッドは attr()
そのたたくさん. -
フォーム編 checkbox
[jq-5.html]
jQueryでチェックボックスのチェック状態を取得する – JavaScript
<body> <p>あなたの好きな動物は？（複数可）</p> <input type="checkbox" value="イヌ">イヌ<br> <input type="checkbox" value="ネコ">ネコ<br> <input type="checkbox" value="ウサギ">ウサギ<br> <input type="checkbox" value="ハムスター">ハムスター<br> <input type="checkbox" value="熱帯魚">熱帯魚<br> <input type="checkbox" value="他">この中には無い<br> <input type="button" value="確認" onclick="boxCheck()"> </body> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script> function boxCheck(){ //チェックされた項目を記録する変数 var str = ""; //eachメソッドでチェックボックスを１つずつ確認 $('[type="checkbox"]').each(function(index, elem){ //チェックされているか確認する if($(elem).prop('checked')){ //変数strが空でない時、区切りのコンマを追加する if( str != "" ) str = str + "," ; //チェックボックスのvalue値を変数strに入れる str += $(elem).val(); } }); //strが空の時、警告を出す if( str == "" ){ alert( "どれか選択してください。" ); }else{ alert( str + "が選択されました。" ); } } </script> -
フォーム編 ラジオボタン
[jq-6.html]
html メソッドは要素にhtmlを付与,取得する事ができます.
<form name="radioB"> カナダの首都は？<br> <input type="radio" name="Q1">オタワ<br> <input type="radio" name="Q1">トロント<br> <input type="radio" name="Q1">モントリオール<br> <br> スイスの首都は？<br> <input type="radio" name="Q2">ジュネーブ<br> <input type="radio" name="Q2">チューリッヒ<br> <input type="radio" name="Q2">ベルン<br> <br> ドイツの首都は？<br> <input type="radio" name="Q3">ハンブルク<br> <input type="radio" name="Q3">ブレーメン<br> <input type="radio" name="Q3">ベルリン<br> <br> スペインの首都は？<br> <input type="radio" name="Q4">バルセロナ<br> <input type="radio" name="Q4">マドリード<br> <input type="radio" name="Q4">リスボン<br> <br> オーストラリアの首都は？<br> <input type="radio" name="Q5">シドニー<br> <input type="radio" name="Q5">メルボルン<br> <input type="radio" name="Q5">キャンベラ<br> <br> <input type="button" value="採点" id="saiten" /> </form> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script> $('#saiten').click(function (){ var seikai=0; //正解数を入れる変数 //答えの番号を配列に入れる var trueAns = [0,5,8,10,14]; //正解のラジオボタンがチェックされているか確認 $('[type="radio"]:checked').each(function(index, elem){ if( $('[type="radio"]').eq(trueAns[index]).prop('checked') ){ console.log(index, trueAns[index] ); seikai++; } }); alert("あなたは"+seikai*20+"点でした！"); }); </script> -
パスワードの照合と,表示
[jq-8.html]
jqueryしか使いません
パスワード <input type="password" name="password" size="13" maxlength="13"> パスワード確認 <input type="password" name="password-c" size="13"> <button id="show">表示する</button> <input type="button" size="30" value="送信"> -
jQueryでDatepickerを表示する方法
[jq-7.html]
html メソッドは要素にhtmlを付与,取得する事ができます.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css"> <input type="text" id="datepicker"> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script> $('#datepicker').datepicker(); </script>