HTML CSS 자바스크립트 무작정 따라하기

Presentation on theme: "HTML CSS 자바스크립트 무작정 따라하기"— Presentation transcript:

1 HTML CSS 자바스크립트 무작정 따라하기

2 Chapter 10. 자바스크립트 기초 문법 1

3 HTML CSS 자바스크립트 무작정 따라하기
학습목표 자바스크립트 함수의 변수 선언 방법과 저장 유형에 대해 알 수 있다. 숫자형, 논리형, 문자열, null 등의 데이터 유형에 대해 알 수 있다. 다양한 자바스크립트 연산자를 알 수 있다. 대화상자의 종류와 특징에 대해 알 수 있다. 여러 조건문의 특징을 이해하고 그 차이를 알 수 있다. HTML CSS 자바스크립트 무작정 따라하기

4 HTML CSS 자바스크립트 무작정 따라하기
자바스크립트 변수 변수(variable) : 임의의 값을 저장하는 임시 기억 장소 자바스크립트에서는 값을 저장하거나 값을 다른 곳으로 전달하는 데 변수를 사용한다. 변수 명명 규칙 ㉠ 첫 번째 글자는 영문자(대문자 또는 소문자)이거나 언더스코어(_)여야 한다. ㉡ 두 번째 글자부터는 문자와 언더스코어, 또는 숫자 중에서 어떤 것이든 사용할 수 있다. ㉢ 자바스크립트의 키워드(예약어)와 같게 하면 안된다. (키워드란 자바스크립트 안에서 사용하는 단어들과 다음 버전을 대비해서 미리 예약해 놓은 단어들) ㉣ 이름 길이에는 제한이 없지만 이름만 보고도 쉽게 변수의 역할을 알 수 있게 이름을 짓도록한다. 대소문자를 구별한다는 것도 고려해야 한다. ㉤ 같은 스크립트 소스 안에서 비슷한 변수 이름은 사용하지 않는 것이 좋다. ㉥ 여러 단어로 된 이름일 경우 각 단어 사이에 언더스코어로 연결해 쓰거나 각 단어의 시작 부분을 대문자로 사용한다(ex, myScrollBar, my_scroll_bar) HTML CSS 자바스크립트 무작정 따라하기

5 변수 선언하기 1) 변수 선언 2) 변수 초기화 변수를 만드는 것을 선언한다(declaration)라고 한다.
자바스크립트에서는 소스 중 어디에서나 변수를 선언할 수 있다. 기본형식 var 변수 이름 예 var now 2) 변수 초기화 변수에 초기값을 할당하는 과정 변수 선언과 초기화를 한꺼번에 할 수도 있다. 기본형식 var 변수 이름 변수 이름 = 초기값 예 var now now = new Date() 기본형식 var 변수 이름 = 초기값 예 var now = new Date() 기본형식 var 변수 이름1=초기값1, 변수 이름2=초기값2,…… 예 var speed=100, count=1 HTML CSS 자바스크립트 무작정 따라하기

6 변수 영역과 저장 유형 변수 영역 : 변수의 유효 범위 저장 유형
로컬 변수(local variable) : 특정 함수 안에서만 사용할 수 있는 변수. 변수 선언할 때 var 붙임. 전역 변수(global variable) : 스크립트 전체에서 사용할 수 있는 변수. var 없이 변수 선언. 예1 function test() { age = 43　　 } age = 11 test() document.write(age + "<br>") 예2 function test() { var age = 43　　 } age = 11 test() document.write(age + "<br>“) ② age=43 ② age=43 ① age=11 ① age=11 ③ age=43 ③ age=11 저장 유형 자바스크립트에서 변수의 저장 유형은 변수 영역에 따라 달라진다. 로컬 변수는 한 함수 안에서만 사용하기 때문에 임시로 저장되고 전역 변수는 영구 저장된다. HTML CSS 자바스크립트 무작정 따라하기

7 데이터 유형 자바스크립트에서 사용하는 데이터 유형 유형 설명 예 숫자형(number) 따옴표가 붙지 않는 모든 숫자
문자열(string) 따옴표 안에 있는 여러 문자들 “123”, “안녕?”, “ ” 논리형(boolean) 참과 거짓으로 구분되는 논리값 true, false null 키워드. 아무 값도 없다는 뜻 1) 숫자형 자바스크립트에서 숫자 데이터를 처리할 때에는 따옴표를 사용하지 않는다. ① 정수 : 소수점이나 지수 부분이 없는 숫자 ② 실수 : 소수점이 있는 숫자 2) 논리형 참(true), 거짓(false)이란 값을 가진다. 어떤 조건에 따라 문장을 실행해야 하는 제어문에서 자주 사용한다. HTML CSS 자바스크립트 무작정 따라하기

