티스토리

Dust

검색하기

블로그 홈

Dust

min-ji07.tistory.com/m

먼쥐7 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

[Javascript] Template literals(ES6) var name = '김'; var num = 20; var title = `안녕하세요 ${name} 입니다`; function fn(문자들, 변수1, 변수2){ console.log(문자들); console.log(변수1, 변수2); } fn`안녕하세요 ${name} 입니다 ${num}` // 문자(텍스트)를 배열로 만들어 반환함 // 문자들 출력시 // ["안녕하세요", " 입니다"]; // 변수 출력시 ${name} , ${num} 안의 값 출력 // 김, 20 글자의 순서를 변경하고 싶을 때 ex) ["안녕하세요", "입니다"] 를 ["입니다", "안녕하세요"] 로 변경 function fn(문자들, 변수1, 변수2){ console.log(문자들[1], 문자들[0]); } // 입니다, 안녕하세.. 공감수 0 댓글수 0 2022. 12. 2.
[Javascript] Spread Operator(ES6) let arr = ['hello', 'world']; console.log(arr); let arr = ['hello', 'world']; console.log(...arr); var text = 'hello'; console.log(text); let text = 'hello'; console.log(...text); // 문자 해체 // console.log('h', 'e', 'l', 'l', 'o'); 활용! - arr복사 , 합치기 할 때 유용함 - Deep copy(복사한 array, object에서 독립적인 값) var a = [1,2,3]; var b = [4,5]; var c = [...a, ...b]; console.log(c); // [1,2,3,4,5]; shallow copy(참조에.. 공감수 0 댓글수 0 2022. 12. 2.
[Javascript] 화살표 함수 let num = function(a){ return a + 10; } 기본 함수가 있을 때 화살표 함수는 let num = (a) => { return a + 10 }; function을 없애고 좀 더 간단히 쓸 수 있음 더 간단히도 쓸 수 있음 값이 하나거나 코드가 한 줄 일 때 let num = a => a + 10; 여러개일 땐 중괄호를 써줘야함 예시! let arr = [1,2,3,4]; arr.forEach((v) => { console.log(v + 10); }) // 11, 12, 13, 14 this 값 재정의 x (바깥에 있던 this 값을 내부에서 그대로 사용함) document.getElementById('button').addEventListener('click', functio.. 공감수 0 댓글수 0 2022. 10. 27.
[Javascript] this 헷갈리는 this를 알아보자.., 객체나 함수 안에서 this를 썼을 때 // this를 그냥 쓰거나 일반 함수에서 쓰면 window를 뜻함 let thisObject = { name: 'dust', test: function(){ console.log('함수 내 this 테스트'); // 메소드 안에서 this를 쓰면 thisObject를 뜻함(속해있는 object) console.log(this); }, data : { test2: function(){ // data를 뜻함(속해있는 object) console.log(this); } } } addEventListener 안에서 this를 썼을 때 modal.addEventListener('click', function(e){ console.log('.. 공감수 0 댓글수 0 2022. 10. 27.
[Javascript] javascript로 태그 만들어서 집어넣기 // html 태그 생성 // 첫번째 방법 const div = document.querySelector('#create'); const p = document.createElement('p'); div.appendChild(p); p.innerText = '반가워'; // 두번째 방법(요즘엔 이렇게 많이 쓰인다고 함) let div2 = `안녕`; document.getElementById('create2').insertAdjacentHTML('beforeend', div2); 공감수 0 댓글수 0 2022. 10. 25.
[Javascript] scroll const width = window.innerWidth; const height = window.innerHeight; // 브라우저의 width, height 값 스크롤을 얼마나 했는지 확인 window.scrollY 일반 div박스나 다른 요소의 스크롤을 확인하고 싶을 때 const section = document.querySeletor('section'); let sectionHeight = section.scrollHeight; // 스크롤 포함 실제 높이, 페이지가 로드완료되야 정확함(body태그 밑에 써주는게 좋음) let scroll = section.scrollTop; // 하면 페이지 내 scroll이 있는 section 박스의 scroll이 어디인지 확인가능 // 위에서 얼마나 내렸.. 공감수 0 댓글수 0 2022. 10. 25.
[Javascript] return function test(){ return 1234; // return 밑에 있는 코드들은 실행되지 않음 } let number = test(); // 값 확인해보고 싶으면 변수에 넣어서 확인 가능 console.log(number); // 1234 공감수 0 댓글수 0 2022. 10. 25.
[Javascript] 정규식(regular expression) 정규식으로 해당 문자가 들어있는지 검사하고 싶을 때 /[a-z]/.test('abcde'); // a부터 z까지 글자가 들어있는지? // 하나만 찾아줌!🙃 /a+/.test('aaaaaaaaaaaaa'); // a가 여러개 있는지? /[A-Z]/.test('abcde'); // 대문자 A부터 Z까지 글자가 있는지? /[ㄱ-ㅎ가-힣]/.test('abcdeA'); // 한국어가 들어있는지? /\S/.test('abcde'); // 아무 문자 하나, 특수기호 포함 /^a/.test('abcd'); // a로 시작하는지 /a$/.test('abcd'); // a로 끝나는지 /a|b/.test('abcd'); // a또는b // 이메일 정규식 /\S+@\S+\.\S+/.test('이메일주소'); // \S+ 는.. 공감수 0 댓글수 0 2022. 10. 25.
[Javascript] setTImeout, setInterval 쓰는 법 setTimeout 기본 문법 setTimeout(function(){ }, 1000); // 1000은 1초뒤에 실행하라는 뜻 // 이렇게도 사용 가능 setTimeout(text, 1000); function text(){ console.log('안녕하세요'); } setInterval 기본 문법 setInterval(function(){ }, 5000); // 5초 간격으로 계속 실행 let count = 0; const timer = setInterval(function(){ count++; if(count === 10){ clearInterval(timer); // count가 10이 됐을 때 clearInterval 메소드로 timer 멈춤 } }, 1000); 공감수 0 댓글수 0 2022. 10. 25.
[Javascript] 값이 숫자인지 확인하기 isNaN 함수 사용! const number = 123; const text = '123'; // isNaN 사용 isNaN(number) // false isNaN(text) // true number 값이 아닐 때 true출력 공감수 0 댓글수 0 2022. 10. 25.
[Javascript] padStart, padEnd string 일 때 원하는 글자수가 아닐경우 앞에 원하는 내용을 추가할 수 있음 const time = prompt("시간을 입력하세요","").padStart(2,"0"); ex) 2만 입력했을 때 --> 02로 변경 padEnd() --> padStart 와 같지만 뒤에 원하는 내용을 추가해줌 const time = prompt("시간을 입력하세요","").padEnd(3,"**"); --> 3** 로 변경 공감수 0 댓글수 0 2022. 10. 10.
[Javascript] 변수안에 함수 넣기 const h2 = document.querySelector("h2"); const superEventHandler = {}; function mouseEnter() { h2.style.color = colors[0]; h2.innerText = "The mouse is here!"; } function mouseLeave() { h2.style.color = colors[1]; h2.innerText = "The mouse is gone!"; } 위에 내용을 도대체 어떻게 넣나 했는데 이렇게 넣는 거 였다.. 다음에 또 까먹으면 보러와야지 const h2 = document.querySelector("h2"); const superEventHandler = { handleEnter:function(){.. 공감수 0 댓글수 0 2022. 9. 30.
[javascript] FullCalendar 사용해보는 중 document.addEventListener('DOMContentLoaded', function(){ let calendarEl = document.getElementById("calendar"); let calendar = new FullCalendar.Calendar(calendarEl, { initialView: 'dayGridMonth', expandRows: true, slotMinTime: '08:00', slotMaxTime: '20:00', headerToolbar:{ left: 'prev', center: 'title', right: 'next' // 월, 주 등등 // dayGridMonth, timeGridWeek, timeGridDay, listWeek }, init.. 공감수 0 댓글수 0 2022. 9. 20.
querySelector.addEventListener와 querySelectorAll.addEventListener의 차이 querySelector는 특정 요소 하나만 선택하고 querySelectorAll는 해당하는 모든 요소를 선택함 querySelector에 addEventListener를 하면 오류가 안나지만 querySelectorAll에 addEventListener할 경우 오류남 참고로 querySelectorAll 로 select를 검색했을 때 이렇게 보여짐(객체 반환) 해결 방법 - 반복문 사용 const allSelect = document.querySelectorAll("#joinForm select"); for(let i = 0; i < allSelect.length; i++){ allSelect[i].addEventListener("change", function(event){ const value =.. 공감수 0 댓글수 0 2022. 9. 20.
[javascript] 배열 내 최대, 최솟값 구하기 let numbers = [10, 20, 3, 16, 45]; let max = min = numbers[0]; console.log(max); console.log(min); numbers.forEach(function(number){ if(number > max){ max = number; } if(number < min){ min = number; } }); console.log(max, min); 이렇게 작성하면 코드도 길고 가독성도 떨어지기 때문에 Math.max, Math.min 메소드에 apply를 사용 let numbers = [10, 20, 3, 16, 45]; let max = Math.max.apply(null, numbers); let min = Math.min.apply(null,.. 공감수 0 댓글수 0 2022. 9. 7.
[javascript] 배열 내장함수 forEach for문 사용 const array = [ '강아지', '고양이', '토끼', '햄스터']; for (let i = 0; i { console.log(ani); }; map 제곱일경우 forEach 예시 const array = [1, 2, 3, 4, 5, 6, 7]; const squared = []; array.forEach(number => { squared.push( number * number ); }); map 사용 const array = [1, 2, 3, .. 공감수 0 댓글수 0 2022. 5. 16.
[javascript] 객체, 객체 비구조화 할당 const 변수, 상수명 = { 키 : 값, 키 : '값', '키 키' : 값 // 키는 공백이 없어야하며 있어야 할 경우 따옴표로 감싸 문자열로 넣어준다 } 객체를 선언할 때에는 { } 문자 안에 원하는 값을 넣어줌 하나의 이름에 여러 종류의 값을 넣을 수 있음 const dust = { name : 'dust', color : 'black', shape : 'circle', }; console.log(dust.name); // dust console.log(dust.color); // black function print(info){ const text = '${info.name}는 ${info.color},${info.shape}' console.log(text); } 객체 비구조화 할당 위에서 객.. 공감수 0 댓글수 0 2022. 4. 5.
[javascript]onclick, alert, prompt, confirm onclick onclick 요소를 클릭할 때 이벤트 발생 확인하기 alert prompt confirm 클릭 클릭 var click = document.querySelector('.click'); click.onclick = function(){ // 원하는 내용 // ex) 글꼴 색상 변경시 click.style.color = 'red'; } document.onclick = clickEvent; function clickEvent(){ // 원하는 내용 } alert 메세지를 지정할 수 있는 모달창을 띄움 window.alert('alert를 클릭했습니다.'); alert('alert를 클릭했습니다.'); // 둘 다 같은 내용으로 window 창을 켰을 때 확인할 수 있음 prompt 텍스트 입력.. 공감수 0 댓글수 0 2022. 1. 13.
[javascript]scrollTop, 스크롤시 상단 메뉴 사라짐 var lastScrollTop = 0; var delta = 5; var fix = document.querySelector('.category-banner'); var fixWrap = document.querySelector('.wraper'); var fixHeight = fix.offsetHeight; var didScroll; window.onscroll = function(e){ didScroll = true; } // 반복 0.25초마다 스크롤 여부 체크하여 scroll() 호출 setInterval(function(){ if(didScroll){ scroll(); didScroll = false; } }, 250); function scroll(){ var nowScrollTop = wi.. 공감수 0 댓글수 1 2022. 1. 11.
[javascript]document.querySelector, document.querySelectorAll, document.getElementById, document.getElementsByClassName, document.getElementsByTagName 요소 찾기 아이디로 찾기 클래스로 찾기 태그명으로로 찾기 css 선택자로 찾기 var id = document.querySelector('#id'); var class = document.querySelector('.class'); 선택자를 만족하는 첫번째 element 반환, 일치하는 요소가 없을경우 null을 반환 id 선택자인데 문서내에 같은 아이디를 여러번 사용한 경우 첫번째 id 값을 가진 element 반환 var classList = document.querySelectorAll('.class'); 선택자를 만족하는 모든 요소의 리스트 반환, 결과가 없을경우 빈 리스트를 반환 var classMany = document.querySelectorAll('.class1, .class2'); 위와 같지만 !.. 공감수 0 댓글수 0 2022. 1. 11.
swiper 알아보기! swiper 시작하기 파일 다운받기(NPM) https://swiperjs.com/get-started#installation Getting Started With Swiper Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 링크 추가하기(CDN) 장점 - 간단하고 편함 - 업데이트 됐을 때 자동 적용 - 실무에서 보통 많이 사용 단점 - 이전버전을 쓰다 업데이트 됐을 경우 깨지거나 이슈가 있을 수 있음 (오류가 있다 수정된 경우/디자인이나 레이아웃 관련해선 적다고 함) 기본구조 head에 링크추가 후 body에 swip.. 공감수 0 댓글수 0 2021. 12. 17.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.