반응형 Javascript Javascript 2020. 5. 10. DOMContentLoaded 로 HTML DOM 데이터를 초기화하기 클릭 다음으로 가장 빈번하게 보게될 자바스크립트의 이벤트입니다. "DOMContentLoaded" 이벤트를 그대로 읽으면 "DOM 컨텐츠가 로딩 완료" 되었다는 뜻입니다.바꿔말하면 브라우저가 HTML 문서를 읽어서 파싱한 후 DOM(Document Object Model)이 완성되었으므로, 자바스크립트를 이용해 HTML 문서의 구조와 데이터에 접근할 수 있게 되었다는 뜻입니다. DOM 완성 후 웹 브라우저는 이 DOM을 이용해 화면에 웹페이지를 그리게 됩니다. 이 과정을 렌더링 과정이라고 하며, "DOMContentLoaded"는 DOM 완성 후 렌더링 시작 전 중간 어디쯤 진행이 되고 있는 것을 말합니다.정확하게는 HTML DOM 완성 후 CSS 파일이 있으면 CSS 파일을 읽어 파싱한 후 CSSOM .. Javascript 2020. 3. 5. Null(널) 과 Undefined는 다르다. 코딩을 하다보면 자바스크립트만큼 유격이 많은 언어를 찾기가 어렵습니다.그만큼 유연하고 접근성이 좋지만, 뜻하지 않은 문제를 일으킬 수도 있습니다. 그중 하나가 Null 과 Undefined 입니다. 자바스크립트에는 다른 개발언어에서와 같은 Null(널) 이 있습니다.데이터베이스나 다른 개발 언어에서는 초기화가 되지 않은 변수, 또는 필드가 됩니다. 자바스크립트에서는 조금 달라서 null 은 변수에 null이 할당한 상태, 즉 변수 객체(Object)가 생성된 상태가 됩니다.Undefined는 변수의 객체가 생성되지 않는 상태의 변수 즉 아무것도 할당되지 않은 Undefined 타입이 됩니다. 둘다 값은 없지만 하나는 객체 자체는 생성된 것(null(이고, 하나는 객체 자체도 생성되지 않은 것(undefi.. Javascript 2020. 3. 1. 복사해서 바로 사용하는 자주 사용하는 정규표현식(Regular Expression) Top 20 1. 영문자 소문자, 숫자, "-", "_" 로만 구성된 길이 2 ~ 10자리 사이 문자열 /^[a-z0-9_-]{2,10}$/ 2. 신용카드 번호 19자리 숫자와 "-": /^[0-9-]{19}$/4-4-4-4 체크: /^[0-9]{4}[-\s\.]?[0-9]{4}[-\s\.]?[0-9]{4}[-\s\.]?[0-9]{4}$/ 3. 영문자 대소문자와 숫자로만 구성 /[a-zA-Z0-9]/ 4. 전화번호 3자리-3~4자리-4자리(사이에 1자 아무거나 가능)): /^[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3,4}[-\s\.]?[0-9]{4}$/3자리-3~4자리-4자리(사이에 "-" 고정): /^\d{3}-\d{3,4}-\d{4}$/휴대폰&전화번호: /(^02.{0}|^01.{1}|[0-9]{3.. Javascript 2020. 3. 1. 정규표현식으로 replace를 replaceAll 처럼 사용하기 자바스크립트의 replace 메써드는 처음 나오는 매칭 1개만을 바꿉니다.매칭되는 전체를 바꾸려면 루프를 돌아서 처리하거나, jQuery의 replaceAll 메써드를 사용해야 합니다.jQuery를 사용한다면 큰 문제가 되지 않겠지만, 자바스크립트만으로 사용하려면 꽤나 불편한 점이 있습니다. 정규표현식을 사용하면 jQuery의 replaceAll 과 같은 효과를 낼 수 있습니다. 예를 들어 var str = "This is javascript replace example."str.replace('pl',''); 을 하면 "This is javascript reace example." 이렇게 처음 나오는 "pl"만 사라지고 뒤에 나오는 "pl"은 그대로 남게 됩니다. 이걸 정규표현식을 사용해 아래와 같이 .. Javascript 2019. 11. 26. != 과 !== 연산자의 차이점 이해 자바스크립트의 비교 연산자중 양쪽 값이 같지 않은지(부등)를 비교해 true/false를 결과값으로 반환하는 연산자는 2개가 있습니다.두 부등 비교 연산자 != 과 !== 는 어떤 경우에는 같은 불리언(Boolean) 결과를 어떤 경우에는 다른 불리언(Boolean) 결과를 리턴합니다. 두 연산자는 다음과 같은 차이가 있습니다. != 연산자 부등 비교 연산자이며 동등 연산자( == ) 의 논리적인 반대값이 됩니다. 동등 연산자로 비교시 true일 경우, 부등 연산자는 그 반대인 false를 반환 합니다. 즉, 동등 연산자의 반대값이 됩니다. 비교할 때 양쪽 값의 타입이 다를 경우 같은 데이터 타입으로 변경(캐스팅) 한 후 비교합니다. 예를 들어 1 != '1' 은 false를 반환합니다. 양쪽 비교 데이.. Javascript 2019. 11. 26. 키/벨류 객체를 배열로 변환하기 자바스크립트에서 많이 사용하는 두가지 데이터 저장 타입은 자바스크립트 코드 안에서 다룰때는 객체 타입이 사용하기 편리하지만화면 출력을 위해, 또는 서버 전송을 위해서는 자주 객체를 배열로 변환하게 됩니다. 물론 더 고급의 다른 방법들도 있지만, 여기서는 객체를 배열로 변환하는 가장 기초적인 방법을 알아봅니다. 난이도가 있는 것은 아니기 때문에 그렇게 어려울 것은 없지만, 막상 닥치면 많이 헤매게 됩니다. 객체를 배열로 변환하는 방법은 2가지가 있습니다. 1. map() 함수를 사용해 변환 상단에 연습용으로 사용할 객체를 일단 하나 만들어봅니다. let obj = { "a": 5, "b": 7, "c": 4, "d": 0, "e": 1 }; "문자열":숫자 조합으로 된 5개의 원소를 가진 객체입니다. ma.. Javascript 2019. 5. 8. 정규식으로 정상 이메일 주소 여부 체크하기 이메일 주소 문자열을 입력받아이메일 주소가 정상이면 true를, 아니면 false 를 반환합니다.정규식으로 심플하게 처리가 되고, 대소문자 구분은 하지 않습니다. function checkEmail(email){ var emailChecker=/^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/i; return emailChecker.test(email) );} Javascript 2019. 5. 6. 쿼리 스트링 문자열을 받아서 JSON 문자열을 리턴하는 자바스크립트 함수 쿼리 스트링 문자열을 받아서 JSON 문자열을 리턴하는 자바스크립트 함수입니다. function QueryStringToJSON(qs) { //파라메터별 분리 var pairs = qs.split('&'); var result = {};//json 빈 객체 //각 파라메터별 key/val 처리 pairs.forEach(function(pair) { pair = pair.split('=');//key=val 분리 result[pair[0]] = decodeURIComponent(pair[1] || ''); }); return JSON.parse(JSON.stringify(result));//json 객체를 문자열화해서 리턴} var srt = QueryStringToJSON(querystring); JSO.. 이전 1 ··· 19 20 21 22 23 다음 반응형
