第2週JQuery JSON API ajax

15259 ワード

JQuery
JクエリはJavaScriptのライブラリです.
(https://www.w3schools.com/jquery/jquery_get_started.aspページから必要なコードをコピーしてインポートできます.)
あらかじめ編成されたJavaScriptコードをインポートして使用することで、より速く、より簡単にコードを記述できます.
2番目のクエリーを使用するには、このアドレスを私のコードウィンドウにインポートする必要があります.<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

이번주 쓰였던 JS함수
$('#url').val('안녕하세요') 
//→ id = url 인 곳에 안녕하세요 가 입력된다.

$('#url').val()
//→ id = url 인 곳에 있는 값이 불러와진다.

$('#url').hide()
//→ id = url 인 곳이 숨겨진다.

$('#url').show()
//→ id = url 인 곳이 보여진다.

let temp_html = ``
//(작은 따옴표 아님. backtick. 키보드 ~ 표시랑 같이 있는 점. ``)
//backtick 안에다가 html로 추가 하고 싶은 내용을 입력한다.

$('#url').append(temp_html)
//→ id = url 인 곳에 temp_html 이 추가 된다. 

.split('')
//→ '' 안에 있는 문자를 기준으로 문자열을 나누어준다.
'abcd.efg'.split('.')
//→ ['abcd','efg'] .을 기준으로 문자열을 나누었다.
let mail = '[email protected]'
mail.split('@')
//→ ['okidoki','gamil.com']
mail.split('@')[0]
//→ okidoki

.includes('')
//→ 특정 문자을 포함하고 있는지 여부를 true fales로 반환해준다.
//→ '' 안에 찾고 싶은 문자를 입력하면 된다.
mail.includes('@')
//→ true
htmlのボタンをjsに接続して、ボタンの役割を実行できます.
onclickが使えます!<button onclick="q1()">클릭</button>onclickで作成したjs関数を入力し、このボタンをクリックして関数を実行します.
</style>

<script>
    function q1() {
        let txt = $('#input-q1').val();
        if (txt == ''){
            alert('입력하세요');
        } else {
            alert(txt);
        }
    }
//변수명이 같아도 서로 다른 함수이기 때문에 상관없다.
//q1에 있는 txt는 q1에서만 작용하고 q2에 있는 txt는 q2에서만 작용.
 
    function q2() {
        let txt = $('#input-q2').val();
        if (txt.includes('@') == true){
            alert(txt.split('@')[1].split('.')[0])
        } else {
            alert('이메일이 아닙니다');
        }
    }

    function q3() {
        let txt = $('#input-q3').val();
        let temp_html = `<li>${txt}</li>`;

        $('#names-q3').append(temp_html);
    }

    function q3_remove() {
        $('#names-q3').empty();
    }

</script>
JSon
Jsonはインストール後に実行できます.
(インストールアドレスhttps://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko)
Jsonはkeyvalue方式で構成されています.
(key:value=名前:金犬糞.この方法をジブニュと言います.)
JSONがインストールされていると、既存の随意表示の内容がキー値型として表示されます.
API
APIとは,サーバとクライアントとの間の約束である.
互いにある規格の約定を約定し、約定された規格の要求情報に従ってこそ、データを交換することができ、APIと呼ばれる.
.
ajaxの使用
ajaxを実行するにはjqueryをインポートする必要があります.jqueryをインポートする必要があります.
.
ajax基本フレームワーク
$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})

------------------------

$(document).ready(function(){
	alert('다 로딩됐다!')
});
// 내용의 값을 로딩되자마자 자동으로 띄워준다 $(document).ready(function()