제2주 강의노트 자바스크립트 기본문법
Download
Report
Transcript 제2주 강의노트 자바스크립트 기본문법
자바스크립트
목 차
자바스크립트 개요
스크립트 태그
자바스크립트 맛보기[1][2][3][4]
자바스크립트 실습[1][2]
2
자바스크립트 개요[1]
자바스크립트란?
스크립트 언어
클라이언트 프로그래밍 언어
누가 개발?
넷스케이프사에서 개발
기존의 LiveScript를 SUN과 함께 자바스크립트
로 개발
3
자바스크립트 개요[2]
무엇을 할 수 있나?
프로그램 코드가 HTML문서에 직접 삽입
클라이언트에서 실행되어 서버와의 통신 부담 없
음
페이지 열기/이동, 프레임관리, 히스토리관리 등
다양한 기능 수행
4
자바스크립트 개요[3]
자바스크립트의 실행
편집기
웹 브라우저
자바와의 차이
브라우저에서 코드가 해석되어 실행
간단한 문법
클래스 정의/상속 불가능
5
자바스크립트의 기초
6
<SCRIPT> 태그-[1]
<SCRIPT>.....</SCRIPT> 태그
<SCRIPT LANGUAGE="JavaScript">
자바스크립트의 문장과 함수
</SCRIPT>
<SCRIPT>.....</SCRIPT>는 HTML 문서에서
<head>...</head>와 <body>...</body>에 들어감.
하나의 HTML 문서에 여러 개의
<SCRIPT>.....</SCRIPT>가 들어갈 수 있음.
7
<SCRIPT> 태그-[2]
<HEAD> </HEAD> 태그 사이에 자바스크립
트 코드를 넣는 이유
다른 곳에 넣어도 됨
<HEAD>부분을 먼저 읽고 <BODY>부분을 읽어
화면에 출력함
미처 해석되지 않은 자바스크립트 코드를 실행하
는 일이 발생하지 않도록 하기 위한 것임
웹 페이지가 화면에 나타나기 전에 자바스크립트
코드를 읽어들여 해석하는 것이 바람직
8
자바스크립트 맛보기[1]
문자 출력
<HTML>
<HEAD>
<TITLE>자바스크립트 시험1</TITLE>
<SCRIPT Language=“JavaScript”>
document.write(“Hello, JavaScript”)
</SCRIPT>
<BODY>
HTML BODY
</BODY>
</HTML>
9
자바스크립트 맛보기[2]
<HTML>
HTML문서의 제목 출력
<HEAD>
<TITLE>자바스크립트 시험2</TITLE>
<SCRIPT Language=“JavaScript”>
document.write(“이 문서의 제목은 [ ”)
document.write(document.title)
document.write(“ ] 입니다.”)
</SCRIPT>
<BODY>
</BODY>
</HTML>
10
자바스크립트 맛보기[3]
<HTML>
HTML문서의 변경날짜 출력
<HEAD>
<TITLE>자바스크립트 시험2</TITLE>
<SCRIPT Language=“JavaScript”>
document.write(“이 문서의 변경날짜는 [ ”)
document.write(document.lastModified)
document.write(“ ] 입니다.”)
</SCRIPT>
<BODY>
</BODY>
</HTML>
11
자바스크립트 실습[1]
다음과 같이 출력되도록 자바스크립트를 작
성하라.
이 문서의 제목은 [실습1]이고,
변경날짜는 […] 입니다.
12
자바스크립트 맛보기[4]
<HTML>
Status Bar(상태선)에 글자 출력
<HEAD>
<TITLE>자바스크립트 시험3</TITLE>
<BODY>
<a href=“http://kr.yahoo.com” onMouseOver=
“window.status=‘야후로 이동합니다’;
return true”>야후검색</a>
</BODY>
</HTML>
13
자바스크립트 실습[2]
마우스가 다음 글자 위에 올라오면 상태바에
메시지가 출력되도록 프로그래밍하라.
KBS
MBC
컴퓨터정보
학부
선문대학교
홈페이지
http://www.kbs.co.kr
한국방송으로 이
동
http://www.imbc.com 문화방송으로 이
동
http://cs.sunmoon.ac. 컴정홈페이지로
kr
이동
http://www.sunmoon. 선문대학교 홈페
ac.kr
이지로 이동
14
자바스크립트 기본문법
주석문 작성방법
변수의 사용방법
예약어
자료형
출력방법
연산자
16
주석문(comment)
주석문은 다음 두 가지 기호를 사용
/*
//
*/
<html>
<head>
<title>자바스크립트 시험2-1</title>
<script language="JavaScript">
/* 주석문 */
document.write("설명문 테스트")
// 이것도 주석문
</script>
</head>
<body>
</body>
</html>
17
변수의 정의
변수(variable)
프로그램에서 자료를 저장하기 위해 가지고 있는
메모리
반드시 영문자나 ‘_’로 시작, 특수기호 불가
저장하고 있는 값은 변할 수 있다.
예약어는 변수로 사용할 수 없다.
대소문자를 구분한다.
변수 예
A, a, aa, num, it12, _abc
3sum, %ab, @com -> 잘못 만든 예
18
예약어
예약어
특별한 용도로 미리 지정한 단어
abstract
catch
default
false
function
in
native
protected
super
throws
void
boolean
char
do
final
goto
instanceof
new
public
switch
transient
while
break
class
double
finally
if
int
null
return
synchronized
true
with
byte
const
else
float
implements
interface
package
short
this
try
case
continue
extends
for
import
long
private
static
throw
var
19
변수의 사용
변수의 선언
변수에 값을 저장하면 자동적으로 자료형이 정의
된다.
a = 1;
str = ‘자바스크립트’;
☞ ‘a = b’는 b값을 a에 저장한다는 의미이다.
var를 이용한 변수 선언
var i = 10;
20
예제 – 변수의 사용
<html>
<head>
변수의 값 출력
<title>자바스크립트 시험2-2</title>
<script language="JavaScript">
/* 변수의 값 출력 */
a = 10;
str = "자바스크립트";
document.write("a = " + a + "<br>");
document.write(str);
</script>
</head>
<body>
</body>
</html>
21
예제 – var사용
<html>
var을 사용한 변수 선언
<head>
<title>자바스크립트 시험2-3</title>
<script language="JavaScript">
/* var을 이용한 변수 선언 */
var a, aa = 10;
var str = "자바스크립트";
document.write("aa = " + aa + "<br>");
document.write(str);
</script>
</head>
<body>
</body>
</html>
22
자료형 [1]
자료형 : 컴퓨터가 처리하는 데이터의 종류
를 정의
숫자형(정수형, 부동소수점형)
문자형
논리형 : 참(true), 거짓(false)
null
23
자료형 [2]
정수형(integer) : 소수점이 없는 수
10진수 : -100,-50,-1,0,1,30,1000
8진수 : 숫자 앞에 ‘0’을 붙인다.
0111, 0777
16진수 : 숫자 앞에 ‘0x’를 붙인다.
0x1010, 0xB0A1 8진수
10진수
16진수
4
04
0x04
10
012
0xA
30
036
0x1E
24
예제 – 숫자의 출력
<html>
숫자 출력
<head>
<title>자바스크립트 시험2-4</title>
<script language="JavaScript">
/* 숫자 출력 예제 */
document.write("십진수 : " + 10 + "<br>");
document.write("8진수(012)도 십진수로 출력 : " + 012 + "<br>");
document.write("16진수(0xa)도 십진수로 출력 : " + 0xa+ "<br>");
</script>
</head>
<body>
</body>
</html>
25
자료형 [3]
부동소수점형(floating-point)
소수부분이 있는 숫자
2.1, -10.2
1.3E3(1.3*103)
자바스크립트에서 부동소수점 계산은 가끔 정확
하지 않을 수 있다. -> 정수형 사용 권장
논리형(Boolean)
크기가 1비트
사용가능한 값 : true, false
null
아무 값도 없음을 의미
26
예제 - 실수자료출력
<html>
<head>
실수자료의 부정확성
<title>자바스크립트 시험2-4</title>
<script language="JavaScript">
/* 실수자료의 부정확성 */
aa = 10;
bb = 5.333;
cc = 5.444;
document.write(aa + " + " + bb + " = " + (aa + bb));
document.write("<br>");
document.write(aa + " + " + cc + " = " + (aa + cc));
</script>
</head>
<body>
</body>
</html>
27
예제 – 논리 자료 출력
<html>
<head>
Boolean(논리형) 자료의
<title>자바스크립트 시험2-6</title>
<script language="JavaScript">
/* boolean 자료의 출력 */
aa = true
bb = false;
document.write("aa = " + aa);
document.write("<br>");
document.write("bb = " + bb);
</script>
</head>
<body>
</body>
</html>
출력
28
자료형 [4]
문자형
문자자료 취급
따옴표(‘ ’ 또는 “ ”)를 사용하여 문자 기록
특수문자
‘자바스크립트’,
“java”
\n
의미
다음 줄로 이동
\t
Tab
\b
백스페이스
\r
리턴
\\
\’
역슬래시(\)
\”
큰 따옴표
작은 따옴표
29
예제 – 문자열 출력
<html>
<head>
문자형 자료의 출력
<title>자바스크립트 시험2-7</title>
<script language="JavaScript">
/* boolean 자료의 출력 */
aa = "특수문자 출력 : "
bb = "\\, \', \"";
document.write(aa + bb);
</script>
</head>
<body>
</body>
</html>
30
변수의 자료형 변환
변수에 저장된 값을 바꾸면 변수의 자료형이
자동으로 변환된다.
test = 10; -> test는 정수형
test = “문자열”; -> test는 문자형
31
예제 – 자료형 변환
<html>
변수의 자료형 변환
<head>
<title>자바스크립트 시험2-8</title>
<script language="JavaScript">
/* 변수의 자료형 변환 */
a = 10;
document.write("a = " + a + "<br>");
a = "문자형으로 변환";
document.write("a = " + a);
</script>
</head>
<body>
</body>
</html>
32
실습 [2-1]
이름과 근무처를 변수에 저장하고 출력형태
대로 출력한다
나의 이름은 ‘0 0 0’ 이고,
내 근무처는 “000000”입니다.
33
출력 방법 [1]
<html>
document.write() : ‘+’ 기호로 출력할 값 연
<head>
<title>자바스크립트
시험2-9</title>
결
<script language="JavaScript">
document.write("a" + "b");
document.write("<br>");
a = "문자"; b = "연결";
document.write(a + b);
document.write("<br>");
a = 10; b = 10;
document.write(a + b);
</script>
</head>
<body>
</body>
</html>
34
출력 방법 [2]
<html>
<head>
내장함수 alert() 이용
<title>자바스크립트 시험2-10</title>
<script language="JavaScript">
a = "문자"; b = "연결";
alert(a + b);
a = 10; b = 10;
alert(a + " + " + b + "=" + (a+b));
</script>
</head>
<body>
</body>
</html>
35
실습 [2-2]
이름과 근무처를 변수에 저장하고 alert()함
수를 사용하여 출력한다.
나의 이름은 ‘0 0 0’ 이고,
내 근무처는 “000000”입니다.
36
연산자
대입연산자
산술연산자
증감연산자
비교연산자
논리연산자
조건연산자
비트연산자
37
대입연산자
할당연산자라고도 한다.
‘=’ 기호 사용
a = b;
b값을 a에 저장한다는 의미
수학에서와 같이 a와 b가 같다는 의미가 아니다.
a = a + 1;
38
산술연산자
+,-,*,/,%
<html>
% : 나머지
<head>
<title>자바스크립트 시험2-11</title>
<script language="JavaScript">
a = 5; b = 2;
document.write(a + " / " + b + " = " + (a/b));
document.write("<br>");
document.write(a + " % " + b + " = " + (a%b));
</script>
</head>
<body>
</body>
</html>
39
실습 [2-3]
다음 연산의 결과가 얼마인지 예상하여 보고
프로그램을 작성하여 확인한다.
4 + 5 % 2 – 3 + 5.4 / 2
40
증감연산자
++ : 1증가 (a++는 a=a+1과 동일)
<html>
<head>
-- : 1감소 (a--는 a=a-1과 동일)
<title>자바스크립트 시험2-12</title>
<script language="JavaScript">
a = 5; b = 5;
document.write("1.a = " + a++ + ", b = " + b-- + "<br>");
document.write("2.a = " + a + ", b = " + b + "<br>");
document.write("3.a = " + ++a + ", b = " + --b + "<br>");
document.write("4.a = " + a + ", b = " + b + "<br>");
</script>
</head>
<body>
</body>
</html>
41
실습 [2-4]
다음 연산을 각각 수행한 결과와 a와 b의 값
이 무엇인지 예상하여 보고 프로그램을 작성
하여 확인한다.
①
②
③
각각 별개의 연산으로 처리한다.
a = 10; b = 4;
a++ + ++b
--a * b++
a / ++b
42
비교연산자
값의
대소를 비교
비교연산자
의미
a == b
a와 b는 같다
a != b
a와 b는 같지 않다
a<b
a는 b보다 작다
a <= b
a>b
a >= b
a는 b보다 작거나 같다
a는 b보다 크다
a는 b보다 크거나 같다
43
예제 – 비교연산자 사용[1]
<html>
숫자비교연산의 결과 출력
<head>
<title>자바스크립트 시험2-13</title>
<script language="JavaScript">
a = 10; b = 5;
document.write("1." + a + " == " + b + " : " + (a == b) +"<br>");
document.write("2." + a + " != " + b + " : " + (a != b) +"<br>");
document.write("3." + a + " > " + b + " : " + (a > b) +"<br>");
document.write("4." + a + " <= " + b + " : " + (a <= b));
</script>
</head>
<body>
</body>
</html>
44
예제 – 비교연산자 사용[2]
<html>
문자비교 연산의 결과 출력
<head>
<title>자바스크립트 시험2-14</title>
<script language="JavaScript">
a = "abc"; b = "abc";
document.write("1." + a + " == " + b + " : " + (a == b) +"<br>");
a = "AAA"; b = "ABC";
document.write("2." + a + " < " + b + " : " + (a < b));
</script>
</head>
<body>
</body>
</html>
45
실습 [2-5]
다음 연산의 결과를 예상하여 보고 프로그램
을 작성하여 확인한다.
a = 10; b = 5; c = 4; 일 때
a+b<c*5
46
논리연산자 [1]
AND, OR, NOT 등 논리연산을 수행하는 연
산자
논리요소
NOT
AND
OR
A
B
!A
A && B
A || B
T
T
F
T
T
T
F
F
F
T
F
T
T
F
T
F
F
T
F
F
47
논리연산자 [2]
10 > 5 && 10 > 3 -> true
10 > 5 && 11 > 15
-> false
10> 5 || 15 > 20 -> true
!(10 > 5)
-> false
10 > 20 || 5 > 10
-> false
48
예제 – 논리연산자 사용
<title>자바스크립트 시험2-15</title>
<script language="JavaScript">
a = 10; b = 5; c = 20;
document.write("1.!(" + a + " > " + b + ") = " + !(a>b)
+"<br>");
document.write("2.10 > 5 && 20 > 5 = " + (10>5 && 20>5)
+"<br>");
document.write("2.10 > 5 && 5 > 20 = " + (10>5 && 5>20)
+"<br>");
document.write("2.10 > 5 || 5 > 20 = " + (10>5 || 5>20)
+"<br>");
document.write("2.10 < 5 || 5 > 20 = " + (10<5 || 5>20));
</script>
</head>
<body>
</body>
49
조건연산자
기본형식
조건 ? a : b ;
조건이 참이면 a 수행, 거짓이면 b 수행
<html>
<head>
<title>자바스크립트 시험2-16</title>
<script language="JavaScript">
a = 10; b = 5;;
a > b ? c = true : c = false;
document.write("c = " + c);
</script>
</head>
<body>
</body>
</html>
50
비트연산자
값을 비트 단위로 AND(&), OR(|) 연산
<html>
11 & 5 = 00001011 & 00000101
<head>
<title>자바스크립트 시험2-17</title>
<script language="JavaScript">
document.write("11 & 5 = " + (11&5));
document.write("<br>");
document.write("11 | 5 = " + (11|5));
</script>
</head>
<body>
</body>
</html>
=1
51
연산자 우선순위
우선순위
1
2
3
4
5
6
7
8
9
10
연산자
[], ()
++, --, !
*, /, %
+, <, <=, >, >=
==, !=
&
|
&&
||
52