UI (227) 썸네일형 리스트형 [CSS & Javascript]var 값 설정해서 JS에서 변경하기 var(--_원하는 명칭) 자바스크립트에서 명칭을 선택하고 원하는 값으로 변경 가능. 예시1) 예시 2) [Javascript] 데이터의 저장 이 글은 책 '코어 자바스크립트'를 보고 재구성한 내용입니다. 자바스크립트 데이터 저장 사실 1. 변수를 하나를 만들면 메모리는 주소를 하나만들고 그곳에 이름(식별자:identifier)만들고 데이터 주소를 저장한다. 즉 두 번의 메모리 할당을 한다. 이유는 데이터(식별자의 정보값)이 가변적으로 변하기 때문이다. 변수에 원시값만 있을 경우 주소 ... 1001 1002 1003 ... 데이터 이름(식별자): aa 값:@8002 주소 .. 8001 8002 8003 ... 데이터 '바보' 변수에 객체 정보가 있을 경우 주소 ... 1001 1002 1003 ... 데이터 이름(식별자): aa 값:@8002,13001 ... (식별자 정보)주소 .. 8001 8002 8003 ... 데이터 이름 : fool.. [Javascript] 배열 안에서 렌덤으로 뽑기 A 배열.[Math.floor(Math.random() * A 배열.length)] [HTML 속성값 가져오기, form] event.target[name-input].value 이벤트가 일어나는 함수내에서 HTML 중 000 속성값을 가지고 있는 값 선택하기 event.target['name-input'].value [href]를 가져와 #id 만들기 const activatedTab = document.getAttribute("href"); const contentTab = document.querySelector(activatedTab); const activatedTab = document.getAttribute("href"); const contentTab = document.querySelector(activatedTab); [setAttribute] <-> removeAttribute setAttribute("hidden", true) removeAttribute("hidden") [overflow] popup에서 확인 버튼 고정으로 만들기 popup안에 형제로 h3 / div class="grid" / button 이 있다. div class="grid" => height + overflow-y height를 고정하고 scroll이 하면 div = "grid" 자신만 고정된 height를 가지고 스크롤이 된다! [immutability] const vs freeze( ) const => 이름이 가리키는 값을 다른것으로 못 바꾸게 하는 것 freeze ( ) => 값 자체를 못 바꾸게 하는 것 참조 https://www.youtube.com/watch?v=ol239ZUGwHg&list=PLuHgQVnccGMBxNK38TqfBWk-QpEI7UkY8&index=11 [immutability]불변값 primitive type : 더 이상 쪼갤 수 없는 단위로 생각해보기 Object : 우리가 object.assign을 통해서 복제를 하면 복제한(오리지날) 객체의 property 들만 복제를 하는 것. 따라서 그 복제한 property 중 value가 object인 경우, 그 object 값을 복제하는 것이 아니라 그 object의 위치만 복제. property 중 원시데이터(primitive) type은 기존 원시 타입처럼 저장. 반면, 배열과 같은 object typed은 reference로 저장. 얕은 복사 object.assign === const anyName = [ ...참조배열 ] / { ... 참조객체 } 가장 밖에 있는 [ ] / { } 는 복사가 되고 내용은 참조 값까지 복사를 하고.. [every/some]배열에서 조건으로 통해 값 반환받기 true 와 false 를 반환하는 method. 1차 배열에서만 사용가능함. 따라서 flat() method 사용해 2차 배열을 1차로 만들어준다. 배열.every( (기준) => 조건 ) 배열.every ( (td) => td.textContent ) => 모든 상황이 참이여야 참 값을 반환 배열.some ((기준) => 조건) 배열.some( (td) => td.textContent ) => 하나라도 참이면 참 값 반환 참조 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/every filter( (기준) => 조건 ); - 조건에 해당하는 사항이 있으면 걸러준다. - 1차 배열에서만 사용 가능하다.. [삼항함수]Conditional (ternary) operator 삼항함수는 1차원은 알겠는데, 추가적으로 조건이 달리는 헷갈려서 정리해 봄. // const myChoice = event.target.textContent ==='바위'? 'rock' :event.target.textContent === '가위'? 'scissor' : 'paper'? // [reduce] for문 같이 반복문 사용 가능한 제로초 영상을 참조한 내용입니다. ('자바스크립트 강좌 8-4. 평균 반응속도 구하기') https://www.youtube.com/watch?v=rfRmqII5PnY&list=PLcqDmjxt30RvEEN6eUCcSrrH-hKjCT4wt&index=71 reduce 이론 reduce( a, b, i ) => {return 원하는 결과값, (초기값)} a : 누적값 b : 처음값/다음값 i : indext 예시1. reduce((a, c) => (a+c), 0) 예시2. reduce((a, c, i) => { a[ i ] = c; return a }, { }) [...parent.childern]배열을 만들기 + any options Nodelist 배열 만들기 ClassName "current" 찾기 Bard한데도 물어봤는데 일단 indexof로 직접 찾을 수 있는 방법은 없다고 하네요. 하여 2가지 방식이 있음 1. 변수로 current를 만들기 console보면 11이 나왔는데, 이것은 배열 속 current가 속한 인덱스 번호를 뜻함. 2. findIndex 사용하기 a) const elements = document.querySelectorAll(".element"); // Replace with your array const currentIndex = elements.findIndex(element => element.classList.contains("current")); b) const classNames = eleme.. [scope & closure] var / let / const Call Stack - excute context가 call stack에 쌓인다. 1) 최초로 생기는 excute context는 전역에서 접근할 수 있는 excute context라하여 => Global excute context 2) a function위해서 만들어진 것 => function excute context 브라우져 변수값 확인 우선 순위 1. Block > 2. Local > (3. closure : parent function) 4. Script > 5. Global ※ closure는 함수 안에 함수를 뜻하면 그 중 부모 함수를 뜻한다. 이중 따라서 JavaScript === static Scope or Lexical Scope 참조 https://www.youtube.com/watc.. [REST API] REST standfor Representational State Transfer restful web service 장점 1. 간단하며 표준화 되어있다. such as 데이터 형식, 매번 요청 방식 선택/고민 2. 확장가능성과 비저장(무슨 데이터인지, 어떤 상태 확인을 위한 No tracking) 3. 퍼포먼스가 여전히 좋음 Collection table 구분값을 뺀 나머지 가져온 정보 ex) http://example.com/topics Element table 하나 하나의 값 ex) http://example.com/topics/1 Method Create(REST) = post(HTTP) Read = get(HTTP) Update = put(HTTP : all)/ Patch(HTTP : part).. [svg]가운데 정렬할때 타사의 SVG를 가져와서 사용하곤 한다. 특히 화살표를 사용할 때, transform : rotate를 사용하면 좌우 높이가 안 맞는다. 따라서 CSS에 2가지 값을 추가해야 한다. vertical-align: height: [var / let] 아래에 자세한 설명 있음 https://life-explorer.tistory.com/248 [argument] var / let / const Call Stack - excute context가 call stack에 쌓인다. 1) 최초로 생기는 excute context는 전역에서 접근할 수 있는 excute context라하여 => Global excute context 2) a function위해서 만들어진 것 => function excute context 브라우 life-explorer.tistory.com let은 block scope 블록으로 설정 된 곳에서만 사용 가능 예) if, while, for, function { } 즉 function b( ) { var a = 1; } conso.. [splice/slice] slice splice How to work slice(시작점, 끝나는 지점 "전"까지) splice(시작점, (자를)개수) 특징 원본 데이터가 변하지 않는다. [indexof] => true & false (찾고자 하는 대상).indexof((찾고자하는 정보) => 있으면 return 0 =>없으면 return -1 indexof 와 include 크게 indexof는 몇번째 자리까지 알려준다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf [agrument]변수 값으로 true/false 값 저장하기 bard가 코드를 줄여주면서 알려준 방법 저장 1. let isOpen = teamSelectBox.getAttribute("data-form") === "true"; 여기서 let의 isOpen의 값은 getAttribute의 값이 ===의 값과 동일하냐 따라서 let isOpent값이 결정된다. ==> true or false 다시 말해 teamSelectBox.getAttribute("data-form") 값이 현재 true이면 isOpen의 값도 true이다. 현재 teamSelectBox.getAttribute("data-form")=> true === "true" isOpen === true isOpen === false 이전 1 ··· 3 4 5 6 7 8 9 ··· 12 다음
