프로그래밍 언어 응용 34일차 (24/12/27)

웹프로그래밍/JavaScript

프로그래밍 언어 응용 34일차 (24/12/27)

wkun 2024. 12. 27. 17:55

CONTENTS

랠리테스트(JS DOM)

기능구현

1)colorflipper

2)dropbox

3)itemfilter

-------------------------------------------------------

랠리테스트(JS DOM)

	문항	답변
1	특정 태그(요소) 하나를 선택하여 변수에 저장하려면 어떻게 해야하나?	var 변수명 = document.querySelector(CSS선택자);
2	특정 태그(요소) 여러개를 선택하여 변수에 저장하려면 어떻게 해야하나?	var 변수명 = document.querySelectorAll(CSS선택자);
3	위에서 선택한 요소의 변수에 이벤트를 연결하려면 어떻게 해야하나?	1.요소 한 개 셀렉한 경우 변수명.addEventListener("이벤트", 함수명); 2.요소 여러 개 셀렉한 경우 for(let i = 0; i< 변수명.length; i++) { 변수명[i].addEventListener("이벤트", 함수명); } 변수명.forEach( function(매개변수){ 매개변수.addEventListener("이벤트", 함수명); } );
4	다음의 마우스 이벤트를 설명하시오. click dbclick mouseover mouseout mousedown mouseup mousemove	click: 클릭 했을 때 dbclick: 더블클릭 했을 때 mouseover: 마우스가 요소위로 올라 왔을 때(=mouseenter) mouseout: 마우스가 요소밖으로 빠져나갔을 때(=mouseleave) mousedown: 마우스를 누를때 mouseup: 마우스를 누르고 뗏을 때 mousemove: 마우스를 움직였을 때
5	다음의 키 이벤트를 설명하시오. keydown keyup keypress	keydown: 키를 눌렀을 때 keyup: 키를 누르고 뗏을 때 keypress: 문자키를 누르고 있을 때(연속적으로 발생)
6	다음의 포커스 이벤트에 대해서 설명하시오 focus blur	focus: 폼의 요소가 포커스 되었을 때 blur: 폼의 요소가 포커스 해제 되었을 때
7	다음의 폼 이벤트에 대해서 설명하시오. submit reset change input	submit: 제출했을 때 reset: 초기화 했을 때 change: 값이 변경되고 포커스가 해제될 때 input: 입력했을 때
8	다음의 UI이벤트에대해서 설명하시오 load scroll	load: 페이지가 로드 되었을 때 scroll: 스크롤이 움직일 때
9	함수의 내용에서 HTML코드를 삽입하는 방법에대해서 2가지 이상 설명하시오.	1.HTML 요소에 요소 삽입 .p.innerHTML = "안녕"; 2.요소 생성하여 삽입 var x = document.createElement('span'); x.innerHTML = "안녕"; p.appendChild(x); //텍스트 노드 삽입 1.innerText x.innerText = "안녕"; 2.textContent x.textContent= "안녕";
10	선택한 요소의 자식 HTML을 가지고 오는 방법에 대해서 설명하시오.	<ul> <li>1</li> <li>2</li> <li>3</li> </ul> var x = document.querySelector("ul"); 1. 자식전체 var y = x.innerHTML; console.log(y); 2. 자식일부 var z = x.children[0]; console.log(z);
11	선택한 요소의 자식요소를 삭제하는 방법에 대해서 설명하시오.	var x = document.querySelector("ul"); x.removeChild(x.childNode[0]);
12	선택한 요소의 속성을 삽입하는 방법에 대해서 설명하시오.	<div>상자</div> var x = document.querySelector("div"); x.setAttribute("id", "xyz");
13	선택한 요소에 Class속성을 할당하는 방법과 삭제하는 방법을 설명하시오.	<div class="a">상자</div> var x = document.querySelector("div"); x.classList.add("xyz"); x.classList.remove("a");
14	선택한 요소에 속성의 값을 가져오는 방법을 설명하시오.	<div class="a">상자</div> var x = document.querySelector("div"); var y = x.getAttribute("class"); console.log("y");
15	선택한 요소에 속성을 삭제하는 방법을 설명하시오.	<div class="a">상자</div> var x = document.querySelector("div"); x.removeAttribute("class");
16	선택한 요소에 스타일을 변경하는 방법을 설명하시오.	<div class="a">상자</div> var x = document.querySelector("div"); x.style.color = "red";
17	여러 선택 요소를 foreach로 각각의 요소를 반복하면서 백그라운드를 변경하는 방법을 설명하시오.	<ul> <li>1</li> <li>2</li> <li>3</li> </ul> var x = document.querySelectorAll("li"); x.forEach( function(li){ li.style.backgroungColor = "blue"; } );
18	foreach구문에서 각 요소마다 이벤트를 할당하고 연결된 함수에 선택한 요소를 가져가는 방법을 설명하시오.	<ul> <li>1</li> <li>2</li> <li>3</li> </ul> var x = document.querySelectorAll("li"); x.forEach( function(li){ li.addEventListener("click", changeColor); } ); 1.연결된 함수에 선택한 요소를 가져가는 방법(속성, 메서드) function changeColor(y) { y.target.style.backgroundColor = "red"; } 2.연결된 함수에 선택한 요소를 가져가는 방법 (this 사용) function changeColor2() { this.style.backgroundColor = "blue"; }

