정리

JQuery

• 자바스크립트 라이브러리, 자유소프트웨어 폭넓은 브라우저 지원

ajax

• 비동기적인 웹페이지 제작을 위한 기법
  -- 동기: 요청과 결과가 동시에 일어남| 장점: 간단 설계 + 직관성 / 단점: 결과가 주어질 때까지 대기
  -- 예시: 인터넷 뱅킹서비스, 이체하고 받는 과정이 순서대로 일어나며 동일한 행위 혹은 목적으로 이루어짐 그리고 이전 단계를 거치지 않으면 다음 단계로 나아가지 못함
  -- 비동기: 요청과 결과가 동시에 일어나지 않음| 장점: 결과가 주어지는 시간동안 다른 작업 가능 / 단점: 동기보다 복잡함
  -- 예시: 분업화된 대청소, 바닥을 쓰는 동안 설거지를 할 수도 있고 물건을 정리하는 등 순서없이 가능한 행위나 목적

json(Javascript Object Nation)

• 키-값 쌍으로 이루어진 데이터 오브젝트.
• 마크업 언어(태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어) 혹은 개방형 표준포맷
• 자바스크립트로 파생되었지만 흔히 다 사용함

CDN(Contents Delivery Network)

• 자료를 효율적으로 전달하기 위해 여러 노드를 가진 네트워크에 데이터를 저장하여 제공하는 시스템

JQuery 사용방법

소스

<script src="https://code.jquery.com/jquery-3.6.0.js" 
        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" 
    	crossorigin="anonymous"></script>

• head 부분에 위의 소스를 넣어두면 jquery 사용 가능
• integrity, crossorigin 은 보안을 위한 것이란 것만 앎

기본 틀

<script>
	$(function() {
 		alert(‘load!!’); // load!! 알림
 	});
  
	function alert2() { // 기존의 소스도 사용 가능
		alert(‘hi’);
	}
</script>

자주 쓰는 양식

<script>
// 1번
$(“#id_name”).on(“click”,function(){
	console.log(‘click!’);
});

// 또는
// 2번
$(“#id_name”).click(function(){
	console.log(‘click!’);
});
</script>

• 1번 의미 => id이름를 클릭했을 때, 콘솔 창에 click! 이란 기록을 출력하겠다
• 2번 의미 => 위와 동일
• $ => jquery 문법을 사용한다고 밝히는 기호
• #아이디이름 => 해당 태그의 아이디 이름에 대한 자바 명령을 실행할 때 사용
• input[name=태그이름] => 해당 이름을 가진 input태그를 선별
• input[name=태그이름]:checked =>해당 이름을 가진 input태그 중에서 선택된 것을 선별(input type:checkbox 일때)
• input:타입 => input 태그 중에서 특정 타입만을 선별 가능
• $("select[name=jobs]") => select 태그 중에서 해당이름을 가진 것만 가져옴
• .val() => value 값을 가져옴
• 참고자료 : https://www.w3schools.com/jquery/jquery_ref_selectors.asp

명령에 명령을 추가 추가

<script>
$(“#id_name”).on(
	“click”,function(){
		console.log(‘click!’);
	}).on(“mouseover”,function(){
		console.log(‘enter!’);
	}
);
</script>

• 클릭하면 클릭 로그를 출력한 후에 마우스가 태그에 왔을 명령을 실행

끼워넣기

<script>
$(target).append(source) //셀렉터의 뒤에
$(target).prepend(source) //셀렉터의 앞에
$(source).appendTo(target) //셀렉터의 뒤에
$(source).prependTo(target) //셀렉터의 앞에
</script>

엘리먼트 옵션 변경

<script>
$(target).attr(“바꿀 옵션”,”값”) //값 변경
$(target).attr(“값 확인할 옵션”) //값 확인
$(“a”).attr(“src”,”http://naver.com”)
</script>

attr로 css 변경

<script>
$(target).css(“바꿀 css”, ”값”) //값 변경
$(“a”).css(“width”, ”100%”)
</script>