JavaScript (63) 썸네일형 리스트형 Math.min/max 최소값, 최대값 구하기 최소값, 최대값 구하기 Math.min.apply Math.max.apply let array2 = [273, 52, 103, 57, 271]; let min=Number.MIN_VALUE; let max=Number.MAX_VALUE; min= Math.min.apply(null, array2); max= Math.max.apply(null, array2); document.write(`가장 작은 수${min}`+" "); document.write(`가장 큰 수${max}`); sort(fnc(a, b{}return a-b)) + reverse() 내림차순 sort(fnc(a, b{}return a-b)) + reverse() 내림차순 let array = [52, 71, 32, 103, 273, 93] array.sort(function (a, b) {return a - b}) document.write(array.reverse()); //273,103,93,71,52,32 https://standout.tistory.com/611 sort(fnc(a, b{}return a-b)) 오름차순 sort(fnc(a, b{}return a-b)) 오름차순 let array = [52, 71, 32, 103, 273, 93] array.sort(function (a, b) {return a - b}) document.write(array); //32,52,71,9.. sort(fnc(a, b{}return a-b)) 오름차순 sort(fnc(a, b{}return a-b)) 오름차순 let array = [52, 71, 32, 103, 273, 93] array.sort(function (a, b) {return a - b}) document.write(array); //32,52,71,93,103,273 reverse() 역순정렬 reverse() 역순정렬 let array = [52, 71, 32, 103, 273, 93] document.write(array.reverse());//93,273,103,32,71,52 $.grep, 배열반환 $.grep() jQuery 라이브러리의 메소드 중 하나 배열을 필터링할 때 사용 $.grep(array, function(elementOfArray, indexInArray) [, invert]) array: 필터링할 배열 function: 필터링 함수, true시 요소를 포함, false시 요소제외 invert: 선택요소, true를 전달하면 필터링 함수의 결과를 반전시킴 예시로 배열의 요소를 순회하며 짝수만 추출해보자. var arr = [1, 2, 3, 4, 5]; var even = $.grep(arr, function(element, index) { return element % 2 === 0; }); console.log(even); // [2, 4] $.map, 배열을 순회하며 함수를 실행하고 새 배열에 추가한다. $.map jQuery에서 제공하는 함수 중 하나 배열을 순회하면서 지정된 함수를 실행해, 반환값을 새 배열에 추가한다. $.map(array, callback) array: 변환할 배열 callback: 각 요소에 대해 실행할 함수 var arr = [1, 2, 3]; var newArr = $.map(arr, function(val, index) { return val * val; }); console.log(newArr); // [1, 4, 9] Vue 생명주기와 전역/지역 컴포넌트 beforeCreate 인스턴스생성 created 생성후 mounted 인스턴스 el 부착완료 updated 데이터/화면변경 완료 전역컴포넌트는 함께 공유해 가질 수있는 컴포넌트로 인스턴스생성시 모두 동일하게 추가되지만, 지역컴포넌트는 특정 인스턴스 안에 삽입해야만 화면에 추가된다. 인스턴스 #app data: message: {{message}} html() text()의 차이, 무엇을 인식할것인가 html() text()의 차이 html는 코드를 인식하고, text는 인식하지 못한다. 예시코드 첨부 여러분, 제이쿼리는 아주 쉽습니다. html()로 출력 text()로 출력 $(function () { let str1_0 = $('#hey').html(); let str2_0 = $('#jquery').html(); let str3_0 = $('#easy').html(); $('.str1_0').html(str1_0); $('.str2_0').html(str2_0 + " "); $('.str3_0').html(str3_0); let str1_1 = $('#hey').text(); let str2_1 = $('#jquery').text(); let str3_1 = $('#easy').text(); $.. jquery 위치 탐색 선택자 :first first() first-of-type 첫번째부터 선택하기 $('li:first') 문서 내에서 첫 번째 li 요소를 선택 $('li:first').addClass('selected'); $('li').first() 문서 내에서 첫 번째 li 요소를 선택 $('li').first().addClass('selected'); $('li:first-of-type') 첫 번째로 나타나는 li 요소만 선택 $('li:first-of-type').addClass('selected'); jquery 위치 탐색 선택자 :last last() last-of-type 마지막부터 선택하기 $('li:last') 문서 내에서 마지막 li 요소를 선택 $('li:last').addClass('selected'); $('li').last() 문서 내에서 마지막 li 요소를 선택 $('li').last().addClass('selected'); $('li:last-of-type') 문서 내에서 li 요소 중 마지막 요소를 선택 $('li:last-of-type').addClass('selected'); $('li:last-of-type(2)') 문서 내에서 li 요소 중 마지막에서 두 번째 요소를 선택 $('li:last-of-type(2)').addClass('selected'); jquery 위치 탐색 선택자 nth-child() n번째, n의배수 요소 선택 $('li:nth-child(2)') 문서 내 모든 li 요소 중에서 2번째 자식 요소를 선택 $('li:nth-child(2)').addClass('selected'); $('li:nth-child(2n)') 문서 내 모든 li 요소 중에서 2의 배수요소를 선택 $('li:nth-child(2n)').addClass('selected'); jquery 위치 탐색 선택자 only-child() 유일한 요소 선택 $('li:only-child') 문서 내 모든 li 요소 중 형제 요소가 없는 유일한 자식 요소를 선택 $('li:only-child').addClass('selected'); *유일한 자식요소 아래처럼 형제가 없는 요소를 말한다. 첫 번째 요소 두 번째 요소 세 번째 요소 유일한 요소 jquery 위치 탐색 선택자 eq() index로 선택한다. $('li:eq(2)') 문서 내에서 세 번째 li 요소를 선택 $('li:eq(2)').addClass('selected'); $('li').eq(2): 문서 내에서 세 번째 li 요소를 선택 $('li').eq(2).addClass('selected'); jquery 위치 탐색 선택자 gt() n번째 요소 이후의 모든 요소 선택 $('li':gt(1)) 문서 내에서 두 번째 li 요소 이후의 모든 li 요소를 선택 $('li:gt(1)').addClass('selected'); jquery 퀴즈 구현하기, 정답 출력 html() text() html 작성 script 작성 var i = 0; function btn() { i+=1; if(i==1){ $('.btn_img').html("") } if(i==2){ $('.btn_img').html("") i = 0; } $('.btn_txt1').text($('#input1').val()); $('.btn_txt2').text("땡! 둘다 나옵니다."); } 자바스크립트로 무지개만들기, 배열값 css 속성으로 적용하기 jquery append nth-child() .css() for문 each() div .outer를 만들어 영역을 만들자. jquery연결후 color에 색상값을 담은 배열을 만들어 .outer 영역에 div코드를 append하고 동시에 css를 추가한다. jQuery 선택자, closest 조상요소중 가장 처음으로 일치하는 요소 요소의 가장 가까운 조상 요소 중에서 가장 먼저 나타나는 요소를 선택 $('h1').closest('span') jQuery 선택자, 형제 인접한 형제 요소 중 선택 요소 바로 다음에 나타나는 첫 번째 요소를 선택 $('h1+h2') 모든 요소의 형제 요소를 선택 $('p').siblings jQuery 선택자, 이전/다음 이전 요소 하나만 선택 $('h1').prev() 다음 요소 하나만 선택 $('h1').next() 이전 모든 요소를 선택 $('h1').prevAll() 다음 모든 요소를 선택 $('h1').nextAll() 요소사이의 모든 요소 선택 요소 바로 이전 요소부터 요소가 나타날 때까지의 모든 요소를 선택 $('h1').prevUtil('h2') 요소사이의 모든 요소 선택 요소 바로 다음의 요소부터 요소가 나타날 때까지의 모든 요소를 선택 $('h1').nextUntil('h2') jQuery 선택자, 부모 자식 parent, children 직계 부모 $('h1').parent() 모든 조상 $('h1').parents() 직계자식 span $(h1>span) $('h1').children() 전체 자식 span, 전체자식 $(h1 span) jQuery 선택자, $() 선택자, 다수 선택가능 id, class값으로 선택 및 태그를 추가해 조건을 추가할 수 있다. $('h1') $('h1, h2, h3') $('h1#id') $('#id') $('h1.class') $('.class') 자바스크립트에서 ${contextPath} 변수로 사용하기 원하는 변수값안에 아래의 함수를 적는다, 함수가 contextPath를 반환해준다. var = getContextPath() function getContextPath() { var hostIndex = location.href.indexOf( location.host ) + location.host.length; return location.href.substring( hostIndex, location.href.indexOf('/', hostIndex + 1) ); }; ajax에서 에러 처리 + 아무런 에러가 뜨지않음 ajax로 보낼 data 변수명이 맞는지, 오타는 없는지 확인해보자. ajax는 친절하게 알려주지않는다. contextPath 변수를 사용하여 action한다면 해당 변수가 설정되었는지도확인해보자. selectBox.nextSibling 오류 nextElementSibling var input = selectBox.nextSibling input.setAttribute("value", value); 위의 코드로 selectbox의 값을 input에 넣는데 작동이 되지않았다. nextElementSibling로 바꿔보자. var input = selectBox.nextElementSibling input.setAttribute("value", value); 이유는 무엇일까? nextSibling은 현재 요소의 다음 형제 노드를 반환한다. 이 속성은 텍스트 노드, 주석 노드 등 모든 노드 유형에 대해 작동한다. 무엇이라도 하나가 더 있다면 원하는 요소를 잡기 어려울 수 있다는 말이다. 반면에, nextElementSibling은 현재 요소의 다음 형제 요소를 반환한다. 이 속성은.. 자바스크립트 Node 선택자 예약어 정리, 자식/type/name/value childNodes 현재 노드의 모든 자식 노드 목록을 선택 var div = document.querySelector("div"); var childNodes = div.childNodes; hasChildNodes 현재 노드에 자식 노드가 있는지 확인 var div = document.querySelector("div"); var hasChildNodes = div.hasChildNodes(); nodeType 현재 노드의 유형을 반환 var p = document.querySelector("p"); var nodeType = p.nodeType; nodeName 현재 노드의 이름을 반환 var p = document.querySelector("p"); var nodeName = p.nodeName;.. ul 태그에 innerHTML 안됨, 쉬운해결법 main.do:56 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') console에도 잘 뜨고 div에는 innerHTML되지만 리스트 ul안에 innerHTML안되는 현상이 생겼다. div에 innerHTML이 된다면, 발상의 전환으로 ul에 div를 넣어 쉽게 해결했다. 추후 더 찾아보니 태그는 innerHTML 프로퍼티를 사용하여 내부 HTML 코드를 설정하는 것은 지원되지 않는다고 하는데.. 요소의 내용을 변경하려면 태그를 추가하거나 제거해야 한다고 한다. 이를 통해 목록 아이템을 동적으로 추가하거나 삭제할 수 있다. var myList = document.getElementById("myList"); var newI.. 자바스크립트 선택자 예약어 정리, 부모/자식/형제 가물가물할때마다 검색하는게 시간낭비 인것같아 기록해봤다. querySelector 문서 내 첫 번째 요소를 반환 document.querySelector('.class'); querySelectorAll 문서내 모든 요소 반환 document.querySelectorAll('.class'); id, class, tag 해당되는 모든 요소 반환 document.getElementById("#id") document.getElementsByClassName(".class") document.getElementsByTagName("div") name 속성값이 일치하는 모든 요소 반환 document.getElementsByName("password") children index 자식 선택자 label.chil.. 자바스크립트 input files 이름 불러오기 const file_real = document.querySelector('.file_real'); let files = file_real.files[0].name; https://standout.tistory.com/404 자바스크립트 file input 커스텀, placeholder/value 지정하기 file를 커스텀해보자. file input과 readonly input을 label로 묶어 구현한다. 첨부하기 function filesToFackFilesInput(label){ let file_real = label.children[0]; let file_fake = label.children[1]; file_real.addEventListener("change", functio standout... 자바스크립트 file input 커스텀, placeholder/value 지정하기 file를 커스텀해보자. file input과 readonly input을 label로 묶어 구현한다. 첨부하기 function filesToFackFilesInput(label){ let file_real = label.children[0]; let file_fake = label.children[1]; file_real.addEventListener("change", function () { let files = this.files[0].name; console.log(files); file_fake.value = files; }); } 이후 .file_real을 display-none해주면 완료. span태그와 css를 추가해 기존에 기획했던 디자인과 통일해보자. 아래의 main.png가 value.. 자바스크립트 alert 한번만 띄우게하기 alert을 띄운뒤, 변수값을 false로 바꾸고, alert을 if문으로 감싸자. if, 조건이 false이라면 if문은 실행되지않는다. var showAlert = true; function showAlertOnce() { if (showAlert) { alert("안녕하세요!"); showAlert = false; } } 이전 1 2 3 다음
