JavaScript & JQuery24 [JavaScript] var, let, const 자바스크립트에서 변수를 선언하는 방법에는 var, let, const 세 가지가 있습니다. 1. 중복 선언 가능 여부 var : 중복 선언 가능 - var는 중복해서 변수 선언을 여러 번 해도 에러 없이 각각 다른 값이 출력될 수 있음 - 초기화 없이 선언만 한 경우엔 변수 선언문 자체가 무시됨 (이 또한 에러발생 하지 않음) - 이는 기존에 선언했던 변수의 존재를 잊고 값을 재할당하게 되는 등의 실수를 저지르기 쉽다는 단점이 있음 // 변수 선언 + 초기화 var testVar = "TEST1"; console.log(testVar); // TEST1 // 변수 선언 + 초기화 var testVar = "TEST1"; console.log(testVar); // TEST1 // 변수 선언 (초기화 X).. 2024. 4. 22. [JQuery] 기본 선택자 1. 기본 선택자 전체 선택자 (Wildcard Selector) - HTML 페이지에 있는 모든 문서 객체를 선택 - 문법 : * 태그 선택자 - 특정한 태그를 선택 - 문법 : 태그명 아이디 선택자 - 특정한 id 속성이 있는 문서 객체를 선택 - 문법 : #아이디명 Header 클래스 선택자 - 특정한 class 속성이 있는 문서 객체를 선택 - 문법 : .클래스명 Header1 Header2 Header Header Header Header 2. 자손 선택자와 후손 선택자 기본 선택자의 앞에 붙여 사용하며, 기본 선택자의 범위를 제한합니다. 자손 선택자 - 자손을 선택 - 문법 : '요소1' > '요소1' Dog Cat Pig 후손 선택자 - 후손을 선택 - 문법 : '요소1 요소2' 형태로 사용.. 2024. 3. 29. [AJAX] Ajax 비동기식 처리와 동기식 처리 Ajax란 Asynchronous JavaScript and XML의 약자입니다. Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나입니다. Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있습니다. 즉, Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있습니다. 이때 서버와는 JSON, XML, HTML, 텍스트 파일 등 과 같은 다양한 형태의 데이터를 주고받을 수 있습니다. 기존 방법과 다르게 웹에서 서버 측에 데이터를 요청하고 데이터의 수신이 완료될 때까지 기다릴 필요 없이, Ajax를 이용하여 데이터의 수신을 기다리지 않고 바로 다른 작업을 실행하여 불필요한 페이지의 로딩을 기다리지.. 2023. 7. 10. [JavaScript] 요일 구하기 자바스크립트의 Date 객체를 사용하여 무슨 요일인지 알 수 있습니다. new Date(yyyy-MM-dd).getDay() 날짜의 요일은 new Date(yyyy-MM-dd).getDay() 함수를 통해 구할 수 있습니다. 자세한 사용방법은 다음과 같습니다. //ex) getDayOfWeek('2023-04-04') 의 형태로 사용 function getDayOfWeek(yyyyMMdd){ const dayOfWeek = new Date(yyyyMMdd).getDay(); //0:일, 1:월, 2:화, 3:수, 4:목, 5:금, 6:토 return dayOfWeek; } 위 getDayOfWeek함수는 매개변수로 들어오는 날짜의 요일을 구할수있습니다. 날짜의 형식은 yyyy-MM-dd와 같은 형태이며,.. 2023. 4. 4. [JQuery] $(document).ready 와 $(document).on의 차이(Feat. $(document).ready가 동적 요소 제어하지 못할 경우) $(document).ready $(document).ready(function(){ //이벤트 }) 보통 위 코드와 같은 형식으로 사용됩니다. $(document).ready는 DOM이 준비가 됐을 때 click이벤트를 시작하겠다는 의미입니다. 문제는 동적으로 생성되는 엘리먼트들에 한해서는 $(document).ready가 동작되지 않을 수 있습니다. 그 이유는 이벤트 핸들러(event handler)를 엘리먼트에 직접 바인딩을 하기 때문입니다. 엘리먼트에 직접 바인딩을 하기 때문에 지금 존재하는 태그들만 영향을 받고 새로 동적으로 생성되는 엘리먼트 들은 영향을 받을 수 없습니다. 동적이란? 보통 ajax를 통해 만들어지는 것을 말하며, 기존 DOM이 생성된 뒤 JS, JQuery를 통해서 새로 만들어.. 2023. 3. 22. [JQuery] 체크 박스 전체 개수와 선택된 개수 / 체크 처리와 체크 해제 제이쿼리를 이용하여 체크박스 전체 개수와 체크된 개수를 구할 수 있습니다. 또한 체크처리 / 해제 할 수 있습니다. 체크박스의 전체 개수 $("input:checkbox[name=체크박스 NAME]").length 의 형태로 체크박스 전체 개수를 구할 수 있습니다. 위와 같은 체크박스가 있을 때 다음과 같은 제이쿼리를 사용해 checkbox_aaa 체크박스의 전체 개수를 알 수 있습니다. $("input:checkbox[name='checkbox_aaa']").length; 체크박스 체크된 개수 $("input:checkbox[name=체크박스 NAME]:checked").length 의 형태로 체크된 개수를 구할 수 있습니다. 위와 같은 체크박스가 있을 때 다음과 같은 제이쿼리를 사용해 checkbox.. 2023. 1. 27. [JavaScript] 배열의 특정 값 삭제하기 1. 배열 전체 값 삭제 방법 1 배열 = []; 의 형태로 배열의 전체 값을 삭제(초기화) 할 수 있습니다. 방법 2 배열.length = 0; 의 형태로 배열의 길이를 0으로 초기화하여 전체 값을 삭제(초기화) 할 수 있습니다. //방법 1 //배열 선언 let arr1 = ['aaa', 'bbb', 'ccc']; // 배열 값 전체 삭제 arr1 = []; console.log(arr1.length);//0 출력 //방법 2 //배열 선언 let arr2 = ['ddd', 'eee', 'fff']; // 배열 값 0으로 변경 arr2.length = 0; console.log(arr2.length);//0 출력 2. 배열 첫 번째 값 삭제 자바스크립트의 shift 함수를 사용하여 배열의 첫 번째 값.. 2023. 1. 19. [JavaScript] 현재 날짜, 특정 날짜 - Date() 자바스크립트의 Date 객체를 사용하여 현재 날짜를 구할 수 있고, 특정 날짜를 구할 수 있습니다. Date() Date 객체는 생성자 함수이며, 날짜와 시간을 가지는 인스턴스를 생성합니다. 생성된 인스턴스는 기본적으로 현재 날짜와 시간을 나타내는 값을 가집니다. 현재 날짜와 시간이 아닌 특정 날짜와 시간을 다루고 싶은 경우, Date 생성자 함수에 명시적으로 특정 날짜와 시간 정보를 매개변수로 지정합니다. Date() 사용 방법 1. 현재 시간 new Date(); 를 이용하여 Date 객체를 생성합니다. var date1 = new Date(); // 현재 날짜 및 시간, Fri Jan 06 2023 16:24:15 GMT+0900 (한국 표준시) 2. 특정 시간 new Date(매개변수); 의 형태.. 2023. 1. 6. [JQuery] 상위요소, 부모 요소 찾는 방법(parent, parents, closest) 제이쿼리를 통하여 부모 요소를 선택하는 방법은 대표적으로 세 가지 함수가 있습니다. parent() parents() closest() parent() parent 함수는 해당 요소의 바로 위에 존재하는 하나의 부모 요소를 반환합니다. 아래 예시와 같이, parent 함수를 이용하여 span 태그의 부모요소를 찾을 경우, p태그를 반환하게 됩니다. What is the parent elements? parents() 만약 하나가 아닌 모든 부모요소를 찾을경우에는 parents 함수를 사용합니다. 아래 예시와 같이, parents 함수를 이용하여 span 태그의 부모요소를 찾을 경우, p태그와 div 태그 모두를 반환하게 됩니다. What is the parent elements? closest() clo.. 2022. 12. 29. 이전 1 2 3 다음 반응형
