📌Servlet : 웹 서비스를 위한 자바 클래스 ex) action='주소' - 웹 프로그래밍에서 클라이언트의 요청(Request)을 처리하고 그 결과를 다시 클라이언트에게 응답(Response)하는 Servlet클래스의 구현 규칙을 지킨 자바 프로그래밍 기술 💡 자바 어플리케이션 코딩을 하듯 웹 브라우저용 출력 화면(HTML) 을 만드는 방법 ➰ 비쥬얼 스튜디오 코드 ➰ 1. index.html 먼저 생성한다. → index라는 이름이 붙은 파일은 메인 페이지 역할을 한다. 2. form 태그 작성 → 내부에 작성된 input 태그 값을 지정된 서버 또는 페이지로 제출 하는 역할 name : 어떤 input 태그에 작성된 값이 제출 된건지 알 수 있도록 반드시 input 태그에 작성해야한다. acti..
ON
📌Servlet : 웹 서비스를 위한 자바 클래스 ex) action='주소' - 웹 프로그래밍에서 클라이언트의 요청(Request)을 처리하고 그 결과를 다시 클라이언트에게 응답(Response)하는 Servlet클래스의 구현 규칙을 지킨 자바 프로그래밍 기술 💡 자바 어플리케이션 코딩을 하듯 웹 브라우저용 출력 화면(HTML) 을 만드는 방법 ➰ JAVA 세팅 방법 ➰ 1. 자바 켜서 새롭게 5_Server를 입력하여 새 창을 켜준다. 2. 자바 실행 시 Java EE가 없다면, 아래와 같이 확인하면 된다. 만일, 그래도 없다면 HELP에 들어가서 Web Developer을 검색하여 3번째 것을 install을 하면 된다. 3. Package Explorer 켜기 4. Console 켜기 (Marke..
➰ Ancestors(조상) 메소드 : 선택된 요소의 상위 요소들을 선택할 수 있는 메소드 $("요소명").parent() 선택된 요소의 바로 위 상위 요소 $('요소명').parents([매개변수]) 선택된 요소의 모든 상위 요소 리턴 매개변수가 있으면 매개변수와 일치하는 부모만 리턴 $('요소명').parentsUntil(매개변수) 선택된 요소부터 매개변수 요소 전까지 범위의 요소 리턴 ➰ descendants(자손, 후손) 메소드 : 선택된 요소의 하위 요소들을 선택할 수 있는 메소드 $('요소명').children([매개변수]) 선택된 요소의 모든 자식 객체 리턴 매개변수가 있으면 매개변수와 일치하는 자식 객체만 리턴 연속해서 사용 가능 $('요소명').find(매개변수) 선택된 요소의 인자와 일..
📌Git : 현재 모양을 관리하는 시스템 📌저장소 종류와 관련 용어 Working Directory : 작업이 진행되는 폴더 Staging Area : 준비 영역, 중간 영역 - 변경된 코드가 Local Repository에 저장하기 전 머무르는 중간 영역.- commit : staging Area에 저장한 내용을 Local Repository에 반영 Local Repository : 내 PC 내에 있는 저장소 - 소스 코드의 추가/변경 사항을 기록하는 저장소 - push: staging Area에 저장한 내용을 Local Repository에 반영 Remote Repository : 원격 저장소(GitHub) ➰다운로드 및 설치 방법➰ 1. Sourcetree | Free Git GUI for Mac ..
📌jQuery 🌝 기존에 복잡했던 클라이언트 측 HTML 스크립팅(JS)을 간소화하기 위해 고안된 Javascript Library이다. ( * 라이브러리(library) : 프로그램, 프로그래밍 언어에 있는 추가적인 기능 ) 🌚 단점 : jQuery 라이브러리를 다운로드 받아서 사용 -> 로딩속도 느림 (순서 JS보다 속다가 조금 느림) 📌jQuery연결방법 1) jQuery 라이브러리를 다운로드 받아서 직접 연결 - 장점 : 서버 컴퓨터에 라이브러리가 존재하기 때문에 연결 속도가 빠름 - 단점 : 폴더 구조 변경 시 경로가 꼬이게되는 문제가 발생할 수 있다. - jQuery 공식 홈페이지 : https://jquery.com/ 1. js폴더에 jquery 파일을 다운로드 받아 넣는다. 2. html ..
요소.classList : 요소가 가지고 있는 클래스를 배열로 반환 요소.classList.remove("클래스명") : 요소의 특정 클래스 제거 요소.classList.add("클래스명") : 요소의 특정 클래스 추가 요소.classList.toggle("클래스명"): 클래스가 있으면 제거 없으면 추가 요소.setAttribute("속성","속성값") : 요소에 속성 / 속성값 추가 HTML 코드 추가 계산 JS 코드 // 추가 버튼 (#add) 클릭 되었을때 document.getElementById("add").addEventListener("click", function () { //div요소 생성 const div = document.createElement("div"); //div에 row..
📌DOM(Document Object Model) HTML(웹문서, 웹페이지) 문서를 객체 기반으로 표현한 것 -> HTML 문서에 작성된 내용을 트리구조(계층형으로 표현)로 나타냈을 때 각각의 태그, TEXT, COMMENT 등을 Node라고 한다. document : { DOCTYPE : html, HTML : { HEAD : { TITLE : { TEXT : "문서 제목" }, STYLE : {...}, META : {...} } , BODY : { H1 : { TEXT : "제목", ATTRIBUTE : "속성" }, COMMNET : {TEXT : "주석 내용"}, DIV : {...} } } } 🔊 Node 확인하기 → 태그(요소 노드), 속성, 주석, 내용(텍스트 노드) 등을 모두 표현 No..
➰ 문자열.trim() : 문자열 양 끝에 공백을 모두 제거 ex) " k h ".trim()->"k h" ➰ 키보드 이벤트 onkeydown : 키가 눌러졌을 때 (키보드을 누르자마자!) onkeypress : 키가 눌러지고 있을 때 (키보드을 누르고 있을때 == 실제로 글자를 쓸때) onkeyup : 키를 눌렀다 땠을때 (사용빈도 ↑ ) ➰ 버튼 색 바꾸기 방법 1) 요소를 문서에서 찾아서 선택 document.getElementById("test2-3").onclick=function(event){ document.getElementById("test2-3").style.backgroundColor="pink"; } 방법 2) 매개변수 e 또는 event 활용하기 -> 이벤트 핸들러에 e 또는 ev..
