아빠개발자의 노트

자바스크립트는 html 위에서 작동한다

html을 동적으로 작성하기 위해 자바스크립트라는 기술이 나왔습니다.

​

자바스크립트 데이터타입

1. Boolean

2. Null

3. Undefined

4. Number

5. String

6. Symbol (new in ECMAScript 6)

​

'문자열'.toUpperCase // 문자열을 대문자로 치환

'문자열'.indexOf('찾을문자') 찾을문자가 문자 몇번째에서부터 시작되는지 숫자로 표시됨

'문자열'.trim // 문자의 공백을 제거

​

x = 1;

대입연산자 = (우항의값을 좌항에 대입)

변수 : variable (베리어블) 이라고도 한다

​

html 에서 비교연산자 &it; 는 < 이렇게 표시된다

​

함수를 만드는 3가지 방법

​

​

객체 내가 생각하는 객체는 변수 함수 메소드 모든게다 각각 객체가 될수있다

객채에 함수를 넣으면 그 함수는 메소드가된다

위 그림의 3번같은 경우

​

var showAll = {'abc' , 'abc1'};

이럴 경우 객체가 생성이된다.

또한 showAll 이라는 객체의 'abc' 는 프로퍼티 라고도 한다.

​

3번의 showall 에 들어있는 함수에서 this를 사용하면 cow를 뜻한다

함수 안에서 this를 쓰면 함수바로 상위의 객체를 this 로 쓴다

만약 2번처럼 쓰고 그안에 this 를 쓸경우 그 this 는 상위 객체? 인 window를 소환한다

​

자바스크립트는

이렇게 줄바꿈 하면 문장이 끝낫다고 알기때문에 ; 안붙혀도 작동이노딘다

하지만 ; 을 명시적으로 적어주는게 좋다

​

var a = 1 //여기서

a //는 변수

1 //은 값

= //은 대입연산자

//라고부른다

이런걸 이항 연산자라고 한다.

​

또한 비교문

= 는 대입연산자 우항의 값을 좌항에 넣는다

== 비교연산자 좌항과 우항의 같냐 틀리냐

=== 비교연산자 좌항과 우항의 값이 정확히 같냐 틀리냐

​

1 == "1" //true 데이터 타입이 달라도 정보의 값이 같아서 true

1 === "1" // false 정보의 값이 아니라 타입까지 일치해야한다

​

null 과 undefined는 값이 없다라는 뜻이다.

null // 값이 없다

undefined 정의되어있지 않다.

NaN 은 0을 0으로 나눳을때 (성립하지 않는다)

NaN === NaN // False

​

for 문에 i++ 는 실행을 하고 1씩증가하고

++i 는 증가한다음실행이된다

​

​

배열합치기

var li = ['a','b']

li.concat(['f','g'])

이렇게 되면 배열이 합쳐진다.

​

배열.splice([인덱스],0,"배열에추가할문자")

​

배열 제거

배열.shift 첫번째 원소를 제거

배열.pop 끝번째 원소를 제거

​

배열정렬

배열.sort(); 하면 순서대로 정렬된다 디비 asc; 같은 느낌

배열.reverse(); 하면 거꾸로 정렬된다 디비desc;

​

​

​

객체

var grades = new Object(); 이것과 var grades = { }; 은 같은의미이다.

​

문서를 자바스크립트로 제어하려면 제어의 대상에 해당되는 객체를 찾는 것이 제일 먼저 할 일이다. 문서내에서 객체를 찾는 방법은 document 객체의 메소드를 이용한다.

​

​

1.html 태그로 선택하는 방법

상위요소에서 하위요소 선택방법

document.getElementsByTagName('태그')

태그들을 유사배열로 만들어 준다

​

​

​

2.class Name으로 선택하는 방법

document.getElementsByClassName('클래스명')

클래스명들을 유사배열로 만들어 준다

3. ID 로 선택하는 방법

