티스토리

나의 코딩 기록

검색하기

블로그 홈

나의 코딩 기록

kimyang-sun.tistory.com/m

코딩을 기록하는 공간

구독자: 17

방명록 방문하기

주요 글 목록

자바스크립트 여러가지 종류의 좌표 찾기 (screenX, screenY, pageX, pageY, clientX, clientY, offsetX, offsetY) 자바스크립트 여러가지 종류의 좌표 찾기 (Vanilla JavaScript Coordinates) 입니다. 자바스크립트에서 좌표의 종류는 크게 4가지로 분류됩니다. 1. screenX, screenY 사용자의 모니터 화면을 기준으로 한 좌표를 표시 사용자의 모니터의 왼쪽 상단 모서리가 (0, 0) 2. pageX, pageY 브라우저 전체 페이지를 기준으로 좌표를 표시 가로나 세로 스크롤이 생기는 경우 스크롤이 될때마다 해당 pageX, pageY의 좌표값은 변경 3. clientX, clientY 브라우저에서 사용자에게 웹페이지가 보여지는 영역을 기준으로 좌표를 표시 스크롤바가 움직여도, 특정 지점의 clientX, clientY의 값은 동일 4. offsetX, offsetY 좌표를 출력하도록 하는 .. 공감수 0 댓글수 0 2023. 8. 8.
자바스크립트 - PC, 모바일 (아이폰 ios, 안드로이드) 기기 환경 구분하는 코드 자바스크립트 - PC, 모바일 (아이폰 ios, 안드로이드) 기기 환경 구분 특정 상황에 기기 환경이 pc인지, 모바일인지, 모바일이면 ios 환경인지 안드로이드 환경인지 구분해주는 코드입니다. navigator.userAgent 를 이용하여 구분해줍니다. 자세한 코드는 하단 코드펜을 참고하시면 됩니다. See the Pen 자바스크립트 - PC, 모바일 (아이폰 ios, 안드로이드) 기기 환경 구분 체크 by kimyangsun (@kimyangsun) on CodePen. 공감수 0 댓글수 0 2023. 8. 7.
바닐라 자바스크립트 sibilings 형제 찾기 기능 (Vanilla js siblings function) See the Pen 바닐라 자바스크립트 siblings 기능 (Vanilla js siblings function) by kimyangsun (@kimyangsun) on CodePen. 바닐라 자바스크립트 sibilings 기능 (Vanilla js siblings function) 입니다.제이쿼리를 사용할때 선택자로 엘리먼트를 하나 잡고 siblings() 를 이용하여 나머지 형제들을 선택하는 경우가 많은데바닐라 자바스크립트에서는 그 기능을 그대로 사용하려면 따로 만들어서 사용해주어야 하기 때문에 함수 형태로 만든 코드를 올립니다. :) /* 바닐라 자바스크립트 siblings 형제 찾는 함수 커스텀 (결과는 배열로 리턴됩니다.) */// 첫번째 인자에는 엘리먼트,// 두번째 인자에는 클래스가 들.. 공감수 0 댓글수 0 2023. 1. 28.
[자바스크립트] 객체 데이터를 이용한 HTML 엘리먼트 추가 See the Pen 객체 데이터를 이용한 HTML 태그 추가 by kimyangsun (@kimyangsun) on CodePen. [자바스크립트] 객체 데이터를 이용한 HTML 엘리먼트 추가 코드펜 예제입니다. // 운행팀에 강제로 해당 직원들이 추가되어야함 let members = [ // 보통 실무에서 이러한 데이터들은 json이나 xml로 분기되거나 백엔드에서 API로 가져옴 {name: "김팀장", position: "팀장", number: "043-740-3266", work: "차량운행, 차량관리"}, {name: "정부팀", position: "부팀장", number: "043-740-3266", work: "관용차량운행"}, {name: "김직원", position: "직원", numb.. 공감수 0 댓글수 0 2023. 1. 28.
new Date(), toLocaleDateString (현재 날짜,시간 표시하기 / JavaScript) See the Pen 현재 날짜 표시하기 (JavaScript) by kimyangsun (@kimyangsun) on CodePen. new Date()를 이용하여 현재 시간을 추출해서 toLocaleDatestring() 을 사용하여 날짜를 상세히 표시해주었습니다. 리액트 프로젝트에서 게시글 작성이나 댓글작성을 하면서 구현하면서 작성시간을 표시해두려고 구현했었는데.. 얼마 후에 다시 구현하려고 하니까 살짝 까먹어서 그냥 정리해두기로 했습니다 😑.. 'en-US' 는 영어, 'ko-KR' 은 한글입니다. 위의 예제에는 날짜만 표시해두고 시간까지는 표시하지 않았지만 같은 방식으로 해주시면 될 것 같습니다. 밑에는 주요 옵션들입니다. year: 연도를 나타냄 - 'numeric'(예: 2020) - '2-.. 공감수 2 댓글수 0 2021. 3. 6.
(JavaScript) 자바스크립트 큐(Queue, FIFO) 자료구조 구현 자바스크립트로 큐(Queue) 기능을 구현해봤습니다. 큐는 FIFO로 First In First Out, 처음으로 들어온 데이터가 처음으로 나가는 구조입니다. // 큐 클래스 class Queue { constructor() { this._size = 0; // 현재 데이터 수 this.head; // queue 기준 현재 값 this.tail; // queue 기준 가장 마지막 값 } // 묶여있는 _size를 밖에서 호출해주기 위해 getter를 사용합니다. get size() { return this._size; } // 큐 추가 enQueue(value) { const node = { value }; if (this._size === 0) { this.head = node; } else { thi.. 공감수 0 댓글수 0 2021. 2. 9.
(JavaScript) 자바스크립트 스택(Stack, LIFO) 자료구조 구현 자바스크립트로 스택(Stack) 기능을 구현해봤습니다. 스택은 LIFO로 Last In First Out, 마지막으로 들어온 데이터가 처음으로 나가는 구조입니다. // 스택 클래스 class Stack { constructor() { this._size = 0; // 현재 데이터 수 this.head; // Stack 기준 현재 값 this.tail; // Stack 기준 가장 마지막 값 } // 묶여있는 _size를 밖에서 호출해주기 위해 getter를 사용합니다. get size() { return this._size; } // 스택 추가 push(value) { const node = { value }; if (this._size === 0) { this.head = node; this.tail =.. 공감수 0 댓글수 0 2021. 2. 8.
풍선 터치기 게임 (바닐라 자바스크립트 미니게임) Balloon Pop! v 1.0 사용 언어 - HTML - CSS - JAVASCRIPT (Vanilla) 링크 https://kimyang-sun.github.io/balloon-pop/ 게임 설명 [1부터 순서대로 풍선을 터치는 게임] 주어진 시간안에 숫자가 적혀있는 풍선을 1부터 순서대로 눌러 터치는 게임입니다. - START 버튼을 클릭하여 시작합니다. - LEVEL 버튼을 클릭하여 난이도를 조정할 수 있습니다. - 풍선에 숫자가 적혀있는데 1부터 순서대로 누르면 됩니다. - 풍선의 위치는 랜덤입니다. - 왼쪽 아래는 터뜨린 풍선의 숫자, 오른쪽 아래는 제한시간입니다. - 제한시간 안에 풍선을 모두 터뜨리지 못하면 게임은 패배합니다. 공감수 0 댓글수 0 2021. 2. 8.
Mini Clothing Store (바닐라 자바스크립트) PC Mobile 사용 언어 - HTML - CSS - JAVASCRIPT (Vanilla) 링크 https://kimyang-sun.github.io/mini-clothing-store/ 기능 설명 [카테고리 메뉴 기능] 처음에 아이템들은 json 데이터를 받아와 html로 변환하여 정렬합니다. 해당 카테고리 메뉴들이 링크가 아닌 하나의 페이지에서 자바스크립트를 이용하여 각각 아이템들의 데이터를 파악하여 해당하는 아이템들만 보여지게 됩니다. 각각의 카테고리 메뉴를 클릭하면 해당 카테고리에 해당하는 옷들이 분류되어 나타납니다. 체크상태인 메뉴들을 다시 클릭하면 체크가 해제됩니다. (상품 다시 필터링) 공감수 0 댓글수 0 2021. 2. 8.
물고기 잡기 게임 (바닐라 자바스크립트 미니게임) Fish Catch! v 1.0 사용 언어 - HTML - CSS - JAVASCRIPT (Vanilla) 링크 https://kimyang-sun.github.io/fish-catch/ 기능 설명 [성게를 피해 물고기를 클릭하는 게임] 주어진 시간안에 성게를 피해 물고기를 클릭하는 게임입니다. - ▶버튼을 누르면 게임이 시작되고 시작한 이후에 ⏸버튼을 누르면 게임이 일시정지 됩니다. - 일시정지한 이후에 나오는 팝업에 🔄버튼을 누르면 처음부터 재시작됩니다. - 시간이 0초가 될때까지 당근을 모두 클릭하지 못하면 패배합니다. 공감수 1 댓글수 0 2021. 2. 8.
자바스크립트 계산기 (HTML/CSS/Vanilla JavaScript) kimyang-sun.github.io/calculator-basic/ JS Calculator C % x² √ ÷ 7 8 9 × 4 5 6 - 1 2 3 + +/- 0 . = kimyang-sun.github.io - 사칙연산 및 %, 제곱, 제곱근, 음수/양수 변환 등의 기능을 가진 계산기입니다. - Vanilla JS 로 class를 만들어 기능들을 구현하였습니다. - 숫자들을 입력 후 수식을 누르면 위에 회색글씨로 계산 과정이 나옵니다. 자바스크립트 코드입니다. "use strict"; // Calculator class class Calculator { constructor(process, result) { this.process = process; this.result = result; } /.. 공감수 0 댓글수 0 2021. 2. 8.
Shopping List Basic (바닐라 자바스크립트) 상품 추가 전 상품 추가 후 사용 언어 - HTML - CSS - JAVASCRIPT (Vanilla) 링크 https://kimyang-sun.github.io/shopping-list-basic/ 기능 설명 [상품 추가 기능] 입력창에 상품을 입력하고 상품을 추가하는 기능입니다. - 입력창에 상품을 입력 후 옆에 + 아이콘 클릭 - 입력창에 상품을 입력 후 Enter 키 [상품 삭제 기능] 추가된 상품을 다시 삭제하는 기능입니다. - 추가된 상품에 쓰레기통 아이콘 클릭 공감수 0 댓글수 0 2021. 2. 8.
scrollIntoView 예제 (자바스크립트) 자바스크립트 알고리즘 (Programmers)See the Pen scrollIntoView 예제 by kimyangsun (@kimyangsun) on CodePen. const button = document.querySelector("button"); const blue = document.querySelector(".blue"); button.addEventListener("click", () => { blue.scrollIntoView({behavior: "smooth", block: "center", inline: "center"}); }); 공감수 0 댓글수 0 2020. 11. 13.
slice vs splice (자바스크립트 배열 자르기) See the Pen substr vs substring / slice vs splice by kimyangsun (@kimyangsun) on CodePen. // slice vs splice 배열 자르기 let arr =[1,2,3,4,5,6]; let arr_slice = arr.slice(1,4); // 1번 인덱스부터 4번 인덱스 배열까지 추출하라! let arr_splice = arr.splice(1,4); // 1번 인덱스부터 4개의 배열을 추출하라! (기존 배열을 변화시킴) console.log(`arr_slice : ${arr_slice}`); // 2,3,4 console.log(`arr_splice : ${arr_splice}`); // 2,3,4,5 console.log(`arr :.. 공감수 0 댓글수 0 2020. 11. 13.
substr vs substring (자바스크립트 문자열 자르기) See the Pen substr vs substring / slice vs splice by kimyangsun (@kimyangsun) on CodePen. // substr vs substring 문자열 자르기 let str= "ABCDEFGH"; let str_substring = str.substring(1,4); // 1번 인덱스부터 4번 인덱스까지 추출하라! let str_substr = str.substr(1,4); // 1번 인덱스부터 4개의 문자를 추출하라! console.log(`str_substring : ${str_substring}`); // BCD console.log(`str_substr : ${str_substr}`); // BCDE console.log(`str : ${s.. 공감수 0 댓글수 0 2020. 11. 13.
appendChild vs innerHTML (자바스크립트) See the Pen appendChild vs innerHTML by kimyangsun (@kimyangsun) on CodePen. const div = document.querySelector('div'); div.appendChild (newElement); 공감수 0 댓글수 0 2020. 11. 13.

문의안내

티스토리
로그인
고객센터

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