JavaScript

홈페이지에 번역이 필요한 경우 자동으로 구글 페이지 번역기 사용이 가능하도록 하는 API 다. ✔ "english" 라는 버튼을 누르면 아래 src 경로에 있는 구글 번역기를 타고 페이지가 번역되어 로딩된다. ✔ 페이지가 로딩되며 "english" 버튼을 자동으로 눌러주는 trigger 가 있으면 버튼을 누를 필요 없이 자동으로 번역된 페이지를 볼 수 있지 않을까? english

◼ filter 함수 callbackFunction 의 조건에 해당되는 모든 요소가 있는 배열을 새로 생성하는 기능을 한다. var newArr = arr.filter(callbackFunction(element, index, array), thisArg); callbackFunction 에는 차례대로 요소값, 요소의 인덱스, 사용되는 배열 객체가 올 수 있다. thisArg 는 filter 에서 사용될 값이다. 선택적으로 사용 가능하다. 📑 사용 예시 treemapData1.filter((obj)=> { percArr.push(obj.per); })

[JavaScript] 순수 자바스크립트 페이징 처리

[javascript] 노드 찾기 (자식/부모/형제) / innerText, innerHTML ✔️ 자식 노드 검색 HTML CSS javascript jquery // 자식 노드 검색 var ps = document.getElementsByTagName("p"); var c1 = ps[2].childNodes; // text(문자열, 공백, 엔터)등도 검색 var c2 = ps[2].children; // 태그만 검색 var c3 = ps[2].getElementsByTagName("a"); var c4 = ps[2].getElementsByTagName("a")[0]; console.log(c1); // [text, a, text, span text] console.log(c2); // [a, spa..

[javascript] Element 인터페이스 / Node 노드 추가 삭제 ✔️ HTML 요소 인터페이스 : Element 인터페이스는 Document 안의 모든 객체가 상속하는 범용적인 기반 클래스이다. (공통 메소드와 속성만 가지고 있다.) : HTMLElement 는 HTML 에 특화된 Element 의 하위 인터페이스로서 id, style, title, dir, className 프로퍼티가 정의되어 있다. ✔️ Node : DOM 의 기본 원자는 Node 이며, 노드는 HTML 문서의 트리를 구성하는 단위이다. : Document, Element, Text, Comment 등 모두 노드로 부터 파생된다. Node의 속성은 DOM 의 모든 객체가 공통적으로 지원한다. : HTML DOM 은 노드들..

[javascript] getElement 관련 함수 ✔️ getElement 관련 함수 function result() { let str; // id로 접근 let name = document.getElementById("name").value; // name으로 접근 let age = document.getElementsByName("age")[0].value; // tag로 접근 let birth = document.getElementsByTagName("input")[2].value; // 선택자로 접근 // let chk = document.querySelector("input[type=checkbox]").value; let chk = document.querySelector("input[ty..

[javascript] 정규식 패턴 정리 ✔️ 정규식이란? : 정규식은 문자열에서 나타나는 특정 문자 조합과 대응시키기 위해 사용되는 패턴이다. : 정규식을 이용하면 특정 패턴과 일치하는 문자열의 검색, 치환, 추출이 가능하다. : 자바스크립트에서 정규식은 객체이다. : 정규식 패턴은 RegExp 객체의 exec(), test(), complile() 함수 그리고 String 객체의 match(), replace(), search(), split() 메소드 등과 함께 쓰인다. 📓 형식 var 변수 = new RegExp(패턴); 패턴은 따옴표나 슬래시로 감싸야한다. 📓 flags g : 글로벌 매치. 전체에서 일치하는 모든 문자를 검색한다. i : 대소문자를 구별하지 않는다. m : 시작 또는 끝 문자 ..

[javascript] form 객체 / form 서버 전송 ✔️ form 객체 : document.forms 속성은 현재 문서의 요소 목록을 반환한다. ✨ 요소를 접근할 때는 폼의 이름이나 인덱스를 이용해 접근한다. document.forms[인덱스]; document.forms["폼이름"] 👩‍💻 폼에 이름을 주면 이름으로 쉽게 접근할 수 있다. document.폼이름 ✔️ form 태그 내용 서버 전송하기 ation : form 요소의 내용을 서버로 전송할 때 전송한 데이터를 받을 서버 주소를 적는다. 👩‍💻 서버에 전송할 때, name 속성이 없으면 서버에서 받을 수 없다. id 속성으로는 서버 전송 불가 ❌ 이름 : 과목 : 점수 : 서버로 전송 //자바스크립트로 서버 전송 버튼 만들기 func..

[javascript] change 이벤트 / focus 이벤트 ✔️ change 이벤트 : , 및 요소의 값 변경이 완료되면 발생한다. : 는 드롭 다운에서 값을 선택한 경우 발생한다. 나머지 둘은 요소가 포커스를 잃은 경우 발생한다. -- html 코드 HTML 삽입 미리보기할 수 없는 소스 👩‍💻 select 태그에 onchange 이벤트를 줬다. function changeEmail(){ const f = document.memberForm; let s = f.selectEmail.value; if(s !== 'direct'){ f.email2.value = s; f.email2.readOnly = true; f.email1.focus(); } else { f.email2.value = ""; f..

[javascript] 마우스 관련 이벤트 / 마우스 좌표 ✔️ 마우스 관련 이벤트 : 마우스와 사용자가 상호 작용하여 발생하는 이벤트를 나타낸다. 👩‍💻 인라인에서 마우스 관련 이벤트 onmouseover : 마우스가 영역 안으로 들어왔을 때 실행되는 이벤트 onmouseout : 마우스가 영역 밖으로 나갔을 때 실행되는 이벤트 👩‍💻 마우스 버튼 이벤트 document.addEventListener("mousedown", function(e){ if(e.button===2 || e.button === 3){ alert('우측 누르면 혼난다..'); } }); ✔️ 마우스 좌표 const objBox = document.querySelector("#resultLayout"); objBox.addEven..