-
자바스크립트(Java Script) 문법 예제Web/JSP, JavaScript 2018. 9. 3. 17:08
자바스크립트 간단한 문법 예제 및 확인하기. sts에서는 자동완성기능이 없기 때문에 아톰을 사용하는 것을 추천한다. 확장자를 .html로 저장한 후 사용하면 강력한 자동완성 기능들을 사용할 수 있다. < 없이사용하고자 하는 태그명 입력하면 자동완성 되는 방식이다.
1) 배열
- 동적할당 및 수정이 비교적 자유롭다.(push & pop이기 때문에 완전히 자유롭지는 않음)
- 대괄호 [ ] 사용해 초기화한다.(자바에서는 { } 사용)
- 인덱스 값 사용은 자바와 같음. 할당하지 않은 인덱스 참조시 undefined Exception 나온다. Try. Catch 있지만 잘 사용하지 않음.
- 배열명.push 통해 배열 요소 추가.
- For each에 대응하는 for-in이 있다.
- For of라는 이름으로 ecma 6부터 도입<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> var scores = [10, 20, 30, 40, 50, 60]; var sum = 0; // 타입별로 기본 값을 명시해줘야 한다. 선언만 해두면 sum = null이기 때문에 for (var i in scores) { sum = sum + scores[i]; } var avg = sum / scores.length; console.log('sum : ' + sum + ', avg = ' + avg); </script> </head> <body> </body> </html>중요한 점이 var sum = 0; 라인이다. var는 자바의 객체에 대응한다고 볼 수 있다. 따라서 var sum;과 같이 선언만 해주면 기본값이 null로 되어 있기 때문에 null 값에 연산 수행하기 때문에 에러가 난다. 자바에서 primitive 타입의 경우 초기화를 하지 않아도 사용하고자 하는 타입으로 반드시 초기화를 하도록 한다.
저장한 html 파일 실행 후마우스 오른쪽 버튼 - 요소 검사 클릭
콘솔 탭 클릭하면 결과 확인할 수 있다.
2) 함수
함수 사용법
Function 함수명(){
원하는 작업
}
리턴 값 있어도 되고 없어도 된다.
마지막에 return 키워드 사용하면 반환 할 수 있다.
매개변수가 있는 경우에 타입 명시할 필요 없음 모두 var이기 때문에.<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> function minwoohi(){ alert('minwoohello'); } minwoohi(); </script> </head> <body> </body> </html>파일 실행 결과. alert()은 다음과 같이 다이얼로그 창 띄우는 함수이다.
3) 콜백(Call back) 함수
호출될 함수를 알려 주어 다른 프로그램 또는 다른 모듈에서 함수를 호출하게 하는 방법.
특정 이벤트가 발생하는 시점이 불분명한 경우가 존재할 때 웹사이트에서 사용한다.
Ex) 파일 전송이 완료되었을 때 자동으로 해당 프로그램 열기, 또는 alert 띄우기 등
자바스크립트에서는 클릭, 마우스, 키보드 등의 이벤트를 처리할 때 주로 사용한다.<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> function getCalcNum(callback){ var result = callback(10, 60); return result; } var callbackFunc = function(num1, num2){ return num1 + num2; } var res = getCalcNum(callbackFunc); alert(res); </script> </head> <body> </body> </html>다음 구조에서 getCalcNum은 callback 함수의 호출 결과를 반환하는 함수이다. 다시 말하면 callback 함수가 완료되기 전에는 getCalcNum 함수가 수행되지 않는다는 점이다. 이와 같이 함수 내부에서 다른 함수를 호출하는 방식으로 특정 이벤트에 대한 동작을 제어할 수 있다. AUTOSAR 인턴 할 때에도 콜백함수를 사용했다. PWM 신호를 받아 엣지 발생시 콜백함수를 호출해 이후 엣지를 10개 발생시키고 EdgeCount 함수를 통해 10개가 발생했는지 확인 하는 방식이었다. 그 당시에는 왜 콜백이라고 불렀는지 잘 이해가 가지 않았지만 지금 다시 배우니 이해에 도움이 크게 되었다.
3) arguments
자바스크립트에서 매개변수는 항상 arguments 내장객체에 전달된다.
실행문 매개변수 index 순서에 맞춰 들어가 실행되는 구조이다.
매개변수 모자라는 경우 예외처리 해줘야 NaN 에러 나지 않는다.<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> function printArguments(num1, num2){ if(num2 == undefined){ num2 = 0; } console.log(num1); console.log(num2); console.log(argument[2]); } printArguments(100, 200, 300); </script> </head> <body> </body> </html>- 매개변수가 모자라는 경우 num2는 undefined로 나오고 이는 자바에서 null에 대응하는 값이라고 생각하면 된다. 따라서 값이 없다면 0으로 할당해줘 예외처리를 해주면 된다.
- 매개변수가 추가되는 경우
모든 자바스크립트 함수에는 argument라는 내장객체가 생성된다. 이는 배열 형태로 매개변수의 순서대로 argument 인덱스값에 들어간다. 따라서 printArguments 함수 정의시 2개의 매개변수만을 사용했지만 3개의 매개변수를 사용해 호출해도 내장객체를 이용해 출력할 수 있다.
4) 클로저(Closure)
private 한 변수나 함수 가릴 때 사용한다. var는 기본적으로 전역변수이다.하지만 전역변수가 많으면 성능이 저하된다. 따라서 클로저 통해 지역변수화 시키고 캡슐화 통해 클로저 함수 내부의 변수에 접근을 하지 못하도록 한다.<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> function counter(){ var count = 0; return function(){ return ++count; } } var count = counter(); var result = count(); alert(result); </script> </head> <body> </body> </html>counter 함수의 내부에서 count 변수를 선언한 후 function 클래스에서 count 값에 1을 더한 후 리턴한다. 여기서 중요한 점은 count 의 스코프이다. 기본적으로 지역변수는 변수가 선언된 블록에서만 참조 및 호출이 가능하지만 자바스크립트에서는 함수 안에 선언된 var 변수는 해당 함수 내의 모든 블록에서 참조가 가능하다. 따라서 function에서 count를 참조할 수 있는 것이다. 프로그래밍 언어의 클로저 개념에 대해 학습하면 도움이 될 것이다.
'Web > JSP, JavaScript' 카테고리의 다른 글
JSP 체크박스(Check box), 셀렉트(Select), 옵션(Option) 예제 (0) 2018.09.03 JSP 예제 (0) 2018.09.03
