Web開発基盤2週間

2週目の授業はjQueryとAjaxに詳しい時間です.Ajaxなどを利用して何度も聞いたことがありますが一度も使ったことのないもの

👉jQueryって何?

-html要素を操作するための便利なjavascriptを予め作成したライブラリ.
Soimportを作るには
-Javascriptを使用してドキュメントを生成します.getElementById("element").style.display = "none";
jQueryを使用する場合は、このような長いコード$("#element")を記述する必要があります.hide(); このように直感的で短くなることができます.
jQueryを使用するには、次の手順に従います.
"<"script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> "
コードをインポートする必要があります.
1.jQueryの使い方
cssがclassをセレクタとして使用するように、jQueryはid値によって特定のタグ値を指す.
2.よく使うjQuery
1)入力ボックス値
inputボックスのid値を指し、val()(ex.$('#post-url')に値をインポートします.val();)
2)divを隠す、表示する
非表示:divグループのid値、hide()を指します.(=cssの表示値をnoneに変更)(ex.(「#post-box」)hide(); ) 表示:グループへのid値、show()(=cssの表示値をblockに置き換える)(ex.(「#post-box」)hide();
)
3)cssの値を取得する
ex.display値:$(「#post-box」)を取得します.css('display');
4)タグのテキストを入力
1)input box:$('#post-url').val(「テキストを入力」);
2)タグのテキスト:$('#btn-posting-box')を置き換えます.text(位置決めボックスを閉じる);
5)タグにhtmlを入力

<div id="cards-box" class="card-columns">

</div>
1)div 태그 안에 버튼 넣어보기 
let temp_html = '<button>나는 추가될 버튼이다!</button>';
$('#cards-box').append(temp_html);
2)div 태그 안에 카드 넣어보기
// 주의: backtick(`)으로 감싸야 함.backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있게 됨.

let img_url = ' https://www.~~~.jpg' ;
let link_url = ' https://naver.com/' ;
let title=「ここは文章のタイトルです」
let desc=「文章の要約...」;
let comment=「ここはコメントです」;
let temp_html = `

                  <div class="card-body">
                      <a href="${link_url}" class="card-title">${title}</a>
                      <p class="card-text">${desc}</p>
                      <p class="card-text comment">${comment}</p>
                  </div>
              </div>`;

$('#cards-box').append(temp_html);
3.サーバの理解-クライアント通信
1)サーバの理解->クライアント:「JSON」
jsonはkeyとvalueからなり、ディックシリーズに似ている.
2)クライアント->サーバ:GETリクエストについて
API存在タイプ
したがって,クライアントは要求時にもGet要求とPost要求に分けられる.
🔹Getメソッド:「データ照会」(Read)を要求する場合のex.ムービーリスト照会
(cf.Postメソッド:データの作成、更新、削除時にex.を使用します.会員に加入し、会員を抹消し、パスワードを変更し、転送中に再表示します)
🔹データの取得方法
住所:https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967活動の場所を表す
? : ここから転送するデータの作成
&:ex.googleは、もっと多くのデータを伝えることを示しています.com/search?q=iphone&sourcceid=chrome&ie=UTF-8
4.Ajax
Ajaxは、jQueryをインポートしたページで実行することもできます
1)基本骨格
✔ $.ajax({
type:「GET」//Getリクエスト
url:「ここにURLを入力する」
データ:{},//要求時同時行データ(Get要求時は空)
成功:function(response){//サーバが提供する結果をresponseという変数に含める
console.ログ(レスポンス)/サーバによって提供される結果の作成
}
})
cf.data:getリクエストはurlですか?後のデータ
post要求Ajaxコードのdata:{}にデータを入れることでデータを取得する

success : 성공시, response값에 서버의 결과 값을 담아 함수 실행 
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음

console.log(response)
}
『回顧』
私は初めてjquery、ajaxの概念を学びました.これは私がネットで買い物をしたり、会員情報を修正したりするなど、いろいろなデータをどのように管理している時間です.後で各種のデータを応用して、流れを熟知します.