8 데이터 유형 3) 문자열 스트링(string)이라고도 부르는 텍스트. 숫자일 경우에도 따옴표로 묶으면 문자열로 인식한다.
숫자열과 문자가 함께 포함된 식은 문자열로 인식한다. 예) var box=“good”+3 문자열을 숫자로 변환하는 것은 불가능 4) null 특정한 유형을 지정하지 않고 변수를 초기화할 때 사용된다. 기본형식 var 변수 이름 = null HTML CSS 자바스크립트 무작정 따라하기

9 연산자의 종류 산술 연산자 : 수학에서 사용하는 숫자 관련 연산자 문자열 연산자 : 문자열을 합할 때 사용하는 연산자
비트 연산자 : 데이터를 저장하는 최소 단위인 비트별로 조작하는 연산자 대입 연산자 : 변수에 특정 값을 저장할 때 사용하는 연산자 비교 연산자 : 두가지 수나 문자열을 비교할 때 사용하는 연산자 논리 연산자 : 참과 거짓을 구별하는 연산자 데이터 유형 연산자 : 특정 자료의 데이터 유형을 알아내는 연산자 단항 연산자 : 피연산자가 하나만 필요한 연산자(예, ++, --, !) 이항 연산자 : 피연산자가 두 개 필요한 연산자(예, +, - ) HTML CSS 자바스크립트 무작정 따라하기

10 연산자의 종류 1) 산술 연산자 연산자 설명 유형 형식 + 더하기 이항 x + y - 빼기 x - y * 곱하기 x * y /
나누기 x / y % 나머지 x % y ++ 증가 단항 x++, ++x -- 감소 y--, --y ※ 증가 연산자와 감소 연산자 증가 연산자와 감소 연산자는 단항 연산자이기 때문에 피연산자 앞이나 뒤에 연산자를 사용한다. 피연산자 뒤에 연산자가 오면 피연산자의 값을 반환한 후에 값을 증가시키고, 피연산자 앞에 연산자가 오면 값을 증가시킨 후 피연산자 값을 반환한다. HTML CSS 자바스크립트 무작정 따라하기

11 연산자의 종류 2) 연결 연산자 문자열과 문자열을 합해서 하나의 문자열로 만드는 연산자.
2) 연결 연산자 문자열과 문자열을 합해서 하나의 문자열로 만드는 연산자. 연산자는 더하기 연산자(+)와 똑같이 생겼지만 더하기 연산자는 피연산자가 모두 숫자여야 하고 연결 연산자는 두 피연산자 중의 하나가 문자열이어야 한다. 연결 연산자는 문자열끼리 연결한다고 해서 문자열 연산자라고도 한다. 기본형식 피연산자1 + 피연산자2 예 var mynum=7 document.write("내가 좋아하는 숫자는 ") document.write(mynum) document.write("입니다.“) HTML CSS 자바스크립트 무작정 따라하기

12 연산자의 종류 3) 대입 연산자 연산자 오른쪽의 실행 결과를 연산자 왼쪽에 대입하는 연산자 연산자 설명 형식 =
3) 대입 연산자 연산자 오른쪽의 실행 결과를 연산자 왼쪽에 대입하는 연산자 연산자 설명 형식 = 연산자 오른쪽 값을 왼쪽 변수에 대입합니다. x = y -= OP1 = OP1 - OP2 x -= y += OP1 = OP1 + OP2 x += y *= OP1 = OP1 * OP2 x *= y /= OP1 = OP1 / OP2 x /= y %= OP1 = OP1 % OP2 x %= y 예 text = "짝짝~짝짝짝“ text += " 대한민국“ document.write(text) HTML CSS 자바스크립트 무작정 따라하기

13 연산자의 종류 4) 비교 연산자 두 개의 값을 비교해서 참과 거짓으로 논리형 결과값을 반환하는 연산자 연산자 설명 형식 ==
같은지 비교 x == y != 같지 않은지 비교 x != y < 작은지 비교 x < y <= 작거나 같은지 비교 x <= y > 큰지 비교 x > y >= 크거나 같은지 비교 x >= y 예 5 != 6 // true 6 < 4.7 // false 7 <= 7 // true 10 > 6 // true 16 <= "16" // true "luck" > "Work" // true "XT" >= "pentium pro" // false HTML CSS 자바스크립트 무작정 따라하기

