JavaScript 기초 공부2

간단하게 책 보고 공부한 것들.

---

이벤트 처리 관련
웹 브라우저 상에서 마우스로 클릭하거나, 마우스가 영역을 벗어나거나 들어왔을때 등 처리하는 것들.

var image = document.querySelector("#marshal"); image.onclick = function() { alert("쭈니는 귀엽다. "); }; image.onmouseover = function() { alert("쭈니를 눌러보세요. "); }; image.onmouseout = function() { alert("쭈니 위에 마우스를 올려보세요"); };

document.querySelector은 괄호안에 #marshal이라고 들어있는데, 연결된 html문서의 marshal이라는 id를 가진 요소를 가져온다. 이미지의 id를 #marshal로 주었었고, 그래서 var image에 쭈니 이미지 연결.
그리고 이 이미지 따라 image.onclick, image.onmouseover등 다양한 이벤트 처리기를 실행할 수 있다.

---

<js에서의 객체>
날짜 및 시간 등 미리 정의되어 있는 내장객체, DOM(문서 객체 모델), 브라우저 객체 모델, 사용자가 직접 정의하는 사용자 정의 객체 등이 있다. 객체는 간단하게 정의하자면 속성과 기능을 묶어둔 것이다.

var Marshal = { species: "squirrel", gender: "male", birth:"0929", amibo : 264 , character : "smug", talking: function() { alert("sulky"); } };

사용자 정의 객체의 경우, <속성이름: 값> 의 형태로 정의되어 있으며 함수이름 : function() { 내용 } 꼴로 객체의 기능도 정의할 수 있다. 위 케이스는 Marshal이라는 객체를 선언함과 동시에 생성하는데, 이 경우 위의 정해진 값을 가진 객체를 한번만 만들어 낼수 있다. 만약 같은 형태의 객체를 여러번 만들거라면 생성자 함수로 인스턴스 여러개를 만드는 방법을 사용하면 된다.

function animal(gender, character, birthday) { this.gender = gender; this.character = character; this.birthdat = birthday; } 

var Marshal = new animal("male", "smug", "0929"); var Raymond = new animal("male", "smug", "1001"); var Wolfgang = new animal("male", "cranky", "1125"); var Diana = new animal("female", "snooty", "0104");

이런식으로 animal인스턴스 여러개를 만들어낼 수 있다.

---

배열 객체 관련 함수들. 더 많은데 쓸것같은거 몇개만 정리함.

concat	배열을 연결 , A.concat(B)면 A뒤에 B가 연결된다. 기존의 A, B는 그대로 두고 새로운 배열을 만든다.
push	배열 맨 뒤에 요소 추가 Ex) A.push("1") => A의 맨 뒤에 1추가 (기존 A배열 바뀜)
unshift	배열 맨 앞에 요소 추가
pop	배열 맨 뒤 요소 삭제
shift	배열 맨 앞 요소 삭제
splice	(index, 삭제 개수, 추가할 요소) 를 매개변수로 가진다. 삭제 개수의 경우 index로부터 몇개 삭제할지, 추가할 요소는 index부터 어떤 요소를 추가할지 넣어주면 된다. (여러 개 추가 가능)
slice	(index, 요소 개수) 요소개수 null일시 끝까지 추출. 원래 배열은 변경되지 않는다.
sort	정렬함수. 아무것도 입력 X시 유니코드 문자상의 오름차순으로 정렬된다. 문자는 괜찮은데 숫자 정렬시에 30이 4보다 앞에 올수도 있다. 이를 방지하기 위해 사용자가 비교함수를 정의해둬야 함.

추가로, splice 사용 예제 코드

>> var array = ["marshal", "woolfgang", "raymond", "diana", "chief", "fang"]; << undefined >> array.splice(2, 2); << (2) =["raymond", "diana"] //index 2번부터 2개라서 raymond, diana삭제 >> array << (4) ["marshal", "woolfgang", "chief", "fang"] ----------------------------------------------------------------------- >> array.splice(1,0,"peanut", "poppy"); << [] //아무것도 삭제 하지 않아서 빈 배열 출력 >> array << (6) ["marshal", "peanut", "poppy", "woolfgang", "chief", "fang"] //index 1번위치에 요소가 추가됨. 

추가로 일반적인 프로그래밍 언어에서 반복문을 통해 배열요소 출력하는것도 js에서 가능하다. 배열의 길이만큼 반복문을 돌기 때문에 array.length라고 사용해주면 된다.

array.sort(); // 결과 : ["chief", "fang", "marshal", "peanut", "poppy", "woolfgang"] for (var i = 0; i<array.length; i++) { console.log(`"villager name : ${array[i]}"`); } // 결과 "villager name : chief" "villager name : fang" "villager name : marshal" "villager name : peanut" "villager name : poppy" "villager name : woolfgang"

---