JavaScript
-
[JavaScript] 함수를 조작하는 함수, 고차함수JavaScript 2022. 10. 21. 23:24
JavaScript 책을 보다가 인상깊은 내용이 있어 기록으로 남긴다. 1. 함수를 변수로 선언 위 처럼 입력한 파라미터가 비교값보다 크냐는 함수를 활용하여 chkGraterThan10을 사용해보면 2. 함수를 파라미터로 받는 함수 Math.min을 func의 파라미터로 넣었고, Math.min의 파라미터를 옆에 붙여준 형태 let minV = func(Math.min)(3, 2, 1) 와 같이 선언하여 출력해 보았다. 단순하게 Math.min만 사용하고자 한다면 불필요한 것 같다고 생각되지만.. 아마도 좀 더 복잡한 과정이 반복해서 필요할 경우에 유용할 것으로 보인다. 3. 분기처리도 가능한 것으로 보인다. 아직은 적절한 사용처가 떠오르지 않아 교재를 참고하였으나 1, 2, 3 방식을 적절히 응용할 수..
-
[JavaScript] Object에 값 넣기, 값 제거, 분해, 복사JavaScript 2022. 10. 20. 13:13
1. object 분해 이와 같은 object가 있다고 가정한다. obj내부의 a와 b를 각각 따로 꺼내서 새로 쓰려면 이와같이 선언하여 꺼내쓸 수 있다. 따로 꺼냈다 하더라도 기존의 obj는 영향을 받지 않는다. 2. object 복제 object는 위처럼 여러방법으로 복사할 수 있다. 3. object에 값 추가 제거 값추가 이 과정을 통해, 한 object의 값 조작에 영향을 받지 않으면서 기존 값을 복사하고자 하는 경우 {...object이름} 방식으로 복사할 수 있다는 것을 알게되었다.
-
[JavaScript] String에 변수값 쉽게 넣기 === 백틱 ! (` `)JavaScript 2022. 9. 30. 22:54
종종 string에 변수값을 넣어 새로운 string을 만들어 주어야 할 떄가 있다. 심플하게는 기존 string + 변수값으로 만들어 주면 된다. 하지만, 문장 사이사이에 변수값을 넣어야 할 경우.. 굉장히 번거로워진다. 얻을 수 있는 결과는 같지만 좀 더 편한방식을 소개하고자 한다. 백틱이란 방법으로, 키보드의 ~ 버튼으로 문장을 감싸주는 방식이다. 예시 단 한번 감싸주는 것만으로 많은 + 들과 사이사이 "를 구분지어야 하는 수고를 덜 수 있다.
-
[JavaScript] 동적으로 새로 붙인 Element 이벤트 붙이기 (addEventListener)JavaScript 2022. 9. 30. 22:22
화면작업을 하다보면 최초 화면호출 이후, 동적으로 추가로 붙인 Element에도 이벤트를 동작시킬 필요가 있는데, 호출당시에 선언했던 이벤트가 새로 만들어진 Element를 대상으로 인식하지 않는 현상을 겪을 수 있다. 예시 결과: 당초예상대로라면, 기존버튼을 클릭하면 새버튼xx가 새로 생성되고 새로운 버튼을 클릭하면 console.log()가 동작해야한다. 하지만, 이 상태로는 기존버튼만 동작할 뿐, 새버튼은 동작하지 않는다. 이유는 버튼 Element가 새로 만들어지기 전, 아직 존재하지 않는 버튼만 이벤트가 붙어있는 상태로 인해 발생하는 현상이다. 즉, Element 생성이후 이벤트가 붙는다면 javascript가 해당 Element의 이벤트를 인식하는 것을 확인할 수 있다.. 코드수정 > 수정 후..
-
[JavaScript] export importJavaScript 2022. 9. 26. 23:01
이미 만들어둔 function이나 object등을 다른 파일에서 사용할 때 export와 import를 사용할 수 있다. export 예시 import 예시 *** import 와 export기능을 사용하려면 type="module"선언이 필요하다. 사용 및 결과 import시 CORS policy에러가 날 경우.. CORS policy에러 해결 참조 https://velog.io/@takeknowledge/%EB%A1%9C%EC%BB%AC%EC%97%90%EC%84%9C-CORS-policy-%EA%B4%80%EB%A0%A8-%EC%97%90%EB%9F%AC%EA%B0%80-%EB%B0%9C%EC%83%9D%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-3gk4gyhreu
-
[JavaScript] dataset으로 값 저장하기 ("data-xxx")JavaScript 2022. 9. 23. 08:13
간혹 작업하다보면, Object에 담긴 값들을 체크박스나 라디오 같은 곳에 저장해두고 꺼내쓸 일이 있다. 이때 dataset을 이용하면 편리하게 원하는 값들을 저장해두고 꺼내쓸 수 있다. 가령 위와 같은 html과 object들이 있다고 가정하고, 각 체크박스들에 이름과 스케일, 전화번호등등을 박아놓고 싶다면 아래와 같이 하면 될 것이다. 결과 각 input 태그에 data-xxx 형태로 Object의 모든 값들을 저장해보았다. 현재 input 안의 data-xxx를 꺼내쓸땐 inputTag.dataset.xxx (Element.dataset.xxx) 로 원하는 값을 꺼내쓸 수 있다. ***새롭게 알게된 사실 하나는 document.getElementsByTagName으로 얻어온 HTMLCollectio..
-
[JavaScript] 이미지확대축소JavaScript 2022. 9. 18. 15:54
javascript를 이용하여 이미지확대 축소를 할 수 있다. 코드예시 let tg = document.getElementsByClassName("tg")[0]; let imgPath = document.getElementsByClassName("tg")[0].getAttribute("data-image"); let photo = document.getElementsByClassName("photo")[0]; photo.style.backgroundImage = `url(${imgPath})`; //이미지 확대 (마우스 갖다댐) tg.addEventListener("mouseover", function(){ photo.style.transform = `scale(2)`; //2배확대 }) //이미지 축소..
-
[Javascript] Object활용해서 if 조건문 정리 (refactoring if conditions)JavaScript 2022. 9. 4. 22:04
아래와 같은 if문이 있습니다. 해당 if문은 이렇게도 작성할 수 있습니다. (if 조건을 담은 객체를 만들어 활용) const messages = { received: "Restaurant started working on your order.", prepared: "Driver is picking up your food.", en_route: "Driver is driving your way.", arrived: "Enjoy your meal." }; const getPushMessage2 = status => { return messages[status] ?? "Unknown status" } 이를 사용해 object가 해당 key값을 가지고 있는지도 확인하여 분기처리를 할 수도 있다.