KDT/JavaScript

240201 자바스크립트

001cloudid 2024. 2. 1. 17:41
728x90
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>이벤트와 이번트 처리기</title>
</head>
<h1>인라인 방식(attribute 방식)</h1>
<p>문서 로딩 이벤트</p>
<body onload="alert('onload : 문서 로딩이 끝남')">

<p>마우스 이벤트</p>
<button type="button" onclick="alert(`onclick : 마우스 클릭했을때`)">버튼을 클릭할 때 이벤트</button><br>

<p>키보드 이벤트</p>
<input type="text" name="text1" onkeyup="alert(`onkeyup : 키보드를 눌렀다가 멈췄을 때`)"><br>
<p> 폼 이벤트</p>
<input type="text" name="text2" onblur="alert(`onblur : 포커스를 잃었을 때`)"><br>
<input type="text" name="text3" onchange="alert(`onchange : 내용이 변경될 때`)" value="내용을 변경해주세요"><br>
<select name="list" onchange="alert(`onchange : 내용이 변경될 때`)">
<option>목록1</option>
<option>목록2</option>
<option>목록3</option>
</select><br>
<p>form 태그에 지정하는 reset, submit</p>
<form action="chapter08.html" method="get" onreset="alert(`초기화 됨`)" onsubmit="alert(`전송`)">
아이디 : <input type="text" name="id"><br>
비밀번호 : <input type="password" name="pw"><br>
<input type="reset" value="reset" >
<input type="submit" value="submit">
</form>

<script type="text/javascript">
// 이벤트 : 웹 문서 영역안에서 이루어지는 동작
//	 ex) 웹 페이지에서 마우스를 클릭했을 때, 키를 입력했을 때, 특정 요소에 포커스가 이동되었을 때 등 어떤 사건을 발생 시키는 것
// 이벤트 처리기 : 이베트가 발생했을 때 실행하는 함수


</script>

</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트와 이벤트 처리기</title>
<link rel="stylesheet" href="css/function.css">
</head>
<body>
<ul>
<li><a href="#" onclick="chageBg(`red`)">Red</a></li>
<li><a href="#" onclick="chageBg(`orange`)">Orange</a></li>
<li><a href="#" onclick="chageBg(`yellow`)">Yellow</a></li>
<li><a href="#" onclick="chageBg(`green`)">Green</a></li>
<li><a href="#" onclick="chageBg(`blue`)">Blue</a></li>
<li><a href="#" onclick="chageBg(`purple`)">Purple</a></li>
</ul>
<div id="result"></div>
<script type="text/javascript">
//프로퍼티 방식

function chageBg(color) {
	let result = document.querySelector('#result');
	//document.querySelector('선택자'); : 해당 선택자를 만족하는 요소 하나를 반환
	result.style.backgroundColor = color;
}

</script>

</body>
</html>

 

@charset "UTF-8";

a:link, a:visited{
	color: black;
	text-decoration: none;
}

ul{
	list-style: none;
	width: 500px;
	margin : 10px auto;
	/*auto 중앙정렬*/
	padding: 0;
}

li{
	display: inline-block;
	width: 35px;
	border: 1px solid #ccc;
	padding: 10px 15px;
	font-size: 16px;
	text-align: center;
}

#result{
	width: 1890px;
	height: 900px;
	margin : 10px auto;
	
}

 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM을 이용한 이벤트 처리기</title>
</head>
<body>
<button id="change">글자색 바꾸기</button>
<p>클라이언트 요청 수신: 사용자가 웹 브라우저를 통해 웹 사이트에 접속하면, 웹 브라우저는 해당 웹 페이지의 주소(URI 또는 URL)를 웹 서버에 요청합니다.<br>
요청 분석: 웹 서버는 클라이언트의 요청을 받아들이고, 요청된 웹 리소스(HTML 파일, 이미지, CSS, JavaScript 등)의 위치를 파악합니다.<br>
웹 리소스 검색: 서버는 요청된 웹 리소스가 저장된 위치를 찾아 해당 파일을 가져옵니다.<br>
HTTP 응답 생성: 웹 서버는 요청에 따른 적절한 HTTP 응답을 생성합니다. 이 응답에는 상태 코드, 헤더, 본문 등이 포함됩니다.<br>
응답 전송: 생성된 HTTP 응답은 다시 클라이언트로 전송됩니다. 이때, 웹 브라우저는 받은 응답을 해석하고 웹 페이지를 구성하는 데 필요한 리소스를 추출합니다.<br>
웹 페이지 렌더링: 웹 브라우저는 받은 리소스를 기반으로 HTML 문서를 파싱하고, CSS 스타일링을 적용하며, JavaScript 코드를 실행하여 웹 페이지를 렌더링합니다.<br>
추가 리소스 요청: 웹 페이지에 포함된 다른 리소스(이미지, 스크립트 파일 등)가 있다면 웹 브라우저는 해당 리소스를 서버로부터 추가로 요청하게 됩니다.<br>
웹 페이지 표시: 웹 브라우저는 받은 리소스를 모두 조합하여 최종적으로 웹 페이지를 화면에 표시합니다. 사용자는 이렇게 표시된 웹 페이지와 상호작용하며 웹 사이트를 사용합니다.<br>
웹 서버는 여러 클라이언트들로부터 동시에 요청을 받아 처리하는데, 이를 위해 병렬 처리와 동시성 관리 기술이 사용됩니다.<br>
성능과 안정성을 위해 웹 서버는 하드웨어나 소프트웨어의 구성에 따라 다양한 방식으로 운영됩니다.<br>
또한, 웹 서버는 보안과 데이터 암호화를 통해 사용자의 개인정보와 웹 사이트를 보호하며, 로그 기록과 모니터링을 통해 서버의 상태를 추적하여 관리자가 문제를 조기에 발견하고 대응할 수 있도록 합니다.</p>

