JavaScript_01_base
Download
Report
Transcript JavaScript_01_base
자바스크립트 개요 (1/2)
자바스크립트 : 웹브라우저 상에서 사용할 수 있는 스크립트 언어
자바스크립트로 할 수 있는 것
- 사용자가 입력한 데이터 검사
- 메뉴 등의 애니메이션 효과
- 게임 제작
- 웹페이지 갱신 없이 서버와 통신
- 기타 웹페이지 HTML 코드 추가/수정/삭제
자바스크립트 개요 (2/2)
자바스크립트의 단점
- 표준이 없음
- 문법 오류를 잡기 힘듬
- 사용자의 PC 환경에 따라 정상/비정상 동작
자바스크립트의 장점
- 하이브리드 앱 제작 가능
- 웹 페이지를 일반 애플리케이션과 흡사하게 구성 가능
- 클라이언트에서 실행되므로 서버의 부하를 줄여줌
- 플러그인(플래시 등)을 대체할 수단
자바스크립트 기본 형태
<html>
<head>
<script src=“파일위치”></script>
동일 서버 내 또는 외부 서버 내의 위치를 기술
ex) http: //ajax.googleapis.com/ajax
/libs/jquery/1.10.1/jquery.min.js
또는
./jquery.min.js
<script type=“text/javascript”>
// 코드 작성
</script>
일반적으로 <head> 안에 위치
</head>
<body>
</body>
</html>
HTML5 에서는 type=“...”
부분을 넣지 않는게 원칙
자바스크립트 식별자
ㅇ 자바스크립트에서 변수명과 함수명을 붙일때 사용
ㅇ 식별자 생성 규칙
- 예약 키워드 사용 불가
ex) var, function
- 숫자로 시작 불가
- 특수문자는 _ 과 $ 만 허용
- 공백 사용 불가
- 영어 이외의 언어도 사용 가능하지만, 영어 사용이 관례
- input, output 같은 의미있는 단어 사용
- 생성자 함수의 이름은 대문자로 시작
- 변수, 인스턴스, 함수, 메소드의 이름은 소문자로 시작
- 여러 단어로 이뤄진 식별자는 각 단어의 첫 글자를 대문자로
자바스크립트 주석
자바스크립트 출력 (1/2)
ㅇ alert()
웹 브라우저에 경고창 형태로 출력
ㅇ console.log()
웹 브라우저 개발자 도구에 로그 출력
자바스크립트 출력 (2/2)
ㅇ document.write()
웹 브라우저에 페이지 형태로 출력
자바스크립트 문자열 (1/2)
ㅇ “동해물과 백두산이” or ‘동해물과 백두산이’
큰따옴표, 작은따옴표 둘중 아무거나 사용해도 상관없지만
가급적이면 한가지 방식으로만 사용
ㅇ 내부에 작은 따옴표를 쓰고 싶으면 외부에 큰 따옴표
내부에 큰 따옴표를 쓰고 싶으면 외부에 작은 따옴표
자바스크립트 문자열 (2/2)
ㅇ 한가지 따옴표만 사용하고 싶으면 이스케이프 문자 사용
ex) alert(“동해물과 \”백두산이\””);
이스케이프 문자
설명
\t
수평 탭
\n
줄바꿈
\’
작은따옴표
\”
큰따옴표
\\
역 슬래시
ㅇ 연결 연산자 ‘+’
ex) ‘가나’ + ‘다라’ + ‘마바’
가나다라마바
자바스크립트 숫자 (1/2)
자바스크립트 숫자 (2/2)
자바스크립트 불리언 (1/4)
자바스크립트 불리언 (2/4)
자바스크립트 불리언 (3/4)
연산자
설명
!
논리 부정 연산자
&&
논리곱 연산자
||
논리합 연산자
자바스크립트 불리언 (4/4)
ㅇ <script>
alert(30 > 20 > 10);
</script>
false
자바스크립트 undefined
ㅇ ‘존재하지 않는 것’을 표현하는 자료형
var value;
alert(value);
var value = null;
alert(value);
자바스크립트 자료형 검사
자바스크립트 변수
변수 선언 : var 또는 생략
var value = null;
var flag = true / false;
논리형
var name = “문자열”;
var name = ‘문자열’;
문자형
var num = 10;
var num = -10.333;
숫자형
자바스크립트 배열 (1/2)
var arr = new Array();
var arr = Array(5);
var arr = new Array(“A”, “B”, “C”, “D”);
var arr = [“A”, “B”, “C”, “D”];
var arr = new Array();
arr[0] = “A”;
arr[1] = “B”;
arr[2] = “C”;
arr[3] = “D”;
var arr = new Array();
arr[‘a’] = ‘A’;
arr[‘b’] = ‘B’;
arr[‘c’] = ‘C’;
arr[‘d’] = ‘D’;
자바스크립트 배열 (2/2)
var arr = new Array();
arr[0] = “000”;
arr[“a”] = “aaa”;
arr[“1”] = “111”;
console.log("1
console.log(“2
console.log(“3
console.log(“4
console.log(“5
console.log(“6
console.log(“7
:
:
:
:
:
:
:
"
"
"
"
"
"
"
+
+
+
+
+
+
+
arr[0]);
arr[“0”]);
arr[1]);
arr[“1”]);
arr[“a”]);
arr.a);
arr[2]);
자바스크립트 함수 (1/4)
함수 선언
function functionName (param1, param2, …, paramN) {
}
[return type];
function sum() {
}
function sum(endNum) {
return totalNum;
}
매개변수 X
반환 X
매개변수 O
반환 O
자바스크립트 함수 (2/4)
함수 사용
<script type=“text/javascript”>
function sum() {
document.write(“1 ~ 100까지의 합”);
}
sum(); // 호출
</script>
<script type=“text/javascript”>
function sum(endNum) {
var totalNum = “”;
totalNum = “1 ~ “ + endNum + “까지의 합”;
return totalNum;
}
var result = sum(100); // 호출
document.write(result);
</script>
자바스크립트 함수 (3/4)
함수 오버라이드
<script type=“text/javascript”>
function sum() {
alert(“1 ~ 100까지의 합”);
}
function sum() {
alert(“오버라이드”);
}
sum();
</script>
자바스크립트 함수 (4/4)
가변인자 함수
<script type=“text/javascript”>
function sum() {
document.write("length : " + arguments.length + "<br />");
document.write("arguments[0] : " + arguments[0] + "<br />");
document.write("arguments[4] : " + arguments[4]);
}
sum(1, 2, 3, 4, 5);
</script>
자바스크립트 조건문 (1/2)
if(num == 1) {
document.write(“가”);
} else if(num == 2) {
document.write(“나”);
} else {
document.write(“else”);
}
var num = 1;
switch(num) {
case 1 :
document.write(“가”);
break;
case 2 :
document.write(“나”);
break;
default :
document.write(“default”);
}
자바스크립트 조건문 (2/2)
var str = “a”;
switch(str) {
case ‘a’ :
document.write(“가”);
break;
case ‘b’ :
document.write(“나”);
break;
default :
document.write(“default”);
}
자바스크립트 반복문 (1/2)
for(var i = 0; i < 10; i++) {
document.write(i + “<br />”);
}
var i = 0;
while(i < 10) {
document.write(i + “<br />”);
i++;
}
var i = 0;
do {
document.write(i + “<br />”);
i++;
} while(i < 10);
자바스크립트 반복문 (2/2)
var array = [1, 2, 3, 4, 5];
for(var i in array) {
document.write(i + “<br />”);
}