열심히 끝까지
[코딩 과제] - 7/26 강사님 문제 본문
강사님 문제--------------------------
1) [복습]prompt()에서 전화번호를 입력
010-1234-1234
=> console.log()(대부분 콘솔로그)
=> 010-1234-****
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>강사님 문제</title>
</head>
<body>
<!-- 1) prompt()에서 전화번호 입력 시 마지막 4자리수는 *표로 표시되게 출력 -->
<script type="text/javascript">
// 내가 한 것 제대로 나오지 않았으니 제대로 풀 것
//function printstar(phonenum){
// document.write('****');
// }
//function printnum(phonenum){
// for(var i = 0; i<phonenum.length-4; i++){
// document.write();
// }
//}
//var input=prompt('전화번호를 입력하세요.');
//printnum(input);
//printstar;
// 강사님 문제 제대로 풀어볼 것
var input=prompt('010-xxxx-xxxx의 형태로 입력해주세요.')
// split 사용시 - 기준으로 배열에 대입
var arr=input.split('-');
console.log(arr[0]+'-'+arr[1]+'-****')
</script>
</body>
</html>----------------------------------------------------
2) <input>에서 검색어을 입력하고 Enter시
alert()으로 입력한 검색어가 출력됨
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>강사님 문제</title>
<style type="text/css">
input[name="test"]{
border:3px solid black;
}
</style>
</head>
<body>
<!-- input에서 검색어 입력하고 Enter시 alert()으로 입력한 검색어 출력 -->
<script type="text/javascript">
function func(event){
if(event.keyCode==13){
alert(event.target.value);
}
}
</script>
<!-- 내가 한 것
<input type = "text" onKeypress="javascript:if(event.keyCode==13) {alert='text'}">
-->
<input type=text" onkeydown="func(event)">
</body>
</html>강사님 문제-------------------
화면에 7개의 리스트 존재
버튼을 누르면 5개의 리스트 배경색이
빨주노초파남보로 변경될 수 있게 해주면 됨
+querySelector() 활용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>무지개코드</title>
</head>
<body>
<script type="text/javascript">
function func(){
//var elems=document.getElementsByClassName('test2');
//for(var i = 0; i < elems.length; i++){
//elems[i].style.backgroundColor='orange';
//}
var seledo=document.querySelector('.test');
for(var i = 0; i < seledo.length; i++){
seledo.style.backgroundColor='red';
}
}
function func2(){
var seldo=document.querySelector('.test1');
seldo.style.backgroundColor='red';
var seldo=document.querySelector('.test2');
seldo.style.backgroundColor='orange';
var seldo=document.querySelector('.test3');
seldo.style.backgroundColor='yellow';
var seldo=document.querySelector('.test4');
seldo.style.backgroundColor='lightgreen';
var seldo=document.querySelector('.test5');
seldo.style.backgroundColor='blue';
var seldo=document.querySelector('.test6');
seldo.style.backgroundColor='darkblue';
var seldo=document.querySelector('.test7');
seldo.style.backgroundColor='purple';
}
var color=['red','orange','yellow','lightgreen','aqua','blue','purple'];
var elems=document.querySelectAll('li');
for(var i=0; i<elems.length; i++){
elems[i].style.backgroundColor=color[i];
}
</script>
<button type="button" onclick="func()">색깔 바꾸기</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
</html>
예제)
5개의 리스트가 있다.
1
2
3
4
5
중에서 리스트를 선잭하면?
'선택한 리스트입니다' 라고 뜨게 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>예제</title>
<style type="text/css">
li{
border:1px solid black;
cursor:pointer;
margin:3px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script type="text/javascript">
var list=document.querySelectorAll('#list > li');
var msg=document.createElement('선택한 리스트입니다.');
msg.setAttribute('list');
for(var i=0; i<list.length; i++){
list[i].addEventListener('click', function(){
// 리스트의 부모인 ul list야! li좀 지워줘 라고 요청해야 함
// 그냥 제거하면 안된다! 위 방식대로 해야 함
this.parentNode.removeChild(this);
this.parentNode.appendChild(msg);
});
}
var ul=document.querySelectorAll('ul');
var list=document.querySelectorAll('li');
for(var i=0; i<list.length; i++){
list[i].addEventListener('click', function(){
var elem=document.createElement('li');
var msg=document.createTextNode('선택한 리스트입니다.');
elem.appendChild(msg);
ul.replaceChild(elem,this);
});
}
</script>
</body>
</html>'디바이스 융합 자바(Java)기반 풀스택 개발자 양성과정(과제)' 카테고리의 다른 글
| [코딩 과제] - 8/2 강사님 문제 (0) | 2022.08.02 |
|---|---|
| [코딩 과제] - 7/26 주사위 게임 (0) | 2022.07.26 |
| [코딩 과제] - 7/25 강사님 문제 (0) | 2022.07.25 |
| [10분 테코톡] 콜린의 Flex Layout (0) | 2022.07.23 |
| [10분 테코톡] 동동의 CSS 방법론 (0) | 2022.07.23 |