본문 바로가기

javascript13

진수표시 자바스크립트는 특별한 변환 없이 16진수(0x), 8진수(0o), 2진수(0b)를 바로 사용할 수 있게 지원. 자바 16진수(0x), 8진수(0), 2진수(0b) => 8진수만 표기법이 살짝 다르네 parseInt(str, base)를 사용하면 str을 base진수로 바꿔줍니다(단, 2 ≤ base ≤ 36). : 결과값 정수 num.toString(base)는 숫자를 base진수로 바꾸고, 이를 문자열 형태로 반환합니다. : 결과값 문자열 2022. 8. 10.
특정 소수점에서 반올림하기 숫자 12.3456789 를 소수점 두번째 자리까지만 표시. 이때 반올림적용해보기 Math.round를 사용한 예제 ( 상단 이미지 참고 ) toFixed 적용 예제 주의사항 return 값이 문자열이라 + 기호를 붙여서 문자열을 숫자형으로 변환시켜주었음. 2022. 8. 10.
숫자 => 진법변환 let num = 255; num.toString ( 2 ) ; // 255 의 2진법으로 변환한 값 출력 255..toString(2); // 직접 숫자에 toString( ) 적용법 : 점 두개 또는 (255).toString( 2 ) ; // 괄호 사용해서 toString 적용 toString( 2진법 또는 8진법 또는 16진법) 이렇게 숫자 기재시, 해당 진법으로 변환됨. 2022. 8. 10.
함수 선언식 vs 함수 표현식 함수 선언식 function 함수명 ( ) { } 함수 표현식 var 함수명 = function ( ) { } 차이점 함수 선언식은 호이스팅(브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려지는 것.)에 영향을 받음. 함수 표현식은 호이스팅에 영향 받지 않음. 팁 : 함수와 변수는 되도록 코드 상단에 선언하여 호이스팅으로 인한 스코프 꼬임 현상을 방지하자. 2022. 1. 20.
swiper 2개 연결해보기 main 스와이퍼, sub 스와이퍼 두개를 연결해서 한쪽의 슬라이드가 이동시, 다른 스와이퍼도 해당 페이지가 이동되게 구현하고 싶었다. 스와이퍼 구현은 swiper 홈페이지에서 확인가능하므로 여기서 생각하고, 바로 본론으로 들어가자. 두개의 스와이퍼 연결은 controller를 이용해 가능하다. 마지막줄이 서로 다른 두 스와이퍼를 등록해 주는 것이다. const mainSwiper = new Swiper(".main-swiper", { slidesPerView:1, slidesPerGroup:1, width: 330, spaceBetween:35, pagination: { el: ".swiper-pagination", clickable: true, }, }); const subSwiper = new Sw.. 2021. 12. 30.
monitorEvents 로 특정 태그에 발생하는 이벤트 추적하기 input 태그에서 발생되는 이벤트를 추적하고 싶었다. 위 그림의 input 버튼 발생시, 발생하는 이벤트를 추적하기 위해서 할일. F12 키를 눌러 개발자 도구를 연다. 콘솔창을 연다. 내가 추적하고자 하는 tag의 id 를 기억한다. 콘솔창에 monitorEvents( document.querySelector('#id 입력')); 해당 태그를 클릭하면 발생되는 이벤트가 콘솔창에 뜬다. 간단히 콘솔창에서 태그에서 발생되는 이벤트를 추적할수 있다. 2021. 12. 30.
Array.from 리액트의 스크롤 시, 무한 페이지 생성을 보다가 Array.from을 보게되었다. 이거 왜 쓰지? 싶었는데 배열 생성과 초기화가 간편하게 가능~해서. => {length: 5} 를 배열처럼 취급하는 이유는 js에서는 배열도 object라서. 배열의 __proto__를 살펴보면 나옴. 2021. 12. 17.
2d 차트 그리기 (with javascript) 2D 차트를 javascript를 이용하여 그려보자. HTML , js 파일에 다음 내용을 기재하면 맨 아래 결과물을 얻을수 있다. var ctx = document.getElementById('myChart').getContext('2d'); var chart = new Chart(ctx, { //차트설정 type: 'line', //차트데이터 data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: '주간 판매량', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: [5, 10, 5, 2,.. 2021. 7. 25.
modal (모달창 만들기) 버튼을 클릭하면 모달창이 나타나고 , 모달창 내 버튼을 클릭하면 닫힙니다. See the Pen modal by ziziziczic (@ziziziczic) on CodePen. 2021. 1. 27.
to do list See the Pen to do list by ziziziczic (@ziziziczic) on CodePen. 해당 내용은 다음 동영상을 참고하여 작성되었습니다. 출처 : https://youtu.be/b8sUhU_eq3g 2021. 1. 3.

티스토리툴바