가장 많이 쓰이고 가장 우수한 성능을 자랑한다.

이걸 사용할수있다면 가급적 이걸로 사용하는게 좋다

ID는 문서의 유일한 값으로 표시되기 때문에

getElements 가아닌 getElement 를 사용한다 (유사배열이 아닌 1개만 선택된다)

document.getElementById('아이디')

​

4. CSS 선택자의 문법으로 선택하는 방법

1. document.querySelector('.sa') : 클래스의 이름이 sa 엘리먼트중 맨 첫번째 만을 찾는다

2. document.querySelectorAll('li') : li 태그 요소들을 전부 유사배열로 만든다

' ' 안에 이름을 넣을때

. 을 넣어서 쓰면 className을 찾고

#을 넣을경운 id 값을 찾고

그냥 넣엇을 경우엔 태그를 찾는다

li 를 제이쿼리 객체로 만들고

map 이라는 메소드는 함수로 인자를 받게되있다.

map li 에 있는 객체의 배열을 다 돌면서 .map 의 메소드로 index 값과 elem(엘리먼트값)을 뽑아낸다

elem 에 돔 객체가 담겨있찌만 제이쿼리 함수가 아니라서

$(elem) 이렇게 감싸서 제이쿼리 객체로 변환해서 제이쿼리 메소드를 사용해야한다.

​

​

​

Element 객체

​

저번 블로그 포스팅에도 작성하였지만

Element 는 html 만을 위해서 있는게 아닌

xml , svg , xul , html 등의 각각의 요소들을 다루는것이

Element 이다 그중에서 Element가 상속? 같은걸 받아서

html에서 사용하는게 htmlElement 이다

​

element 는 식별자 , 조회 , 속성 3가지가 있다.

​

식별자

엘리먼트를 제어하기 위해서는 그 엘리먼트를 조회하기 위한 식별자가 필요하다.

HTML에서 엘리먼트의 Name 과 id 그리고 class 는 식별자로 사용된다.

식별자 API는 이 식별자를 가져오고 변경하는 역활을 한다.

​

1. ) Element.tagName

Element.tagName //엘리먼트 객체의 태그의 이름을 뽑는다

만약 document.getElementById('active').tagName

// 을 하게될경우 id값이 active인 tag의 이름을 출 력한다

//다만 읽기전용이라 document.getElementById('active').tagName = a 를 해도 변하지는 않는다

​

2. ) Element.ID

​

3. ) Element.className , Element.classList

​

조회

조회 API는 엘리먼트를 조회하는 기능이다.

조회방법은 위에서 계속 나왔기 때문에 조회대상을 제한하는 방법만 소개한다.

document.getElementsBy* 메소드를 통해서 엘리먼트를 조회했다.

document객체는 문서 전체를 의미하는 엘리먼트이기 때문에 document로 조회하면 문서전체중에 조회한다

Element 객체도 getElementsBy* 엘리먼트가 있는데 Element객체의 조회 메소드는 해당 엘리먼트위 하위 엘리먼트를 대상으로만 조회를 한다.

​

Element.getElementsByClassName // 클래스의 이름을 찾는다

Element.getElementsByTagName // 태그의 이름으로 찾는다

Element.querySelector // 정해준 이름값으로 찾지만 1개의 결과만 내놓는다

Element.querySelectorAll //정해준 이름값으로 찾아 유사배열로 만든다.

​

​

​

속성

Element.getAttribute(name)

Element.setAttribute(name,value)

Element.hasAattribute(name);

Element.removeAttribute(name);

​

​

이렇게 다양한 방법으로 엘리먼트를 접근해서 수정할수있는데

여기서 프로퍼티방식과 속성방식은 미묘하게 차이가있다

클래스명을 바꿀때 프로퍼티방식으로 active.className = 'abcd' 이렇게 사용하지만

속성방식으로는 active.setAttribute('class','abcd'); 이렇게 사용한다 ( class는 예약어이기때문)

​