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"