본문 바로가기

Front-End/JavaScript24

[JavaScript] 자식 노드 모두 삭제하기 부모노드에서 자식노드를 모두 지우고 싶은데 잘 되지 않을때가 많다. 아래 예시를 보자 const 부모노드 = document.querySelector( ".부모노드클래스이름" ); while (부모노드.hasChildNodes()) {// 부모노드가 자식이 있는지 여부를 알아낸다 부모노드.removeChild( 부모노드.firstChild ); } 원래 removeChild 메서드는 removeChild(지울 자식노드)를 적어줘야하는데, 위의 코드는 부모노드의 첫번째 자식을 계속해서 하나씩 반복문으로 지우는 방식이다. 간단하게 사용할 수 있으니 편하게 사용하면 될 듯하다. 2021. 4. 15.
[JavaScript] for문 안에서 Ajax 돌리기 이번에 코드를 짜면서 처음으로 Jquery의 힘을 빌렸는데 사용한 부분이 바로 for문 안에서 Ajax를 사용할 때이다. 내가 짜고 있는 정확한 코드를 보여줄수는 없지만, 글자로 표현하자면 바닐라 자바스크립트로 코드를 짜고 있었고, ajax를 이용하여 배열에 값들을 넣어놓고 그 배열을 재사용하여 for문을 돌려서 ajax로 다시 한 번 값을 받아오는 것이였다. Promise의 방법도 사용해보고, fetch를 사용해보았지만 바닐라 자바스크립트로 해결하지 못하였다. 혹시나 이 글을 보시고 바닐라 자바스크립트로 for문 속에서 ajax를 사용하는 방법을 아시는 분은 댓글을 달아주시면 정말 감사하겠습니다. 자 이제 알아보도록 하자. for (let i = 0; i < review.length; i++) { (f.. 2021. 4. 14.
[JavaScript] form태그 action 경로 여러개 만들기 요즘 PHP를 많이 사용하고 있는데, form태그를 사용하다가 하나의 form으로 여러 경로로 보낼 수 있으면 좋지않나? 라는 생각을 가지고, 공부하게 되었다. 예시) 전송1 버튼을 눌리면 form태그에 적은 action에 해당되는 경로로 정보가 보내지고, 전송2 버튼을 눌리면 submit2함수가 호출되면서 form의 action 주소가 두번째로 보낼 경로로 바뀌어서 보내지게 된다. 2021. 4. 12.
[JavaScript] reduce 함수 const number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const val = 0; const total = number.reduce((val1, val2, idx, arr) => { return val1 + val2; }, val); console.log(total); reduce() val1 : reduce() 함수의 두번째 파라미터 val의 값이 들어온다. val2 : number 배열의 첫번째 데이터 ' 1 ' 이 들어온다. idx : reduce() 함수의 두번째 파라미터인 val(두번째 파라미터)을 사용했는지의 여부(파라미터가 있는지 없는지)에 따라 값이 달라진다. val을 사용했다면 0부터 시작하고, 사용하지 않았다면 1부터 시작한다. arr : reduce() .. 2021. 3. 29.
[JavaScript] 동적으로 input text 추가하기 DOM 사용하기 form태그를 사용하다보면 input type="text"를 많이 사용하게 된다. 그런데 필요에 따라서 text박스를 넣고 빼고를 하고싶은데 그것을 만들줄 몰라서 한참을 생각하고 고민했다. 아주 간단한 예시를 들것이고 그것에 세세하게 설명을 할 것이니, 필요한 부분들만 가져가시면 될 듯합니다. DOM에 대한 설명이 궁금하신분들은 아래 링크를 참조하세요. meanbymin.tistory.com/61?category=923684 [JavaScript] DOM 문서 객체 모델 문서 객체 모델(Document Object Model) Html문서나 XML문서 등을 접근하기 위한 일종의 인터페이스입니다. 이 객체 모델은 문서내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다. meanbymin... 2021. 3. 4.
[JavaScript] 자바스크립트 정규식 자바스크립트 정규식 표현 ^x : 문자열이 x로 시작한다 x$ : 문자열이 x로 끝난다. .x : 임의의 한 문자를 표현한다. x+ : x가 1번 이상 반복한다. x? : x가 존재하거나 존재하지 않는다. x* : x가 0번 이상 반복한다 x|y : x 또는 y를 찾는다 (x), (x)(y), (x)(?:y) :^x : 문자열이 x로 시작한다 x$ : 문자열이 x로 끝난다 .x : 임의의 한 문자를 표현한다 x+ : x가 1번이상 반복한다 x? : x가 존재하거나 존재하지 않는다 x* : x가 0번이상 반복한다 x|y : x또는 y를 찾는다 (x), (x)(y), (x)(?:y) : ()안의 내용을 캡쳐하며, 그룹화 한다 x{n} : x를 n번 반복한 문자를 찾는다 x{n,} : x를 n번 이상 반복한 .. 2021. 1. 29.
[JavaScript] 이벤트 객체 이벤트 객체 (Event Object) 특정 타입의 이벤트와 관련이 있는 객체입니다. 이벤트 객체는 해당 타입의 이벤트에 대한 상세 정보를 저장하고 있습니다. 모든 이벤트 객체는 이벤트의 타입을 나타내는 type 프로퍼티와 이벤트 대상을 나타내는 target 프로퍼티를 가집니다. 이벤트 객체는 이벤트 리스너가 호출될 때 인수로 전달됩니다. function sendit(e){ // e : 이벤트 객체 console.log(e.target);// 이벤트 타겟 console.log(e.type);// 이벤트 타입 } 이벤트 전파 이벤트 전파란 이벤트가 발생했을 때 브라우저가 이벤트 리스너를 실행시킬 대상 요소를 결정하는 과정을 의미합니다. 이벤트의 대상이 window 객체와 같은 단일 객체라면 이벤트의 전파는.. 2021. 1. 25.
[JavaScript] DOM 문서 객체 모델 문서 객체 모델(Document Object Model) Html문서나 XML문서 등을 접근하기 위한 일종의 인터페이스입니다. 이 객체 모델은 문서내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다. 간단한 HTML 예를 들어보면 초 간단 HTML 제목 위 HTML의 트리구조를 살펴보자 document 객체 - lang 초 간단한 HTML문서 초 간단 HTML 제목 트리구조를 접근하는 방법을 제공하는 것을 DOM이라고 한다. document 객체 웹 페이지 그 자체를 의미하는 객체입니다. 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때 반드시 document 객체로부터 시작해야합니다. 메소드 getElementsByTagName() : 해당 태그 이름의 요소를 모두 선택합니다. .. 2021. 1. 19.
[JavaScript] 내장 객체 내장 객체 Math 객체 : Math 객체는 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 자바스크립트 표준 내장 객체입니다. min() : 인수로 전달 받은 값 중에서 가장 작은 수를 리턴합니다. 인수가 전달되지 않으면 Infinity를 리턴합니다. 또한 비교할 수 없는 값이 포함되어 있으면 NaN을 리턴합니다. max() : 인수로 전달 받은 값 중에서 가장 큰 수를 리턴합니다. 인수가 전달되지 않으면 -Infinity를 리턴합니다. 또한 비교할 수 없는 값이 포함되어 있으면 NaN을 리턴합니다. round() : 인수로 전달 받은 값을 소수점 첫번째 자리에서 반올림하여 그 결과를 리턴합니다. floor() : 인수로 전달받은 값과 같거나 작은 수 중에서 가장 큰 정수를 리턴합니다.(내림).. 2021. 1. 17.