파송송의 코딩테스트 공부

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

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 : 이벤트 리스너에 함수 이름 없이 바로 함수 기능 실행가능