개발/Javascript
라이브러리 없이 만드는 간단한 로딩바(loadingbar)
흰색 부분이 회전하는 간단한 로딩바를 html, css, js만 가지고 라이브러리 없이 만들어 보자. html body 태그 안에 원하는 곳에 넣어 준다. css #loading { position: fixed; top: 50%; left: 50%; display: none; width: 50px; height: 50px; border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 1s ease-in-out infinite; -webkit-animation: spin 1s ease-in-out infinite; z-index: 9999; } 원하는 크기 및 속도, 색상 등 수정 ..
String 메서드 모음
String.prototype.indexOf : 전달 받은 인수와 매치되는 첫번째 인덱스를 반환 ex) const str = 'hello world'; str.indexOf('l') // 2 str.indexOf('l',3) // 3 (두번째 인수가 있으면 그 인덱스부터 검색) str.indexOf('z') // -1 String.prototype.search : 전달 받은 정규 표현식과 매치되는 첫번째 인덱스를 반환 ex) const str = 'hello world'; str.search(/o/) // 4 str.search(/z/) // -1 String.prototype.includes : [ES6] 전달 받은 문자열이 포함되어 있으면 true, 아니면 false 반환 ex) const str =..
Array 배열 메서드 모음
Array.isArray : 인수가 배열이면 true 아니면 false 반환 ex) Array.isArray([1,2]) //true Array.isArray({}) //false Array.prototype.indexOf : 인수로 전달된 요소를 검색해서 인덱스 반환 ex) const arr = [1,2,3,4] arr.indexOf(3) // 2 arr.indexOf(5) // -1 Array.prototype.push : 전달받은 인수를 원본 배열의 마지막 요소로 추가 (원본 배열 직접 변경됨) ex) const arr = [1,2,3,4] arr.push(5,6) // [1,2,3,4,5,6] Array.prototype.pop : 원본 배열의 마지막 요소를 제거하고 반환 (원본 배열 직접 변경됨..
체크박스 전체 선택 코드
전체 체크박스 클릭 했을 때 하위 체크박스 전체 체크 / 해제 코드 function starAllCheck(){ var isChecked = $('#isInterested_all').is(':checked'); if(isChecked){ $('input[name=isInterested]').prop('checked',true) }else{ $('input[name=isInterested]').prop('checked',false) } } 하위 체크박스 전체 선택 / 해제 되었을 때 전체 체크박스 체크/해제 코드 function starCheck(){ var total = $("input[name=isInterested]").length; var checked = $("input[name=isInteres..
html에서 style, script 위치
무조건 여기! 보다는 왜 여기여야 할까? 일반적으로 브라우저는 html을 위에서 부터 읽어 내려간다. 야호 2 가 있다고 생각해보자. 1번 위치 : style이 로딩되고 div가 로딩 되기 때문에 div에 바로 스타일 적용이 된다. 2번 위치 : div가 로딩되고나서 style이 로딩 되기 때문에 css양이 엄청 많다고 하면 글씨가 검은색에서 빨간색으로 바뀌는걸 실시간으로 보게된다(단점) 그래서 style은 head안에 선언하는게 좋다 script script도 sytle과 똑같다. 다만 용도에 따라 선언위치가 달라질 수 있다. 1번 위치 : dom접근이 필요없고 js 로딩이 먼저 필요할 때 2번 위치 : dom접근이 필요한 js 로딩 할 때 js용량이 매우 크다고 생각해보면 한곳에 두는것 보다 용도에 ..