JavaScript19 [JavaScript] onclick() 이벤트로 매개변수 전달 프로젝트를 하는 중 글 제목을 클릭하면 아래 내용이 나타나고 다시 클릭하면 사라지는 기능을 구현하고 싶었다. 문제는 글제목이 여러개여서 같은 숫자에 해당하는 글내용을 어떻게하면 간단하게 처리할 수 있을지가 문제였다. 0번 글제목 0번 글내용 1번 글제목 1번 글내용 2번 글제목 2번 글내용 3번 글제목 3번 글내용 4번 글제목 4번 글내용 위 태그를 querySelectorAll()을 이용해 가져옴 const title = document.querySelectorAll(".topic"); const para = document.querySelectorAll(".topic-detail"); 먼저 클릭하면 p태그가 클릭시에만 나타날 수 있도록 안보이는 상태가 default가 되도록 작성 .hidden{ di.. 2021. 10. 17. [JavaScript] 정규표현식 정규 표현식 문자열에 나타나는 특정 문자 조합과 매칭시키기 위해 사용하는 패턴 정규 표현식을 만드는 방법 1. 정규식 리터럴 사용 var regex = /a+b/; 슬래시로 감싸는 패턴으로 스크립트를 불러올 때 컴파일됨(정규식이 상수일 때 사용) 2. RegExp 객체의 생성자 함수 호출 var regex = new RegExp("a+b"); 정규식이 실행 시점에 컴파일됨(정규식의 패턴이 변경될 수 있거나 / 사용자의 입력과 같은 다른 곳에서부터 패턴을 가져올 경우 사용) 정규 표현식 구성 1. 단순 패턴을 사용 /abc/ 라는 패턴을 사용할 경우, abc라는 문자열을 정확하게 포함해야만 대응 aaaaabccccc// abc라는 전체 문자열이 있어 대응 cccccbaaaaa// abc라는 문자열을 포함하.. 2021. 10. 14. [JavaScript] jQuery를 사용하지 않고 Vanilla Javascript로 모달 만들기 1. HTML 작성 Open Modal Modal title Modal content Modal content Modal content Modal content close 2. CSS 작성 body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; } button { /* button의 기본 디자인을 reset */ all: unset; font-size: 20px; background-color: teal; color: white; padding: 5px 10px; border-radius: 5px; cu.. 2021. 10. 5. [JavaScript] click event 로 글자 색을 번갈아가며 변경하는 3가지 방법 div.hello 태그 내부에 h1태그가 있음 Click me!! JavaScript에서 querySelector()를 이용해 h1태그를 반환 const h1Tag = document.querySelector("div.hello:first-child h1"); addEventListener()메서드로 click event 추가 첫번째 JavaScript 만으로 색을 변경 function handleTitleClick() { const curColor = h1Tag.style.color; let newColor; if(curColor === "blue"){ newColor = "red"; }else{ newColor = "blue"; } h1Tag.style.color = newColor; } h1Tag... 2021. 9. 13. [Spring] Eclipse Spring Legacy Project 세팅 Spring Legacy Project src/main/java 컨트롤러, service 등 관여 src/main/resources 백엔드 로직 관련 파일 저장src/test/java src/test/resources 테스트 관련 클래스 및 파일 저장servlet-context.xml servlet-context.xml 웹에 관련된 스프링 설정파일(connection pool 등) root-context.xml 웹 이외의 내부 로직 관련된 스프링 설정 파일 views view 역할을 할 .jsp 파일의 기본 폴더 web.xml Tomcat 관리용 파일 pom.xml 사용할 부가 라이브러리 관리 1. Help - Eclipse Marketplace... - Spring 검색 - install - Resta.. 2021. 9. 6. [JavaScript] 프로토타입을 활용한 상속 위임형 상속(Delegation inheritance) 프로토타입 객체는 다른 객체의 기반이되며, 위임 프로토타입을 상속받을 경우 새 객체는 해당 프로토타입에 대한 참조를 가짐 function Person(name){ this.name = name; } Person.prototype.setName = function(name){ this.name = name; } Person.prototype.getName = function(){ return this.name; } Person이라는 함수를 만들고 Person.prototype으로 객체의 공용 메서드를 작성 function Student(name, major){ this.major = major; } Person(부모)을 상속받을 Student를 maj.. 2021. 9. 5. 이전 1 2 3 4 다음
