Javascript 썸네일형 리스트형 Javascript 스크롤 위치 조정 함수 모달, 팝업 페이지 같이 기존 화면 위에 덮어 씌우는 형태의 페이지 같은 경우 window 명령어로는 스크롤 이동 함수가 제대로 적용되지 않는 경우가 있어, 찾아본 결과 엘리먼트에 스크롤 함수를 적용시키면 작동되는 것을 확인해서 글을 작성한다. 하이브리드 앱에서 기존에 사용하던 스크롤 함수가 제대로 작동하지 않아, 모달이나 팝업등에 적용한 스크롤 위치 조정 함수. var targetElement = document.querySelector('#targetElementId'); targetElement.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"}); behavior transition animation. auto or smo.. 더보기 Javascript(자바스크립트) document에서 바로 form태그 돔 컨트롤 하는 방법 document.formName으로 작성해주면 form태그 돔에 바로 컨트롤이 가능하다. 이러한 form태그가 있다고 가정했을 때 document.main_form으로는 접근이 가능하지만 document.sub_form으로는 접근이 불가능하다. 다만 document.forms.sub_form 이러한 방식으로는 접근이 가능하다. 그리고 이러한 모든 방식은 html이 모두 로딩된 이후에 정상적으로 기능한다. 만약 위와같은 방식으로 했음에도 dom에 접근이 안된다면 해당 javascript코드를 html 하단부에 옮기거나 jquery의 ready 함수를 사용하거나 javascript의 window.onload를 이용해야한다. 더보기 자바스크립트(Javascript) 호이스팅(hoisting)이란? 자바스크립트가 초기 생성 및 실행 단계에서 어떻게 동작하는지에 대해서 호이스팅이 중요한 개념인것 같다. 여러 강의도 듣고 유튜브 영상도 보며 보고 듣기는 했지만, 간략하게 변수와 함수 선언을 스크립트 실행 시 최 상단으로 옮긴다는 개념으로 알고 있었는데, 모질라 페이지에 들어가보니 이게 잘못알고있었다는 것을 알 수 있었다. 먼저 변수의 경우는 선언만을 끌어올린다. 이게 무슨 말인가 하면 변수를 단순 선언만 해두는 경우도 있고 초기화만 해두는 경우도 있으며 자바스크립트는 변수를 선언하지 않고 초기화만 해도 오류라고 판단하지 않는다. word = 3; 단순히 이렇게만 작성해도 오류를 뱉어내지 않는다는 말이다. var, let, const와 같은 예약어가 없어도 사용이 가능하다는 의미. 이와 연결시켜서 호이스.. 더보기 JavaScript ==, === 차이점 자바스크립트에서는 특이하게도 비교연산자가 == 이외에도 ===도 존재한다. 다른 비교 연산자들, 예를 들어 !=도 마찬가지로 !==의 방식으로 사용되어지는데, 이는 자바스크립트의 특이한 비교 방식때문에 생겨난 것 같다. 자바스크립트는 == 을 사용할 경우 그 값만은 비교한다. 이게 무슨 말이냐면, string과 number과 같은 타입의 구분을 두지 않는다는 것이다. if(1 == "1") { alert('true'); } else { alert('false'); 위의 코드를 자바스크립트로 실행해본다면 true로 작동한다. 즉 자바스크립트에서 ==을 사용한다면 문자열 1과 숫자 1을 같은 값으로 비교할 수 있다는 것. 이와는 다르게 ===같은 경우는 타입의 차이점까지 비교해서 판단한다. 아래의 코드를 자.. 더보기 자바스크립트 오브젝트 반복문으로 다루기 JavaScript를 요즘에 공부를 하면서 Object를 다루는 것의 중요성을 정말 많이 느끼고 있는데, 사실 반복문 같은 경우는 거의 배열과 연관되어서 사용하기만 해왔던 것 같다. 주로 쓰는 방식이 오브젝트에 배열을 넣고 그 배열을 반복문으로 돌려가면서 함수를 돌리는 그런 방식들. 방금전에 인터넷 강의를 들으며 해보았는데, for...in을 사용하면 반복문의 방식으로 오브젝트의 키값을 순회하면서 사용이 가능하다. 쓰는 와중에 forEach나 기본 for문으로는 사용이 불가능한가 싶어서 사용을 해봤는데 역시나 불가능하다. 일단 Object이기 때문에 length로 접근이 불가능해서 for문으로는 한계가 있으며, forEach문은 애초에 배열을 사용한다는 것을 가정하고 쓰이는 것이기 때문이다. 어찌됐건 두.. 더보기 Javascript 내장 함수 replace() 어떤 언어에서도 볼 수 있는 replace함수는 문자열을 다루는데 아주 유용하게 쓰이는데, 기본적인 사용 방법은 아래와 같다. replace('특정 문자', '대체 문자'); 요점은 특정 문자열을 대체 문자열로 바꿔준다는 것. 코드로 작성해본다면. let str = 'loremipsum'; str = str.replace('lorem', 'alert'); console.log(str); 결과는 alertipsum이 나온다. 여러가지로 다뤄보고 있는데, replace함수의 특정 문자와 대체 문자들은 문자열이야만 된다고 판단하고 여태 사용하고 있었는데, 배열도 적용이 되는걸 확인했다. var strArr = ['lorem']; var replaceArr = ['now']; str = str.replace(s.. 더보기 전화번호에 하이픈 추가(정규식) DB에 하이픈(-) 없이 저장된 전화 번호를 자바스크립트에 나타날 때 하이픈을 포함한 형식으로 보여줄 때 쓰는 방법. DB에 저장된 전화번호 : 01012345678 보여주고 싶은 형식 : 010-1234-5678 num : 01012345678 num.replace(/(^02.{0}|^01.{1}|[0-9]{3})([0-9]+)([0-9]{4})/,"$1-$2-$3") 결과값 : 010-1234-5678 더보기 이전 1 다음
