Web/JavaScript

Node.js 자바스크립트는 브라우저의 인터프리터로 작동(스크립트를 해석) -> 브라우저 자체에서 실행이 가능 백엔드에서 실행하긴 위해서 Node.js를 설치해야 한다. Node.js를 설치하면 브라우저가 없이도 자바스크립트가 돌아가는 환경을 만들어 줄 수 있다. npm이란 ? Node Package Manager의 약자로 프레임워크나 자바스크립트로 구현된 다양한 모듈들을 만들어 놓은 곳. 프로그램을 설치하는 것처럼 모듈을 다운받아 사용한다. npm 터미널 명령어 npm init - npm 시작하는 초기화 설정 npm install (패키지이름) - 해당 npm 모듈 설치 (뒤에 -g를 붙이면 global 뜻으로 해당 프로젝트뿐만 아니라 내 컴퓨터 전체에 적용) npm uninstall (패키지이름) -..

쌍용 강북 교육센터 국비학원 Day 53일차 정규표현식 정규표현식 (Regular Expression)은 문자열을 처리하는 방법 중의 하나로 특정한 조건의 문자를 '검색'하거나 '치환'하는 과정을 매우 간편하게 처리 할 수 있도록 하는 수단이다. 정규표현식 객체 만들기 /로 시작해서 /로 끝나고 ; 세미콜론을 붙여주면 된다. Example ) regexp = / pattern / flags ; regexp = new RegExp ('pattern' , [ 'flags' ] ); [propVal=] RegExp.propName; 정규표현식은 기본적으로 대, 소문자를 구분한다. 정규표현식은 기본적으로 공백, 탭, 개행키도 구분한다. ' \ ' (escape 문자) 다음에 오는 정규식패턴 1개 문자( ^ $ ..

쌍용 강북 교육센터 국비학원 Day 52일차 우편번호 검색하기 구현 보통 포털사이트의 회원가입시에 주소를 기입할때 이용하는 우편번호 검색코드이다. 우편번호 검색을 누르면 해당주소를 검색해서 입력해 우편번호와 주소를 자동으로 입력해주는 팝업창이다. 다음에서 배포하는 코드를 사용해 구현했다. required 속성 (유효성 검사) form 태그에서 required 속성이 적용되는 input 태그 , radio , textarea 태그들은 모두 유효성 검사를 해줄 필요가 없다. 하지만 required 속성이 안 먹히는 것은 모두 유효성 검사를 해주어야 한다. checkbox 는 required 속성이 먹히지만 모든 체크박스에 required 속성을 주면 모든 체크박스에 체크를 해주어야 하기 때문에 require..

쌍용 강북 교육센터 국비학원 Day 51일차 URL, URI, URN URI는 (Uniform Resource Identifier) URL은 (Uniform Resource Locator) URN은 (Uniform Resource Name) 의 약자이다. 자원의 식별자(URI), 위치(URL), 이름(URN)으로 유추해 볼 수 있다. URI : 통합 자원 식별자(Uniform Resource Identifier, URI) 인터넷에 있는 자원을 나타내는 유일한 주소이다. URI의 존재는 인터넷에서 요구되는 기본조건으로서 인터넷 프로토콜에 항상 붙어 다닌다. URI의 하위개념으로 URL, URN 이 있다 URL : URL(Uniform Resource Locator, 문화어: 파일식별자, 유일자원지시기) 네..

쌍용 강북 교육센터 국비학원 Day 50일차 Date 객체 생성 -> new Date() 는 new Date() 가 실행되는 시점에 날짜 및 시간 데이터를 갖고 오는 것이다. 출력하게 되면 요일명 월 일 년도 시:분:초 GMT기준시간을 표시해준다. get 날짜함수 -> 날짜 데이터에서 필요한 형식만 갖고 오는 함수이다. 종류 리턴값 getFullYear() YYYY getMonth() MM (월은 0부터 시작하기 때문에 +1을 해야한다.) getDate() DD getDay() 0 ~ 6 (일 ~ 토) getHours() HH getMinutes() MM getSeconds() SS getMilliseconds() mmm toLocaleString() 년, 월, 일 시간의 데이터 포맷형식으로 리턴 set..

쌍용 강북 교육센터 국비학원 Day 49일차 노드 탐색하기 .parentNode.parentNode 부모노드의 부모노드를 리턴 .parentNode 부모노드를 리턴 .childNodes 모든자식노드들을 리턴 .firstChild 첫째자식노드를 리턴 .lastChild 마지막자식노드를 리턴 .nextSibling 같은 레벨의 노드중 이전 노드를 리턴 (바로밑 - 형제노드) .previousSibling 같은 레벨의 노드중 이전 다음를 리턴 (바로위 - 형제노드) ※ 주의할 점은 태그사이에 띄어쓰기를 하거나 태그를 줄 바꿈을 해버리면 띄어쓰기나 줄바꿈을 텍스트 노드(text node) 로 취급해버리므로 원하는 노드의 값을 가지고 오지 않고 undefined 가 나온다. 이렇게 undefined 가 나오지 않..

쌍용 강북 교육센터 국비학원 Day 48일차 Array 주요 메소드 1. 배열명.splice() (start, count, element) -> 배열의 특정 위치에 배열 요소를 추가하거나 삭제하는데 사용한다. 삭제할 경우 리턴값은 삭제한 배열 요소이다. 삭제한 요소가 없으면 빈 배열을 반환한다. start - 수정할 배열 요소의 인덱스 count - 추가할 경우 count 값은 0, 삭제할 경우 element 없이 삭제할 요소 개수를 넣는다. 2. 배열명.reverse() -> 배열의 요소를 역순으로 만들어준다. 3. 배열명.sort() 배열의 요소를 문자열로 변환한 후 오름차순으로 정렬한다. map() 메소드는 반복문을 돌며 배열 안의 요소들을 1대1로 짝지어(맵핑) 새로운 배열을 만들어 주는 것이다...

쌍용 강북 교육센터 국비학원 Day 47일차 Number 주요 method 숫자.toLocaleString ('en') -> 숫자를 3자리 마다 콤마를 찍어서 문자열로 변환시켜줌. 숫자.toFixed (num) -> 소수 (파라미터) num의 자리까지 반올림 해주는 메소드. 그 이후는 반올림하고 절삭. string 타입으로 리턴. 숫자.toPrecision (num) -> num의 길이만큼 추출한 후 반올림해준다. string 타입으로 리턴. getElement JavaScript에서 Element (태그, 요소)를 잡는 6가지 방법 1. 태그를 가지고 선택자를 잡는 방법 document.getElementsByTagName ("태그명") -> NodeList 타입으로 반환해준다. 마치 배열과 비슷하다...

쌍용 강북 교육센터 국비학원 Day 46일차 Variable 어제에 이어서 JavaScript 변수에는 true와 false를 나타내는 Boolean, Undefined 와 Null 그리고 Object (객체)가 존재한다. Undefined는 변수를 선언하고 값이 입력되어지지 않았을 때를 데이터타입이 정의되지 않았다는 것을 뜻하고 Null은 빈 값을 변수에 의도적으로 넣는다. 보통 Null은 값을 초기화할 때 사용한다. ※ NaN은 Not a Number 를 의미하며 관련 메소드로 isNaN(값) - 값이 숫자가 아니라면 true를 반환한다. Object (객체) 객체는 관련된 데이터와 함수 (일반적으로 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 보통 프로퍼티와 메소드라고 부른다) 의 집합..

쌍용 강북 교육센터 국비학원 Day 45일차 JavaScript 스크립트 태그는 head태그나 body태그 안에 위치해도 가능하고 CSS와 같이 HTML파일과 분리된 외부경로에 파일 (확장자명.js) 을 불러와서 사용할 수 있다. (head태그에 위치시 window.onload 가 필요하다) JavaScript Output innerHTML - HTML 태그속에 결과물을 넣어주는 메소드. HTML 요소에 접근하기 위해 document.getElementById(id)와 같이 사용 (HTML 구문보다 뒤에 구문이 위치해야 정상 출력 됨) innerText - 동작방식은 HTML과 동일한데 HTML은 작성된 코드를 그대로 작동하지만 Text는 Text 그대로 읽어온다. (즉, 태그를 인식하지 못한다) doc..