코딩 학원 29일차 (JavaScript 기초)

어제 했던 Servlet을 마저 강의 해주셨다.

 

Servlet
1. 값 받아서 확인
2. 중간에 이상한 글자 없다치고 계산만
3. 이상한 글자 어떻게 처리하나 (콘솔로 확인)
4. 그걸 HTML로 응답

이렇게 입력하면 입력한 숫자 모두 더한 것 뺀 것 곱한것 따로 출력 되게 만들어야 되는데 한글 들어갔을 때를 대비해야 되고 아무튼 열심히 만들어 봤는데 도저히 안 되서 포기하고 강사님 소스 긁어 왔다.

 

JavaScript로 넘어가기 전에 전 날 했던 Servlet의 복습 느낌으로 수업을 조금 하셨다.

 

다른 것들은 입력한 데이터들을 전기신호로 바꿔서 전송하고 할줄 아는데
file 같은 경우 전기신호로 바꿀줄 몰라서 cos.jar가 필요하다.

 

외부 jar 쓰는 것이  java프로젝트에서 쓰던 방법으론 안 되고 jsp의 방법으로 해야 한다.

 

1. cos 만든 인간들이 파일이 업로드될 서버상의 '절대경로'를 써야되게 만들어 놓았음.
2. 찾아서 할 수 있으면 좋긴 한데 리눅스도 안 배웠는데 cmd로 어떻게 찾나
3. 다행히도 상대경로 넣으면 서버상의 절대경로를 리턴해주는 메소드가 있음.

그게 바로 저거임.

 

윈도우에 tomcat이 있는데
그 tomcat의 사본을 eclipse와 연동 시켜 놓은 상태
그 tomcat에 이 프로젝트 업로드시켜서 실행 중
그리고 받는걸 mr로 바꿔놨으니 다른 값 가져오는 것도 mr로 바꿔주어야 한다.

 

audio에 autoplay="autoplay" 기능이 있긴 한데 브라우저에서 이걸 막아놔서 먹히진 않는다.

