JavaScript
: 브라우저에서 동작하고, 브라우저를 조작할 수 있는 언어
<!doctype html> <html> <body> <a href="javascript:alert('Helloworld');">Click</a> </body> </html>
<!doctype html> <html> <head> <script language="javascript"> alert("Apple"); // 함수선언 , javascript:apple(); 이 코드는 함수를 호출했다. function apple() { alert('Apple2'); } </script> </head> <body> <a href="javascript:alert('Helloworld');">Click</a> <a href="javascript:apple();">Click2</a> </body> </html>
script 태그 안에서 동작한다. 또한 script 태그 안에 함수를 선언할 수 있고, html 안에서 호출할 수 있다.
1. 변수 선언
<!doctype html> <html> <head> <script language="javascript"> var i = 10101; var t = "Helloworld"; var t = 10102; // 에러 안남. 대신 컴파일러는 이를 t = 10102; 로 바꾸어서 동작시킴 if( t != 10102 ) { var abcd = "apple banana"; } alert( abcd ); // if 를 안거치면 abcd 는 선언되지 않은 변수가 된다. var temp; alert( temp ); // 선언했지만 아무 값도 넣지 않은 경우에도 undefined 값을 가진다. </script> </head> <body> </body> </html>
- 자료형이 따로 없고 모든 것을 다 대입가능
var로 변수를 선언한다. 똑같은 이름으로 두번 선언하면 두번째 선언은단순대입이 된다.- 하나의 변수로 정수 실수 문자열 포인트 다 가능
- 블럭 안에서 선언한 변수는 블럭 안에서만 쓰는 개념이 없고, 그냥 있으면 쓸 수 있다.
- 선언되지 않은 변수는
undefined라는 값을 가진다.
2. 함수 선언
<!doctype html> <html> <head> <script language="javascript"> function add( i, j ) { // 자료형이 없다 var abcd = 10; return 100; } var t = add( 10, 20 ); alert( t ); </script> </head> <body> </body> </html>
함수 선언 시 매개변수의 자료형을 지정해줄 필요가 없다.
3. onXXX
<!doctype html> <html> <head> <script language="javascript"> function abcd() { alert(); } </script> </head> <body bgColor="#aabbcc" onload="abcd();"> <input type="button" value="Click" onclick="abcd();"/> <img src="apple.png"/> </body> </html>
각 요소의 onXXX 속성에 함수를 호출하는 코드를 넣으면 요소가 XXX 되는 상황이 벌어졌을때 해당 함수가 호출된다.
( 즉 body가 load 되는 상황 - html을 읽을때 - 이 벌어지면 abcd() 함수를 호출한다. )
onclick="abcd();" : 해당 요소에 click 상황이 벌어지면 abcd() 함수를 호출
onmouseover="abcd();" : 해당요소에 mouseover( 마우스를 올려놓는 ) 상황이 벌어지면 abcd() 함수를 호출
4. 포인터
초기화면 -> on click
<!doctype html> <html> <head> <script language="javascript"> function abcd() { var ai = document.getElementById("a0"); ai.src = "opera.png"; } </script> </head> <body> <img src="google.png" id="a0" onclick="abcd();"/> </body> </html>
javascript 에는 DOM 이라는 개념이 있다.
- 모든 요소에 해당하는
객체가 존재하고 그것은Tree 구조로 엮여져 있다. id 속성은 모든 요소가 가질 수 있다. 단 그 값은 겹쳐서는 안된다. 영문으로 시작해야 한다.document.getElementById("a0"): id 값으로 요소에 해당하는 객체에 대한 포인터를 얻는다. 포인터를 이용하여 해당 요소가 가지는 속성을 읽거나 변경할 수 있다.
5. 배열
<!doctype html> <html> <head> <script language="javascript"> var imgs = []; imgs.push('ie'); //ArrayList 에 add 하는 개념으로 볼 수 있다. imgs.push('google'); // javascript 의 배열은 List 처럼 크기가 늘거나 줄 수 있다. imgs.push('safari'); imgs.push('opera'); imgs.push('ff'); function abcd() { for( var i = 0; i < 5; i++ ) { alert( imgs[i] ); } } </script> </head> <body> <button onclick="abcd();">Click</button> </body> </html>
javascript 의 배열은 [] 을 사용하여 만든다. for 반복문의 문법도 java와 유사하다.
위에서 선언된 imgs 변수는 전역변수처럼 보이지만 실은 전역변수 개념은 아니고
"함수 선언보다 먼저 함수 밖에서 선언된 변수는 함수 안에서 사용할 수 있다."
( 함수 안에서 선언된건 웬만하면 밖에서 쓰지 않는게 좋다. )
6. Not a Number
<!doctype html> <html> <head> <script language="javascript"> function abcd( i ) { if( isNaN(i) ) { alert('숫자입력요망'); } else { if( typeof i == 'string' ) { // '100' 같은 문자열은 string 이지만 isNaN 에서 false alert( parseInt(i) + 100 ); // parseInt 는 문자열을 숫자로 변환시킨다. } else { alert( i + 100 ); } } } </script> </head> <body> <button onclick="abcd();">Click</button> <button onclick="abcd(100);">Click</button> <button onclick="abcd('100');">Click</button> </body> </html>
abcd() : 매개변수가 값을 안넘겨도 에러는 안나지만 undefined 값이 넘어간다.
isNaN() : Not a Number 의 약자, 숫자가 아니라는 얘기
isNaN('100') 이 false 인 이유?
문자열이라도 숫자로 변경 가능하면 false ( typeof, parseInt 사용하여 숫자로 변환 )
7. form 과 input
: 브라우저에서 입력을 받아 그것을 서버에 전달해주는 역할
<!doctype html> <html> <head> <script language="javascript"> </script> </head> <body> <form method="GET" action="test_336.jsp"> <input type="text" name="abcd"/> <input type="submit"/> </form> </body> </html>
form 안에 선언된 submit 을 누르면 action 에 지정된 페이지로 뛴다.
이때 form 안의 input 에 입력된 내용을 물고 뛴다. name 값이 key, 입력한 내용이 value 가 되어서 key=value 형태가 된다. ( name = abcd, key=hello )
주소와 key=value 는 ? 로 구분하고, 여러개의 key=value 는 & 로 구분한다.
method="GET": 입력내용이 주소창에 보여진다. 간단한 메시지를 전달할 때 사용하고 보안에 취약하다.method="POST": 입력 내용이 주소창에 숨겨져 전달된다. 많은 양의 메시지를 전달할 때 사용하고, 보안이 우수하다.
status 값이 404 나오는건? 해당 파일이 존재하지 않을때 발생한다.
입력된 내용이 서버에 전달되기 전에 모종의 가공이 필요하다면 javascript 로 처리해줘야 한다.
JSP
: 서버에서 동작해서 html 형태의 결과를 만들고, 그것이 브라우저로 전달된다.
<!doctype html> <html> <body> <% String l = "Helloworld"; %> <a href="javascript:alert('<% out.println( l ); %>');">Click</a> </body> </html>
form 안의 입력창에 입력된 내용을 읽어들이기
String abcd = request.getParameter("abcd");
