아빠개발자의 노트

​

​

​

​

​

제이쿼리 NODE의 REMOVE 와 EMPTY

REMOVE --> 선택된 엘리먼트만을 제거

EMPTY --> 선택된 엘리먼트의 텍스트만을 제거

​

​

제이쿼리 NODE의 replaceWith와 replaceAll

replaceWith --> 제어대상을 먼저 지정

replaceAll --> 제어대상을 인자로 전달

clone --> 대상 복사

​

​

자바스크립트는 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 값을 찾고

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