JAVA 웹개발 과정 국비 41일차 정리
41일차
※ 배우는 과정이므로 정확하지 않을 수 있습니다.
잘못된 점은 알려주시면 수정하도록 하겠습니다!
1. Javascript 이어서..
1) setAttribute(String name, Object value) : void
이름이 name인 속성의 값을 value로 지정한다.
div.setAttribute("name","test"); 처럼 적으면 아무 변화가 일어나지 않는 속성과 값도 적용시킬 수 있다.
개발자도구로 눌러보면 name=”test”로 잘 적용이 된 것을 볼 수 있다.
마찬가지로 스타일도 적용해줄 수 있다.
덮어씌워지므로 기존에 있던 스타일은 사라지는 것에 유의한다.
See the Pen js by kkongkeozzang (@kkongkeozzang) on CodePen.
2) event 객체
이벤트가 일어나는 과정에서 이벤트 소스를 이벤트 리스너가 지켜보고 있다.
이벤트가 일어나는 순간 이벤트리스너는 이벤트가 일어났다는 것을 감지하지만 이벤트 핸들러가 설정이 되어있지 않는다면 감지는 했는데 할게 없네? 하고 무시한다.
반대로 핸들러가 설정되어 있다면 이벤트 리스너는 이벤트가 일어나는 순간 이벤트 핸들러에게 달려가서 핸들러야! 이벤트가 감지되었으니 어서 실행해! 라고 알려준다.
이벤트 리스너가 핸들러에게 달려가는 과정에서 리스너는 빈손으로 가지 않는다.
여러가지 이벤트의 상황 정보를 들고 간다. 즉, 함수에 값이 전달된다.
이 값을 전달하려면 함수 파라미터에 변수를 정해주면 된다. 대부분 event의 e를 따서 e를 넣어준다.
아래 예시는 e를 설정하여 마우스를 움직일 때(onmousemove) x좌표와 y좌표를 핸들러에게 전달하여 좌표를 출력하는 것을 보여준다.
See the Pen js by kkongkeozzang (@kkongkeozzang) on CodePen.
3) 키보드 관련 event
onkeyup : 키를 눌렀다가 놓는 순간을 감지하는 이벤트
어떤 키가 눌렸는지는 이벤트의 정보 e 변수의 keyCode 필드가 가지고 있다.
따라서 innerHTML로 출력해주면 아래와 같이 어떤 키가 눌렸는지 확인할 수 있다.
See the Pen js by kkongkeozzang (@kkongkeozzang) on CodePen.
4) mouseover VS mouseenter
요소 안에 마우스가 있는지를 감지하는 이벤트는 두 종류가 있다.
mouseover 와 mouseenter 이다.
성격은 동일하지만 기능의 차이가 있는데, mouseover는 이벤트 버블링이 발생하는 이벤트이다.
즉, 자식 요소의 태그에 들어가도 동일하게 이벤트가 발생한다.
반대 개념으로 mouseout 과 mouseleave가 있다.
| mouseover | mouseout | mouseenter | mouseleave | |
|---|---|---|---|---|
| 이벤트 | 마우스가 요소 영역으로 들어갈 때 | 마우스가 요소 밖으로 나갈 때 | 마우스가 요소 영역으로 들어갈 때 | 마우스가 요소 밖으로 나갈 때 |
| 이벤트 버블링 | O | O | X | X |
| 자식 요소 있을 때 | 자식 요소 범위 포함 | 자식 요소 범위 포함 | 오직 내 영역만 | 오직 내 영역만 |
See the Pen js by kkongkeozzang (@kkongkeozzang) on CodePen.
위의 박스를 보면 이해가 좀 더 쉬운데, 왼쪽 박스는 버블링이 일어나 자식요소에 들어갈때도 mouseover가 카운트되는 반면, 오른쪽 박스는 버블링이 없기때문에 자식요소에 들어가도 카운트가 늘어나지 않는다.
원하는 상황에 맞춰 적절하게 사용하면 된다.
5) open(“url”,”고유name”,”환경설정”)
open을 사용하면 팝업창을 띄울 수 있다.
파라미터는 순서대로 팝업창의 주소 url, 팝업창의 고유 이름(아무거나 - 중요하지 않음), 팝업창의 환경설정 (너비, 높이 등..) 을 설정한다.
<button id="event">Event!</button>
document.getElementById("event").onclick = function(){
open("http://www.naver.com", "pop1", "width=400px, height=300px");
};
6) 스크립트의 순서
스크립트가 이벤트요소보다 위에 있으면 당연하게도 오류가 나면서 실행되지 않는다.
만약 위의 5번 코드에서 js코드가 html코드보다 위에 있다면, document.getElementById("event") 가 null이 되면서 Cannot set properties of null(setting ‘onclick’)이 뜬다.
null 값에 onclick을 셋팅할 수 없다는 것이다.
개발자들 중에서는 스크립트와 html을 분류해서 쓰는 경우가 있다.
script를 head 영역으로 빼버리는 것이다.
이 때, 위와 같은 오류가 나지 않게 하려면 window.onload를 사용해 이벤트를 적용하면 된다.
window.onload는 window의 로딩이 완료되었을 때(= /html까지 실행하고 끝나는 지점)를 가리킨다.
<head>
<script>
window.onload = function() {
// 이 안에 script 코드를 넣어준다.
}
</script>
</head>
위와 같이 head 태그 안에 script를 별도로 적어 onload 이벤트를 실행시키면 렌더링이 끝나고 다음에 script 코드를 실행시키기 때문에 오류가 나지 않는다.
body 태그에 적어줄 때 처럼 여러번 쓰면 마지막에 쓴 것으로 덮어씌워지니 한번만 실행될 수 있게 한다.
이 기능을 이용해서 예전에는 스팸사이트에 다른 페이지로 연결되게 만드는 장난을 많이쳐서 브라우저에서 특정 기능들을 막아놓은 경우가 많다고 한다.
7) 배열 (Array)
① 선언과 특징
배열은 대괄호 [ ]로 만든다.
자료형과 사이즈를 명시해주지 않아도 된다.
자바의 ArrayList와 비슷한 형태로 사이즈가 알아서 변동된다. (동적배열)
<div id="box"></div>
let arr = [];
arr[0] = "Hello"; // 문자열 넣기
arr[2] = 30; // 숫자 넣기
arr[3] = document.getElementById("box"); // 객체 넣기
arr[4] = function(num1, num2) { // 함수 넣기
return num1 + num2;
}
arr[5] = [1,2,3] // 배열 넣기
console.log(arr); // ['Hello', 비어 있음, 30, div#box, ƒ, Array(3)]
console.log(arr[0]); // Hello
console.log(arr[1]); // undefined
console.log(arr[2]); // 30
arr[3].innerHTML = "Hello World"; // div에 Hello World 출력
let result = arr[4](10,20);
console.log("배열 4번에 저장된 함수 실행 결과 : " + result); // 30
console.log(arr[5][0]); // 1
② 배열에서 사용하는 함수
ⓐ indexOf(값) : index
배열 내에서 항목을 검색해서 그 index를 반환하는 함수
찾을 수 없는 값을 파라미터에 넣었을 때는 -1이 리턴된다.
let arr = ["java","C++","Python","Ruby"];
let result1 = arr.indexOf("Python");
console.log(result1); // 2
ⓑ join(“연결부분”) : 문자열
배열의 모든 요소를 파라미터를 이용하여 하나의 문자열로 연결하는 함수
let arr = ["java","C++","Python","Ruby"];
let result2 = arr.join(":");
console.log(result2); // java:C++:Python:Ruby
ⓒ reverse() : 기존 배열의 주소값
기존 배열의 순서를 뒤집는다.
뒤집은 배열을 따로 반환하는 것이 아님을 주의.
let arr = ["java","C++","Python","Ruby"];
arr.reverse();
console.log(arr); // Ruby,Python,C++,java
ⓓ push(값) & pop()
- push : 배열의 가장 뒤쪽에 값을 넣어주는 함수. 리턴값은 새 배열의 길이.
- pop : 배열의 가장 뒤쪽에 값을 꺼내는 함수. 리턴값은 삭제한 요소.
let arr = [];
arr.push("Java");
arr.push("C++");
arr.push("C#");
console.log(arr); // ['Java', 'C++', 'C#']
let popData = arr.pop();
console.log(arr + ":" + popData); // Java,C++:C#
ⓔ unshift(값) & shift()
- unshift : 배열의 가장 앞쪽에 값을 넣어주는 함수. 리턴값은 새 배열의 길이.
- shift : 배열의 가장 앞쪽에 값을 꺼내는 함수. 리턴값은 삭제한 요소.
let arr = ["java","C++"];
let shiftData = arr.shift();
console.log(arr + " : " + shiftData); // C++ : Java
arr.unshift("Python");
console.log(arr); // ['Python', 'C++']
ⓕ slice(start index, end index) : 추출한 배열
배열 안에서 특정 범위 내의 요소들을 추출하는 기능.
원본은 수정되지 않고, 추출한 배열을 리턴한다.
start 인덱스는 포함되며, end 인덱스는 포함되지 않으므로 주의해야한다.
end 인덱스는 생략할 수 있다. (생략하면 끝까지)
let arr = [1,2,3,4,5,6,7,8];
let subArr = arr.slice(1,4);
console.log("추출 된 항목 배열 : " + subArr); // 2,3,4
let subArr2 = arr.slice(3);
console.log("추출 된 항목 배열2 : " + subArr2); // 4,5,6,7,8
ⓖ splice(start index) : 제거한 요소를 담은 배열
배열 내에서 특정 시작점부터 특정 개수만큼의 데이터를 삭제하거나 특정 위치에 데이터를 끼워넣는 함수.
두번째 파라미터는 slice와 다르게 삭제할 데이터의 개수이니 주의할 것!
원본이 수정된다.
- 첫번째 파라미터 : 시작 index (포함)
- 두번째 파라미터 : 삭제할 데이터 개수 (생략가능)
- 세번째 파라미터 : 그 자리에 끼워넣을 값.(생략가능) 가변인자이다.
let arr = [1,2,3,4,5,6,7,8];
arr.splice(1,2,"Hi");
console.log(arr); // 1,Hi,4,5,6,7,8
arr.splice(1,2); // 1번 index에서부터 2개를 삭제
arr.splice(4); // 4번 index로부터 뒤쪽 모든 데이터 삭제
arr.splice(1,2,"Hi"); // 1번 index에서부터 2개를 지우고 해당 자리에 "Hi"를 끼워넣기
arr.splice(1,1,"Hi"); // 1번 index 데이터를 지우고 그 자리에 "Hi"를 배치
arr.splice(1,0,"Hi"); // 1번 index자리에 "Hi"를 끼워넣고 기존 데이터는 뒤로 밀기
arr.splice(3,2,"Hi","Hello"); // 3번째 파라미터는 가변인자
댓글남기기