1. (JQuery)
$(function(){ // 웹브라우저 내의 모든 요소가 준비가 되어야 실행
// 실행할 기능을 정의해주세요.
});
2. (JQuery)
$.fn.메소드명 = function (인자명) {
//내용
}
3.
자바스크립트 (Javascript)
function 메소드명 (인자값...){
}
4. (1과 4는 등치) (JQuery)
$(document).ready(function(){ // 웹브라우저 내의 모든 요소가 준비가 되어야 실행
....
});
// 웹브라우저 내의 모든 요소가 준비가 되어야 실행 (Javascript)
5. window.onload = function(){
....
}
마우스를 올렸을 때 class="hover" 속성을 추가시키고 마우스가 나가면 class속성을 없애버립니다.
이벤트 리스너의 특징은 on을 안 붙힙니다 앞에 테이블로 적어뒀던 onclick, onMouseover 등에서 on을 뺍니다.
<!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>
</head>
<style>
</style>
<body>
<form id ="frm">
<fieldset>
<legend>주소록</legend>
<textarea name ="txt" id="txt2" cols ="30" rows="10">입력해주세요</textarea><br>
<input type ="submit" id = "q" value ="불러오기">
</fieldset>
</form>
<script>
var address =["김철수","email: kcs@gmail.com"]; // 미리 값을 준비
var q = document.getElementById('frm'); // from id값 받아온다.
function addr_search(){
var textarea = q.txt; // q의 name값을 가져옴 q.txt 여기서 txt는 name값
textarea.value = '이름 / 주소 \n'; // .value란 해당 태그에 해당하는 글자를 의미 여기선 입력해주세요 이다.
textarea.value += address[0] + ' , ' + address[1] + '\n'; // 준비한 값들을 넣는 과정
}
q.addEventListener('submit', function(){ // 버튼을 눌렀을 때 function()이하의 내용이 작동한다.
event.preventDefault(); // 폼 전송 기본 이벤트 발생 안 하도록 함
addr_search(); // addr_search 메소드를 실행시킴
})
</script>
</body>
</html>
홈페이지가 준비가 완료되면 h1 css생성자를 가져오고 h1.onclick 을 사용할 수 있게 합니다.
this는 자기자신을 의미합니다. 여기선 h1을 의미하죠
// ──────────────────────────── 이벤트 바인딩 ────────────────────────────
// 우측 마우스 클릭시 이벤트 리스너
document.addEventListener('contextmenu', handleCreateContextMenu);
// 좌측 마우스 클릭시 이벤트 리스너
document.addEventListener('click', handleClearContextMenu);
// 드래그 했을 때 이벤트 리스너
document.addEventListener("drag", function (event) {
console.log("이동 중");
}, false);
// 블럭지정 했을 때 이벤트 리스너
document.addEventListener('selectionchange', () => {
console.log(document.getSelection().toString()); // 블럭지정 내용
});
