본문 바로가기

웹 개발

 (140)
[Web_JSP] 02 실습(Servlet) - 문제 1. calc.jsp 수식을 입력해주세요(두 정수의 사칙 연산) 결과 확인 2. Calc.java package com.example.calc; public class Calc { private int num1; private int num2; public Calc() {;} public Calc(int num1, int num2) { super(); this.num1 = num1; this.num2 = num2; } //덧셈 public int add() {return num1 + num2;} //뺄셈 public int sub() {return num1 - num2;} //곱셈 public int mul() {return num1 * num2;} //나눗셈 public ..
[Web_JSP] 01 ● JSP(Java Server PJSP(Java Server Page) - HTML을 중심으로 자바와 같이 연동하여 사용하는 웹 언어이다. - HTML코드 안에 JAVA코드를 작성할 수 있는 언어이다. ● 서버 - 사용자의 요청에 맞는 서비스를 제공해주는 것 1. 요청(request): 클라이언트 ---> 서버 2. 응답(response): 서버 ---> 클라이언트 ● 웹(Web) - 페이지 요청과 응답이 일어나는 장소 - 인터넷에 연결된 컴퓨터들을 통해 사람들이 정보를 공유할 수 있는 정보공간 ● 웹 서버(http) - 아파치 - 사용자의 요청이 정적 데이터인지 동적 데이터인지 판단한다. - 정적 데이터 : 이미 준비된 HTML 문서를 그대로 응답해준다. - 동적 데이터 : 웹 컨테이너(서블릿 컨테이..
[Web_JavaScript] 19 실습(jQuery 체크박스(1)) - 전체 동의 체크박스 전체 동의 서비스 이용약관 동의 정보 수집 동의 마케팅 수신 동의 실습(jQuery 체크박스(2)) - 문제 // 하나의 약관이라도 해제가 된다면 전체 동의 체크 해제 // 각 항목이 모두 체크되면 전체 동의 체크 - 코드 전체 동의 서비스 이용약관 동의 정보 수집 동의 마케팅 수신 동의 실습(JavaScript를 jQuery로 변경) 1. [Web_JavaScript] 13의 task01.js 변경 let $tempTr; let tempText; function confirm(){ // const input = document.getElementById("input").value; const input = $("#input").val(); // ..
[Web_JavaScript] 18 실습(jQuery 이벤트) - 기본 코드 커피 케이크 마카롱 휘낭시에 에그타르트 아이스크림 스무디 멘보샤 앙버터 레쓰비 눌러보세요! 1. show() $ul.show(); - 결과 : 결과1만 출력됨 2. hide() $ul.hide(); - 결과 : 결과1에서 {눌러보세요!} 클릭 시 결과2 출력 3. toggle() $ul.toggle(2000); - 결과 : 결과1에서 {눌러보세요!} 클릭 시 toggle 동작처럼 2초동안 진행되어 결과2 출력(반대도 적용) 4. fadeIn() $ul.fadeIn(2000); - 결과 : 2초 안에 출력 텍스트 fadeIn 5. fadeOut() $ul.fadeOut(2000); - 결과 : 2초 안에 출력 텍스트 fadeOut 6. slideDown() $ul...
[Web_JavaScript] 17 ● jQuery - 요소들을 선택하는 강력한 방법 제공 및 선택된 요소들을 효율적으로 제어할 수 있는 자바스크립트 라이브러리이다. ● jQuery 기본 문법 $("선택자") - 아이디: # - 클래스: . - 속성: 태그명[속성명=속성값] - 태그: 태그명 ● 값 가져오기 $("선택자").val(); $("선택자").text(); ● 값 수정하기 $("선택자").val("값"); $("선택자").text("값"); ● 반복문 1. $.each(iterator, function(index, item){}); 2. iterator.each(function(index, item){}); - jQuery를 사용하면, 순수 Javascript에 비해 속도가 느려진다. - 하지만 간결한 문법으로 인해 개발 속도 증..
[Web_JavaScript] 16 ● location 객체 - 현재 브라우저에 표시된 HTML문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용할 수 있다. - location 객체의 프로퍼티와 메소드를 이용하면, 현재 문서의 URL 주소를 다양하게 해석하여 처리할 수 있게 된다. 1. href - 페이지의 URL 전체 정보 반환. URL을 지정하여 페이지 이동 가능하다. 2. pathname - URL 경로부분의 정보를 반환한다. 3. port - 포트번호를 반환한다. 4. reload() - 새로 고침 5. assign() - 현재 URL을 지정한 URL로 바꿔서 페이지 이동 6. replace() - 현재 URL을 지정한 URL로 바꾸고 이전 페이지로 돌아갈 수 없게 한다. ● history 객체 - 브라우저의 히스토리 정..
[Web_JavaScript] 15 ● 브라우저 객체 모델(BOM) - 자바스크립트를 이용하면 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있다. - 이 때 사용할 수 있는 객체 모델을 브라우저 객체 모델(BOM)이라고 한다. - 브라우저 객체 모델은 문서 객체 모델(DOM)과 달리 W3C의 표준 객체 모델은 아니지만 자바스크립트가 브라우저의 기능적인 요소들을 직접 제어하고 관리할 수 있는 방법을 제공해준다. ● window 객체 - 웹 브라우저의 창(window)을 나타내는 객체로, 대부분의 웹 브라우저에서 지원한다. - 자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 된다. ● window.onload = function(){} - 스크립트 언어는 위에서 아래로 해석되기 ..
[Web_JavaScript] 14 실습(DOM 정리) - 아래 이미지처럼 출력되는 프로그램 1. css * { margin: 30px 0; font-family: 'Black Han Sans'; } fieldset { border-style: dashed none none none; text-align: center; border-top-color: #ab47bc; border-top-width: 10px; width: 50%; margin: 10px auto; font-size: 3em; } p { font-family: 'Noto Sans KR'; font-size: 2rem; margin-bottom: 100px; } input[type='text'] { width: 50%; border-style: none none solid n..

티스토리툴바