260910_JS_ch17-18

ch17. 함수와 이벤트

변수 스코프

• var 변수 : 함수 레벨 변수 → 지역 변수와 전역 변수로 나뉨
  - 변수 선언 시 var 예약어 바뜨리면 전역 변수로 취급됨
  - var 변수의 hoisting : 웹 브라우저의 js interpreter가 변수만 따로 기억하는 과정에서 생기는 undefined 문제 → interpreter가 실제로는 console.log(y); var y=20; 인데 var y; console.log(y); y=20; 처럼 인식함 → 선언하기 전에 실행하더라도 오류가 생기지 않음(이미 선언한 것으로 인식함)
  - 변수 재선언 가능
• 위 불편함으로 변수 선언시 let, const 사용하도록 권장함
• var은 함수 영역의 스코프를 가지지만 let과 const는 블록 영역의 스코프를 가짐
• let은 변수 재선언 불가하며 hoisting 문제도 없음

함수

function 함수명() {
	...
}

function add_para(a, b) {
	return a+ b;
}
// 매개변수 기본값 지정
function para(a=2, b=10, c) {
	return a*b+c;
}
// 익명 함수
let sum1 = function(a, b) {
	return a+b;
}
// 즉시 실행 함수 (immediately invoked function expression)
let sum2 = (function(a,b) {
	return a+b;
}(2, 3));
//화살표 함수
let sum3 = (a, b) => a + b;

document.write(`익명: ${sum1(2, 3)} iife: ${sum2} arrow: ${sum3(2,3)}`)

• 익명 함수 : 이름 없는 함수 → 함수 자체가 식이므로 함수를 변수에 할당하거나 다른 함수의 매개변수로 사용할 수 있음
• 즉시 실행 함수 : 함수 정의와 동시에 실행함 → 주로 변수 스코프 제한해서 코드 충돌 방지 목적으로 많이 사용

이벤트와 이벤트 처리기

• 이벤트 : 웹 문서 영역 안에서 이루어지는 동작만 (ex. 브라우저 제목 표시줄 클릭은 이벤트 아님)
• 마우스 이벤트 : click, dbclick, mousedown, mousemove, mouseover, mouseout, mouseup
• 키보드 이벤트 : keydown, keypress, keyup
• 문서 로딩 이벤트 : abort, error, load, resize, scroll, unload
• 폼 이벤트 : blur, change, focus, reset, submit
• event handler : 이벤트 발생했을 때 실행하는 함수
• <태그 on이벤트명 = "함수명">

<body>
	<ul>
		<li><a href="#" onclick="changeBg('green')">Green</a></li>
		<li><a href="#" onclick="changeBg('Orange')">Orange</a></li>
		<li><a href="#" onclick="changeBg('Purple')">Purple</a></li>
	</ul>		
	<div id="result"></div>
	
	<script>
		function changeBg(color) {
			let result = document.querySelector('#result');
			result.style.backgroundColor = color;
		}
	</script>
</body>

---

ch18. js와 객체

객체란?

• 객체 object : 대상을 그룹화하여 정보와 동작 묶어둔 거. (like 붕어빵틀)
  - 인스턴스 = 붕어빵
  - 인스턴스 만들 때는 new 예약어 사용 : new 객체명
  - let now = new Date();
  - 객체마다 method와 property
  - method : 함수
  - property : 특징이나 속성
  - . 으로 사용함 / ex. let now_time = now.toLocaleString();
• 내장 객체 : 자주 사용하는 요소 미리 객체로 정의해둔 것. Number, Date, Boolean, Array, Math 등
• 문서 객체 모델 DOM : JS를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서 체계적으로 정리한 방법
• 웹 브라우저 객체 : 브라우저에서 사용하는 정보를 객체로 지정해둠

js의 내장 객체

<script>
let now = new Date();
document.write(now);

let arr1 = new Array();
let arr2 = Array("one", "two", "three");
let arr3 = ["11", "22", "33"];

for (let i=0; i<arr3.length; i++) {
    document.write(`<p>${arr3[i]}</p>`);
}

let arr2_concat_arr3 = arr2.concat(arr3);
document.write(`<p>arr2+arr3 : ${arr2_concat_arr3}<\p>`);
let string1 = arr3.join('/');
document.write(`join: ${string1}`);

arr2.push("four", "five");
arr3.unshift("00");
document.write(`<p>slice: ${arr3.slice(2,4)}</p>`);

let date1 = new Date('2025-06-03');
</script>

• Array 객체 : concat, every, filter, forEach, indexOf, join, push, unshift, pop, shift, splice, slice, reverse, sort, toString
  - push와 unshift 실행하면 : 원래 있던 배열이 바뀜
  - pop와 shift : 원래 배열 바뀜
  - splice : 요소 한번에 2개 이상 추가하거나 삭제할 때 사용
  - slice : 기존 배열 변화 없이 요소 꺼냄
• Date 객체
  - getTime : 1970년 1월 1일 자정 이후의 시간을 ms(1/1000초)로 표시함 (이 날짜는 유닉스 타임스탬프(Unix Epoch)의 시작점이라고 함)
• Math 객체 : Date, Array 객체와 다르게 예약어 new로 인스턴스 만들지 않고 바로 프로퍼티와 메소드 사용 가능

브라우저와 관련된 객체

• window 객체 : 브라우저 창이 열릴 때마다 하나씩 만들어짐. 브라우저 창 안의 요소 중 최상위에 있음
  - alert()나 prompt() 는 원래 window 객체의 method라서 window.alert() 해야됨. → window 객체는 기본 객체라서 생략 가능
  - open(사이트 경로, 창 이름, 창옵션) : 새 브라우저 창 엶. 창 옵션으로 위치나 크기 지정 가능
  - close() : 브라우저 창 닫는 method
• document : body 태그 만나면 만들어짐. html 문서의 정보가 담겨짐
• navigator : 현재 사용하는 브라우저의 정보
  - 웹 브라우저 버전 정보나 플러그인 설치 정보 등 담겨있음
  - 사용자가 수정할 수 없으며 가져와서 보여줄 수만 있음 (읽기 전용)
• history : 현재 창에서 사용자의 방문 기록 저장 (읽기 전용)
• location : 현재 페이지의 URL 정보가 담겨 있음 → 브라우저 주소 표시줄과 관련됨
  - 현재 브라우저 창에서 열어야 할 사이트나 문서 지정 가능
• screen : 현재 사용하는 화면 정보를 다룸
  - 사용자의 화면 크기나 정보 알려줌
  - 화면 방향 잠그거나 해제할 수 있음

// window
<script>
let blocked = false;

function openPop() {
  let newWin = window.open("notice.html", "pop_name", "width=500, height=400, left=100, top=200");
  if (newWin == null) {
    alert("팝업이 차단되어 있습니다. 팝업 차단을 해제해주세요");
  }
}
openPop();
    
</script>

// location
<div id="display">
	<script>
		document.write(`<p><b>location.href: </b>${location.href}</p>`);
		document.write(`<p><b>location.host: </b>${location.host}</p>`);
		document.write(`<p><b>location.protocol: </b>${location.protocol}</p>`);
	</script>
</div>
<button onclick="location.replace('http://www.easypub.com')">이지스퍼블리싱 홈페이지로 이동하기</button>

// screen
<script>
	document.write(`<p><b>screen.availWidth: </b>${screen.availWidth}</p>`);
	document.write(`<p><b>screen.availHeight: </b>${screen.availHeight}</p>`);
	document.write(`<p><b>screen.width:</b> ${screen.width}</p>`);
	document.write(`<p><b>screen.height : </b> ${screen.height}</p>`);

</script>