<script>
//형식)웹요소.onclick="함수";
//형식)document.요소명.style.속성명 = 속성값;
//방법 1 : 웹 요소를 변수로 지정하고 미리 만든 함수 사용
let changeBttn = document.querySelector("#change");
changeBttn.onclick = changeColor; //함수명 뒤에 소괄호()는 붙이지 않음

function changeColor() {
	document.querySelector("p").style.color = "green";
}

</script>
</body>
</html>

==

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM을 이용한 이벤트 처리기</title>
</head>
<body>
<button id="change">글자색 바꾸기</button>
<p>클라이언트 요청 수신: 사용자가 웹 브라우저를 통해 웹 사이트에 접속하면, 웹 브라우저는 해당 웹 페이지의 주소(URI 또는 URL)를 웹 서버에 요청합니다.<br>
요청 분석: 웹 서버는 클라이언트의 요청을 받아들이고, 요청된 웹 리소스(HTML 파일, 이미지, CSS, JavaScript 등)의 위치를 파악합니다.<br>
웹 리소스 검색: 서버는 요청된 웹 리소스가 저장된 위치를 찾아 해당 파일을 가져옵니다.<br>
HTTP 응답 생성: 웹 서버는 요청에 따른 적절한 HTTP 응답을 생성합니다. 이 응답에는 상태 코드, 헤더, 본문 등이 포함됩니다.<br>
응답 전송: 생성된 HTTP 응답은 다시 클라이언트로 전송됩니다. 이때, 웹 브라우저는 받은 응답을 해석하고 웹 페이지를 구성하는 데 필요한 리소스를 추출합니다.<br>
웹 페이지 렌더링: 웹 브라우저는 받은 리소스를 기반으로 HTML 문서를 파싱하고, CSS 스타일링을 적용하며, JavaScript 코드를 실행하여 웹 페이지를 렌더링합니다.<br>
추가 리소스 요청: 웹 페이지에 포함된 다른 리소스(이미지, 스크립트 파일 등)가 있다면 웹 브라우저는 해당 리소스를 서버로부터 추가로 요청하게 됩니다.<br>
웹 페이지 표시: 웹 브라우저는 받은 리소스를 모두 조합하여 최종적으로 웹 페이지를 화면에 표시합니다. 사용자는 이렇게 표시된 웹 페이지와 상호작용하며 웹 사이트를 사용합니다.<br>
웹 서버는 여러 클라이언트들로부터 동시에 요청을 받아 처리하는데, 이를 위해 병렬 처리와 동시성 관리 기술이 사용됩니다.<br>
성능과 안정성을 위해 웹 서버는 하드웨어나 소프트웨어의 구성에 따라 다양한 방식으로 운영됩니다.<br>
또한, 웹 서버는 보안과 데이터 암호화를 통해 사용자의 개인정보와 웹 사이트를 보호하며, 로그 기록과 모니터링을 통해 서버의 상태를 추적하여 관리자가 문제를 조기에 발견하고 대응할 수 있도록 합니다.</p>

<script>
//방법 2 : 웹 요소를 따로 변수로 만들지 않고 사용
//웹 요소를 프로그램에서 여러 번 사용하지 않는다면 변수에 할당하지 않고 직접 사용
document.querySelector("#change").onclick = changeColor; 
function changeColor() {
	document.querySelector("p").style.color = "green";
}
</script>
</body>
</html>

