자바스크립트 이클립스 설치환경 (WINDOW)
- HTML, CSS
- JavaScript, jQuery - 프론트엔드 개발 자바 - JSP , JSP MVC, 스프링 프레임워크 - 백엔드 개발
- 안드로이드 데이터베이스 네트워크, 리눅스 서버, Git, 핀테크
- 메모장 => test1.html 저장
- npp.8.4.4.Installer.x64 => edit설치 => test2.html
- 이클립스 (통합개발툴)
- https://www.eclipse.org/https://www.eclipse.org/downloads/packages/
- Eclipse IDE for Enterprise Java and Web Developers Windows x86_64 Download C:드라이버 압축풀기
Eclipse Packages | The Eclipse Foundation - home to a global community, the Eclipse IDE, Jakarta EE and over 350 open source pro
495 MB 317,600 DOWNLOADS Tools for developers working with Java and Web applications, including a Java IDE, tools for JavaScript, TypeScript, JavaServer Pages and Faces, Yaml, Markdown, Web Services, JPA and Data Tools, Maven and Gradle, Git, and more. Cli
www.eclipse.org
작업공간 D: workspace_javascript
이클립스 실행
환경설정 한글처리 UTF-8 Window - Preferences- General - Workspace - Text file encoding - UTF-8
Web - CSS File - Encoding - UTF-8
- HTML File - Encoding - UTF-8
- JSP Files - Encoding - UTF-8
프로젝트 만들기 File - New - Dynamic Web Project Project Name - JavascriptProject Next - Next - web.xml 체크 - Finish
파일 만들기 src -main -webapp - 오른쪽버튼 - New - html파일 test3.html
https://github.com/ojdkbuild/ojdkbuild
다운로드 java-11-openjdk-11.0.15.9-1.windows.ojdkbuild.x86_64.msi (sha256) 설치
설치확인 화면 왼쪽 아래 윈도우 -> 오른쪽버튼 실행 cmd java -version javac -version
- 웹서버 설치 https://tomcat.apache.org/ Download Tomcat9 다운로드 32-bit/64-bit Windows Service Installer (pgp, sha512) 설치 포트설정 Server Shutdown Port 8005 HTTP/1.1 Connector Port 8080
C:\Program Files\Apache Software Foundation\Tomcat 9.0\bin Tomcat9w.exe 실행 서버 start
웹브라우저 http://localhost:8080/
C:\Program Files\Apache Software Foundation\Tomcat 9.0\bin Tomcat9w.exe 실행 서버 stop
이클립스 서버 가져오기 File - New - Other - Server - Server - Next
- Apach - Tomcat 9.0 선택 - Next 파일위치 선택 C:\Program Files\Apache Software Foundation\Tomcat 9.0 Next - javascript 프로젝트 선택 -> Add ->Finish
파일실행 test3.html 선택 - 오른쪽버튼 - Run As - Run on server
- Tomcat 9.0 선택 - 체크 - Finish
웹브라우저 실행하면서 결과 보기
자바스크립트 주석 넣기
주석 Ctrl + Shift + c
자바스크립트에서 사용하는 값
alert("문자열");
alert('문자열2');
alert(500); 정수형
alert(3.4); 실수형
alert(true); 참
alert(false); 거 짓
자바스크립트에서 연산자 사칙연산 + - *
변수 : 변하는 수(값 변경)
기억 장소를 만들어 이름 부여 하고 값을 저장해서 계속 값을 변경할 수 있게 함
var : 변하는 수라는 표시
a : 기억 장소 이름 부여 => a이라는 기억 장소에 10을 넣음
변수 = 값이나 식 => 오른쪽의 값이나 식을 왼쪽에 있는 기억 장소에 저장한다 (대입 연산자)
a, b ⇒ 연산자
var a=100;
var b=200;
alert(a+b);
alert(a-b);
alert(a*b);
alert(a/b);
alert(a); // 변수 a (기억장소 이름)
alert("a"); // 문자 a
기억 장소에 처음에 값을 넣어주는 것 => 초기화/초기값
나이 = 올해 연도 - 태어난 연도 + 1
올해 연도 변수 선언 값을 저장 2022
태어난 연도 변수 선언 값을 저장 1990
나이를 계산해서 출력!
var currentYear = 2022;
var birthYear = 1998;
Nan : (Not a Number) alert("나이: "+(currentYear-birthYear+1));
변수 이름 만드는 규칙
1. 영어 문자, _(언더 스코어), 숫자 사용(숫자는 첫 글자로 사용할 수 없음)
var 7class = 100; (X) // var _class = 200; (O) // var aclass = 300; (O) // var *class = 400; (X)
2. 대소문자 구분은 별개이다, 예약어(var, if, for, class)는 쓸 수 없다
var currentYear = 2022; (O) // var currentyear = 2022; (O)
var var = 100; (X) // var var1 = 100; (O)
3. 여러 단어를 연결 할 때 변수 이름 중간에 대문자, _를 사용한다
birthYear, birth_Year
4. 변수 이름은 의미 있게 작성한다
</script> </head>
<body> </body> </html>
자료형 변수에 모든 형을 저장 할 수 있다 var a = "문자열";
문자열 a = '문자열 2';
문자열 a = 'a';
문자열 a = 500;
정수 숫자형 (10진수, 8진수, 16진수) a = 3.4;
실수 숫자형 a = true;
논리형 참 a = false; 논리형 거짓
장점 = 다양하게 사용 가능함 / 단점 = a 이라는 변수를 판단하기 힘듦
배열, 객체, undefined(정의 되지 않았을 때), null(비어있는 경우, 값이 유효하지 않은 상태)
연산자 +, -, *, /, %(나머지), ++(1 증가), --(1 감소)
var a = 10; var b = 2; // alert(a%2);
=> 나머지 값인 0 이 나온다
++C : 먼저 1 증가하고 출력 // C++ : 먼저 출력 뒤에 1 증가 var c=10; alert(c++); alert(c--);
+ 연결 연산자 : 숫자+문자, 문자+문자 alert(5+"연결"+7);
=> 5 연결 7
대입 연산자(할당 연산자) = += -= *= /=
+=
왼쪽의 피 연산자에 오른쪽의 피 연산자를 더한 후, 그 결괏값을 왼쪽의 피 연산자에 대입 함.
ex) i+=1
i가 1이라면, 1을 더해서 2가 되는 것
i가 2가 되었다면, 또 1을 더해서 3 이 되는 것 (아마 반복 될 것)
- =
왼쪽의 피 연산자에서 오른쪽의 피 연산자를 뺀 후, 그 결괏값을 왼쪽의 피 연산자에 대입 함.
*=
왼쪽의 피 연산자에 오른쪽의 피 연산자를 곱한 후, 그 결괏값을 왼쪽의 피 연산자에 대입 함.
/ =
왼쪽의 피 연산자를 오른쪽의 피 연산자로 나눈 후, 그 결괏값을 왼쪽의 피 연산자에 대입 함.
var i=0; i=i+1; alert(i); i += 1; alert(i);
논리 연산자
참,거짓 판단
비교/관계 연산자() ==(같다),
!(다르다),
<(작다),
<=(작거나 같다),
>(크다),
>=(크거나 같다)
** or 같은 경우는 하나라도 true이면 전체가 true가 된다,
var a = 10;
alert(a == 10); 10과 10 이 같으므로 true
alert(a! = 10); 10과 10 이 같으므로 다르지 않기 때문에 false
alert(a<10); 10보다 작지 않기 때문에 false
alert(a<=10); 10보다 작거나 같기 때문에 true
alert(a>10); 10보다 크지 않기 때문에 false
alert(a>=10); 10보다 크거나 같기 때문에 true
alert(a==10 && a<=10); a는 10이고 a는 10 이하이다. true
alert(a==10 && a!=10); a는 10이고 a는 10과 다르다. false
alert(a==10 || a!=10); a는 10이거나 a는 10과 다르다. true
alert(a<10 || a!=10); a는 10보다 작거나 10과 다르다. false
alert(!a==10); a와 다른 것은 10 이 아니기 때문에 10과 다름. false인 경우를 반대하는 것. ! = not
💡
a변수에 있는 값이 4보다 크거나 같은 경우 동시에 10보다 작거나 같은 경우
참이면, 4~10 사이 값 /
거짓이면, 4~10 사이 값이 아니다
<aside>
a=15;
if(a>=4 && a<=10){
alert("4~10 사이 값");
}else{ alert("4~10 사이 값이 아니다"); }
</aside>
💡 둘다 true 여야만 한다 => &&
a 변수에 1,2,3,4 같이 저장되면 a 변수 값이 1이거나, 3이면 남
a 변수 값이 2이거나, 4이면 여
이도저도 아니면 "영아"
<aside>
a=2; (=이 1개만 있으면 왼쪽 기억 장치에 저장하겠다는 말임)
if(a==1 || a==3){ alert("남");
}else if(a==2 || a==4){ alert("여");
}else { alert("영아"); }
</aside>
제어문 (조건문)
/*
//제어문(조건문)
if(조건){
// 조건이 참이면 동작하는 명령
}else{
// 조건이 거짓이면 동작하는 명령
}
*/
a=10
if(a==10){
//조건이 true이면 실행될 문장
alert("a는 10하고 같다")
}else{
//조건이 false이면 실행될 문장
alert("a는 10하고 다름");
}
a=7;
//양수,음수
if(a<0){
alert(a + " : 음수");
}else{
alert(a + " : 양수");
}
a=8;
//양수 0 음수
if(a<0){
alert( a + " : 음수");
}else if(a==0){
alert( a + " : 영");
}else {
alert( a + " : 양수");
}
SWITCH 문
witch 문 => 처리할 명령이 많은 경우
switch(변수, 계산식){
case 값1 : 명령1;
break; (break : 빠져나오는 구문)
case 값2 : 명령2; break;
case 값3 : 명령3; break;
case 값4 : 명령4; break;
default : 나머지 명령 }
💡1~5이면 1~5 출력,나머지는 1~5가 아닙니다 출력
var a=6;
switch(a){ case 1 : alert(1);
break;
alert(a) 로 해도 됨.
case 2 : alert(2); break; //alert(a) 로 해도 됨.
case 3 : alert(3); break; //alert(a) 로 해도 됨.
case 4 : alert(4); break; //alert(a) 로 해도 됨.
case 5 : alert(5); break; //alert(a) 로 해도 됨. default : alert("1~5가 아닙니다"); }
var a="일"; switch(a){ case "일" : alert(a);
break;
case "이" : alert(a);
break; case "삼" : alert(a); break; case "사" : alert(a); break; case "오" : alert(a); break; default : alert("1~5가 아닙니다"); }
FOR 반복문
문제
<aside> 💡
1~5카운트(반복)
for(초기 값;조건;증가 값){
조건이 참이면 반복할 문장 //조건이 거짓이면 빠져 나와야 함. }
</aside>
<aside> 💡 /
for(i=1;i<=5;i++){
i<=5 참이면 반복할 문장 => 거짓이면 반복문 빠져나옴
alert(i);
}
</aside>
<aside> 💡 // //0에서 9까지 출력
// for(i=0;i<=9;i++){ // alert(i); // }
</aside>
<aside> 💡 // //10~1까지 // for(i=10;i>=1;i--){ // alert(i); // }
</aside>
<aside> 💡 //1~10까지 합계 구하기 1+2+3+4...10 => 변수 sum // var sum=0; // for(i=1;i<=10;i++){ // //alert(i); sum 변수에 i 변수 값 저장 // sum=sum+i; // //sum+= i; // } // alert("1~10까지 합 : " + sum);
</aside>
<aside> 💡 // var a=1; // //3의 배수 => 3으로 나누었을 때 % , 나머지가 == 0인 것 // if(a%3 ==0){ // alert(a + "=> 3의 배수") // }else{ // alert("3의 배수가 아님") // }
</aside>
<aside> 💡 //1~10 수 중에 2의 배수를 찾아서 출력 for if 사용
for(i=1;i<=10;i++){ if(i%2==0){ alert(i + "= 2의 배수"); } }
</aside>
'FrontEnd > JavaScript' 카테고리의 다른 글
| 0727 JavaScript - 내장 함수 (0) | 2022.08.25 |
|---|---|
| 0727 JavaScript - For 반복문 ~ while 반복문 (0) | 2022.08.25 |
| 0726 JavaScript - 자료형 변수 , 비교연산자 (0) | 2022.08.25 |
| 0726 JavaScript - 변수 이름 만드는 규칙 (0) | 2022.08.25 |
| 0725 JavaScript - html 본문, 나의 ip 주소 ~태그 설명글 (0) | 2022.08.25 |