14 연산자의 종류 5) 논리 연산자 논리값을 피연산자로 한다. 피연산자의 참과 거짓을 사용해서 조건을 체크할 때 많이 사용한다.
설명 || (OR) 피연산자 중 true가 하나라도 있으면 true가 됩니다. && (AND) 피연산자 중 false가 하나라도 있으면 false가 됩니다. ! (NOT) 피연산자의 값과 정반대의 값을 가집니다. 세 가지 연산자의 논리표 피연산자1 피연산자2 피연산자1 || 피연산자2 피연산자1 && 피연산자2 !피연산자 false true HTML CSS 자바스크립트 무작정 따라하기

15 연산자의 종류 5) 조건 연산자 6) typeof 연산자 피연산자가 3개
조건을 체크해서 값이 true이면 선택1을 실행하고 결과값이 fasle이면 선택2fmf 실행한다. 기본형식 조건? 선택1 : 선택2 예 var grade = (average > 90) ? "수" : "우" 6) typeof 연산자 피연산자의 데이터 유형을 체크하는 연산자 피연산자는 상수일 수도 있고 변수나 함수 같은 데이터 구조일 수도 있는데 연산자가 데이터 유형을 반환한다. 기본형식 조건? 선택1 : 선택2 예 typeof eval == "function" // eval이 내장 함수인지 typeof null == "object" // null이 객체인지 typeof 3.14 == "number" // 3.14가 숫자인지 typeof true == "Boolean" // true가 불린값인지 HTML CSS 자바스크립트 무작정 따라하기

16 연산자 우선순위 우선 순위 연산자 설명 1 (), [ ] 괄호, 호출 2 ! ~ - ++ -- 부정, 증가, 감소 3
* / % 곱하기, 나누기, 나머지 4 + - 더하기, 빼기 5 << >> >>> 시프트 6 < <= > >= 비교 연산자 7 == != 8 & 비트 AND 9 ^ 비트 XOR 10 | 비트 OR 11 && 논리 AND 12 || 논리 OR 13 ? : 조건 연산자 14 = += -= *= /= %= <<= >>= >>>= ... 대입 연산자 15 , 콤마 연산자 HTML CSS 자바스크립트 무작정 따라하기

17 대화상자 경고 창 2) 확인 창 작은 창을 열어 원하는 메시지를 표시할 수 있다.
기본형식 alert(메시지) 예1 alert("안녕하세요?") 예2 var msg = "안녕하세요?" alert(msg) 2) 확인 창 확인 창은 사용자가 직접 [확인]이나 [취소] 중에서 원하는 버튼을 클릭할 수 있고 그에 맞게 프로그램이 동작하도록 할 수 있다. 기본형식 confirm(메시지) 예 var reply = confirm("정말 배경 이미지를 바꾸겠습니까?") HTML CSS 자바스크립트 무작정 따라하기

18 대화상자 프롬프트 창 입력 필드가 있는 작은 창을 띄워서 사용자가 입력 필드에 메시지를 입력하도록 한다. 기본형식
prompt(메시지) 기본형식 prompt(메시지, 기본값) 예 var yourName = prompt("이름을 넣어주세요", "아무개") ※ 사용자가 입력 필드에 입력하는 내용은 무조건 문자열(string)로 받는다. 만일 사용자가 입력한 값을 숫자로 사용하고 싶다면 문자열을 숫자로 바꿔주는 parseInt() 메서드를 사용해야 한다. HTML CSS 자바스크립트 무작정 따라하기

19 조건문 1) if 문 괄호 안의 조건을 체크해서 true이면 바로 다음의 문장을 실행하고 조건이 false이면 아무것도 하지 않는다. 예 기본형식 if (조건) 문장 var reply = confirm("정말 배경 이미지를 바꾸겠습니까?") if (reply == true) document.body.style.backgroundImage="url("+mybg+")"　　　 기본형식 if (조건) { 문장 1 문장 2 문장 3 .... } 2) else 문 if 문에서 체크한 조건이 false일 때 실행한다. 기본형식 if (조건) 문장 1 else 문장 2 예 if (age < 21) alert("죄송합니다, 나이가 어려서 입장할 수 없습니다") else alert("어서오세요.")　 HTML CSS 자바스크립트 무작정 따라하기

20 조건문 3) 중첩된 if-else 문 하나의 if-else 문 안에 또다른 if-else 문이 포함되는 것. 기본형식
HTML CSS 자바스크립트 무작정 따라하기

21 조건문 4) switch 문 체크해야 할 조건이 많으면서 서로 중복되지 않을 경우에 편리하다.
변수를 체크해서 case 문에 따라 지정한 동작만 처리하면 된다. 기본형식 switch (변수) { case 상수1 : 문장1 break case 상수2 : 문장2 　　…… default: 문장n ｝ HTML CSS 자바스크립트 무작정 따라하기