목차
1. 아파치 톰캣으로 프로젝트 배포
2. 자바스크립트 기초
1. 아파치 톰캣으로 프로젝트 배포
1) 프로젝트 폴더 배포하기 (Export)
① 해당 프로젝트 오른쪽 마우스 클릭 후 ‘Export’ > ‘WAR file’ 클릭
② ‘Browse…’ 버튼 클릭해서 저장할 경로 지정하고, 체크박스 모두 선택 후 ‘Finish’ 클릭
2) 아파치 톰캣 서버로 프로젝트 배포하기
① 이클립스 종료 (아파치 톰캣과 충돌 방지)
② ‘내 컴퓨터' > '관리' > '서비스’에서 아파치 톰캣 시작 상태로 변경
③ 아파치 톰캣이 저장된 경로로 들어가서 아래 정보 변경
• ‘conf’ 폴더의 ‘server.xml’ 파일에서 포트번호를 8080이 아닌 80 등의 포트로 변경하기
경로 - C:\Program Files\Apache Software Foundation\Tomcat 9.0\conf
• 배포할 프로젝트 폴더 (ex. myhome.war) 압축 풀기
• 홈 디렉토리(Root 폴더)에 myhome 파일 덮어쓰기
경로 - C:\Program Files\Apache Software Foundation\Tomcat 9.0\webapps\ROOT
• 브라우저에 ‘http://localhost’ 입력하면 생성한 홈페이지 확인 가능
2. 자바스크립트 기초 개념
1) 자바스크립트(Javascript)란
자바스크립트(JavaScript)는 자바와 스크립트의 합성어이다. 이름 그대로 자바스크립트는 자바언어의 특성을 지닌 스크립트언어이다. 스크립트 언어는 브라우저(넷스케이프 또는 익스플로러)상에서 해석되어지는 프로그램언어이다.
2) 자바스크립트의 특성
- 객체 기반의 스크립트 언어
- 자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어
- HTML문서 내에 기술되고 HTML 문서와 함께 수행됨
- 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현 가능
3. 자바스크립트 기본 용어와 입출력 함수
1) 스크립트 선언 → ★first.html 참고
- <head>와 <body> 두 군데 중 한 곳에 선언
- 문장 끝에 세미콜론 없어도 됨
- 줄바꿈 태그인 <br>은 따옴표 안에 작성
방법 1)
<script>
document.write('처음 작성하는 자바스크립트1<br>');
document.write("처음 작성하는 자바스크립트2<br>");
document.write("처음 작성하는 자바스크립트3"+"<br>");
</script>
방법 2)
<script type="text/javascript">
document.write("처음 작성하는 자바스크립트4<br>");
</script>
방법 3)
<script language="javascript">
document.write("처음 작성하는 자바스크립트5<br>");
</script>
2) 주석 처리
• 단일행 주석: //
• 다중행 주석: /* */ ( 단축키: Ctrl + Shift + / )
3) 출력 함수 → ★alert.html 참고
• write() 함수
- 데이터를 출력하는 함수
- 문자는 외따옴표 또는 쌍따옴표에 들어간다.(둘 다 가능)
- ex) window.document.write("출력 성공1<br>");
document.write("출력 성공2<br>");
• console.log() 함수
- 자바스크립트 객체를 콘솔창에 출력하는 함수
- 브라우저에서는 보이지 않음
- 브라우저에서 단축키 F12를 이용해서 콘솔창을 열면 메시지 확인 가능
- ex) console.log("콘솔창에 출력");
• alert() 함수
- 메세지를 전달하기 위한 대화상자 생성
- ex) window.alert("경고창 출력");
alert("이름을 입력하세요.");
4) 자바스크립트의 변수 → ★variable.html 참고
• 변수: 메모리에 데이터를 저장하는 기억 공간
• 형식: var 변수명 = 값(데이터);
- ex) var num = 10;
- 숫자, 문자, 논리, null 데이터를 저장할 수 있다.
- 변수명이 같으면 가장 마지막에 저장한 값이 출력된다.
- typeof() 함수로 변수의 타입을 확인할 수 있다.
- ex) document.write(typeof(num)); // number
4) 입력 함수 prompt() → ★prompt.html 참고
- 윈도우 창을 띄워 사용자로부터 값을 입력받을 때 사용하는 함수
- 입력받은 값은 string형으로 저장된다.
- prompt() 함수의 첫 번째 값은 사용자에게 보여지는 값이고, 두 번째는 사용자 입력 필드에 들어갈 초기값이다.
- ex) <script>
var name = prompt("이름을 입력하세요.","");
document.write("당신의 이름은 "+name+"입니다.");
document.write(typeof(name)+"<br>"); // string
</script>
4. 연산자
1) 산술 연산자
① 산술 연산자 1 → ★oper01.html / oper08.html 참고
• 산술 연산자 : +, - , *, /, %(나머지)
var num1 = 15;
var num2 = 2;
var result;
result = num1 + num2; // 더하기
document.write("num1+num2="+result+"<br>");
result = num1 - num2; // 빼기
document.write("num1-num2="+result+"<br>");
result = num1 * num2; // 곱하기
document.write("num1*num2="+result+"<br>");
result = num1 / num2; // 나누기
document.write("num1/num2="+result+"<br>"); // 7.5 --> 실수형으로 처리
result = num1 % num2; // 나머지
document.write("num1%num2="+result+"<br>");
② 산술 연산자 2 → ★ oper02.html 참고
- 산술 연산자를 이용해서 문자 연결 가능
var t1 = "학교 종이 ";
var t2 = "땡땡땡 ";
var t3 = 8282;
var t4 = " 어서 모이자 ";
var result;
result = t1 + t2 + t3 + t4;
document.write("result= "+ result); // 숫자와 문자 결합 가능[결과]
result= 학교 종이 땡땡땡 8282 어서 모이자
2) 확장 대입 연산자 → ★oper03.html 참고
• 확장 대입 연산자 : +=, -=, *=, /=, %=
3) 증감 연산자 → ★oper04.html 참고
• 증감 연산자 : ++, --
var num1 = 10;
var num2 = 20;
num1--; // 후행 연산
document.write("num1 = "+num1+"<br>"); // 9
num1++; // 후행 연산
document.write("num1 = "+num1+"<br>"); // 10
result = num2++; // 후행 연산
document.write("num2 = "+num2+"<br>"); // 21
document.write("result = "+result+"<br>"); // 20
result = ++num2; // 선행 연산
document.write("num2 = "+num2+"<br>"); // 22
document.write("result = "+result+"<br>"); // 22
4) 비교 연산자 → ★oper05.html 참고
• 비교 연산자 : >, >=, <, <=, ==, !=
- 연산 결과가 참이면 true, 거짓이면 false 값 리턴
• 비교 연산자로 최대값과 최소값 구하기 → ★oper06.html 참고
- if ~ else 조건문에 비교 연산자를 사용해서 최대값과 최소값을 구할 수 있다.
5) 조건 연산자 → ★oper07.html 참고
- 형식: 변수 = (조건식) ? 값1 : 값2;
- 조건식이 참이면 값1을 변수에 리턴하고, 조건식이 거짓이면 값2를 변수에 리턴한다.
6) 논리 연산자 → ★oper09.html 참고
- &&(and), ||(or), !(not)
5. 조건문
1) if 조건문 → ★if01.html 참고
- 가장 기본적인 조건문
- 조건이 true이면 문장을 실행하고, false이면 아무것도 실행되지 않는다.
- 형식: if (조건) {
문장
}
2) if ~ else 조건문 → ★if02.html / if03.html 참고
- 두 가지 상황으로 나뉘는 경우에 사용하는 조건문
- 형식: if (조건) {
문장 1
} else {
문장 2
}
3) 중첩 if ~ else 조건문 → ★if04.html 참고
- 조건문은 중첩으로 사용이 가능하다.
4) if ~ else if ~ else 조건문 → ★if05.html / if06.html 참고
- 두 개 이상의 조건식이 있을 때 사용하는 조건문
- 형식: if (조건) {
문장 1
} else if {
문장 2
} else {
문장 3
}
5) switch ~ case문 → ★switch01.html / switch02.html 참고
- switch case 조건문은 조건식의 진위 여부에 따라 동작을 수행하는 if 조건문과는 다르게 어떤 값을 가진 대상을 두고 조건과 일치하는지를 확인하고 동작을 수행한다.
- 형식: switch (변수명) {
case 값1 : 실행할 문장1
break;
case 값2 : 실행할 문장2
break;
default : 실행할 문장3
'Javascript' 카테고리의 다른 글
| 45일차: 자바스크립트_유효성 검사 / 쿠키 발행 / jQuery 기초 2021.08.17 (0) | 2021.08.17 |
|---|---|
| 44일차: 자바스크립트_브라우저 내장 객체 / 입력 양식 2021.08.13 (0) | 2021.08.13 |
| 43일차: 자바스크립트_Date객체 / 배열 / String객체 / Math 객체 / 이벤트 처리 2021.08.12 (0) | 2021.08.12 |
| 42일차: 자바스크립트_반복문 / 함수 / Date 객체 2021.08.11 (0) | 2021.08.12 |