프레임워크/JS(+jQuery)6 [JavaScript] new Map() new Map()은 JavaScript의 내장 객체 중 하나로써 Map은 key-value 쌍을 저장하는 컬렉션입니다. 이를 사용하여 효율적으로 데이터를 저장하고 관리할 수 있습니다. 조작 방법은 아래와 같습니다.// 새로운 Map 생성ley map = new Map();// key-value 쌍 추가map.set('key', 'value');map.set('red', '빨강');// 값 가져오기const key = map.get('key');console.log(key); // value// 존재여부 확인const keyYN = map.has('key');console.log(keyYN); // true// key-value 쌍 삭제map.delete('key');// Map 크기 확인console.l.. 2024. 5. 14. [jQuery] 파라미터(인자) 사용하기 function을 쓰는 이유 1. 긴 코드를 짧게 축약할 수 있음 2. 파라미터를 사용하면 함수를 업그레이드할 수 있음 (한가지 동작만 주야장천 하는 게 아니라 파라미터를 사용하여 여러 가지 경우의 동작을 시킬 수 있음) 위 사진처럼 함수에 구멍을 뚫어 놓으면 해당 함수를 사용 할 때 구멍이라는 변수에 값을 입력할 수 있다. 이를 활용하면 알림창열기, 알림 창닫기 함수 2개를 알림 창 여닫기 함수 1개로 함축시킬 수 있다. → 코드가 훨씬 간결 해지고, 재활용성도 높아진다. 예시) +(더하기) 연산을 수행하여 2+1, 2+2, 2+3을 수행하는 함수를 만든다고 가정했을 때 - 파라미터를 사용하지 않았을 경우 - 파라미터를 사용했을 경우 둘을 비교 했을 때 누가 보더라도 후자가 코드 양도, 가독성도, 재활.. 2022. 4. 27. [jQuery] Script로 UI 조작하기 (alert box) 요즘은 jQuery나 JS 보다는 React나 Vue처럼 JS를 더 편하게 만들어주는 프레임워크를 사용하고 있고 그게 더 생산성에 이득이라고 하지만 내 생각에는 코드가 조금 길더라도, 불필요한 것 같더라도 기반을 다져 놓은 다음 조금 더 쉬운 프레임워크들을 사용하는 게 좋은 것 같다라고 그 과정의 이득을 본 사람으로써 jQuery를 다시 한번 더 공부하게 되는 것 같다. (비전공자나 신입일 때는 지금 유행하는 프레임워크의 작동법을 배운 다음에 깊게 공부하는 게 더 좋겠지만) 강의 내용을 정리 하기에는 별 내용이 없어서 추가적으로 기능을 더해서 만들었다. 1. 기본적인 UI를 구현한다. 덤으로 index.css 파일을 생성해서 CSS도 입혀 주었다. Alert Box 열기 .alert-box { backg.. 2022. 4. 22. [jQuery] 스크롤 감지 이벤트 (스크롤 이동 / 현재 스크롤 위치) jQuery로 작성된 프로젝트를 수정하던 중 스크롤 감지 이벤트가 있다는 걸 알게 되었다. 기존 코드에서 스크롤을 내릴 경우 Header가 위로 올라가면서 가려지는 현상이 일어나 이를 해결하기 위해 현재 스크롤 위치를 사용하여서 문제를 해결 하려고 했는 데 쉽지 않는 과정이었다.. 다행히 스크롤 감지 이벤트를 사용하여 쉽게 해결 할 수 있었다!!! 첫 시도 때 사용한 현재 스크롤 위치를 출력하는 이벤트를 아래와 같이 사용한다. 현재 스크롤 위치 이벤트 $(window).scroll(function() { // 스크롤 이동 시 실행되는 코드 $(window).scrollTop(); }); $('선택자').scroll(function() { // 스크롤 이동 시 실행되는 코드 $(window).scrollT.. 2022. 4. 18. [jQuery] 선택자 종류 [Jquery] 제이쿼리 선택자 : 직접 선택자 (전체 선택자/아이디 선택자/클래스 선택자/태그 선택자/ 안녕하세요. 이번 포스팅에서는 제이쿼리(jquery) 선택자 중 직접 선택자에 대해서 알아보도록 하겠습니다. 선택자는 HTML 요소를 선택하여 가져옵니다. jquery에서 선택자는 CSS와 마찬가지로 가져 lktprogrammer.tistory.com 제이쿼리(jQuery) 선택자 - #1 1. 기본 선택자 - $('h1').css('color', 'red'); - ('h1') 선택자와, css('color', 'red') 메서드 - 문서 객체를 다룰 때 사용하는 형태 - CSS 선택자와 유사 1.1. 전체 선택자 (Wildcard Selector) - * - HTML.. gangzzang.tisto.. 2022. 4. 18. [jQuery] 시작하기 + $(document).ready() 요즘 계속 React, Next.js를 사용하여 프로젝트를 진행하다 보니까 JavaScript는 원하는 대로 잘 쓰는 것 같은 데 jQuery는 교육원 다닐 때 겉할기로 배운 게 전부였던 것 같아서 다시 공부해보고 싶어졌다. 이상하게 HTML, CSS 보다 JS가 재미있다는... 생각이 들어서!! 다시 공부하면서 마스터해볼 생각이다. JS, jQuery 과정 1. index.html 파일을 생성한다. 2. html:5를 입력해서 HTML 기본 틀을 생성한다. 3. 태그를 하나 만들고, id는 "hello"로 설정한다. 안녕하세요 4. 3번에서 만든 태그 아래에 태그를 생성하고, 아래 코드를 삽입한다. 위 코드는 JQuery는 아니고, JS의 형태이다. 코드 해석 document : 웹문서 . : ~의 g.. 2022. 4. 15. 이전 1 다음 728x90
