티스토리

춤추는 당근

검색하기

블로그 홈

춤추는 당근

dancingcarrot.tistory.com/m

dancingcarrot 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[JavaScript 피셔 예이츠 셔플 알고리즘 (Fisher-Yates Shuffle)] 1. 피셔-에이츠 셔플 알고리즘 개요 피셔-에이츠 셔플(Fisher-Yates shuffle) 알고리즘은 배열의 요소를 무작위로 섞는 알고리즘 중 하나입니다. 랜덤 함수의 사용을 최소화하면서 요소를 섞는 효과적인 방법 중 하나로 알려져 있습니다. 2. 피셔-에이츠 셔플 알고리즘 동작 방식 1. 배열의 마지막 요소부터 시작하여 첫 번째 요소까지 반복합니다. 2. 현재 위치(i)와 배열의 무작위 위치(j)를 선택합니다. (0 공감수 0 댓글수 0 2023. 4. 27.
[JavaScript 구조 분해 할당(Destructuring)] 1. 구조 분해 할당이란? 구조 분해 할당은 객체나 배열에서 값을 추출하여 변수에 할당하는 것을 말한다. 이를 통해 간단하게 객체나 배열에서 필요한 값만 추출할 수 있다. 어떤 객체의 속성과 그 속성을 변수에 담는 변수명이 같을 때 사용할 수 있다. 2. 구조 분해 할당 예시 // 배열에서 구조 분해 할당 예시 const arr = [1, 2, 3, 4, 5]; const one = arr[0]; const two = arr[1]; const three = arr[2]; const four = arr[3]; const five = arr[4]; //구조 분해 할당 했을 때 const [one, two, three, four, five] = arr; // DOM API에서 구조 분해 할당을 사용하지 않은 .. 공감수 0 댓글수 0 2023. 4. 26.
[JavaScript 유사 배열(Array-like Object)] 1. 유사 배열이란? 자바스크립트에서 유사 배열(Array-like Object)이란 배열과 유사한 구조를 갖지만, 배열과는 다른 특징을 갖는 객체를 말한다. 유사 배열은 일반적으로 length 프로퍼티를 가지며, 인덱스로 접근이 가능하지만, 배열의 메서드 및 프로퍼티를 가지고 있지 않다. 2. 유사 배열의 예시 유사 배열의 대표적인 예시는 arguments 객체와 NodeList 객체이다. arguments 객체는 함수 내부에서 전달된 인자를 배열 형태로 다룰 수 있게 해주는 객체이며, NodeList 객체는 문서 객체 모델(DOM)에서 요소를 참조할 때 반환되는 객체이다. function sum(){ console.log(arguments.length); // 7 console.log(argument.. 공감수 0 댓글수 0 2023. 4. 25.
자바스크립트 If문 중첩 제거하기 (JAVASCRIPT) // if문 중첩을 제거하는 방법 1. if문 다음에 나오는 공통된 절차를 각 분기점 내부에 넣는다. 2. 분기점에서 짧은 절차부터 실행하게 if문을 작성한다. 3. 짧은 절차가 끝나면 return(함수 내부의 경우)이나 break(for문 내부의 경우)로 중단한다 4. else를 제거한다(이때 중첩 하나가 제거된다.) 5. 다음 중첩된 분기점이 나오면 1~4번의 과정을 반복한다. function test(){ let result =''; if(a){ if(!b){ result = 'c'; } } else { result = 'a'; } result +='b'; return result; } 1. if문 다음에 나오는 공통된 절차를 각 분기점 내부에 넣는다. function test(){ let resu.. 공감수 0 댓글수 0 2023. 4. 18.
자바스크립트 /value, textContent , innerHTML, innerText 사용 innerHTML 1. Element속성으로 해당 Element의 HTML, XML을 읽어오거나, 설정할 수 있다. ============================ innerText 1. Element내에서 사용자에게 보여지는 텍스트 값을 읽어옴 2. 연속된 공백은 무시하고 하나의 공백만 처리 =========================== textContent 1. textContent는 'Node'의 속성 2. 해상 노드가 가지고 있는 텍스트 값을 그대로 읽는다. 3. 연속된 공백을 그대로 표현 ============================ // 무언가를 입력하는 것들은 대부분 value를 사용한다. input / value select / value textarea / value // t.. 공감수 0 댓글수 0 2023. 4. 18.
자바스크립트 배열 (JAVASCRIPT ARRAY) const color = ['red', 'blue', 'orange', 'yellow', 'green']; console.log(color[0]) // 배열의 0번째 인덱스를 콘솔에 띄워줌 // red color.length; // 배열의 요소 개수 알려줌 // 5 color[5] = 'apple'; // color = ['red', 'blue', 'orange', yellow', 'green', 'apple'] color.shift(); // 배열의 맨 처음 값을 제거해줌 //color = [blue', 'orange', yellow', 'green', 'apple'] color.unshift('red'); // 배열의 맨 앞에 'red'를 넣어줌 //color = ['red', 'blue', 'ora.. 공감수 0 댓글수 0 2023. 4. 18.
자바스크립트 형 변환 (JAVASCRIPT ) 정수 또는 실수형 숫자로 변환할 때 Number('123'); -> 123 Number('123.4'); ->123.4 정수형태로 변환할 때 parseInt('1.23'); ->1 소수형태로 바꿀 때 parseFloat('12.3'); ->12.3 숫자를 문자열로 바꿀 때 String(123); ->'123' 숫자와 문자를 이어 문자열로 만들 때 12 + "3"; -> '123' prompt() : 문자열을 입력할 수 있는 팝업이 뜬다. parseInt(prompt()) 입력한 문자열을 숫자형으로 바꿔줌 이렇게 예시를 드는게 맞는지 모르겠네요 피드백 주시면 감사히 받겠습니다! 공감수 0 댓글수 0 2023. 4. 18.
Modal Project modal project를 연습해봤다. 공부한 내용을 주석으로 작성했다. OPEN MODAL 클릭시 페이지 index.html main.js ✏️ Course created by John Smilga. Check out his YouTube channel: / codingaddict https://github.com/dancingcarrot/miniproject/tree/main/Modal 공감수 0 댓글수 0 2023. 3. 30.
Color Flipper CLICK ME 버튼을 누르면 배경색이 바뀌는 프로젝트!! 공부하면서 주석 달아봤다. color flipper simple //simple 클릭시 index.html로 이동한다. hex //hex 클릭시 hex.html로 이동한다. background color : #f1f5f8 //배경색 설정 click me //click me 버튼 생성 index.html const colors = ["green", "red", "rgba(133,122,200)", "#f15025"]; //colors 변수에 색깔 배열 넣기 const btn = document.getElementById("btn"); // id "btn"에 접근하는 함수 const color = document.querySelector(".colo.. 공감수 0 댓글수 0 2023. 3. 29.

문의안내

티스토리
로그인
고객센터

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