JavaScript에서 문자열을 자르는 방법에 대해 살펴보겠습니다. 대표적으로 기본내장함수 substring, substr, slice 3가지가 있습니다. 3가지 중에서 상황에 맞게 적절하게 쓰면 좋겠습니다. #substr 문법은 다음과 같습니다. 문자열(str)의 시작위치(startIndex)부터 길이(length)만큼의 글자수를 자릅니다. (이때, 종료위치를 생략할 경우 시작위치부터 끝까지 자릅니다.) // 문법 str.substr(startIndex, [length]) // 예시 "서브스트링".substr(2, 1) //결과 --> "스" "서브스트링".substr(2, 2) //결과 --> "스트" "서브스트링".substr(2, 3) //결과 --> "스트링" "서브스트링".substr(1) /..
JQuery Ajax 사용법에 대해 포스팅하겠습니다. 먼저 Ajax란 Asynchronous Javascript And Xml (비동기식 Javascript And Xml)의 약자로 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환하는 기능입니다. 기본 사용법: JQuery.ajax({Settings}) Settings에 들어가는 옵션들을 살펴보겠습니다. 대표적인 옵션만 기술합니다. 옵션 타입 기본값 설명 url String HTTP Request 보낼 주소 method String GET HTTP Request 메소드 (GET, POST 등) data Object or String or Array 요청과 함께 보낼 데이터 dataType String Intelligent Guess ..
JavaScript 코딩을 하다 보면 데이터의 유효성 체크를 해줘야 할 때가 많이 있습니다. 특히 null 이나 undefined 값에 기본 함수를 사용할 시 에러가 발생할 때가 많이 있습니다. 데이터의 유효성 체크해야하는 경우 // 문자열의 길이를 리턴하는 함수 function getLength(str) { return str.length } getLength("hello") // 5 getLength(null) // error 발생 문자열이나 배열의 길이를 리턴하는 기본 속성 length는 null이나 undefined에 사용할 경우 에러가 발생합니다. 아주 간단한예를 들었습니다만, 직접 프로그램을 짜다 보시면 위처럼 데이터가 유효한 값인지, 빈 값은 아닌지 체크해야 하는 경우를 많이 느끼실 수 있을..
웹 프로그램을 만들 때 아무리 간단한 프로그램이라도 데이터를 저장하지 않는 것은 없을 것입니다. 이럴 때 우리는 주로 데이터베이스 서버에 저장합니다. 하지만 저장해야 할 데이터가 중요하지 않고, 영구 저장할 필요가 없는 데이터라면 서버단에 저장하는 것은 낭비일 수 있습니다. 이럴 때 클라이언트, 즉 브라우저에 데이터를 저장하는 Web API인 localStroage에 대해 살펴보겠습니다. localStorage에 데이터 저장하기 localStorage의 데이터 저장 함수는 localStorage.setItem(key, value)입니다. key와 Value로 저장합니다. Object처럼 접근해 데이터를 추가할 수도 있습니다. // key와 value로 저장합니다. localStorage.setItem('..
JavaScript typeof 연산자에 대해 살펴보겠습니다. 기본적으로 typeof 연산자는 피연산자의 자료형을 문자열로 반환합니다. console.log(typeof 'hello'); // "string" console.log(typeof 110); // "number" console.log(typeof false); // "boolean" function func() { return 1; } console.log(typeof func); // "function" 위 예시를 보시면 typeof연산자는 피연산자의 자료형을 출력하고 있는데 선언되지 않은 변수 또는 함수, 값이 할당되지 않은 변수를 피연산자로 할 경우 undefined가 출력됩니다. console.log(typeof unDeclaredVa..
JavaScript 이벤트의 전파 및 중단방법에 대해 살펴보겠습니다. element에서 발생한 이벤트는 부모 또는 자식에게 전파됩니다. 개발을 하다보면 원치않게 이벤트가 전파될 때가 많이 있습니다. 이럴때는 전파를 중단시켜야 합니다. 먼저 이벤트를 추가하는 함수를 살펴보겠습니다. document.addEventListener(event, function, useCapture) - event : click, focus 등 이벤트 종류 - function : 이벤트가 발생했을 때 실행할 함수 - useCapture : true - capturing(자식들에게 전파), false(default) - bubbling(부모에게 전파) 보통 useCapture를 설정하지 않기때문에 기본 bubbling으로 이벤트가..