Embed Size (px)
DESCRIPTION
The basic of Javascript
Citation preview
자바스크립트의 기초
Chapter7.
자바스크립트란?
How to Read?
interpreter
Why?
It’s dynamic!!!
How to Write?
How to Write
1. 따옴표 사용하기’
Document.write(“<img src=‘summer.jpg’>”)
2. 세미콜론(;)으로 문장사이 구분하기
3. 대소문자 구분하기
4. 주석달기
// or /* ~ */
전역변수1. <body>
2. <script>
3. function test() {
4. number = 10;
5. }
6. number = 20; /* 전역 변수 */
7. test();
8. document.write("최종 숫자는 "+number +"입니다.");
9. </script>
10. </body>
결과는??
How to declare?
How to declare
내부 외부
How to declare(내부)
<script>
자바스크립트 소스
</script>
How to declare
내부 외부
How to declare(외부)
<script src=“외부스크립트파일”></script>
<파일형식: *.js>
What is Variable?
What is Variable?
*선언 방법- Var 변수이름
문자나 언더 스코어(_)로 시작하기
What is Variable?
*선언 방법- Var 변수이름
What is Variable?
*변수 값 할당하기- Var 변수이름-변수 이름 = 초기값
What is Variable?
Var today;Today = new date()
전역변수1. <body>
2. <script>
3. function test() {
4. number = 10;
5. }
6. number = 20; /* 전역 변수 */
7. test();
8. document.write("최종 숫자는 "+number +"입니다.");
9. </script>
10. </body>
결과는??
결과:10
지역변수1. <body>
2. <script>
3. function test() {
4. var number = 10; /* 지역 변수 */
5. }
6. number = 20;
7. test();
8. document.write("최종 숫자는 "+number +"입니다.");
9. </script>
10. </body> 결과는??
결과: 20
Type of date
Type of date
1. 숫자형 : “ ”가 없는 모든 숫자
2. 논리형 : true or false
3. 문자형 : “따옴표”로 묶어놓은 문자
4. Null : 아무것도 없는 상태
숫자형
1. <script>2. var a, b, c, res1, res2, res3;
3. a = 10; // 정수4. b = "10"; // 문자열5. c = 1.5; // 실수
6. res1 = a + 5;7. res2 = b + 5;8. res3 = c * c;
9. document.write(a + "의 데이터 유형: "+ typeof(a)); //number10. document.write("<br>");11. document.write(a +"에 5를 더하면 : " + res1);12. document.write("<br><br>");
13. document.write(b + "의 데이터 유형: "+ typeof(b)); //string14. document.write("<br>");15. document.write(b + "에 5를 더하면 : " + res2);16. document.write("<br><br>");
17. document.write(c + "의 데이터 유형: "+ typeof(c)); //number18. document.write("<br>"); 19. document.write(c + "를 두번 곱하면 : " + res3); 20.
21. </script>
문자열
1. <script>2. var m, n, o, p;
3. m = 5 + 5;4. n = "5" + 5;5. o = "5" + 5 + 5;6. p = "5" + (5 + 5);
7. document.write('5 + 5 = ' + m +"<br><br>");8. document.write('"5" + 5 = ' + n +"<br><br>");9. document.write('"5" + 5 + 5 = ' + o
+"<br><br>");10. document.write('"5" + (5 + 5) = ' + p); 11. </script>
1055
555510
Null
Operator
Type of operator
1. 산술연산자
2. 문자열 연산자
3. 비트 연산자
4. 대입 연산자
5. 비교 연산자
6. 논리 연사자
7. 데이터 유형 연산자
Type of operator
1. 단항 연산자(++)-피연산자가 하나만필요
2. 이항 연산자(+)-피연산자가 2개 필요
산술연산자 예제
1. <script>2. var a=10, b=4;
3. res1 = a + b;4. res2 = a - b;5. res3 = a * b;6. res4 = a / b; 7. res5 = a % b; 8.9. document.write("10 + 4 = " + res1 +"<br><br>");10. document.write("10 - 4 = " + res2 +"<br><br>");11. document.write("10 * 4 = " + res3 +"<br><br>");12. document.write("10 / 4 = " + res4 +"<br><br>");13. document.write("10 % 4 = " + res5); 14.15. </script>
산술연산자(증감,감소)
a++의 의미
: a= a+1
a- -의 의미
: a= a-1
연결연산자
-문자열과 문자열을 합해서 하나의 문자열로 만드는 것
-document.write(“hello”+username+”반갑습니다.”)
대입연산자
-연산자 오른쪽이 실행결과를 연산자 왼쪽에 대입하는 것
-text = “hello”;
-text += “nice to meet you!”;
-document.write(text);
“Hello nice to meet you!”
비교연산자
-두개의 값을 비교해서 참과 거짓으로 논리형 결과값을 반환하는 연산자(==,!=,<,>)
참: 0
거짓:1
논리연산자
-true와 false인 논리값을 피연산자로 함
- 유형
1. ll(or)
2. &&(and)
3. !(not)
조건연산자
-조건을 체크하고 그 값이 참이면 선택1을 실행, 거짓이면 선택 2를 실행
조건? 선택1 : 선택2
Type of 연산자
- 피연산자의 데이터 유형을 체크하는 연산자로 조건을 체크할 때 사용함
Typeof 피연산자 orTypeof(피연산자)
Type of 연산자 예제
1. <script>2. a = 10;3. b = "10";4. c = 1.5;
5. document.write(a + "의 데이터 유형: " + typeof (a));6. document.write("<br><br>");7. document.write(b + "의 데이터 유형: " + typeof (b));8. document.write("<br><br>");9. document.write(c + "의 데이터 유형: " + typeof (c));10. document.write("<br><br>");11. </script>
