[JavaScript] 이벤트 / 브라우저객체모델(BOM) / window객체 / title, location, bgColor, fgColor / location 객체 / href, protocol, host, hostname, port

자바 웹 개발자가 될거야/JSP

[JavaScript] 이벤트 / 브라우저객체모델(BOM) / window객체 / title, location, bgColor, fgColor / location 객체 / href, protocol, host, hostname, port

whitz 2021. 11. 2. 15:09

- 정규표현식 알아보기

· Community Patterns 탭으로 들어가서 확인하기

https://regexr.com/

RegExr: Learn, Build, & Test RegEx

RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp).

regexr.com

< 브라우저 객체 모델 (BOM) + 이벤트 >

- 이벤트 : 브라우저에서 발생하는 모든 동작을 이벤트라 함

· 특정 이벤트 발생시 동작을 실행해주는 객체 → 이벤트 리스너 + 핸들러

- 핸들러

<input type="button" value="버튼" onclick="alert('클릭이벤트 발생!');"><br>
		
<button ondblclick="alert('더블클릭')"> 버튼2 </button> <br>

<input type="button" value="버튼3" onmouseover="aler('마우스 오버!!!');"><br>

· onclick : 클릭 이벤트

· ondblclick : 더블클릭 이벤트

· onmouseover : 마우스 올렸을 때 이벤트

https://developer.mozilla.org/ko/docs/Web/API/GlobalEventHandlers/onclick

GlobalEventHandlers.onclick - Web API | MDN

GlobalEventHandlers 믹스인mixin의 onclick 속성은 주어진 요소의 click 이벤트를 처리하기 위한 event handler입니다.

developer.mozilla.org

https://www.w3schools.com/jsref/dom_obj_event.asp

HTML DOM Event Object

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

- 키보드

<input type="text" onkeyup="alert('키보드 입력');"> <br>

<input type="text" onfocus="alert('포커스');"> <br>

· onkeyup : 키보드에 입력시

· onfocus : 포커스가 갔을 때

- 테이블

<table>
	<tr>
		<td id="td1" onmouseover="style.background='yellow';"
			onmouseout="style.background='orange';">1</td>
		<td onmouseover="style.background='yellow';"
			onmouseout="style.background='orange';">2</td>
		<td onmouseover="style.background='yellow';"
			onmouseout="style.background='orange';">3</td>
		<td onmouseover="style.background='yellow';"
			onmouseout="style.background='orange';">4</td>
	</tr>		
</table>

· onmouseover : 마우스 올렸을 때

· onmouseout : 마우스 뺐을 때

< 브라우저객체 모델 >

- 브라우저에 내장되어 있는 객체

window
document	screen	location	history	navigator

- 모든 BOM은 window 객체를 포함하고 있음 → window 객체 생략 가능

document.write("출력!");
window.document.write("출력!");

// 둘다 같은 의미

< window 이벤트 >

- 이벤트 : 브라우저에서 발생하는 모든 행동

- 특정 이벤트 발생시 동작을 실행해주는 객체 → 이벤트 리스너 + 핸들러

① 브라우저 새창 열기 ( 팝업창 )

- window.open("주소(url)", "창이름", "필요옵션") ;

window.open("http://www.naver.com", "NAVER", "width=400, height=500");

- 버튼과 새창 열기 연결

<body>

<input type="button" value="새창열기" onclick="window.open('../js1/Test1.html');"> <br>

</body>

· .. 의 의미 : 위치를 상위폴더로 이동

<script>

function myWindowOpen(){
	window.open('Test7_1.html', '', 'width=400, height=500');
}

</script>

<body>

<input type="button" value="새창열기2" onclick="myWindowOpen();"><br>

</body>

· 스크립트의 함수로 연결도 가능

② 브라우저 창 닫기

- window.close() ;

- 버튼 클릭시 창 닫기

<input type="button" value="창 닫기" onclick="window.close();">

< window 객체 >

- 속성 : title, location, bgcolor, fgcolor

① 브라우저 title

- document.title

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document 객체</title>
</head>

- title 정보 변경

<script>
	function fun2(){
		window.document.title = "바꿀 타이틀 제목";
	}
</script>

② 브라우저 location

- document.location

③ bgColor

- 배경색

- document.bgColor

④ fgColor

- 폰트색

- document.fgColor

<script>

function fun3(){
	window.document.bgColor = "black";
	window.document.fgColor = "yellow";
		
}

</script>
<body>

<input type="button" value="document 속성변경(배경색, 글자색 변경)" onclick="fun3();"> <br>

</body>

- 라디오버튼 클릭시 해당 내용이 배경색으로 나오도록

<script>

function fun4(color){
	window.document.bgColor=color;			
}
        
</script>

<body>

<input type="radio" name="col" onclick="fun4('ORANGE');"> ORANGE
<input type="radio" name="col" onclick="fun4('PURPLE');"> PURPLE
<input type="radio" name="col" onclick="fun4('PINK');"> PINK
    
</body>

· fun4 함수에서 color를 매개변수로 받음 → 그 매개변수가 배경색으로 지정

· 라디오버튼을 name을 같게 하면 한 그룹으로 묶여서 하나만 선택가능 !