(나중에 다시 봐야겠다.

 

-JavaScript

 

하라는대로 안 해놓고 개발자한테 따지는 이용자들을 위해 if 문이나 try-catch로 대응을 하면 뭘 잘못했는지 아니까 우리한테 따지지는 않을 것이다. 근데 문제는 저게 아니더라도 서버는 바쁘다. 계산도 하고 DB도 하고 뭐도 해야되는데 저것 까지 우리가 해줘야 하나?

 

입력 유효성 검사
개발자가 의도한대로 사용자가 제대로 입력했나 검사

일단 출발 시켜 놓고 서버에서 연산할거 다 하고 이거 안 됨 하고 다시 돌려보내는 것 보다 출발 하기 전 사용자 pc에서 부터 안 된다고 하는게 훨씬 효율적이다.

 

JavaScript 특징
1. Client-side PL[브라우저, front-end]
2. interpreter 방식[바로 실행 되고 한줄씩 번역해가면서] (에러 잡기 최악의 언어)
3. 웹페이지 이벤트 처리하는 것만 가능한 PL[요즘은 좀 아님 뭔가 많아짐] 
4. 이 친구의 정식 명칭은 사실 ESMAScript이다. 근데 Java랑 문법이 비슷해서 JavaScript라고 별명이 붙었는데 다들 이렇게 불러서 자리 잡아버린. 그리고 Java는 Oracle 꺼고 Js는 Netscape 꺼라서 아무 상관 없다. 
5. Java보다 고급 언어

 

이렇게 css 처럼 head에 넣어준다.

 

on머시기에 스크립트 쪽 function을 불러주면 

 

h1을 클릭 시 저런 경고창이 나온다.

 

function
alert("내용"); = 경고창 (아무 기능 없는 단순한 창)
confirm("내용"); = 확인, 취소 있는 경고창 (확인 누르면 true, 취소 누르면 false가 리턴 됨.)
prompt("내용");  = 입력하는 창이 뜨며 값 하나 더 넣을 시 뒤에 입력한 내용이 리턴 된다.
onmouseenter= 마우스가 올라가기만 하면

 

java 초창기 때 데이터 담을 최적의 자료형을 찾는것에 매달렸는데 여기선 그냥 var 변수명 쓰면 데이터보고 자료형을 알아서 찾는다. = 찾는 연산 작업이 반드시 있기에 고급언어는 느리다. 그리고 반복문, 조건문, 주석, 연산자,  다 똑같이 생겨서 굳이 수업할 필요가 없다고 하셨다.

 

prompt("내용");  = 입력하는 창이 뜨며 값 하나 더 넣을 시 뒤에 입력한 내용이 이 창에 미리 입력되어 있다.

참고로 JS에서는 % 시리즈 다 안 된다.

 

어쨌든 위의 처럼 Java랑 문법이 똑같다면 냅다 숫자 2개 입력 받아서 alert로 합 출력 되게 해보라 하셨다.

 

10이랑 5 입력 했는데 105가 나온다. 스트링으로 받는 것 같다.

var로 알아서 해주는데 가끔 이런 허점이 생긴다.

어쨌든 우리는 글자를 숫자로 바꿔야 되는데 그건

 

곱하기 1을 해주면 된다. (반대로 숫자를 글자로 만들 때는 + " " 를 해주면 된다.)

 

interpreter방식 언어들이 error를 띄우지 않고 결과가 어떻게 나올지 모름
위에서 부터 차례대로 진행되는 언어이다 보니까 main이 없는 경우가 많다.

 

function 변수명(변수명, 변수명){

}
호출은 변수명만 해도 된다. 변수명();

 

이런식으로 쓴다.

함수 안에서는 자료형이 없어서 그렇지 return이 아주 잘 먹힌다.

 

웹사이트 이벤트 처리 기본 순서
1. 함수 작성
2. Dom 객체의 원하는 이벤트에 함수 연결

우리가 만든 함수를 직접 호출하진 않고 연결만 해놓은 상태인데 dblclick이벤트가 발생할 때 마다 자동호출 이런 것을 callback함수 라고 한다.

 

1. 자바 스크립트 파일을 하나 만들고
2. 스크립트는 불러오는 세트 따로 내꺼 쓰는 세트 따로 있다 그래서 css 처럼 하나만 쓰는게 아니라 두개를 불러놔야한다.
3. js 파일을 만든 다음 파일 열 때는 더블클릭으로 안 되고 우클릭 한 다음 open with에 generic text editor로 열어주고

4. 바로 작성해서 쓰면 우리 html 인코딩 방식이 euc-kr이라서 깨져서 나올 것이다. 그렇기 때문에 js 안에 한글 아무거나 입력하고 js 파일 우클릭 properties눌러서 인코딩 방식을 euc-kr로 고쳐주면 써져있던 한글이 깨지게 되면 변경 성공이다.

그런 다음 하고 싶은 작업을 해주면 된다.

css와 마찬가지로 js를 불러올수도 있고 그 밑에 script 태그에서 html 내부에서 js 설정이 가능하다.

 

- JS 배열과 객체

 

먼저 배열

var 변수명 = [값, 값, 값]  (대괄호만 써주면 된다.)
쓸 때는 똑같다 
alert(ar[0]);
길이 세는 것도 똑같다.
alert(ar.length);
for문도 똑같은데 자동완성 없어서 일일히 써줘야 한다.

 

다음은 객체

 

JS에서는 class 안 만들어도 되서 보통 안 만든다.
중괄호가 보이면 객체다.(json과 비슷하다?)
Java가 유독 규칙에 엄격하고 js는 안 그렇다

 

.접근은 이렇게 한다.

 

다음은 객체 속에 있는 배열의 값에 접근 하는 방법이다.

인덱스만 넣으면 그거 객체 객체 객체 임 이렇게만 출력 되기에
값을 정확히 찝어와야 원하는 값을 출력해준다.

 

원래 Javascript and xml 이였는데
거기서 하는데 왜 굳이 HTML 문법으로 해야되냐
그냥 JS로 하자! 해서 나온 것이 Json(Java Script Object Notation)이다.

 

JS : interpreter방식 = 에러 잡기가 힘듬 = 오랜세월동안 인기가 없었음
근데 jQuary가 나오면서 쓰기 좋아졌다고 한다.
jQuery : JavaScript 라이브러리
어차피 대부분의 작업은 jQuery로 할 거라서 굳이 깊게 안 들어간다.

 

출발 방법 3가지

기존 요청 방법에는
<a> 태그와 <form><button> 조합 이 두가지가 있었다.

 

세번재는

저 함수에 " " 안에 도메인주소를 넣고

 

이런식으로 뭐 했을 때 저 함수를 불러오면 출발 방식을 바꿀 수가 있다

 

근데 우리가 하고 싶었던 것은 입력 유효성 검사다. 아래는 아무것도 입력하지 않는 것을 방지하는 방법이다.

 

저기 onsubmit에 return을 true로 한번 false로 한번 해보면 false일 경우 아예 넘어가지지가 않는다.

 

이렇게 함수 하나 만들고 return에 저 함수가 박히게 해준다.

 

그리고 저 함수에서 조건문을 활용하여 출발을 걸러준다.

 

var t = document.f.test (input을 가져옴)
t.value (인풋에 쓴 글자)

 

그리고 저 인풋에 쓴 글자가 뭐라도 있을 때만 true를 리턴한다.
그리고 그 리턴 값은 아까의 onsubmit의 return 값이 되고
그 값이 true 일 때만 action의 servlet로 넘어가진다.

 

오늘은 맛보기만 하고 내일 본격적으로 해보자고 하셨다.