JQuery
제이쿼리는 자바스크립트의 라이브러리이다.
(https://www.w3schools.com/jquery/jquery_get_started.asp 해당 페이지에서 원하는 코드를 복사해서 가져올 수 있다.)
미리짜여져있는 자바스크립트 코드를 가져와서 사용하므로 보다 빠르고 쉽게 코드를 짤 수 있다.
제이쿼리를 사용하려면 해당 주소를 내 코드창에 임포트해주어야한다.
<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 = 'okidoki@gamil.com'
mail.split('@')
//→ ['okidoki','gamil.com']
mail.split('@')[0]
//→ okidoki
.includes('')
//→ 특정 문자을 포함하고 있는지 여부를 true fales로 반환해준다.
//→ '' 안에 찾고 싶은 문자를 입력하면 된다.
mail.includes('@')
//→ true
html 에 있는 버튼과 js를 연결하여 버튼의 역할을 수행시킬 수 있다.
onclick 을 이용하여 가능!
<button>클릭</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 은 key value 방식으로 이루어져있다.
(key : value ⇒ 이름 : 김개똥 . 이런 방식을 키 벨뉴라고 한다.)
JSON 을 설치하면 , 기존에 아무렇게나 보이던 것들이 key value 형으로 정렬되어 보여진다.
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()