Front-end/JavaScript

Front-end/JavaScript

자바스크립트에서 여러개의 체크박스 선택하기, checked 속성

여러개의 체크박스를 선택하려면 해당 태그에 클래스를 만들어주고 document.querySelectoAll('.클래스명') 체크가 된 체크박스만 선택하려면 document.querySelectoAll('.클래스명:checked') 체크박스 체크표시 체크박스선택.checked = true 체크박스 체크해제 체크박스선택.checked = false input 태그 타입으로 선택하기 querySelector('input[type="checkbox"]')

Front-end/JavaScript

[JavaScript] 배열에서 사용되는 함수

push() : 배열에 마지막 요소 추가 pop() : 배열의 마지막 요소 제거 unshift() : 배열의 시작 부분에 요소 추가 shift() : 배열의 첫 번째 요소 제거 concat() : 배열과 배열을 합침 slice(a, b) : 배열의 인덱스 a부터 b이전까지 반환 (b 포함 안됨) indexOf('요소') : 배열의 해당 요소의 인덱스를 반환 (없으면 -1) includes('요소') : 배열에 해당 요소가 있는지 true, false forEach() : 배열의 요소들을 하나씩 꺼내서 함수 실행

Front-end/JavaScript

[JavaScript] ToDoList 만들기

ToDo List 만들기 기본 HTML 틀을 만들어줍니다. js를 학습하기 위함이니 css는 따로 넣지 않겠습니다. 등록 버튼을 누르면 동작되도록 addEventListener를 사용해줍니다. 등록 버튼을 누를때마다 목록이 만들어져야 하기 때문에 createElement로 li태그를 만들어 appendChild로 li태그를 ul태그에 넣어줍니다. .value를 사용하여 인풋값을 받아오고 innerHTML로 li태그 안에 넣어줍니다. 이렇게 할 일을 적고 등록을 누르면 인풋값이 할일 목록에 나옵니다. 동일한 방법으로 마감 날짜도 만들어주시면 됩니다. (css가 없어서 모양이 좀 이상합니다..) 목록 삭제 하는 법 등록으로 만들어진 li 태그들을 querySelectorAll을 이용하여 배열로 저장합니다. ..

Front-end/JavaScript

[JavaScript] 정규 표현식

정규 표현식이란? : 문자열에서 특정 문자열을 찾기 위한 검색 패턴 문자열 검색, 교체 등의 작업에서 사용 정규 표현식 생성 1. 리터럴 이용 /검색패턴/플래그 2. RegExp 객체 이용 new RegExp("검색패턴") ex) let str = "안녕하세요 오늘도 열심히 기록을 하고 있습니다!! 오늘도 화이팅"; let strReg1 = /오늘도/; str.search(strReg1); : 오늘도가 2번 나오지만 search() 메소드는 첫번째 오늘도의 인덱스 값 6을 반환 일치하는 게 없으면 -1 반환 플래그(flags) : 기본 검색 설정을 변경 (설정된 플래그는 추가 삭제 불가) i : 대소문자 구분하지 않고 검색 g : 일치하는 모든 부분 선택 m : 여러 줄의 입력 문자열을 그 상태 그대로 ..

eunjin-park
'Front-end/JavaScript' 카테고리의 글 목록