JavaScript
역할
- 사용자 이벤트 처리
- 데이터 검증
- 동적 화면 처리 : 새창열기, 창닫기, 이미지 크기 변경, 보이기/감추기
사용자 브라우저에 내장된 프로시저 형태
- 브라우저에 종속적임
선언방법
- 내부파일
- 외부파일
다중 선언시 주의사항 : 위에서 아래로 선언한 순서대로 파싱 처리 순서 고려
선언형식 :
- 내부파일 :
<script type="text/javascript">
코드 작성
</script> - 외부파일 :
<script type="text/javascript" scr="js-url경로"><script>
선언위치
<head> <script></script></head><body> <script></script></body>
html 형식
<html><head> <!-- css : 외부파일, 내부파일 --> <link> <style></style> <!-- js : 외부파일, 내부파일 --> <script></script> </head> <body> ...... <script></script> </body>
</html>
브라우저 종속 : 브라우저 지원하면 수행, 미지원시 수행 않음
<script type="text/javascript"><!-- 지원 브라우저인 경우 코드 수행문 //-->
</script>
<noscript>
// 미지원 브라우저인 경우 수행문
</noscript>
주석
- // 자바스크립트 한줄 주석
- /
*자바스크립트 여러줄 주석*/
변수
- 타입을 지정하지 않음
- 데이터에 의해서 자동으로 타입이 결정됨
- 완전 다형성 (여러가지 담을 수 있음)
- 변수명 규칙 : 영문자, 숫자, _(밑줄) 사용, 예약어 사용불가
변수 선언 방법
var 변수형;또는var 변수명 = 값;변수명 = 값;
변수종류- 전역변수
1. 함수(function) 외부에 선언한 변수
2. 함수 내부에서 "var"을 표기하지 않고 선언한 변수
- 지역변수
1. 함수(function) 내부에 선언한 변수인데 "var"를 표기한 변수fuction 함수명() {
// 전역변수
전역변수명 = 값;// 지역변수
var 지역변수 = 값
}
내장 객체
- tree 구조
- Window => window (최상위 객체, 생략가능)
- Document(문서) => document
html 문서 출력
document.write("html body에 올 수 있는 코드");
자바스크립트 특징
- 변수 타입 지정하지 않음
- 다형성
- 명령문의 끝에 오는 ; (세미콜론) 생략 가능
- 하지만 javascript파일을 compress(공백, 라인이동 제거)해서 서비스 제공시에 문제 발생함
- ; (세미콜론)으로 명령문의 끝을 표기할 것(권장)
특수문자
\n
\t
\
\"
\'
\r
\b
산술 연산자
: + - * / % ++ -- -
논리 연산자
: && || !
비교 연산자
: == != < > <= >=
조건 연산자(삼항연산자)
: 변수명 = (조건식) ? true할당값 : false할당값;
문자열 결합 연산자
: +, +=
제어문
if() {
} else if() {
} else {
}
switch() {
case a:
[break;]
case x:
[break;][default:]
}
- 주의사항: int 타입을 표기하면 안됨
for(초기값; 조건식; 증감값) {}
do{} while(조건식);
while(조건식) {}
- 실습 : 1~10까지 출력
내장함수
-
Window => window (최상위 객체, 생략 가능)
-
경고창 :
- alert("메세지");
- 확인버튼을 클릭
- 오류 등 메세지 출력 확인
- 지나친 사용은 사용자 불편 => ajax(비동기통신)을 이용해서 화면에 메세지 자동 출력 처리
-
확인/취소 선택
- var 변수명 = confirm("메세지");
- 확인 버튼 선택 : true
- 취소 버튼 선택 : false
- 주문, 회원가입, 탈퇴 등 최종 확인 -
문자, 숫자 데이터 입력 여부 검증
- var 변수명 = isNaN(데이터)
(isNaN는 is not a number)
- 데이터가 숫자가 아니면 : true
- 데이터가 숫자이면 : false
- 웹 입력한 모든 데이터는 문자열 전달
- 주문수량, 가격, 나이, 전화번호 등을 사용할때 사용. -
사용자 데이터 입력받기
- var 변수명 = prompt("메세지" [, 초기값]);
- html에서 사용자 데이터 입력받는 방법 :<form>=> type="text", "hidden", "checkbox", "radio",<option>
-
정수형 파싱처리
- pasrseInt(숫자데이터);
-- 문자열형식의 숫자데이터를 정수형으로 변환
-- 실수형숫자를 정수형으로 변환 : 소수이하 버림처리 -
실수형 파싱처리
- pasrseFloat(숫자데이터);
-- 문자열형식의 숫자데이터를 실수형으로 변환 -
수식 연산
- eval("5 + 3 * 2")
수식으로 변환해서 결과를 반환시켜줌
-- ajax(비동기통신)에서 eval은
=> json형식의 문자열을 json객체로 변환 -
디버그 목적 값출력 확인
- alert(name)
=> 확인버튼 불편- console.log(name)
=> 브라우저 F12(개발자도구모드)
=> console에서 출력 내용 확인 가능 -
undefined
- 정의되어 있지 않음을 의미
- var 변수명; -
데이터 타입 조회
- typeof 데이터
- typeof (데이터)
함수(Function)
-
모듈화 개념 function
-
클래스 개념(생성자) function
-
이름이 있는 function
- 함수 선언 => 필요할 때 마다 함수 호출하여 사용 -
이름이 없는 function
- 한번만 수행 하기 위한 함수
- 이벤트 처리
함수 선언 방법 : 모듈화 개념 function
- 형식 :
주의사항 :
-반환타입을 별도로 표기하지 않음
-매개변수에도 타입을 지정하지 않음
-필요시 return 구문을 통해서 값을 반환
- function 함수명([매개변수명1, 매개변수명x]) {
// 수행문
var 지역변수명 = 값 ;
전역변수명 = 값 ;
}
- function 함수명() {
// 수행문
return [value];
}
함수 호출 방법
- 함수명();
- 함수명(데이터1, 데이터x);
- 변수명 = 함수명(데이터1, 데이터x);
주요 내장객체
- Window : window, 최상위객체,
- Document : document
- String
- 길이 : length 변수 - Date
- 현재 날짜, 시간 정보 객체
- todate = new Date();
String 문자열 자르기
- slice(시작인덱스, 끝인덱스)
=> 앞에서 시작 인덱스 : 0, 1, 2, ...
=> 뒤에서 부터 자르면.. 시작 인덱스 : ..., -3, -2, -1
- substring(시작인덱스, 끝인덱스)
=> 인덱스는 0부터시작
=> -인덱스 지원하지 않음
=> -시작인덱스 : 0으로 대체처리
=> -종료인덱스 : 시작인덱스, 종료인덱스 순서 변경시키고 -인덱스를 0으로 대체처리예시)
data = "자바스크립트"; // 0, 1, 2, 3, 4, 5
data.substring(-3, 5) => data.substring(0, 5)마이너스 그냥 0으로 바꿔버림 => 자바스크립트 로 출력
data.substring(2, -3) => data.substring(-3, 2) => data.substring(0, 2) => 자바스 로 출력 - substr(시작인덱스, length)
- 예제
월, 일 : 1~9 => 01, 02, ... 09 / 1~12 => 01, 02, ... 09, 010, 011, 012