기능구현

1)colorflipper

<html>

<body>

<h2>background color : <span class="color">#f1f5f8</span></h2>

<button class="btn btn-hero" id="btn">change</button>

</div>

</body>

<css>

margin:0;

padding:0;

text-decoration : none;

list-style:none;

box-sizing:border-box;

color: inherit;

}

.container {

height: 100%;

text-align: center;

padding: 20px;

}

h2{

width: 30%;

padding: 30px;

margin: 0 auto;

border: 1px solid black;

border-radius: 15px;

background-color: black;

color: white;

font-size: 35px;

}

button{

margin: 30px;

padding: 20px;

border: 3px solid black;

border-radius: 15px;

font-size: 30px;

font-weight: bold;

background-color:transparent;

}

<js>

/* [기능설명]

1. 색상값을 묶은 배열이 있으며

2. change 버튼을 누를 때마다 랜덤하게 배열값 참조

3. 배경색상 변경하기

4. 배경색상에 해당하는 값으로 텍스트 변경하기

[코드작성순서]

1. 요소 선택하기

2. 이벤트 할당하기

3. 함수 선언하기

4. 함수 선언 내용 작성하기

4.1 요구사항 분석하기 (작은 단계로)

4.2 데이터를 담을 변수 준비하기

4.3 조건문/반복문 필요하면 작성하기

4.4 변수 활용하기 */

let colors = ["red", "green", "#f15025", "rgb(133, 122, 200, 0.8)"]; //색상 배열 정의(배경색으로 사용)

// 1. 요소 선택하기(이벤트가 발생할 요소)

let btn = document.querySelector("#btn");

console.log(btn);

// 2. 이벤트 할당하기

btn.addEventListener("click", changeColor);

// 3. 함수 선언하기

function changeColor() {

let randomNumber = getRandomNumber(); //무작위 랜덤 인덱스 생성

//let randomresult = Math.floor(Math.random() * colors.length);

console.log(randomNumber); //0,1,2,3

document.body.style.backgroundColor = colors[randomNumber]; // 배경색을 colors 배열의 randomNumber 인덱스에 해당하는 색상으로 설정

let color = document.querySelector(".color");

color.textContent = colors[randomNumber]; //텍스트를 현재 배경색으로

color.style.color = colors[randomNumber];

}

function getRandomNumber() {

return Math.floor(Math.random() * colors.length);

} // 무작위로 0에서 colors 배열의 길이 사이의 정수를 반환하는 함수

2)dropbox

<html>

<body>

<div>

Cental

</div>

<li>About</li>

<li>Service</li>

<li id="menuList_pages">Pages

<li>Our Feature</li>

<li>Testimonial</li>

</ul>

</li>

<li>Contact</li>

</ul>

<div>Get Started</div>

</div>

</body>

<css>

margin:0;

padding:0;

text-decoration : none;

list-style:none;

box-sizing:border-box;

