Java Script (7) 썸네일형 리스트형 [JS] 글자 수에 따른 byte수 체크하기 byte수를 왜 체크해😗? 회사에서 프로젝트를 진행하면서 글자 수 관련 이슈가 나왓다 처음에는 글자수를 length() 함수를 사용해 길이만 체크하면 된다고 생각했지만, DB에 해당 부분을 넣을 때 byte를 정해 놓는데, 영어 와 다르게 한글은 encoding 방법에 따라 byte수가 변경이 된다 euc-kr 2byte utf-8 3byte 이런 byte문제 때문에 그냥 넣었더가는 db에서 오류가 나는 이슈가 존재했다. Code 코드로 일단 확인해보자 UTF-8 방식 byte 구하는 코드 (3byte) // Function const getByteLengthOfString = function(s,b,i,c){ for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?3:c>>7?2:1); .. JS. querySelectorAll에 대해 알아보자 (답은 이름에 있다.) 앞서서 querySelector에 대해서 포스팅했었다. 2021.09.12 - [Java Script/Vanila JavaScript] - Vanila Js 태그를 선택하는 함수 querySelector! Vanila Js 태그를 선택하는 함수 querySelector! MDN사이트를 참고해서 작성하였습니다. https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector Document.querySelector() - Web API | MDN Document.querySelector()는 제공한 선택자 또는 선택.. sccoding.tistory.com querySelector는 태그의 요소를 선택하는 함수인데 querySelectorAll은 .. JS 가장 많이 사용하는 함수! console.log 와 alert! java script에서 가장 많이 사용하는 함수 중 하나인 console.log와 alert! 이 둘은 JAVA의 System.out.println이나 PYTHON의 print와 같은 역활을 한다고 생각하면 좋습니다. console.log는 이렇게 안에 있는 내용들을 프린트 해줍니다. 그리고 object들도 출력해줍니다. 그래서 보통 에러가 발생했는데 어디서 발생하는지 모르겠을때, object등을 확인 할때 많이 사용합니다. alert는 console.log와 비슷하지만, 저렇게 브라우저위에 경고창으로 띄어줍니다. 그렇기 때문에 브라우저에 데이터가 들어있는지 바로바로 확인하고 싶을때 사용합니다. console.log는 브라우저가 아니라 개발자 모드에 들어가 console창에서 확인해야 하거든요! 이런 .. Vanila Js 태그를 선택하는 함수 querySelector! MDN사이트를 참고해서 작성하였습니다. https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector Document.querySelector() - Web API | MDN Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다. developer.mozilla.org Document.querySelector() Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다. 라고 정의하고 있다. 그냥 .. JAVA SCRIPT 1 DAY 드럼 키트 만들기! 이 작은 프로젝트들은 자바스크립트 30이라는 사이트에서 자료를 얻을 수 있고 그대로 실행할 수 있습니다! https://javascript30.com/ JavaScript 30 Build 30 things with vanilla JS in 30 days with 30 tutorials javascript30.com function playSound(e){ const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); if(!audio) return; audio.currentTime=0; audio.play(); key.. Java Script 30 이번에 프로젝트를 진해하면서 jquery를 많이 활용해서 진행했다. jquery는 기존 js에 비해서 굉장히 편리하긴 했지만, (코딩양 가독성 측면에서!) 성능이 느려지는 문제와 ,, 많은 유튜브에서 java script자체를 잘하는 것이 중요하다고 이야기 했기 때문에, 자바스크립트를 서칭 해보니 javascript 30이라는 자바스크립트 강의가 있어서 참고하기로 했다. javascript30은 작은 프로젝트를 진행하면서 자바스크립트의 전반적인 기능들을 파악하는 것 같다. 흥미로운 프로젝트들이 많은데 ! 무료니까 같이같이 공부하면 좋겠다. https://javascript30.com/ Java Script 1. var, let, const에 대해서 알아보자! 내가 java script를 공부하면서 궁금한 점을 올리겠습니다! JavaScript에서 변수 선언 방식인 var, let, const의 차이점에 대해 알아보자! 1.변수 선언 방식 우선, var 변수를 선언해 보자 var car = 'Ferari' console.log(car) //Ferari var car = 'Bugati' console.log(car) // Bugati 같은 이름의 변수를 선언했음에도, 에러가 나오지 않고 다른 값이 출력된다. 이게 뭐가 문제야?라고 생각할 수도 있다. 나도 그랬다. 오히려 더 좋다고 생각했다. 하지만 코드량이 많아지고 사용하는 변수가 많아진다고 생각하면, 저 위에서 사용한 var car 를 저 아래에서 다시 선언하게 된다면,, 끔찍하다... 이런 문제를 보완하기 .. 이전 1 다음
