자바스크립트 관련 자료
컴퓨터 파일을 정리하던중 자바스크립트 강의 보고나서 제가 정리한 파일이 있길래 남들이 혹시 이거를 공부할 때 활용할 수도 있어서 올립니다.
배열 하나 추가 : push
배열 복수의 원소 추가 : concat
예)
var li = ['a', 'b'];
li = li.concat(['c', 'd']);
alert(li);
배열 지금까지는 원소 추가할 때 꼬리에 추가했었는데 시작점에 추가하려면
unshift이용 -> unshift는 인자로 전달한 값을 배열의 첫번째 원소로 추가
var li = ['a', 'b', 'c', 'd', 'e'];
li.unshift('z');
console.log(li); -> ['z', 'a', 'b', 'c', 'd', 'e']
중간에 배열을 낑겨 넣고 싶을 때 : splice()
splice 사용 방법 : splice(index, howmany, elements);
index : 배열에서 추가할 특정 배열의 위치
howmany : 제거될 원소들의 수
elements : 추가할 원소
예)
var a = ['a', 'b', 'c'];
a.splice(1, 0, 'd');
console.log(a); -> ['a', 'd', 'b', 'c']
var a = ['a', 'b', 'c'];
a.splice(1, 1, 'x', 'y');
console.log(a); -> ['a', 'x', 'y', 'c']
첫번째 코드랑 두번째 코드를 비교해보면 b가 삭제됨을 알 수 있다.
<배열의 제거와 정렬>
배열의 첫번째 원소를 제거
shift()
배열의 끝점의 원소를 제거
pop()
정렬
sort()
연순으로 정렬
reverse()
모듈 : 코드의 재활용성을 높이고, 유지보수를 쉽게 할 수 있는 다양한 기법들을 말하는데 쉽게 말해서는 코드의 부품이라고생각하면 된다. 부품이 모여야지
제품이 되는 것처럼
자바스크립트가 구동되는 환경 : 호스트 환경
자바스크립트의 라이브러리
대표 라이브러리 : jQuery
자바스크립트에서 일반 함수를 함수라고하고
객체안에 있는 함수 : 메소드
-----------------------------------------------------------------------------------------------------------------------------------
DOM(Document Object Model): 문서 객체 모델
HTML과 XML 문서를 위한 API로써 문서의 물리적 구조와 문서가 접근되고
다루어지는 방법을 정의한다.
목적:
다양한 환경과 애플리케이션에서 사용할 수 있는 표준적인 프로그래밍
인터페이스 제공
DOM Level
W3C Level 단위로 1~3까지있다.
DOM 구조:
문서를 트리구조로 표현
특징:
body 부분에 들어가있는 객체 요소들은 매 페이지들마다 다르다.
-----------------------------------------------------------------------------------------------------------------------------------
promp : 사용자로부터 입력 받아줌
alert : 경고창
confirm : 사용자로부터 예, 아니요를 받음
-------------------------------------------------------
document.querySelector : 자바스크립트에서 HTML 태그를 가져오는 것
태그가 여러 개일 때 document.querySelector를 사용하면 첫 번째 태그를 선택
특정 id를 document.querySelector를 통해서 접근하려면 #id 이름 이렇게 접근
document.querySelctorAll : 태그를 모두 선택
버튼 3개에서 첫번째와 세번째 버튼을 접근하고 싶을 때 예)
3개에 클래스를 부여 한다음
document.querySelctorAll(.공통된 단어) <- id는 #을 붙이지만 클래스는 앞에 .을 붙인다.
꿀팁 :
- 태그를 html 태그 선택해서 변수에 넣을 때는 변수 앞에 달러 표시를 붙여준다.
- 여러개 태그를 선택할 대 달러($) 표시 2개
- 자바스크립트에서는 따로 매개변수가있다. <- arguments
- 태그 사이에 공백이 있으면 자손 태그를 의미, 후손 필요 없이 자식만 나타내고 싶으면 공백 대신 >을 넣어줌
예)
자손 태그를 넣을 때 :
const $span = document.querySelector('div span');
자식 태그를 넣을 때 :
const $span = document.querySelector('div<span');
--------------------------------------------------------------------------------------------------------
<이벤트>
addEventLister : 이벤트 실행시켜줌