color: inherit;

}

.container{

width: 80%;

}

#nav{

display: flex;

justify-content: center;

align-items: center;

}

#menuList{

display: flex;

justify-content: center;

align-items: center;

}

#menuList li{

padding: 30px;

cursor: pointer;

}

#menuList_pages{

position: relative;

/* display: block; */

}

#subList{

position: absolute;

top: 50px;

left: 20px;

/* display: none; */

}

.display_none{

display: none;

}

#subList li{

width: 150px;

padding: 15px;

}

<js>

/* [기능설명]
1. pages에 클릭하면 숨겨진 메뉴가 나타나고
2. 한번 더 클릭하면 나타난 메뉴가 사라짐

[코드작성순서] : 동일
1. 요소 선택하기
2. 이벤트 할당하기
3. 함수 선언하기
4. 함수 선언 내용 작성하기
  4.1 요구사항 분석하기 (작은 단계로)
  4.2 데이터를 담을 변수 준비하기
  4.3 조건문/반복문 필요하면 작성하기
  4.4 변수 활용하기 */

//1. 요소 선택하기

let menu = document.querySelector("#menuList_pages");

let subList = document.querySelector("#subList");

//2. 이벤트 할당하기

menu.addEventListener("click", displayb);

let cnt = 0;

// //3. 함수 선언하기

// function displayb(){

// subList.classList.toggle('display_none');

// }

function displayb() {

if(cnt%2 == 0){ //클릭횟수가 짝수

subList.style.display='block';

}else{ //클릭횟수가 홀수

subList.style.display='none';

}

cnt++

console.log(cnt);

}

// 4. 함수 선언 내용 작성하기

3)itemfilter

<html>

<body>

</ul>

</div>

</body>

<css>

margin:0;

padding:0;

text-decoration : none;

list-style:none;

box-sizing:border-box;

color: inherit;

}

.container{

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

margin: 50px;

}

input{

width: 18%;

margin: 10px;

margin-bottom: 0;

padding: 10px;

}

ul{

width: 18%;

text-align: center;

}

ul li{

padding: 10px;

border: 1px solid black;

display: none;

}

<js>

/*최종목적

html에서 ul태그 안에 있는 li요소들 중에

검색어 입력창에서 값을 칠때마다 //셀렉트, 이벤트할당

입력한 값을 포함하고 있는 li요소들을

//해당 글자를 가지는지 indexOf로 찾는다.

보여준다.

//display = "block"*/

//1. 셀렉트하기

let filterInput = document.querySelector('#filterInput');

let itemList = document.querySelector('#itemList'); //ul

let items = itemList.querySelectorAll('li'); // 모든 li 요소 가져오기

//2. 이벤트 할당하기

// 입력값에 따라 항목 필터링

filterInput.addEventListener('keyup', function () {

//3. 함수 선언하기

//4. 함수 내부 코드 작성하기

//입력 받은 값을 가져온다.

let filterText = filterInput.value; // 입력받은값 가져옴

// 항목 필터링

items.forEach(function (item) {

//item 변수에 들어있는 데이터 : 각 li태그 요소

let itemText = item.textContent;

if (itemText.indexOf(filterText) !== -1) {

//"사과" - "사"라는 값을 가지고 있냐? 그렇다면 해당 index값 반환

item.style.display = 'block'; // 일치하는 항목 표시

} else {

item.style.display = 'none'; // 일치하지 않는 항목 숨기기

}

});

'웹프로그래밍 > JavaScript' 카테고리의 다른 글

프로그래밍 언어 응용 36일차 (24/12/31) (0)	2024.12.31
프로그래밍 언어 응용 35일차 (24/12/30) (2)	2024.12.30
프로그래밍 언어 응용 33일차 (24/12/26) (2)	2024.12.26
프로그래밍 언어 응용 32일차 (24/12/24) (0)	2024.12.24
프로그래밍 언어 응용 31일차 (24/12/23) (0)	2024.12.23

현재글프로그래밍 언어 응용 34일차 (24/12/27)

wkun 님의 블로그

wkun 님의 블로그 입니다.

Today :
Yesterday :

wkun 님의 블로그