*Javascript* 13

[javascript] 정규표현식

정규표현식 정규표현식(REGEX / REGXP : Regular Expression)이란, 특정 패턴을 가진 문자열을 찾거나 또는 찾아서 변경 할 때 사용하는 형식 언어 정규표현식을 사용하면 문자열에 대해 특정 패턴을 조건 검사하거나 변경 할 때 복잡한 조건을 제시할 필요 없이 간단하게 처리 가능 자바스크립트 뿐만 아니라 자바, 오라클 또는 다른 언어들에서도 사용 가능 * RegExp객체에서 제공하는 메소드 => 정규표현식객체.메소드명(검사할 문자열); - 정규식.test(문자열) : 문자열에서 정규식값과 일치하는 값이 있다면 true, 없다면 false - 정규식.exec(문자열) : 문자열에서 정규식값과 일치하는 값이 있다면 처음 매칭된 문자열을 반환, 없으면 null * String 객체에서 제공하..

*Javascript* 2021.12.21

[javascript] 이벤트

이벤트 모델 종류 (이벤트를 부여하는 방법들) 1. 고전 이벤트 모델 => btn.onclick = function(){} 2. 인라인 이벤트 모델 => 3. 표준 이벤트 모델 => addEventListener() * 이벤트 관련 용어 event target : 이벤트가 일어날 객체(button, h2, label, .......) event type : 이벤트 종류(click, scroll, mousemove, .......) event handler : 이벤트가 발생했을 때 동작할 코드들의 모임 * 고전 이벤트 모델(기본 이벤트 모델) 요소 객체를 가지고 와서 해당 요소객체의 이벤트 속성에 접근한 후 이벤트 핸들러를 연결하는 방식 (== 익명함수를 대입한다.) 요소객체.(이벤트)속성명 = funct..

*Javascript* 2021.12.21

[javascript] BOM / DOM

BOM (Browser Object Model) location 객체 브라우저 주소창과 관련된 객체 => url(href 속성) 굳이 태그 아니더라도 url이동을 할 수 있게 해주는 객체이다. 가능하면 속성에 직접 접근하기보다 location 객체의 메소드를 이용하는 방법을 권장한다. - assign(), replace() : 페이지 이동 - reload() : 새로고침 (= window.onload) screen 객체 가로, 세로, 해상도등의 화면 정보를 조회할 수 있는 객체 navigator 객체 사용자가 사용중인 브라우저에 대한 정보(제조사)에 대한 정보가 담겨있는 객체 DOM (Document Object Model) HTML에 있는 각각의 태그(요소)들을 Node(노드)라고 한다. - 요소노드 ..

*Javascript* 2021.12.21

[javascript] window 객체

