코딩 맛집

1. split() 함수 문자열.split('분할자') 분할자(예: 콤마(,))를 기준으로 문자열(String)을 분할 하여 배열(Array) 객체로 반환해 줍니다. 문자열.split('분할자', '분할할 갯수') 분할자(예: 콤마(,))를 기준으로 문자열(String)을 분할 하여 분할할 갯수 만큼의 데이터를 배열(Array) 객체로 반환해 줍니다. 2. 예제 var fruits = "apple, banana, orange".split(','); console.log(fruits); var fruits = "apple, banana, orange".split(',', 2); console.log(fruits);

JavaScript의 배열과 유사 배열에 대해서 알아 보겠습니다. var array = [1, 2, 3]; // [1, 2, 3] var nodes = document.querySelectorAll('a'); // NodeList [a, a, a, ...] 위 예제에서 array는 배열이고, nodes는 유사배열입니다. 둘 다 []로 감싸져 있거든요. 그럼, Array.isArray 메서드 또는 instanceof Array 를 사용해서 어떤것이 배열인지 확인해 보도록 하겠습니다. Array.isArray(array); // true Array.isArray(nodes); // false array instanceof Array; // true nodes instanceof Array; // false ..

JavaScript 는 동적 타입 언어 입니다. 동적 타입은 타입 (자료형) 이 컴파일 시에 정해 지는 것이 아니라, 실행 시에 정해 집니다. 따라서 자바스크립트 에서는 (==) 동등 비교 연산자(형변환 비교) 뿐만 아니라, (===) 일치 비교 연산자(엄격한 비교) 가 존재 합니다. 1. (==)동등 연산자와 (===)일치 연산자 (===) 일치 연산자는 두 피연산자가 같은 자료형, 같은 값 일 경우에 true 를 반환 합니다. (==) 동등 연산자는 두 피연산자를 같은 자료형으로 형변환 후에 값이 같은 경우 true 를 반환 합니다. console.log(1 == 1); // true 출력 console.log('1' == 1); // true 출력 console.log(1 === 1); // tru..

JavaScript 의 원시 타입(primitive 타입) 은 다음과 같습니다. - string - number - bigint - boolean - null - undefined - symbol 총 7가지의 원시 타입이 존재 합니다. 1. undefined 타입 이 중에서도 undefined 타입은 자바스크립트에서 많이 등장하면서도 가장 헷갈리는 타입 입니다. 특히나 undefined 은 null 타입과 가장 혼란스러운데요. 다른 프로그래밍 언어 에서는 null 타입은 있지만 undefined 라는 개념이 없는 언어가 많기 때문 입니다. javaScript 의 undefined 타입은 1. 특정 변수의 값을 할당 하지 않았다면, 그 변수는 undefined 자료형 입니다. 2. 함수가 값을 명시적으로 ..

1. oninput 우리는 input 태그와 textarea 태그의 데이터를 입력 할 때가 많이 있습니다. 이 태그들은 사용자로 데이터를 입력 받구 서버에 데이터를 전송 하는 경우가 많습니다. 그런데 사용자가 데이터를 입력 할 때마다 바로바로 데이터를 확인 하거나, 특정 이벤트를 주고 싶다면 oninput 이벤트를 사용 하시면 됩니다. 이런 이벤트를 우리는 주로 '리스너' 라고 합니다. 유효성 검사를 할때에도 많이 쓰입니다. id 가 myInput 인 input 태그의 어떤 입력이 들어오면 myFunction 함수를 실행 합니다. 그리고 id 가 demo 인 p 태그의 "You wrote: (입력값)" 을 넣어 줍니다. oninput 이벤트와 굉장히 비슷한 onchange 이벤트가 있습니다. 호환성은 다..

1. JSON 전역 객체 자바스크립트 에는 JSON 이라는 전역 객체가 존재 합니다. JSON 전역 객체에 대표적인 함수는 JSON.stringify(Object) JSON.parse(String) 2. JSON.stringify() JSON.stringify(Object) 는 '자바스크립트 객체' -> 'json 문자열' 로 변환 시켜주는 함수 입니다. 여기서 여기서 우리가 흔히들 얘기 하는 json 이라는것이 이 'json 문자열'을 의미 합니다. '자바스크립트 객체' 와 구조는 같지만 객체가 아닌 문자열로서 존재 하는 것입니다. const person = { name: 'taein', age: 21 }; console.log(person); Chrome의 개발자 도구에서 __proto__ : Obj..

1. json 이란? json 은 클라이언트와 서버와 같이 서로 다른 프로그램에서 데이터를 읽거나 쓸수 있도록 만들어진 데이터 포맷을 의미 합니다. 이런 데이터 포맷에는 XML 이라는 포맷도 있습니다. 이런 HTTP 상에서 데이터 포맷을 HTTP Content-Type 이라고 합니다. HTTP Content-Type 종류 에는 1. Text 2. JSON (application/json) 3. JavaScript (application/JavaScript) 4. XML (application/xml) 5. XML (text/xml) 6. HTML (text/html) 등 이 있습니다. 특히나 json 은 JavaScript Object Notation 의 약자 입니다. 한글로 해석 하면 '자바스크립트 객..

1. JavaScript를 이용하여 ajax 사용하기 javaScript를 이용해서 ajax를 사용하려면 대체로 코드가 길어집니다. 또한 request 오픈 -> 데이터 전송 -> 콜백 / 응답 이 따로 존재 하기 때문에 캡슐화를 제대로 하지 못하면 로직이 분리 되거나 유지보수 하기 힘들어 질 수 있습니다. // XMLHttpRequest 객체의 생성 const xhr = new XMLHttpRequest(); // 비동기 방식으로 Request를 오픈한다 xhr.open('GET', 'data/data.html'); // Request를 전송한다 xhr.send(); // Event Handler xhr.onreadystatechange = function () { // 서버 응답 완료 && 정상 응답..

1. FormData 란? FormData 라는 자바스크립트 객체가 있습니다. HTML5의 태그를 대신 할 수 있는 객체 입니다. FormData는 다음과 같이 객체 생성후 사용 할 수 있습니다. var formData = new FormData(); var formData = new FormData(document.getElementById('폼 아이디')); var formData = new FormData($('form')[0]); 2. FormData의 활용 보통은 HTML상에서 태그를 사용해서 submit 버튼을 만들어서 전송 합니다. ajax로 비동기로 데이터를 전송 해야 할때는 보통 json 데이터를 전송 합니다. 하지만 파일을 전송해야 하거나, 이미지를 전송해야 하는데, 비동기로 전송 하고..