자바와 함수가 생긴 모양이 다르다.
function이라고 선언만 해준다.
얘는 함수입니다 라고 알려만 주는 것이다.
add 함수에 매개변수를 받을 때
let n1, let n2라고 적는 게 아니라
선언할 필요 없이 n1, n2라고만 적는다.
리턴을 해주고 싶어도 타입이 없으니까 그냥
return n1 + n2; 하면 끝이다.
<button onclick="add(1, 3)">더하기</button>
<script>
// 자바스크립트 함수의 매개변수는 선언이 필요없다.
// 자바스크립트 함수의 return이 있든 없든 신경안써도 된다.
function add(n1, n2) {
// return n1 + n2; // 리턴 하고 싶으면
console.log(n1 + n2); // 리턴 하기 싫으면
}
</script>리턴하기 싫다면 console.log(n1 + n2) 끝!
이 함수는 버튼으로 제어해줄 것이다.
이 버튼을 클릭했을 때 일어날 이벤트를 설정할 때는
2가지 방법이 있다.
1. onclick 속성 걸어주기
클릭했을 때 어떤 일이 생기게 할 것이냐?
add( ) 메서드를 호출해줄 것이다.
필요한 인수도 빼먹지 말고 넣어주자.
<button onclick="add(1, 3)">더하기</button>
자바 Swing에서는
버튼을 지켜보고 있는 리스너를 만들었었다.
그렇다면 우리가 만들어준 버튼은
클릭되는 것을 누가 지켜보고 있을까?
브라우저이다.
근데 onclick은 리스너가 아니다.
외부에서 누군가가 버튼이 클릭되는지 지켜보는 게 리스너인데
이 버튼은 자기 자신이 클릭되는 것을 지켜보고 있다.
자기 자신에게 이벤트를 걸어서 언제 클릭되는지 기다리는 것이다!
해당 element가 기다리는 것 => 그 element에 이벤트를 건 것.
2. 이벤트 리스너
자바스크립트는 내장 객체(라이브러리)를 가지고 있다.
window
↓
DOM(Document Object Model) : document
BOM(Browser Object Model) : navigator, screen, location, frames, history, XMLHttpRequest
JavaScript : Object, Array, Function
윈도우라는 객체는 브라우저의 모든 것을 제어할 수 있다.
DOM의 document는 body의 dom들을 관리, 제어하는 객체이다.
dom은 html의 element를 말한다.
document까지만 입력하면 body 전체를 가리키는 것을 볼 수 있다!
바디의 특정 dom을 검색하기 위해서 콘솔 창에
window.document.querySelector( );
를 입력해보자.
window는 생략이 가능하다.
괄호 안에는 찾고 싶은 대상을 적는데 css 선택자를 이용해 찾아준다.
클래스를 찾을 때는 .
id 찾을 때는 #으로 찾는다.
element를 찾는 것도 가능한데 querySelector를 사용하면
하나의 결과만 나오기 때문에
querySelectorAll을 사용해 모든 결과를 볼 수 있다.
window를 스윙의 JFrame,
document를 스윙의 JPanel이라고 생각하면 좋을 것 같다!!
기존 http 프로토콜은 요청 시에 html 파일을 응답해주기 때문에
전체가 새로고침 되는데
부분만 리로드 되기 위해서는 json 데이터를 응답받아야 한다.
json 데이터를 받는다고 화면에 뿌려지지는 않는다.
이 데이터로 그림을 그리기 위해서는
자바스크립트로 해당 dom 박스를 찾아서
그림을 그려, 데이터를 뿌려주는 것이다.
자바스크립트로 dom을 제어하는 것이다.
이렇게 부분 리로딩하는 기술을 AJAX라고 한다.
<body>
<h1>자바스크립트 공부하기 - 2단계</h1>
<hr/>
<button onclick="add(1, 3)">더하기</button>
<button id = "jooho">빼기</button>
<script>
// 자바스크립트 함수의 매개변수는 선언이 필요없다.
// 자바스크립트 함수의 return이 있든 없든 신경안써도 된다.
function add(n1, n2) {
// return n1 + n2; // 리턴 하고 싶으면
console.log(n1 + n2); // 리턴 하기 싫으면
}
let buttonDom = document.querySelector("#jooho");
// buttonDom이 이벤트 target
buttonDom.addEventListener();
</script>
</body>
</html>
이벤트 리스너의 경우
어떤 행위를 했을 때, 어떤 이벤트를 발생시킬지만 알면 된다.
https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener
EventTarget.addEventListener() - Web API | MDN
EventTarget 인터페이스의 addEventListener() 메서드는 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정합니다.
developer.mozilla.org
이벤트 리스너의 구문은 다음과 같다.
addEventListener(type, listener);
addEventListener(type, listener, options);
addEventListener(type, listener, useCapture);
어떤 이벤트 종류(type)가 있는지 살펴보자.
https://developer.mozilla.org/ko/docs/Web/Events
이벤트 참조 | MDN
DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가
developer.mozilla.org
<body>
<h1>자바스크립트 공부하기 - 2단계</h1>
<hr/>
<button onclick="add(1, 3)">더하기</button>
<button id = "jooho">빼기</button>
<script>
// 자바스크립트 함수의 매개변수는 선언이 필요없다.
// 자바스크립트 함수의 return이 있든 없든 신경안써도 된다.
function add(n1, n2) {
// return n1 + n2; // 리턴 하고 싶으면
console.log(n1 + n2); // 리턴 하기 싫으면
}
function minus() {
alert("빼기 함수가 실행되었습니다.")
}
let buttonDom = document.querySelector("#jooho");
// buttonDom이 이벤트 target
// 메서드 이름만 바인딩 : 주소만 걸어두는 것
// 괄호까지 적으면 바로 호출되기 때문!!
buttonDom.addEventListener("click", minus);
</script>
</body>
이벤트 리스너를 만들 때 주의할 점이
minus 메서드를 적을 때 괄호를 붙여주지 않는 것이다.
버튼 클릭 시에 메서드가 호출되어야 하는데
괄호가 붙어있으면 인터프리터가 바로 메서드를 호출시켜버리기 때문이다.
그렇기 때문에 괄호를 적지 않고 메서드 이름만 적어두어 바인딩하는 것이다.
주소만 걸어두는 것!!
function minus(e) {
console.log(e);
alert("빼기 함수가 실행되었습니다.")
}
이벤트 리스너에 e라고 적고 출력해보자.
나는 넘긴 적 없는 값을 브라우저가 이벤트에 대한 모든 정보를
e에 담아서 전달해준 것이다.
e안에는 수많은 정보가 들어있다.
이중에 target에 대한 정보만 살펴보자.
코드에서 e를 통해 target의 정보를 변경할 수도 있다.
function minus(e) {
console.log(e);
e.target.innerHTML = "빼기아님";
e.target.className = "blue";
alert("빼기 함수가 실행되었습니다.")
}
이벤트가 가지고 있는 모든 정보를 공부할 필요는 없다.
타겟에 대해서만 잘 알아보도록 하자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red {
color: red;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<h1>자바스크립트 공부하기 - 2단계</h1>
<hr/>
<button onclick="add(event, 1, 3)">더하기</button>
<button id = "jooho" class="red">빼기</button>
<script>
// 자바스크립트 함수의 매개변수는 선언이 필요없다.
// 자바스크립트 함수의 return이 있든 없든 신경안써도 된다.
function add(e, n1, n2) {
console.log(e);
// return n1 + n2; // 리턴 하고 싶으면
console.log(n1 + n2); // 리턴 하기 싫으면
}
function minus(e) {
console.log(e);
e.target.innerHTML = "빼기아님";
e.target.className = "blue";
alert("빼기 함수가 실행되었습니다.")
}
let buttonDom = document.querySelector("#jooho");
// buttonDom이 이벤트 target
// 메서드 이름만 바인딩 : 주소만 걸어두는 것
// 괄호까지 적으면 바로 호출되기 때문!!
buttonDom.addEventListener("click", minus);
</script>
</body>
</html>
[출처]
https://cafe.naver.com/metacoding
메타코딩 : 네이버 카페
코린이들의 궁금증
cafe.naver.com
메타 코딩 유튜브
https://www.youtube.com/c/%EB%A9%94%ED%83%80%EC%BD%94%EB%94%A9
메타코딩
문의사항 : getinthere@naver.com 인스타그램 : https://www.instagram.com/meta4pm 깃헙 : https://github.com/codingspecialist 유료강좌 : https://www.easyupclass.com
www.youtube.com
