문법 정리

-선택자

 

태그 선택자 : document.getElementsByTagName(태그명)[순서];

클래스 선택자 : document.getElementByClassName(클래스명)[순서];

아이디 선택자 : document.getElementById(아이디명);

 

형제가 있어도 전체를 선택해야 하는 경우 - 순서를 지정할 수 없다

document.querySelector('div');

 

해당 형제를 선택해야 하는 경우 

document.querySelectorAll('div')[순서];

 

한 클래스에서  같은 형제가 있을 경우

document.querySelectorAll('.hello >p')[2];

 

한 아이디에서 같은형제가 있을 경우

document.querySelectorAll('#hello >p')[1];

 

-출력문

 

별도의 대화 상자를 띄워 사용자에게 데이터 전달

window.alert("내용"); 

 

웹 페이지에 가장 먼저 데이터를 출력해줌(테스트나 디버깅에 사용)

document.write("내용");

 

콘솔을 통해 데이터 출력

console.log("내용");

 

-변수의(Variable) 선언

1. let 선언시 초기 값을 주지 않아도 됨

2. const  선언시 반드시 초기값을 할당해야함

 

-변수의 데이터 타입

 

기본타입

 

1.boolean

2.null

3.undefined

4.number

5.string

6.symbol

 

객체 타입

1.object

2.array

3.function

 

Nan : 산술 연산 불가

parseInt() : 파라미터에 문자를 넣으면 숫자로 바꿔주면서 정수화를 해줌 숫자를 넣을 경우 정수와 해줌

(문자에 첫 글자를 정수로 변경할 수 없으면 NaN을 리턴해줌

parseFloat() : 실수화로 변경 해줌

 

 

-배열의 문자열 관련 함수

 

string.indexOf( ) : 문자열에서 특정 문자열을 찾고, 검색된 문자자열이 '첫번째'로 나타나는 index를 리턴해줌

 

string.length() : 문자열의 길이를 length를 통해 구할 수 있다. 문자열의 문자 갯수를 리턴 시켜줌

 

string.concat() : 두 개의 문자열을 하나의 문자열로 만들어 주는 역할 

 

string.charAt() : 문자열에서 지정된 위치에 존재하는 문자를 찾아 반환하는 함수이다.

 

string.substr() : 문자열에서 특정 부분만 골라낼 떄 사용하는 함수 매개변수로 (start, length)가 있음 필요시 해당 index 넣어줌

 

string.substring() : 매개변수로 (start, end) 를 받는다 / 음수가 들어가면 문자열 그대로 반환

 

string.slice() : start가 end보다 크면 빈 string을 반환 index가 음수이면 뒤에서 부터 가져옴

 

string.split() :  문자열을 일정한 구분자로 잘라서 각각의 문자열을 배열로 저장 string.split(separator,limit) separator는 배열을 나눠줄 기준 문자열을 넣는다. limit은 배열화 되고 난 뒤 1을 넣으면 앞 index 를 넣으면 뒤 index  빈 스트링을 넣으면 하나하나 배열로 됨

 

string.toUpperCase() : 소문자를 대문자로 변환시켜줌

 

string.toLowerCasr() :대문자를 소문자로 변환시켜줌

 

string.trim() : 문자열 앞 뒤 공백을 제거함

 

string.replace() : 문자열 내부에 대한 공백 처리를 할 떄나 문자열을 다른 값으로 바꿔줄 때 사용한다.

 

-배열

 

배열의 선언  

1.대괄호를 사용하여 만드는 방법

2.Array() 생성자 함수로 배열을 만드는 방법

 

Array.isArray() : 배열은 typeOf로 type을 출력해 보면 object 객체라고 나옴

 

array.indexOf() : 배열에서 특정 데이터를 찾고, 검색된 배열의 '첫번쨰'를 나타내는 위치 index 를 리턴함

 

array.length() : 배열의 길이를 통해 구할 수 잇음. 배열에서 데이터의 갯수를 리턴함

 

array.toString() : number 타입도 문자열화 시켜줌 

 

array.join : 배열의 모든 데이터를 연결해서 하나의 문자열로 만들어 준다.

 

array.concat() : 두개 이상의 배열을 하나의 배열로 만들어주는 역할을 하는 함수임

 

array.slice() : 특정 부분만 반환해 주는 함수이다 매개변수는 (start, end) end의 이전까지만 반환함

 

array.splice() : 배열의 기존 원소를 삭제 또는 교체하거나 새 원소를 추가하여 배열의 내용을 변경함

 

array.pop() : 배열의 맨 마지막 원소 하나를 제거함

 

array.push() : 배열의 마지막에 새로운 원소를 추가한다 / 반환값은 변경된 배열의 길이를 반환

 

array.shift() : 배열의 첫번째 원소 하나를 제거한다 

 

array.unshift() : 배열의 첫번째에 새로운 원소를 추가한다

 

array.reverse() : 배열의 순서를 뒤집는다

 

array.sort() : 배열의 원소를 오름차순으로 정렬해준다

 

-객체(object) : 객체는 데이터와 그 데이터에 관련한 동작(절차,방법,기능)등을 모두 포함할 수 있는 개녀적인 존재임

이름(key) 값(value)을 가지는 데이터를 의미하는 프로퍼티와 동작을 의미하는 메서드(method) 를 포함할 수 있는 독립적인 주체

 

-객체의 선언 

 

1.중괄호{}를 시용하여 만드는 방법 (객체 리터럴 방식)

2.Object() 생성자 함수로 객체를 만드는 방법

 

최단산쉬관비논삼배후

 

최고순위 연산자 :  . 무조건 1순위 / 객체 연산만 사용 가능 new (두번째) () [] (객체)

 

단항 연산자 (항이 1개만 있음) : !(논리 반전 연산자) if (변수를 잘 써야함) 

  , (casting)  ++ (선행증가/ 1을 증가 시킴 자신을 먼저 증가시키고 결과를 줌 c=3   d= ++c   c=4 --(선행감소)

 

아스키 코드 유니코드 >> 문자도 비교 가능

let k = c++ + ++e; 

k;

 

 

 

산술 연산자 : 사칙연산자, %(모듈러 -  나머지 2 % 4 = 2 )

 

쉬프트 연산자 : 비트 연산자 (<< >> >>>)

 

관계 연산자 : != (같지 않음/값만 비교) ==(같음, 값만 비교), ===(같음, 타입까지 비교함)

!==( 같니?, 타입까지 같이 비교함 and 연산 제일 중요함)

< > >= <= (yes or no   boolen타입)

 

비트연산 : & | ~(not 반전) ^

 

논리연산 : (true or false)

|| - or    && - and

 

삼항연산 : 연산식 ? 연산식 경과없이 true시 리턴 값 : false 리턴값 (? :)

 

배정대입 : = += *=

 

후행 연산자 : ++ , --   변수 뒤에 붙음

 

typeOf : 변수에 담기 데이터 타입을 리턴 시킴