Computer Language/JavaScript
[JS]버그 typeof null 이 object?
다들 버그에 맞게 코드를 써버려서 아직까지 고쳐지 못하고 있는 자바스크립트 버그 typeof '' // string typeof '123' // string typeof 1 // number typeof true // boolean typeof {} // object typeof /test/index // object typeof function () {} // function typeof undefined // undefined 위에는 논리적으로 맞는 결과값인데 참고 : 자바스크립트의 원시타입은 number, String, Boolean, null, undefined, Symbol, Bigint 가 있음. 아래는 ? NaN은 뭐 number가 비어있는거라 치고, null은 심지어 원시타입인데 왜 obj..
JS의 String
https://chat.openai.com/share/3c93f263-b068-4c6b-bc75-3de7989b4bcc ChatGPT A conversational AI system that listens, learns, and challenges chat.openai.com 위에는 내가 자바스크립트의 String이 C언어처럼 참조형이 아니고 원시값인게 이해가 안가서 gpt에게 물어본 내용이 들어있는 대화록 링크. GPT내용 요약하자면 자바스크립트는 효율적이 사용을 위해 문자열을 원시값으로 만들어 빠른 엑세스가 가능하도록 했고, 원시값임에도 동일한 문자열이 여러개 있는 경우 자바스크립트 엔진에 자체적으로 한군데의 메모리값을 여러군데 할당해서 메모리 사용을 효율적으로 관리한다. 이때 C언어와 다르게 가비지..
[JS30] 모바일에서 오류 발견
터치로 빠르게 클릭하면 반투명 정사각형이 잠깐 보였다 사라진다. 찾아봐야겠다.. 참고: 카카오톡 자체 브라우저에서 발생함.
[JS30] 음소거 버튼 만들기
https://taehyunkim3.github.io/JS30/drum.html 왜 Bootstrap demo 제목이 안바뀌는지 모르겠다. 아마 github 혹은 티스토리 자체 캐쉬가 있나..? Bootstrap demo taehyunkim3.github.io 소리가 좀 거슬릴것 같아서 음소거 버튼을 제작해서 넣었다. 클릭할때마다 muted라는 변수가 false인 경우에만 sound.play함수를 실행한다. muted변수를 그냥 전역에다가 놔뒀는데, 뭔가 풍파에 노출시켜둔 뭔가 찝찝한 기분이라 찾아보니 클로저라는 뭔가 어려운데 필요해보이는 개념이 있었다. 요거는 조금만 더 공부해보고 적용볼 예정. https://codepen.io/arlekino/pen/DEBeRE Simple switch ... cod..
[JS30] this는 getAttribute 불가능.
https://taehyunkim3.github.io/JS30/drum.html 해당 프로젝트 링크 Bootstrap demo taehyunkim3.github.io 왜bootstarp demo는 바꿔도 안바뀔까. 하. 겨우 찾았다. 마우스로 해당 버튼을 클릭하면, 해당 버튼에 애니메이션이 구현되도록 해야했는데, 여기서 에니메이션은 key-code로 묶여있기에, 큰 수정 없이 기능을 추가하기 위해서는 마우스 클릭을 하면 해당 요소의 data-key 값을 불러올 수 있어야 한다. 보통 해당 요소의 속성을 불러올땐 getAttribute를 사용하는데 this는 getAttribute를 사용할 수 없다. ㅠㅠ 따라서 this 대신에 addeventlistener에서 인자를 넘겨줘야하는데, 문제는 addEven..
[JS30]마우스 오버 애니메이션 추가.
https://taehyunkim3.github.io/JS30/drum.html Bootstrap demo taehyunkim3.github.io 타이틀이 bootstrap demo인건 왜 안바뀔까 마우스 오버를 하면 키보드 동작과 동일한 비주얼을 보여주도록 수정하고, 마우스가 오버되어 있는 경우 transitionend를 듣는 eventlistener를 해당 키만 잠시 비활성화. A click S click2 D keyboard F metalic G moneybag H perc J coin K duck L button ; bell
[JS30]1. drum - css입체도형 추가해보기.
조금 더 수정을 해보았다. 입체를 너무 해보고 싶어서, 한번 적용해보았다. 참고한 사이트는 코드펜 프로젝트이며 하단에 첨부했다. https://taehyunkim3.github.io/JS30/index.html https://taehyunkim3.github.io/JS30/index.html taehyunkim3.github.io 기존 평면 입체효과 변경 후. 그림자 효과가 약간 부자연스럽긴 함. 키보드 버튼을 누르면 위로 올라오면서 색상 변경. 요거 보고 수정해서 적용해보았다. https://codepen.io/poppe1219/pen/oNdzaw Mobile menu, CSS only Having fun and learning some CSS3 animations and transitions. Ins..
[JS] innerHTML, innerText, textContent
자바스크립트에서 html을 조작하는 방법은 정말 여러가지가 있는데 그중 입력을 기준으로 세가지 방법을 비교해보겠습니다. textContent textContent는 CSS요소를 고려하지 않기 때문에 가장 빠르지만, 읽을때 이야기이고, 쓸때는 결국 다른 요소들의 높이, 위치에 영향이 있기 때문에 CSS를 다시 그리는 reflow가 들어가게 됩니다. Hello! World! document.getElementById('sample').textContent = 'HiThere!!'; //화면출력 //Hi!There!! textContent로 입력을 하면 해당 요소의 하위 요소가 모두 싹 지워지고 입력값은 모두 텍스트로만 인식되어 채워지게 됩니다. 따라서 하위 태그가 있는 경우 사용이 불가능합니다. 하지만 읽어..
JS의 객체타입과 깊은복사, 얕은복사
JS에서 number, string, boolean, null, undefined 를 제외한 모든 값은 object임. (원시타입과 객체타입 로 구분해서 칭함.) 원시타입은 값 변경이 불가능하고, 값을 수정하면 항상 새로운 값이 덮어씌워짐. 즉, string을 변경할수는 있지만, string[1]처럼 string의 일부는 불러올수는 있지만 일부만 수정은 불가능하다. 반면 객체타입은 포인터처럼 데이터가 저장된 메모리의 주소값을 가지고 있고, 데이터 일부 변경이 가능하다. 다만, 객체타입을 복사할때 얕은복사, 깊은복사를 주의해서 다루어야 한다. 주소값만 복사할 경우 원본 데이터가 수정되면 복사된 데이터도 수정이 됨. 앝은복사 깊은복사는 아래 링크에 잘 정리되어 있음 https://hanamon.kr/java..
event delegation, 이벤트 타켓 찾기
부모안에 있는 자식들에게 동일한 이벤트를 각각 등록해야할때, 부모에 한번에 등록 가능함! event 리스너 파악을 위해 위 예시처럼 사용 가능. breakpoint 걸고, watch탭에서 event.target.nodeName XX event.target.dataset.id queryselector 값 찾아오는 법
bubbling, passive, preventDefault
버튼을 클릭하면 bubbling up이 되어 middle, outer까지 클릭 이벤트가 실행됨. event.stopPropagation(); event.stopImmediatePropagation(); 이 두개는 되도록 사용하지 말것! 해당 버튼을 참고하고 있는 모든 리스너를 무시하게 됨. 우리가 모르는 코드가 있을 수 있으므로 매우 위험(프로젝트 규모가 커지면, 예상하지 못한 오류 발생 가능성 높음) how?? 해당되는 모든 부모에서 if(event.target !== event.currentTarget){ return; } 이 함수를 넣어줌. ===== event.preventDefault(); 모든 함수를 처리하고-> 체크박스 체크표시 active event listener 브라우저는 우리가 설정한..
$0.dispachEvent(new Event('click'));
$0.dispachEvent(new Event('click')); 콘솔창에서 인공적으로 이벤트를 만들수 있음. 또한 콘솔창에서 const listener = () => {console.log('clicked!'); 이렇게 콜백함수 선언 가능하고 그 이후에 $0.addEventlistener('click', listener); 이러면 클릭하면 반응하고 $0.removeEventlistener(); 이러면 이제 안함. 이렇게 콘솔창에서 자바스크립트를 선언하고 제어할 수 있음 출처 browser101 6.1강
[JS]array.join();, toString();, map();, from();, slice();, reverse();,sort();
array.ptororype.join(); > Array.prototype.toString(); 원본 유지 결과 string 반환 join(separator?: string): string; join은 array로 새로운 string을 생성, 반환해준다. seperator: 생략 ,로 구분해서 출력 "string입력" ", " " and " 해당 값으로 구분자 적용 '' or "" 붙여서 출력 여기서 array란, index값이 0부터 시작해서 순차적으로 올라가는 일반적인 array를 말하며, index값에 다른 값(string등)이 추가된 경우 array-like object로 분류되어, join.call을 사용한다.(참고 https://developer.mozilla.org/en-US/docs/Web..
[JS]array.find();, filter();, some();, every();, reduce();, reduceRight();
array.prototype.find(); 원본 유지 해당 array 요소 한개 반환 해당 조건을 만족하는 모든 요소의 반환이 필요할 경우 filter(); 사용. find(callbackFn) find(callbackFn, thisArg) const result = students.find(function(value, index){ return value.score === 90; }); 아래와 같이 간략화 가능함. const result2 = students.find((value) => value.score=== 90); console.log(result); 여기서 콜백함수는 boolean 타입을 반환해야 한다. 이 경우 value.score가 true가 될 경우, 해당 값을 반환하고 바로 종료된다. ..
[JS]array.splice();
array.splice(); 원본 변경 지워진 값 array로 반환 splice는 array에서 원하는 부분을 지우고, 새로운 값을 넣어준다. splice(start, deleteCount?, item1?, item2?, itemN?) start : array.length 0 해당 갯수만큼 지움. item1, item2, itemN : 해당 아이템을 그 자리에 넣어줌. return : 지워진 값이 array로 반환됨. (1개든, 0개든 무조건 array로 반환됨)
[JS] 연산, 반복문
//1. String concatenation console.log('my' + 'cat'); //mycat console.log('1' + 2); //12 console.log(`string literals: 1+2 = ${1 + 2}`); //string literals: 1+2 = 3 //2. Numberic operators console.log(1 + 1); //add 더하기 console.log(1 - 1); //substract 빼기 console.log(1 / 1); //divide 나누기 console.log(1 * 1); //multiply 곱하기 console.log(5 % 2); //remainder 나머지 console.log(2 ** 3); //exponentiation 2의 3..
[JS] variables.js
// 1. Use strict // added in ES 5 선언 안된 변수의 할당을 막아줌. // use this for Vanila Javascript. 순수 바닐라 자바스크립트 작성시 되도록 써줄것. 'use strict'; // 2. Variable, rw(read/write) // let (added in ES6) 읽고 쓰기 가능 let globalName = 'global name'; { let name = 'ellie'; console.log(name); name = 'hello'; console.log(name); console.log(globalName); } console.log(name); console.log(globalName); // var (don't ever use this!..
[JS] script defer
parsing : 한줄씩 실행 fetching : 서버에서 받아옴 자바스크립트 에서는 너무 유연해서 ECMA5에서 추가됨. 선언안된 값 할당 안되게 막음. 'use strict' 출처 https://youtu.be/tJieVCgGzhs
