JavaScript 11

Ajax란, 비동기 통신과 동기 통신 차이

AJAX 란 Ajax(Asynchronous JavaScript and Xml) 자바스크립트의 라이브러리 중 하나이며, 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용하여 전체 페이지를 새로 고치지 않고 페이지의 일부만을 로드하는 기법 이를 정리하자면, 자바스크립트를 사용한 비동기 통신이며, 클라이언트와 서버간에 XML 데이터를 주고받는 기술 비동기 방식은 웹페이지를 리로드 하지 않고 데이터를 불러옵니다. Ajax 를 통해 서버에 요청을 하더라도 멈춰있지 않고 해당 프로그램은 계속 돌아가고 있음 이러한 비동기 방식은 시간도 빠르고, 화면을 리로드 하는 경우 전체 리소스를 다 가져올 필요없이 일부 필요한 부분만 가져오기 때문에 장점 Ajax 예제 $.ajax({ // URL은 필수 요소이므로..

JavaScript 2023.04.11

JSON 이란

JSON 이란 출처 입력 JavaScript Object Natation 이라는 의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식 Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다. JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용 JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법일 뿐이다. JSON 특징 출처 입력 서버와 클라이언트 간의 교류에서 일반적으로 많이 사용된다. 자바스크립트 객체 표기법과 아주 유사하다. 자바스크립트를 이용하여 JSON 형식의 문서를 쉽게 자바스크립트 객체로 변환할 수 있는 이점..

JavaScript 2023.04.11

jQuery 페이지 이동 시 class 유지

클릭 시 addClass/removeClass로 클래스를 추가했다 제거했다 하면서 색상을 변경하는데 페이지 이동이 들어간 경우에는 페이지가 이동하면서 추가한 클래스가 없어져버리는 현상이 발생 ​ 간단하게 생각하면 홈페이지 메뉴도 페이지 이동이 되면서 메뉴의 색상이 그대로 유지되는거긴 하다 php에서 주소확인 후 class를 주는 방법도 있다고는 하나 아직 구현해보진 못했고 (많은 페이지 이동시에는 이 방법을 써야할 듯..?) 일단 스크립트로 했으니.. HTML active Active2 Active3 jQuery jQuery(function ($) { $("ul a").click(function(e) { var link = $(this); var item = link.parent("li"); if (it..

JavaScript 2023.04.11

datepicker 오늘 날짜 이후 부터 활성화

datepicker에서 오늘 이전으로 지난 날짜는 비활성화 하고, 오늘 이후의 날짜만 활성화 시키고 싶을 때 소스코드 $(".datepicker").datepicker({ minDate:0; inline: ture, dateFormat: 'yy-mm-dd', showOn: "focus", show: "blind", showOptions: {direction: 'horizontal'}, duration: 200 }); minDate: 0 을 추가 ​ * 오늘 날짜까지 비활성화 시킬 때 minDate:"+1d" * 오늘 날짜로부터 4일 이후까지 비활성화 시킬 때 minDate:"+4d" 적용화면

JavaScript 2023.04.11

[JavaScript/jQuery] 날짜 차이 계산

시작일 - 종료일 입력 시 바로 차이 계산해 주는 것 ​ 한참 찾다가😭 jquery input value 실시간, input 값 받는 것 등등 검색해서 찾았다 ​ 요소에 onChange 값을 넣어주고, 시작일 : ~ 종료일 : jquery 입력부분 function call() { var sdd = document.getElementById("start").value; var edd = document.getElementById("end").value; var ar1 = sdd.split('-'); var ar2 = edd.split('-'); var da1 = new Date(ar1[0], ar1[1], ar1[2]); var da2 = new Date(ar2[0], ar2[1], ar2[2]); var..

JavaScript 2023.04.11