JavaScript
-
DOM을 활용한 간단한 유효성 검사 예제JavaScript 2020. 5. 22. 23:35
DOM(Document Object Model) : JavaScript를 이용해서 엘리먼트의 속성값을 얻어내거나 변경하는 방법 아이디, 비밀번호를 입력해 회원가입 버튼을 누르면 피드백을 주는 페이지를 만들어보자. (*여기서의 목표는 단순히 버튼, 텍스트 입력 등 사용자의 입력을 받을 수 있는 html태그를 만들고 javaScript를 이용해 값을 얻어내는 연습을 위함이다. 기능적인 면은 고려하지 않았다.) html파일의 body태그 안에 아래와 같이 코딩해보았다. ID: 비밀번호: 비밀번호 확인: 회원가입 이제 javaScript를 이용해 사용자가 입력한 값을 얻어내고, 피드백을 줄 수 있게 해보자. let userID = document.querySelector('#userID'); let pw = d..
-
원시 타입과 참조 타입JavaScript 2020. 5. 19. 20:58
자바스크립트는 원시 타입(primitive type)과 참조 타입(reference type)이라는 두 가지 자료형을 제공한다. 원시 타입 : 숫자(Number), 불린(Boolean), null, undefined, 문자열(String) 참조 타입 : 객체(Object), 배열(Array), 함수(function) 원시 타입 데이터는 변수에 할당할 때 원시 데이터 값이 그대로 담긴다. 변수를 복사하게 될 경우 그 변수에 담고 있는 원시 데이터 값이 복사된다. let x = 10;// 원시 타입인 숫자 10을 x라는 변수에 담았다. console.log(x)// 10 let y = x; x = 7; console.log(y)// 10 이와 달리, 참조 타입 값은 변수에 할당하게 될 경우 데이터 값이 직접..
-
반복문(for, while)JavaScript 2020. 5. 12. 22:31
반복문(Iteration) - 같거나 비슷한 코드를 여러 번 실행시켜야 할 경우에 쓰는 구문 for 구문 - 반복횟수를 알고 있을 때 주로 사용 - 반복할 내용을 중괄호 block 안에 넣어준다 - 반복할 조건을 초기화, 조건식, 증감문 순으로 넣어준다 let str = ''; for (let i = 0; i < 9; i++) { // i는 0부터 시작, i가 9가 되기 전까지 반복한다, i는 1씩 증가한다 str = str + i; // 반복할 내용 } console.log(str); // expected output: "012345678" while 구문 - 조건식이 true일 경우 계속해서 반복하며 false가 되면 반복 행위를 멈추고 while문을 종료한다 - 반복할 조건 중, 초기화, 증감문은 ..
-
숫자 다루기JavaScript 2020. 5. 12. 21:12
Number.isInteger(value) - arguments : 정수인지, 아닌지 여부를 검사할 값 - return value : 정수를 판단한 결과(boolean) Number.isInteger(10.2134); // false Number.isInteger(10); // true parseInt(value) / parseFloat(value) - arguments : 형변환(type casting)하기 위해 파싱될 값 - return value : 정수 또는 소숫점 숫자 parseInt('3121') // 3121 parseFloat('123') // 123 parseInt('abc') // NaN num.toFixed([digits]) - arguments : 소숫점 뒤에 나타낼 자릿수(opti..
-
문자열 다루기JavaScript 2020. 5. 11. 22:31
concat( ) : 매개변수로 전달된 모든 문자열을 호출 문자열에 붙인 새로운 문자열을 반환 let str1 = 'hi'; let str2 = 'bless you'; str1.concat(' ', str2); // "hi bless you" str.indexOf(searchValue) : 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환. 일치하는 값이 없으면 -1을 반환 'hello world'.indexOf('world'); // 6 'hello world'.indexOf('Hello'); // -1 (대소문자를 구분함) str.includes(searchValue) : 하나의 문자열이 다른 문자열에 포함되어 있는지를 판별하고, 결과를 true 또는 false 로 반환 'bl..
-
배열로 함수형 프로그래밍하기JavaScript 2020. 5. 11. 21:35
forEach( ) - 반복적으로 실행하는 행동을 함수(callback)로 분리하고, callback 함수를 배열 요소 각각에 대해 실행. - callback 함수의 매개변수에는 currentValue(처리할 현재 요소), index(처리할 현재 요소의 인덱스), array(forEach()를 호출한 배열) 순서대로 받는다. - map()이나 reduce()와 달리 undefined를 반환한다. return을 쓸 수 없다. *mdn에서 참고한 forEach()의 특징 : unlike map() or reduce() it always returns the value undefined and is not chainable. The typical use case is to execute side effects..
-
객체(object) 다루기JavaScript 2020. 5. 10. 10:22
객체(object) 다루기 - 회원 주소록과 같이 하나의 변수 안에 여러가지 정보가 담겨 있을 때 적합한 자료 구조 - 키(key) - 값(value) 쌍으로 이루어져 있음 - 중괄호 { }로 만들고 키-값 쌍은 쉼표 , 로 구분한다 객체의 값을 사용하는 방법 - dot notation 과 bracket notation - user.firstName / user['firstName'] - dot notation은 객체 안에 해당 key가 있을 때만 쓸 수 있다 - key가 동적으로 변할 때 bracket notation을 사용한다 - delete 키워드를 이용해 키-값 쌍을 삭제할 수 있다. - in 연산자를 이용해 해당하는 키가 있는지 확인할 수 있다. 객체의 property를 순회하는 for...in..
-
객체, 배열과 관련된 메소드들JavaScript 2020. 5. 9. 18:06
Object.keys(object) : object(객체) 안에 있는 'key'만 따로 빼내 배열에 담습니다. let obj = { a : 'abc', b : 123 , c : 'aaa' } let keys = Object.keys(obj); console.log(keys); // ["a", "b", "c"] concat() : 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다. let arr1 = ['a', 'b', 'c']; let arr2 = ['d', 'e', 'f']; let arr3 = arr1.concat(arr2); console.log(arr3); // ["a", "b", "c", "d", "e", "f"] splice() : 메서드는 배열의 기존 요소를 삭제 또는 ..