반응형 FrontEnd/JavaScript5 [JavaScript] 자바스크립트의 함수 만드는 방법 3가지(Feat. 화살표 함수 표현식) 📌 함수 만드는 방법 3가지1. 이름 있는 함수function fan(a, b, c) { // 수행문;}2. 익명함수 만들어서 변수에 저장let fn = function(a, b, c) { // 수행문;}3. 화살표 함수 표현식으로 만들어서 변수에 저장왼쪽 매개변수 => 오른쪽 구현내용매개변수가 1개일 때는 괄호 생략 가능* 매개변수 0개일 때도 빈 괄호 ()는 작성해야 함1) 수행문이 1개일 때return 생략 가능, 실행결과가 곧 반환값let fn = (x) => x + 10;2) 수행문이 2개 이상일 때let fn = (a, b, c) => { // 수행문; return a + b + c;} 🔗 velog 버전 보기 : https://velog.io/@ryuneng2/JavaScript-함수-만.. 2025. 1. 19. [JavaScript] 자바스크립트 배열의 주요 메소드 1. splice배열에서 지정된 위치에 아이템을 삭제하거나 추가할 수 있다.splice(index, howmany, item, item, item, ...)index삭제/추가 발생할 인덱스howmany삭제할 갯수, 0을 입력하면 삭제되지 않는다.0보다 큰 값을 입력하면 index 위치부터 갯수만큼 삭제된다.itemindex 위치에 추가할 값추가할 값이 없을 때는 생략할 수 있다.2. push배열의 끝에 값을 추가한다.push(값)3. unshift배열의 맨앞에 값을 추가한다.unshift(값)원래 있던 값들은 전부 한칸씩 뒤로 이동한다.4. pop배열의 맨마지막 값을 삭제하고, 그 값을 반환한다.pop()5. shift배열의 첫번째 값을 삭제하고, 그 값을 반환한다.shift()두번째 있던 값들부터 전부.. 2025. 1. 19. [JavaScript] 이벤트 처리 방법 3가지 1. 인라인 이벤트 처리버튼function handler(event, 변수, 변수) { // 수행문;}2. 엘리먼트 객체의 이벤트 프로퍼티를 이용한 이벤트 처리버튼let btn = document.getElementById("btn-add");btn.onclick = function(event) { // 수행문;}3. 엘리먼트 객체의 addEventListener 메소드를 이용한 이벤트 처리버튼let btn = document.getElementById("btn-add");btn.addEventListener('click', function(event) { // 수행문;}) 🔗 velog 버전 보기 : https://velog.io/@ryuneng2/JavaScript-이벤트-처리-방법-3가지 2025. 1. 19. [JavaScript] AJAX와 JSON 직렬화/역직렬화 ❓ AJAXAsynchronous JavaScript and XML(에이잭스)의 약자자바스크립트와 XML을 이용한 서버와 비동기식 통신화면의 리로딩 없이 자바스크립트로 웹서버와 HTTP 통신을 통해서 데이터를 획득하고,획득한 데이터로 화면의 일부분을 갱신하는 것Ajax는 사용자에게 더 나은 사용자경험(User Experience, UX)을 제공할 필요가 있을 때 사용한다.Ajax 요청을 처리하는 요청핸들러 메소드는 데이터를 응답으로 내려보내야 한다.(@ResponseBody)* 자주 쓰이는 Ajax 활용법팝업창(모달) 띄울 때상위 카테고리에 따라 하위 카테고리가 변경되어야 할 때📌 직렬화전송에 용이한 형태로 변환하는 행위 ex) Java 객체 => JSON 텍스트📌 역직렬화분석에 용이한 형태로 변환하.. 2025. 1. 19. [JavaScript] Document/Element 주요 메소드 📌 DocumentHTML 문서를 표현하는 객체웹브라우저 내장객체인 document는 HTML 문서를 표현하는 Document 객체가 저장되어 있다.✔️ 주요 메소드1. Element getElementById(아이디)Document 객체에서 지정된 아이디를 가진 엘리먼트 객체를 찾아서 반환한다.일치하는 엘리먼트가 없으면 null이 반환된다.2. Element querySelector(선택자)Document 객체에서 지정된 선택자로 찾아지는 첫번째 엘리먼트 객체를 반환한다.일치하는 엘리먼트가 없으면 null이 반환된다.3. NodeList querySelectorAll(선택자)Doucument 객체에서 지정된 선택자로 찾아지는 모든 엘리먼트 객체를 NodeList객체에 담아서 반환한다.일치하는 엘리먼트.. 2025. 1. 19. 이전 1 다음