민트의 개발일지📜

select box를 제어해보기 selectbox를 사용하던 중 정리해두면 좋을 것 같아서 포스팅 해볼게요! 자주 사용하는 기능을 jQuery와 javascript로 분류했습니다. 신한은행 하나은행 국민은행 우리은행 농협은행 1. select box 의 selected 된 옵션값, 텍스트 가져오기 jQuery $("select[name=bank] option:selected").val(); // kb $("select[name=bank] option:selected").text(); // 국민은행 javascript document.querySelector("select[name=bank] option:checked").value; // kb document.querySelector("select[nam..

Javascript Callbacks 콜백은 다른 함수의 파라미터로 전달되는 함수입니다. 이 콜백함수를 사용하면 함수가 파라미터로 받은 다른 함수를 호출할 수 있습니다. 콜백함수가 어떻게 구현되는지 간단한 예제를 봅시다. 간단한 계산식 후 로그를 찍는 함수 입니다. 계산기 함수(myCalculator)를 호출하여 결과를 저장한 다음, 출력 함수(myDisplayer)를 호출하여 결과를 로그로 남깁니다. 📄 콜백함수를 사용하지 않은 일반함수 호출 // 출력함수 function myDisplayer(result) { console.log('계산결과 : ', result); } // 계산기함수 function myCalculator(num1, num2, callback) { let sum = num1 + nu..

Map 자바스크립트 자료구조 중 map에 대해 포스팅 해보겠습니다. ES6에 도입된 Map은 Object객체와 동일하게 key-value 쌍으로 저장되며 삽입 순서도 기억하는 컬렉션 입니다. key-value의 형태로 이루어져있으며 삽입 순서를 기억 key는 모든 값 (함수, 객체 등)을 사용 가능 get, set 을 이용하여 키 값을 반환, 설정 기본 구문 const myMap = new Map([ ['a', 1], ['b', 2] ]); myMap.set('c', 3); Object.fromEntries(myMap); // {a: 1, b: 2, c: 3} new 생성자를 통해서만 생성이 가능합니다. key값으로 String과 Symbol 타입만 가질 수 있는 Object형과 달리, 어떠한 값이라도 ..

대괄호 [] 안의 숫자 추출하기 정규식을 사용해서 추출해봅니다.

오늘 날짜를 구하고, 원하는 포맷으로 출력해보자 자바스크립트로 오늘 날짜를 구하고, 원하는 형태의 포맷으로 출력해보겠습니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date Date - JavaScript | MDN JavaScript Date 객체는 시간의 한 점을 플랫폼에 종속되지 않는 형태로 나타냅니다. Date 객체는 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값을 담습니다. developer.mozilla.org Date 객체 사용 let today = new Date(); // 값 : Fri Mar 04 2022 08:49:10 GMT+0900 (한국..

split() 메서드를 사용하여 문자열을 배열로 분할하기 php에서는 explode()로 문자열을 배열로 분할하여 사용했는데, 자바스크립트에서도 비슷한 메서드가 있습니다. 구문 str.split([separator[, limit]]) 매개변수 separator : 문자열을 끊을 문자 limit : 끊은 문자열의 최대갯수를 나타내는 정수이며 선택옵션 입니다. 예제 let week = "월,화,수,목,금,토,일"; let week_array = week.split(","); console.log(week_array); // ['월', '화', '수', '목', '금', '토', '일'] console.log(week_array[1]); // 화 ※ 참고 : https://developer.mozilla.or..

this is a paragraph 참고 : https://www.w3schools.com/html/html_intro.asp

HTML5에서 추가된 개념으로 데이터 속성을 사용하여 DOM요소에 데이터를 저장할 수 있습니다. 데이터 속성은 'data-*'로 시작합니다. 1. HTML data-age와 data-id란 속성을 추가했습니다. 2. javascript * 데이터 속성 가져오기 let element = document.querySelector("input[name=user_name]"); let age = element.getAttribute("data-age"); let id = element.getAttribute("data-id"); console.log(age, id); // 20, hong * 데이터 속성 변경하기 let element = document.querySelector("input[name=user_n..