본문 바로가기
  • Monstera
[javascript] 자바스크립트 객체지향 - Object Oriented Programming(OOP) 객체지향 자바스크립트는 객체지향 프로그래밍 능력을 가진 언어이다. 객체지향 프로그래밍은 실제 세계에 기반한 모델을 만들기 위해 추상화를 사용하는 프로그래밍 패러다임이다. 객체지향 프로그래밍은 관계성 있는 객체들의 집합이라는 관점으로 접근하는 소프트웨어 디자인으로 볼 수 있다. 각 객체는 별도의 역할이나 책임을 갖는 작은 독립적인 기계로 볼 수 있는 것이다. 객체지향 프로그래밍은 보다 유연하고 유지보수성이 높은 프로그래밍을 하도록 의도되었다. 또한 객체지향적인 코드는 개발을 보다 단순하게 했고, 시간이 흐른 뒤에도 보다 쉽게 이해할 수 있도록 했으며, 복잡한 상황이나 절차들을 덜 모듈화 된 프로그래밍 방법들보다 더 직접적으로 분석하고, 코딩하고, 이해할 수 있도록 만들었다. - 객체지향 자바스크립트 개요 .. 2020. 1. 28.
[javascript] 개행문자(\n) 줄바꿈 처리 및 특정 단어 바꾸기 개행문자 바꾸기 \n을 로 변경 1. forEach 웬 forEach? 할수도 있지만 리액트(react) 프로젝트를 했었을때 줄바꿈을 forEach 혹은 map을 사용해서 했었다. 안녕하세요 \n줄바꿈 \n연습을 \n하고 \n있습니다.\n\n\n\n줄바꿈이 \n잘 \n 될까요? 2. replace + 정규식 안녕하세요 \n줄바꿈 \n연습을 \n하고 \n있습니다.\n\n\n\n줄바꿈이 \n잘 \n 될까요? 하면서 코드의 마지막을 pInner = pInner.replace(/\\n/gi,''); 라고 작성했는데 콘솔에만 바뀐값이 나오고 화면에는 출력이 안되었다. pInner은 pTag.innerHTML를 담은 하나의 string값이기 때문에 변수 pInner의 값만 바뀌고 pTag의 실제 innerHTML값.. 2019. 11. 4.
[javascript] 자바스크립트 이벤트와 이벤트 헨들러 MDN에서 가장 일반적인 카테고리를 참고했다. 그 외 더 자세한 정보는 하단의 참고 페이지 링크에서 확인 이벤트 사용법 Element.addEventListner('click',(e)=>{ //클릭되었을 때의 코드 // e.target // e.type // e.screenX // e.screenY // e.ctrlKey // e.altKey ... ETC }) 이벤트 핸들러 사용법 - 이벤트 앞에 on을 붙히면 된다. - HTML은 대,소문자를 구분하지 않지만 리액트 등에서는 구분을 해서 써 주어야 한다. 버튼 핸들링 제거 버튼 마우스 이벤트 * 포인팅 장치 : pc는 마우스, 모바일은 손 등 이벤트 이벤트 핸들러 발생하는 시점 click onClick 포인팅 장치 버튼이 엘리먼트에서 눌렸다가 놓였을 .. 2019. 11. 1.
[javascript] 제이쿼리와 자바스크립트 Class 제어 비교 jQuery class 제어 $( '#element' ).addClass( 'className' ); $( '#element' ).removeClass( 'className' ); $( '#element' ).hasClass( 'className' ); $( '#element' ).toggleClass( 'className' ); $( '#element' ).switchClass('oldClass', 'newClass'); javascript class제어 const element = document.getElementById( 'element' ); // 다수의 클래스는 , 로 구분 element.classList.add( 'className','otherClass' ); element.classLis.. 2019. 5. 26.