본문 바로가기

자바스크립트49

Eclipse - 이클립스에 JavaScript, Jquery 자동완성 기능 추가하기 / tern 첨부 안녕하세요. 고코더 입니다. 이클립스에 가장 아쉬운 점은 jquery 자바스크립트 자동완성 기능이 취약하다는 것입니다. 하지만 추가 확장 프로그램을 통해 어느 정도 자동완성을 구현할 수 있습니다. ● 1. 아래 URL에서 최신 버전 tern.repository를 다운로드합니다. 현재 버전은 1.2.1인데 2016년 버전이네요 ㅠ https://github.com/angelozerr/tern.java/releases ● 2. 다운로드하였다면 이제 이클립스에 설치해보겠습니다. "install new software"에서 아래 화면처럼 ADD를 클릭하고 LOCAL 버튼을 클릭합니다. ● 3.3. 아까 다운로드하여 압축을 푼 파일에서 폴더 선택을 합니다. ● 4.4. 모든 항목을 체크하고 next를 클릭해 설치.. 2022. 2. 3.
JavaScript - maxlength가 되지 않을 때 안녕하세요. 고코더 입니다. HTML에서 가끔 maxlength가 안 먹히는 문제가 발견되고는 합니다. 특히 모바일에서는 더 설정이 되지 않는 이상한 문제가 있습니다. 그래서 거의 정석처럼 사용하는 소스코드가 있습니다. ● 1. 바로 아래 함수를 사용하는 방법입니다. function maxLengthCheck(object) { if (object.value.length > object.max.length) object.value = object.value.slice(0, object.max.length) } ● 2. 해당 함수를 원하는 input에 붙여 넣으면 완료됩니다. * 참조 자료 https://stackoverflow.com/questions/48840583/maxlength-on-a-number.. 2021. 11. 24.
JavaScript - 변수의 타입을 알아보는 방법 / typeof typeof 변수의 데이터 타입을 알아보다 안녕하세요. 고코더 입니다. 자바스크립트에서 변수의 데이터 타입을 알아볼 수 있는 방법을 알아보겠습니다. 사용법 ● 1. typeof는 변수가 어떤 타입인지 알려주는 역할을 합니다. 예제를 한번 확인해보겠습니다. let strVal = "문자열"; let numVal = 123; let objVal = [1,2,3]; console.log(typeof strVal); console.log(typeof numVal); console.log(typeof objVal); 결과화면 ● 1. 변수의 데이터 타입을 확인하여 로직을 작성할때 유용한 연산자 입니다. 2021. 11. 14.
IntelliJ - 자바스크립트 콜론(:) 간격 정렬 하는 방법 인텔리제이에서 자바스크립트 변수 콜론 간격 정렬 안녕하세요. 고코더 입니다. 자바스크립트를 개발하다 보면 콜론 간격으로 변수를 넣는 방식으로 코딩을 하는 경우가 많습니다. 이때 변수명에 따라 빈 간격이 달라지게 됩니다. 그래서 일부 개발자들은 스페이스 노가다를 활용해 간격을 맞추기도 합니다. ● 1. 예시 화면을 보면 이해가 충분히 되실 거 같습니다. 이런 식으로 간격이 다르면 보기가 많이 불편합니다. ● 2. 인텔리제이에서 settings로 이동합니다. 그리고 Editor -> JavaScript로 이동 후에 "Wrapping and Braces"로 이동합니다. ● 3. 그다음 Objects에서 aling의 셀렉트 박스를 "On colon"으로 설정합니다. ● 4. 그 다음 소스에서 Ctrl + Alt.. 2021. 11. 8.
JavaScript - getElementbyId ()란? 사용법 안녕하세요. 고코더 입니다. 자바스크립트보다 jQuery에 익숙한 분들은 슬슬 getElementbyId의 철자를 잊어먹기 시작했을 것입니다. 저 역시 마찬가지입니다. 하지만 자바스크립트 기본기를 탄탄히 하려면 바닐라 JS 위주로 다시 한번 리마인드 해보시기 바랍니다. getElementbyId ● 1. 이 함수는 element의 ID를 이용해 요소를 찾는 함수입니다. 일치하는 dom을 찾았다면 엘리먼트를 반환합니다. 만약 아래와 같은 id를 가진 div를 이 함수를 이용해 찾아보겠습니다. ● 2. document.getElementById()를 선언하고 그 안에 ID값을 넣어서 변수로 담으면 완료입니다. let gc = document.getElementById("GoCoder"); ● 3. 익숙한 방.. 2021. 11. 3.
JavaScript - 자바스크립트로 대문자, 소문자로 변경하기 안녕하세요. 고코더 입니다. 자바스크립트에서는 알파벳을 대문자, 소문자로 변환하는 기능이 있습니다. 이것에 대해 간단하게 알아보겠습니다. toUpperCase(), 대문자로 변경하기 문자열을 대문자로 변경하는 방법입니다. 단순하게 변수 뒤에 .toUpperCase()를 사용하면 손쉽게 변경이 가능합니다. let str = 'GoCoder'; str = str.toUpperCase(); console.log(str); toLocaleLowerCase(), 소문자로 변경하기 문자열을 소문자로 변경하는 방법입니다. 단순하게 변수 뒤에 .toLocaleLowerCase()를 사용하면 손쉽게 변경이 가능합니다. let str = 'GoCoder'; str = str.toLocaleLowerCase(); conso.. 2021. 11. 3.
JavaScript - 'use strict'를 해제할 수 있을까? 안녕하세요. 고코더 입니다. 'use strict' 엄격 모드에 대해 다루었습니다. 재밌는 질문이 들어왔습니다. "엄격 모드를 해제할 수 있을까요?"라는 질문입니다. 그럼 엄격모드를 해제하는 방법에 대해 알아보겠습니다.? 엄격모드를 선언하여 실행한다면 반대로 이를 해제할 수 있지 않을까는 정상적인 의문점입니다. 그럼 어떤 방법이 있을까요? 엄격 모드에 반대되는 말로 선언해봤자 사실 아무것도 실행되지 않습니다. 'use sloppy' // ? 이런거 없습니다. 그럼 엄격을 멈추거나 비활성화하는 코드를 실행시키면? 네 역시 이런 문법은 없습니다. 'no strict' // ? 없습니다. 'disabled strict' // ? 없습니다. 엄격모드 실행이 실행되면 엄격 모드 사용법에서 가장 첫 번째 라인에 '.. 2021. 11. 2.
JavaScript - 숫자만 입력받는 정규식 체크 안녕하세요. 고코더 입니다. 이번에는 자바스크립트 정규식으로 숫자만 입력 가능하도록 코딩을 해보겠습니다. 참 많이 사용하는 코드이지만 할 때마다 잊어버리는 마법의 소스입니다. ● 1. 정규식의 뜻은 0~9까지 숫자만 입력만 가능하다 입니다. 이를 통해 test로 체크를 진행합니다. let str = "1234ABC" let check = /^[0-9]+$/; if (!check.test(str)) { console.log("숫자만 입력 가능합니다."); } ● 2. 결과 화면입니다. ABC 라는 글자가 있기 때문에 해당 체크를 통해 걸러낼 수 있습니다. 맨날 사용하고 까먹는 정규식 2021. 11. 1.
JavaScript - 정규식으로 숫자와 영문자만 입력하기 안녕하세요. 고코더 입니다. 자바스크립트로 가장 많이 사용하는 유효성 체크가 있다면 바로 ID를 입력받을 때 사용하는 "숫자와 영문자만 입력" 하는 체크입니다. 간단하게 예제를 코딩 해보았습니다. ● 1. 정규식으로 해당 식을 test를 사용해 체크하는 방식입니다. let str = "abc가123"; let check = /^[a-zA-Z0-9]+$/; if (!check.test(str)) { console.log("숫자와 영문자만 입력 가능합니다."); } ● 2. 결과 화면은 아래와 같습니다. 원하시는 곳에 사용하면 됩니다. 2021. 11. 1.

티스토리툴바