day 19
코딩테스트 연습 > 핸드폰 번호 가리기
문제 설명
프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다.
전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요.
제한 조건
phone_number는 길이 4 이상, 20이하인 문자열입니다.
입출력 예
phone_number return
"01033334444" "***4444"
"027778888" "*8888"
자바스크립트에서는 엑셀에서 left, mid, right와 같은 함수를 쓸 수 없어서, 문자열 자르기 함수를 찾아봤다. 핸드폰 번호를 뒤 네자리 번호와 앞 번호로 나눈다.
다음으로 앞 번호를 '*'로 치환하기 위해 replace()함수를 찾았다.
▪️ slice(시작 인덱스 번호, 끝 인덱스 번호) : 음수 넣어도 된다.
▪️ substring(시작 인덱스 번호, 끝 인덱스 번호) : 음수를 넣으면 정상적 작동 X
시작 인덱스 번호가 끝 인덱스 번호보다 크면 시작, 끝 순서를 바꿔서 반환한다.
▪️ str_text.replace("찾을 문자열", "변경할 문자열")
➕
▪️ concat() : 두 개의 문자열을 더한다.
▪️ charAt() : index 번호에 해당하는 글자를 반환한다. (숫자형 인자만 받는다)
▪️ inclues('찾고자 하는 문자열') : 찾고자 하는 문자열이있으면 true, 없으면 false를 반환한다
▪️ toLowerCase, toUpperCase() : 대소문자를 변환한다
👉 1트
function solution(phone_number) {
var answer = '';
let A = phone_number.slice(0,7)
let B = phone_number.slice(7,11)
answer = phone_number.replace(A,'*******')
return answer;
}예제 2번이 02로 시작되는 번호여서 코드를 다시 수정한다.
slice()에 음수를 사용해서 뒷 4자리를 가져오고, *을 앞 자리수만큼 반복하는 repeat함수를 사용한다.
"반복할 문자".repeat(반복할 수) : 문자열 반복 함수
👉 제출 답안
function solution(phone_number) {
var answer = '';
let A = phone_number.slice(0,phone_number.length-4)
let B = phone_number.slice(-4)
answer = phone_number.replace(A, "*".repeat(A.length))
return answer;
}
데일리 미션 > To Do List 만들기
- 요소 검색 → querySelector()
: 자바스크립트에서 html 태그를 다룰 수 있게 도와주는 함수
id , class , 복합 태그를 모두 가져올 수 있다
document.querySelector("")
"" 속에 태그이름, .클래스이름, #아이디이름, 복합 태그
를 입력할 수 있다.
입력 값의 첫 번째를 가져오지만 두번째 세번째 값을 가져오기 위해서
first-child , last-child , nth-child를 이용하면 된다.
ex) document.querySelector("복합 태그: second-child")
document.querySelector("복합 태그: nth-child(2)")
-
상호작용 만들기 → addEventListener()
: document의 특정 요소(id값, class값, 태그값 ~)에 event를 등록할 수 있다.
➕ 이벤트 종류
click
mouseover 마우스를 HTML요소 위에 올리면 발생한다.
mouseout 마우스가 HTML요소 밖으로 벗어날 때 발생한다.
mousedown 클릭을 하기 위해 마우스버튼을 누르고 아직 떼기 전인 그 순간, HTML요소를 드래그할 때 사용할 수 있다.
mouseup 마우스버튼을 떼는 그 순간, 드래그한 HTML요소를 어딘가에 놓을 때 사용할 수 있다.
mousemove 마우스가 움직일때마다 발생한다. 마우스커서의 현재 위치를 계속 기록하는 것에 사용할 수 있다.
focus HTML요소에 포커스가 갔을때 발생한다.
blur HTML요소가 포커스에서 벗어났을때 발생한다.
keypress– 키를 누르는 순간에 발생하고 키를 누르고 있는 동안 계속해서 발생한다.
keydown 키를 누를 때 발생한다.
keyup 키를 눌렀다가 떼는 순간에 발생한다.
load 웹페이지에서 사용할 모든 파일의 다운로드가 완료되었을때 발생한다.
resize 브라우저 창의 크기를 조절할때 발생한다.
scroll
unload – 링크를 클릭해서 다른 페이지로 이동하거나 브라우저 탭을 닫을 때 혹은 브라우저 창을 닫을 때 이벤트가 발생한다.
change – 폼 필드의 상태가 변경되었을 때 발생한다. 라디오 버튼을 클릭하거나 셀렉트 박스에서 값을 선택하는 경우를 예로 들수 있다.button.addEventListener("click", () => { paragraph.style.color = "violet"; });
- CSS 변경 → style 속성(property)
🔸자바스크립트 li ▪️ 모양 바꾸는 방법
list-style-type : none;
🔸css 밑줄긋기
: text-decoration : underline;
🔸input에 안내문구 넣기
: Placeholder속성 사용
🔸투두리스트 박스 수직 수평 가운데 정렬
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<style>
.todobox {
width: 300px;
height: 250px;
padding: 20px;
background-color: white;
box-shadow: 0px 2px 10px black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.aaa {
padding-top: 10px;
}
input {
height: 50px;
}
button {
margin-left: 7px;
height: 50px;
}
li {
list-style-type: none;
text-decoration: underline;
}
</style>
<script>
$(document).ready(function todolist() {
let mybtn = document.querySelector('#mybtn');
let mylists = document.querySelector('#mylists');
mybtn.addEventListener("click", () => {
let myinput = document.querySelector('#myinput').value;
if (myinput !== '') {
let listrow = document.createElement('li');
listrow.textContent = myinput;
mylists.appendChild(listrow);
document.querySelector('#myinput').value = '';
}
listrow.textContent = myinput;
});
})
</script>
</head>
<body>
<div class="todobox">
<h1 style="text-align: center;">투두 리스트</h1>
<p class="aaa" style="text-align: center;"><input placeholder="할 일을 입력하세요" id="myinput" type="text"> <button
id="mybtn">추가</button></p>
<ul id="mylists"></ul>
</div>
</body>
</html>