1) ex03.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//문자열 내 p와 y의 개수
function solution(s){
let arr = '';
arr = s.toLowerCase();
arr = arr.split('');
arr2 = arr.filter(val => val == 'p');
let arr3 = arr.filter(val => val == 'y');
if(arr2.length===arr3.length){
return true;
}else if(arr2.length!==arr3.length){
return false;
}else if(arr2.length===0 && arr3.length===0){
return true;
}
}
console.log(solution('pPoooyY'));
console.log(solution('Pyy'));
console.log(solution(''));
</script>
</body>
</html>2) ex03_teach.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//문자열을 받아서 p의 개수가 몇개인지? y의 개수가 몇개인지?
//대소문자는 구분하지 않음
//개수를 비교해서 일치하면 true 반환 일치하지 않으면 false 반환
// 문자열을 배열로 반환해서 문제 해결
// function solution(){
// let answer = true;
// s = s.toUpperCase().split('');
// let parr = s.filter(str => str == 'p').length;
// let yarr = s.filter(str => str == 'y').length;
// answer = parr === yarr;
// return answer;
// }
//문자열로 문제 해결
function solution(s){
let answer = true;
let pnum = 0, ynum = 0;
s = s.toUpperCase();
for(let i of s){
pnum = i === 'P' ? pnum+1 : pnum;
ynum = i === 'Y' ? ynum+1 : ynum;
}
answer = pnum === ynum;
return answer;
}
let result = solution('ppyyy');
console.log(result);
</script>
</body>
</html>3) childNodes.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 주석입니다 -->
<div id="header">상단</div>
<div>본문
<ul>
<li>항목1</li>
<li>항목2</li>
</ul>
<p>
<input type="text" id="input">
<button onclick="inputCheck()">확인</button>
</p>
</div>
<div>하단</div>
<script>
//document.body
for(let i=0; i<document.body.childNodes.length; i++){
console.log(document.body.childNodes[i]); // 거의 사용안함
}
console.log(document.body.children); //자식요소노드
console.log(document.body.firstElementChild); //첫번째자식요소노드
console.log(document.body.lastElementChild); //마지막자식요소노드
console.log(document.body.firstElementChild.nodeType);
console.log(document.body.firstElementChild.nodeName);
console.log(document.body.childNodes[0].nodeName);
let lis = document.querySelectorAll('li');
let lis2 = document.getElementsByTagName('li');
console.log(lis);
console.log(lis2);
document.querySelector('#header').innerHTML = '<h1>안녕하세요</h1>';
header.innerHTML = '안녕하세요'; //잘 안씀
header.hidden = true;
function inputCheck(){
console.log(document.querySelector('input').value);
}
</script>
</body>
</html>4) createElement.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="wrap">
</div>
<ol id="ol">
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<div id="insert">
insert DIV입니다.
</div>
<script>
// let nDiv = document.createElement('div');
// nDiv.innerHTML = '<h1>안녕하세요</h1>';
// wrap.append(nDiv);
wrap.innerHTML = '<div><h1>안녕하세요요</h1></div>'
let nP = document.createElement('p');
nP.innerHTML = '이전이전이전';
let nLi = document.createElement('li');
nLi.innerHTML = '추가한 li';
let nLi2 = document.createElement('li');
nLi2.innerHTML = '추가한 li2';
ol.before(nP);
ol.after('이후');
ol.append(nLi);
ol.prepend(nLi2);
insert.insertAdjacentHTML('beforebegin','<p>beforebegin입니다</p>');
insert.insertAdjacentHTML('afterbegin','<h2>afterbegin입니다</h2>');
insert.insertAdjacentHTML('beforeend','<h3>beforeend입니다</h3>');
insert.insertAdjacentHTML('afterend','<p>afterend입니다</p>');
</script>
</body>
</html>5) removeNode.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let nDiv = document.createElement('div');
nDiv.innerHTML = '<strong>안녕하세요</strong>중요메시지를 확인하셨습니다.';
document.body.append(nDiv);
// setTimeout(함수,시간)
setTimeout(()=>nDiv.remove(),3000);
</script>
</body>
</html>6) ex01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {margin: 0; padding: 0; box-sizing: border-box;}
div {
width: 800px;
max-width: 100%;
margin: 0 auto;
background: pink;
text-align: center;
padding: 30px 0;
}
#input {
width: 500px;
border: none;
padding: 10px;
border-radius: 20px;
outline: none;
padding-left: 20px;
}
li span {
margin: 0 20px;
font-size: 20px;
height: 10px;
line-height: 10px;
color: #fff;
position: absolute;
right: 30px;
top: 0;
}
p span {
margin: 0 20px;
font-size: 20px;
height: 10px;
line-height: 10px;
color: #fff;
cursor: pointer;
}
ul {
margin-top: 30px;
background: #ccc;
}
li {
list-style: none;
text-align: left;
margin-left: 50px;
position: relative;
}
</style>
</head>
<body>
<div id="header">
<h1>To do List</h1>
<p><input type="text" id="input"><span onclick="valcome()">o</span></p>
<ul id="ul">
</ul>
</div>
<script>
function valcome(){
let input_val = document.querySelector('#input').value;
let ulp = document.querySelector('#ul');
let nli = document.createElement('li');
let nspan = document.createElement('span');
ulp.append(nli);
nli.innerHTML = input_val;
nli.append(nspan);
nspan.innerHTML = 'x';
document.querySelector('#input').value = '';
nspan.addEventListener('click', function(){
nli.remove();
});
}
</script>
</body>
</html>7) ex01_teach.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script defer src="./ex01_teach_script.js"></script>
<style>
* {margin: 0; padding: 0; box-sizing: border-box;}
li { list-style: none;}
#wrap {
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
#todoheader {
color: #fff;
padding: 30px 0;
text-align: center;
/* linear-gradient(방향, 색상1, 색상2, 색상3,...) */
background-image: linear-gradient(to right, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
}
#todoheader input {
border: none;
width: 60%;
height: 40px;
border-radius: 20px;
background: #fff;
outline: none;
padding-left: 30px;
}
#todoheader {
vertical-align: middle;
height: 150px;
}
#todoheader button {
border: none;
outline: none;
background: transparent;
vertical-align: middle;
}
#todoheader button i {
font-size: 40px;
color: #fff;
}
#listUl li {
background: #eee;
line-height: 40px;
padding-left: 20%;
padding-right: 20%;
position: relative;
}
#listUl li span {
float: right;
}
#listUl li.check {
text-decoration: line-through;
background: #ddd;
}
#listUl li.check::before {
content: "";
display: block;
width: 30px;
height: 15px;
border-bottom: 1px solid #333;
border-left: 1px solid #333;
transform: rotate(320deg);
position: absolute;
left: 16%;
top: 5px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="todoheader">
<h1>to do list</h1>
<div>
<input type="text" id="todoInput">
<button id="insertBtn"><i class="material-icons">add_circle</i></button>
</div>
</div>
<div id="todolist">
<ul id="listUl"></ul>
</div>
</div>
</body>
</html>//btn input ul
let btn = document.querySelector('#insertBtn');
let input = document.querySelector('#todoInput');
let ul = document.querySelector('#listUl');
btn.addEventListener('click',addList);
//btn클릭시 실행되는 함수
//input의 value가 있는지 확인 없으면 return, 있으면 그 값을
//li에 넣어주고 li를 ul에 추가
function addList(){
if(!input.value) return;
let li = document.createElement('li');
li.innerHTML = `${input.value}<span>X</span>`;
ul.append(li);
input.value = '';
removeEvent();
// document.querySelector('#listUl li').addEventListener('click', function(){
// document.querySelector('#listUl li').classList.toggle('check');
// })
}
//x를 클릭했을때 실행되는 함수
//클릭한 x의 부모요소를 삭제하기
function removeEvent(){
let spans = document.querySelectorAll('#listUl span');
spans.forEach(span=> span.addEventListener('click',function(){
this.parentElement.remove();
}))
}
//ul을 클릭하면 클릭한 대상이 li면 check클래스를 지정
//check클래스가 있으면 제거
ul.addEventListener('click',function(e){
console.log(e);
if(e.target.nodeName === 'LI') e.target.classList.toggle('check');
})8) test01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function solution(absolutes,signs){
let answer = 0;
for(let i=0; i<absolutes.length; i++){
absolutes[i] = signs[i] === true ? absolutes[i] : -absolutes[i];
answer += absolutes[i];
}
return answer;
}
let a = [4,7,12];
let a2 = [true,false,true];
let b = [1,2,3];
let b2 = [false, false, true];
console.log(solution(a,a2));
console.log(solution(b,b2));
</script>
</body>
</html>'노력이 좋아서' 카테고리의 다른 글
| <step41>'js_dom, scroll' (0) | 2022.05.17 |
|---|---|
| <step40>'js_event,scroll' (0) | 2022.05.16 |
| <step38>'js_arguments, 배열메소드, 객체메소드' (0) | 2022.05.12 |
| <step37>'js_동기 비동기' (0) | 2022.05.11 |
| <step36>'야구게임_팀과제' (0) | 2022.05.10 |