window 객체 window 객체는 자바스크립트이 최상위 객체이며 브라우저 창 하나 생성시 자동으로 생성된다. 크게 BOM, DOM으로 나뉜다. - BOM (Browser Object Model) : 브라우저 창과 관련된 객체들 - DOM ( Document Object Model) : html 문서의 요소(태그)와 관련된 객체들 window 객체에서 제공하는 메소드 window.open('url', '창이름', '창의 특성') url : 새창에서 열고자하는 주소 창이름 : 동일한 이름의 창이 이미 열려있을 경우 새로이 열리지 않고 이미 열려있는 창에서 새로고침 (크롬은 새로고침 / IE 새탭이 뜸 ) 창의 특성 : 새로 열릴 창의 너비, 높이, 툴바, 스크롤바, 상태표시줄 등등.. (브라우저마다 다름..

*Javascript* 2021.12.17

[javascript] 객체1 (object)

객체 key(속성) + value(속성값)로 한쌍으로 저장할 수 있는 구조 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입 => 자바스크립트에서의 배열 : 자바의 ArrayList와 비슷한 개념 => 자바스크립트에서의 객체 : 자바의 HashMap과 비슷한 개념 - 객체는 중괄호{}를 사용해서 생성하고, 중괄호 안에 이 객체를 필요로 하는 속성(property)들을 정의함(속성 : 속성값) == (key : value) 참고로 속성값으로는 모든 자료형의 값을 담을 수 있다. - 객체의 속성에 접근하는 방법 1. 대괄호를 이용하는 방법 : 객체명['속성명'] 2. 참조연산자(.)을 이용하는 방법 : 객체명.속성명 객체 생성 특이케이스 - 속성명 제시시 공백이나 특수문자가 포함될 경우 참조연..

*Javascript* 2021.12.16

[javascript] 함수(function)

함수 (function) 함수의 종류 1. 선언적 함수 : 이름이 있는 함수, 이름을 통해 호출하여 실행함 2. 익명 함수 : 이름이 없는 함수, 함수명 대신 변수명에 함수를 대입하여 함수코드를 저장하는 구현 방식 1. 선언적 함수 - 매개변수가 없는 경우 생략 가능하다. - 반환할 결과값이 없는 경우 return 결과값; 도 생략 가능하다. 2. 익명 함수 - 매개변수 생략가능 => 특정 변수나 속성에 대입하는 함수가 필요할 때 주로 사용됨 (주로 이벤트 핸들러 작성시 사용) => 선언적 함수는 선언해두면 언제 어디서든 재사용이 가능하고 반면, 익명 함수는 특정함수에서만 적용되는 코드이므로 일회성적이다. 3. 함수의 매개변수 매개변수 제시시 자료형이나 변수 키워드(var, let, const) 지정할 ..

*Javascript* 2021.12.16

[javascript] 배열

배열 자바스크립트에서는 변수 선언 시 별도의 자료형 지정이 없기 때문에 배열 역시 var, let, const 로 선언을 할 수 있다!! 어떤 자료형이든 상관없이 하나의 배여레 담을 수 있다. (자바의 컬렉션과 유사 ex.ArrayList) for in문 배열의 선언 배열 선언 시 배열의 크기를 지정한채로 선언하거나, 따로 크기를 지정하지 않아도 된다. (배열의 크기에 제약이 없다. => 자바 컬렉션의 장점 Array 객체의 메소드 1. indexof(찾고자하는 요소) : 배열에서 해당 요소가 위치해 있는 인덱스를 반환 ※참고. 동등비교연산자 == console.log(1 == 1); //true console.log(1 == '1'); // true => ==(동등연산자) : 자료형과 무관하게 실제값만..

*Javascript* 2021.12.16

[javascript] 문자열과 숫자

- 문자열 관련 메소드 숫자(수학) 관련 메소드 다른 자료형 끼리의 산술연산 - 더하기(+) - 그 이외의 산술연산(-, *, /) 강제형변환(문자열 -> 숫자) Nunber(문자열) parseInt(문자열) parseFloat(문자열) ★응용문제★ input 태그에 값을 입력하고 버튼을 클릭하였을 때 값이 숫자인지 아닌지 출력해주세요! 값이 숫자라면 => "숫자입니다." / 숫자가 아니라면 => "숫자가 아닙니다.'를 alert으로 출력

*Javascript* 2021.12.15

[javascript] 변수와 자료형

변수 선언시 var뿐만 아니라 let, const를 이용해서 선언 가능 var 중복선언이 가능하다 / 재할당이 가능하다. let 중복선언 불가능하다 / 재할당은 가능하다 const (constant) = 상수 중복선언 불가능하다 / 재할당도 불가능하다 (상수같은 개념 == 한번 초기화된 값 변경 불가) => var는 자유롭게 변수 선언, 사용할 수 있다는 장점이 있다. 하지만 중복된 변수가 남발하게 되므로 의도치 않게 값이 변경되는 불상사가 발생할 수 있다는 단점이 있다. 따라서 보완돼서 나온게 된게 let, const 권장사항 : let, const 위주로 사용할 것이 좋겠다. 변수의 scope 1) var는 function scope == 변수가 선언된 "함수영역"내에서 사용 가능 2) let, co..

*Javascript* 2021.12.11