==

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM을 이용한 이벤트 처리기</title>
</head>
<body>
<button id="change">글자색 바꾸기</button>
<p>클라이언트 요청 수신: 사용자가 웹 브라우저를 통해 웹 사이트에 접속하면, 웹 브라우저는 해당 웹 페이지의 주소(URI 또는 URL)를 웹 서버에 요청합니다.<br>
요청 분석: 웹 서버는 클라이언트의 요청을 받아들이고, 요청된 웹 리소스(HTML 파일, 이미지, CSS, JavaScript 등)의 위치를 파악합니다.<br>
웹 리소스 검색: 서버는 요청된 웹 리소스가 저장된 위치를 찾아 해당 파일을 가져옵니다.<br>
HTTP 응답 생성: 웹 서버는 요청에 따른 적절한 HTTP 응답을 생성합니다. 이 응답에는 상태 코드, 헤더, 본문 등이 포함됩니다.<br>
응답 전송: 생성된 HTTP 응답은 다시 클라이언트로 전송됩니다. 이때, 웹 브라우저는 받은 응답을 해석하고 웹 페이지를 구성하는 데 필요한 리소스를 추출합니다.<br>
웹 페이지 렌더링: 웹 브라우저는 받은 리소스를 기반으로 HTML 문서를 파싱하고, CSS 스타일링을 적용하며, JavaScript 코드를 실행하여 웹 페이지를 렌더링합니다.<br>
추가 리소스 요청: 웹 페이지에 포함된 다른 리소스(이미지, 스크립트 파일 등)가 있다면 웹 브라우저는 해당 리소스를 서버로부터 추가로 요청하게 됩니다.<br>
웹 페이지 표시: 웹 브라우저는 받은 리소스를 모두 조합하여 최종적으로 웹 페이지를 화면에 표시합니다. 사용자는 이렇게 표시된 웹 페이지와 상호작용하며 웹 사이트를 사용합니다.<br>
웹 서버는 여러 클라이언트들로부터 동시에 요청을 받아 처리하는데, 이를 위해 병렬 처리와 동시성 관리 기술이 사용됩니다.<br>
성능과 안정성을 위해 웹 서버는 하드웨어나 소프트웨어의 구성에 따라 다양한 방식으로 운영됩니다.<br>
또한, 웹 서버는 보안과 데이터 암호화를 통해 사용자의 개인정보와 웹 사이트를 보호하며, 로그 기록과 모니터링을 통해 서버의 상태를 추적하여 관리자가 문제를 조기에 발견하고 대응할 수 있도록 합니다.</p>

<script>
//방법 3 : 함수를 직접 선언
//딱 한 번만 사용한다면 함수이름이 있었던 자리에 직접 함수를 선언해도 됨.
document.querySelector("#change").onclick = function(){
	document.querySelector("p").style.color = "green";
};

</script>
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>설명글 표시하는 자바스크립트</title>
</head>
<body>
	<div id="item">
		<img src="image.png" alt="">
		<button class="over" id="open">상세 설명 보기</button>
		<div id="desc" class="detail">
			<h3>등심붓꽃</h3>
			<p>북아메리카 원산으로 각지에서 관상초로 흔히 심고 있는 귀화식물이다. 길가나 잔디밭에서 흔히 볼 수 있다. 아주
				작은 씻앗을 무수히 많이 가지고 있는데 바람을 이용해 씨앗들을 날려보내거나, 뿌리줄기를 통해 동인한 개체들을 많이 만들어
				냄으로써 번식한다.</p>
			<button id="close">상세 설명 닫기</button>
		</div>
	</div>
	<script type="text/javascript">
		
		//형식)웹요소.onclick="함수";
		//형식)document.요소명.style.속성명 = 속성값;
		
	document.querySelector('#open').onclick = function(){
		document.querySelector('#desc').style.display = "block"; // 상세 설명 부분을 화면에 표시
		document.querySelector('#open').style.display  ="none"; //'상세 설명 보기' 단추를 화면에서 감춤
	}
	
	document.querySelector('#close').onclick = function(){
		document.querySelector('#desc').style.display = "none"; // 상세 설명 부분을 화면에서 감춤
		document.querySelector('#open').style.display  ="block"; //'상세 설명 보기' 단추를 화면에 표시
	}
	
	</script>
</body>
</html>

 

객체

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>객체</title>
</head>
<body>
<script type="text/javascript">
//날짜와 시간을 생성하는 객체
var now = new Date();
document.write(`${now}<br>`);
document.write(now.toLocaleString());
</script>
</body>
</html>
728x90

'KDT > JavaScript' 카테고리의 다른 글

240207 자바스크립트  (0) 2024.02.07
240205 자바스크립트  (0) 2024.02.05
240131 자바스크립트  (0) 2024.01.31
240129 자바스크립트  (0) 2024.01.29
240125 자바스크립트  (0) 2024.01.25

'KDT/JavaScript'의 다른글

  • 현재글240201 자바스크립트

관련글

티스토리툴바