프로그래밍

[Web] day35 : 자바스크립트 이벤트 활용 예제 본문

Web/Web

[Web] day35 : 자바스크립트 이벤트 활용 예제

시케 2023. 7. 4. 21:19
728x90
반응형

2023.06.23.금

자바스크립트 이벤트 활용 예제

이제까지 익힌 자바스크립트를 통해 이벤트 활용 예제를 구현해보자

2023.07.04 - [Web] - [Web] day34 : 자바스크립트 이벤트 연결01

 

[Web] day34 : 자바스크립트 이벤트 연결01

2023.06.22.목 이벤트 연결 웹에서 어떠한 행동을 할 때 변경사항 혹은 어떠한 일을 수행하고 싶을 수 있는데 이러한 '이벤트'를 문서의 요소와 연결 시킬 수있다 이벤트 연결은 상단 배치 무명함수

dev-9rm.tistory.com

2023.07.04 - [Web] - [Web] 자바스크립트 이벤트 연결02

 

[Web] 자바스크립트 이벤트 연결2

2023.06.23.금 이벤트 연결 사용자의 커뮤니케이션에 따라 변경되는 이벤트 구현 2023.07.04 - [Web] - [Web] day34 : 자바스크립트 이벤트 연결01 [Web] day34 : 자바스크립트 이벤트 연결01 2023.06.22.목 이벤트

dev-9rm.tistory.com

예제01

Insert title here 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">

	#wrap {
		display:flex;
	}
    
	#wrap > div {
		width: 400px;
		height: 400px;
		margin: 10px;
		cursor: pointer;
	}

	#box {
		background-color: lightblue;
		animation: blink-effect 0.5s step-end infinite;
	}
	#box2 {
		background-color: lightgreen;
		animation: vibration 0.1s infinite;  
	}
	
	.click {
		/* 클릭 이벤트를 통해
		클래스명이 click이된 요소가 있다면*/
		background-color: lightpink !important;
	}
	
	.onmouseover {
		border-radius : 50%;
	}
	
	@keyframes blink-effect {
  		50% {
    		opacity: 0;
  		}
	}
	
	@keyframes vibration {
  		from {
    		transform: rotate(1deg);
  		}
  		to {
    		transform: rotate(-50deg);
  		}
	}
</style>
</head>
<body>

<script type="text/javascript">
	document.querySelector('#box').onclick=test;
	document.querySelector('#box2').onclick=test;
	
	function test() {
		if(this.className == 'click'){
			this.className='';
		}
		else{
			this.className='click';
		}
	}

	function test1(obj){
		//obj.style.backgroundColor = 'lightpink';
		
		if(this.className == 'click'){
			this.className='';
		}
		else{
			this.className='click';
		}
		
	}
	
	function test2(obj){
		//obj.style.borderRadius = '50%';
		
		if(this.className == 'onmouseover'){
			this.className='';
		}
		else{
			this.className='onmouseover';
		}
	}
</script>

<div id='wrap'>
<div id="box" onclick="test1(this)"></div>
<div id="box2" onmouseover="test2(this)"></div>
</div>

</body>
</html>

예제02

Insert title here 
    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<script type="text/javascript">

function addList()  {	  
	  // 1. 추가할 값을 input창에서 읽어온다
	  const addValue 
	    = document.getElementById('addValue').value;
	  
	  // 2. 추가할 li element 생성
	  // 2-1. 추가할 li element 생성
	  const li = document.createElement("li");
	  
	  // 2-2. li에 id 속성 추가 
	  li.setAttribute('id',addValue);
	  
	  // 2-3. li에 text node 추가 
	  const textNode = document.createTextNode(addValue);
	  li.appendChild(textNode);
	  
	  // 3. 생성된 li를 ul에 추가
	  document
	    .getElementById('content')
	    .appendChild(li);
	  
	}
</script>

<input type='text' id='addValue' />
<input type='button' value='추가' onclick='addList()' />

<ul id='content'></ul>

</body>
</html>
    728x90
    반응형

    'Web > Web' 카테고리의 다른 글

    [Web] day36 : 자바스크립트 주사위/가위바위보 예제  (0) 2023.07.04
    [Web] day35 : BOM (Browser Object Model)  (0) 2023.07.04
    [Web] day35 : 자바스크립트 이벤트 연결02  (0) 2023.07.04
    [Web] day34 : 자바스크립트 이벤트 연결01  (0) 2023.07.04
    [Web] day34 : 자바스크립트  (0) 2023.07.04
    'Web/Web' Related Articles more
    Comments