파송송의 코딩테스트 공부

[노마드코더] 바닐라JS 챌린지 - 숫자 입력 게임

조건 0에서 사용자가 지정한 숫자까지의 범위에서 랜덤 한 숫자를 찾으세요. (범위는 0 이상 입력값 이하가 됩니다.) 범위에는 음수가 포함될 수 없습니다. 실시간으로 범위 값을 업데이트해야 합니다. 유저가 숫자를 선택한 후에 게임을 플레이할 수 있습니다. 유저에게 게임의 승패를 알려야 합니다. Random Number Game Generate a number between 0 and Guess the number : Play! const numForm = document.querySelector("#num-form"); const numInput = document.querySelector("#num-form input"); const clientForm = document.querySelector("#..

[노마드코더] 바닐라JS 챌린지 - resize발생시 배경화면 색 변경

노마드코더 챌린지5일 if... else : 조건식의 결과에 따라 {}로 묶인 블록의 실행 여부를 결정하는 조건문입니다 classList : 요소에 적용된 클래스들의 이름을 리스트 형태로 반환해 줍니다 remove : classList의 메서드입니다. classList를 통해 반환된 리스트 중에서 원하는 클래스를 제거할 수 있습니다 add : classList의 메서드입니다. classList의 리스트에 원하는 클래스를 추가할 수 있습니다. innerWidth : 브라우저의 가로 길이를 나타내는 Window 객체의 프로퍼티입니다. css 없이 구현 const colors = ["#1abc9c", "#3498db", "#9b59b6", "#f39c12", "#e74c3c"]; function handleW..

[노마드코더] 바닐라JS 챌린지 - 마우스 이벤트, 윈도우 사이즈 - 글자 색변 경하기

요구조건 마우스가 title위로 올라가면 텍스트가 변경되어야 합니다. 마우스가 title을 벗어나면 텍스트가 변경되어야 합니다. 브라우저 창의 사이즈가 변하면 title이 바뀌어야 합니다. 마우스를 우 클릭하면 title이 바뀌어야 합니다. title의 색상은 colors 배열에 있는 색을 사용해야 합니다. 모든 함수 핸들러는 superEventHandler내부에 작성해야 합니다. Hello! // import "./styles.css"; const colors = ["#1abc9c", "#3498db", "#9b59b6", "#f39c12", "#e74c3c"]; // const myText = document.querySelector("h2"); const superEventHandler = { cl..

없던 버튼 만들기, 텍스트 삭제하기

1. document.creatElement로 버튼 생성 -> x 텍스트 추가 -> 이벤트 리스너 추가 2. deleteTodo()호출 3. 클릭한 x의 입력한 텍스트의 부모인 li를 찾는다 - li를 찾는 이유 li > span > 텍스트 이기 때문에 li를 통째로 지워야함 4. 삭제 5. li.appendChild(button)을 통해서 html 파일 수정 ※ const li = event.target.parentElement.innerText; : innerText는 해당 element안의 text 값입니다. x버튼 누르면 텍스트 삭제

자바스크립트로 ul > span > 입력 값 추가

1. input의 value 값 새로운 변수newTodo에 저장 2. toDoInput.vlaue는 다음 입력을 위해서 "" 빈 값 추가 3. 화면 출력을 위해서 painTodo()함수 호출(입력 값 매개변수로 추가) 1. document.creatElemet()를 통해서 li, span 태그 생성 2. li.appendChild를 통해서 li > span 만들어주기 3. span 안에 입력 value 추가 4. id = todo-list에 li > span > value 값 추가 li > span > 입력 값 추가된 것 확인 가능

랜덤값 뽑기 / 자바스크립트에서 HTML 태그 생성

Math.floor(Math.random() * quotes.length) 을 통해서 랜덤 값을 가져올 수 있다. document.createElemetn를 통해서 HTML 태그를 생성할 수 있다. 생성된 태그는 태그의 역할을 해서 src 등 하위 속성을 사용할 수 있다. document.body.appendChild를 통해서 자바스크립트에서 생성된 태그를 html 파일로 추가 할 수 있다.

Date 객체를 통해 현재 시간 출력하기

const date = new Date() 를 통해서 시간 객체를 생성해준다. - getHours() : 현재 시간 출력 - getMinutes() : 현재 분 출력 - getSeconds() : 현재 초 출력 setInterval을 통해서 주기적인 함수를 실행해준다. - setInterval(실행할 함수, 실행시간) padStart()를 사용하면 string에 문자를 추가할 수 있다. padStart()메서드는 결과 문자열이 지정된 길이에 도달할 때까지 현재 문자열을 다른 문자열로 채웁니다. padStart(targetLength, padString) - targetLength : str가 채워진 후 결과 문자열의 길이입니다 . 값보다 작은 경우 str.length, 다음 str그대로 반환됩니다. - ..

localStorage 사용하기

localStorage를 통해서 페이지가 새로 고침 되어도 브라우저에 값을 저장할 수 있다. localStorage 객체는 단순한 key-value 저장소로 이루어져있다. 개발자 도구를 보면 로컬스토리지에 접근할 수 있으며, 입력한 값이 로컬 스토리지에 key-value형태로 저장된 것을 확인 할 수 있다. 사용 방법 추가 localStorage.setItem('myCat', 'Tom'); 읽기 const cat = localStorage.getItem('myCat'); 제거 localStorage.removeItem('myCat'); 항목 전체 제거 localStorage.clear(); 입력 폼에 값이 없다면 입력 폼을 계속 띄워준다. 만약 입력 폼을 통해 localstorage에 값이 저장되면 입력..

``(백틱) 사용하기

``(백틱) 스트링과 변수를 하나로 합쳐줄때 사용한다.변수를 스트링 안에서 사용할 수 있게 해준다. `` 시작으로 시작해서 $와 { }를 사용해야한다.

HTML 클래스 태그 신규 생성 / 제거

hidden이라는 css를 만들어준다. - display: none으로 바꿔주는 기능을 한다. html 태그에 class=""를 때려 입력해주면 display: none이 적용되어 form 태그가 안보인다. 위와 같이 HTML 태그에 직접 추가해줄수도 있지만 없는 없는 HTML 태그에 class를 추가해보자. classList.add('')를 통해 없던 class를 추가 시킬수도 있다. 클릭 시 classList.add('hidden')이 실행되고 이 생겨서 form이 사라지게 된다. 클래스를 삭제시킬 수도 있다. .calssList.remove("삭제할 클래스 이름"); .calssList.remove("hidden"); 실행 시 calss="hidden"이 있다가 사라지게 되어, form 태그에 입력..

form 텍스트 박스 새로고침 현상 방지 / 브라우저 동작 막기

form 태그로 submit하면 브라우저가 새로고침 된다. 이는 브라우저에서 form 태그를 사용하면 브라우저가 새로고침 되는것이 기본 값이다. form을 submit하면 브라우저는 기본적으로 페이지를 새로고침 하도록 되어있어, preventDefault() 함수를 추가함으로써 브라우저의 기본 동작을 막을 수 있다. * preventDefault 함수는 EventListener 함수의 '첫 번째 argument' 안에 있는 함수이다. 첫 arument는 지금 막 벌어진 event들에 대한 정보를 갖고 있다. form 태그에 값을 입력해서 submit를 수행했으나 새로고침이 일어나지 않는다. preventDefault()는 form에서만 사용하는 함수가 아니다. preventDefault() 실행시 브라우..

input 입력값 길이 체크하기

자바스크립트 기능으로 입력 길이 제한하자 id값을 이용해서 HTML 태그 가져와서 자바스크립트로 체크하자 결과 15개의 길이 이상인 경우 알람 html form 태그의 required를 이용해서 입력 길이 제한할 수 있다. form 태그 사용시 브라우저의힘으로 빈 경우 알람을 띄워줄수도 있다. maxlength="15" 를 이용해서 원하는 길이만큼 입력 가능하기도 하다.

이벤트리스너 기초2

이벤트 리스너를 이용해서 스타일 변경

go on! 버튼 queySelctor를 이용해서 class 값 가져오기 addEventListenr이용해서 클릭시 함수 실행 시킬 수 있음 addEventListenr안에서 실행 시킬 수 있는 함수 정의해주기 - innerHTML 이용해서 text 변경 결과 go on! 버튼 결과

이벤트리스너 기초1

방법1 : onclick에 함수 만들어서 실행가능 방법2 : 이벤트 리스너에 함수 이름 없이 바로 함수 기능 실행가능

탐색&시뮬레이션(string, 1차원, 2차원 리스트 탐색 )_11_격자판 회문수

부터 9까지의 자연수로 채워진 7*7 격자판이 주어지면 격자판 위에서 가로방향 또는 세로방향으로 길이 5자리 회문수가 몇 개 있는지 구하는 프로그램을 작성하세요. 회문수란 121과 같이 앞에서부터 읽으나 뒤에서부터 읽으나 같은 수를 말합니다. 빨간색처럼 구부러진 경우(87178)는 회문수로 간주하지 않습니다. ▣ 입력설명 1부터 9까지의 자연수로 채워진 7*7격자판이 주어집니다. ▣ 출력설명 5자리 회문수의 개수를 출력합니다. ▣ 입력예제 2 4 1 5 3 2 6 3 5 1 8 7 1 7 8 3 2 7 1 3 8 6 1 2 3 2 1 1 1 3 1 3 5 3 2 1 1 2 5 6 5 2 1 2 2 2 2 1 5 ▣ 출력예제 3 강사님 풀이 import sys sys.stdin=open("input.txt..