자바스크립트(javascript)
- 동적인 웹 페이지를 작성하기 위하여 사용되는 언어
- 웹의 표준 프로그래밍 언어
- 모든 웹브라우저들은 자바스크립트를 지원
자바와 자바스크립트는 다른 언어.
자바 자바스크립트
언어종류 컴파일 언어(소스파일을 컴파일을 하여 실행) 인터프리트 언어(직접 해석하여 실행) - 한 라인씩 처리(인터프리트 언어)
실행 방식 JVM(자바가상머신) 위에서 실행 브라우저 위에서 실행
작성 위치 별도의 소스 파일에 작성 HTML 파일 안에 삽입 가능
변수 선언 변수의 반드시 선언해야 함 변수의 타입을 선언하지 않아도 사용 가능Script의 사용
<script>
var now = new Date();
var now :var 변수, now 라는 변수이름을 줌
new Date() :현재 시간을 가지고 있는 new Date() 객체 생성
= new Date()의 값을 now에 저장해라
document.write(now);
document : 객체(내장 객체), write: 함수(body태그에 뿌려주는 역할) , new Date : 자바의 함수
</script>
자바스크립트의 용도
- 이벤트에 반응하는 동작을 구현(click, double click, key 입력 등)
- Ajax를 통하여 전체 페이지를 다시 로드하지 않고서도 서버로부터 새로운 페이지 콘텐츠를 받거나 데이터를 제출할 때, 사용
- HTML 요소의 크기나 색상을 동적으로 변경할 수 있다.
- 게임이나 애니메이션과 같은 상호 대화적인 콘텐츠 구현
- 사용자가 입력한 값들을 검증하는 작업을 할때 이용
자바 스크립트의 위치
- 내부 자바스크립트 : 헤드태그 또는 바디태그 사이에 사용
<head></head>태그 사이나 <body></body>태그 사이에 <script></script> 선언해서 사용
<script>
document.write("<h1>hello world!</h1>");
</script>
내부 자바스크립트 예제]
- 외부 자바스크립트 : 링크로 외부 파일 불러와서 사용
<script src="경로/파일명.js"></script>
(주의) src로 경로 지정함
외부 자바스크립트]
- 인라인 자바스크립트 : 태그 내에 작성
<body>
<button onclick="alert('반갑습니다.')">버튼을 클릭하세요.</button>
</body>
인라인 자바스크립트 예제]
js 파일 생성하는 법
File - New - Other - JavaScript - JavaScript Source File 선택
문장(statement)
순차적으로 실행된다. // 한 라인씩 처리(인터프리트 언어)
문장의 끝에는 ;(세미콜론)을 붙인다.
블록, 주석 이전과 동일
변수(variable)
데이터를 저장하는 공간
변수는 var 키워드를 사용해 선언(declare)한다.
변수 이름
변수의 역할을 설명하는 이름으로 짓는것이 좋음.
- 변수 이름은 문자로 시작해야 한다. (숫자로 시작하면 안된다.)
- 변수 이름은 $이나 _로 시작할 수 있다.
- 변수이름은 대소문자를 구별한다.(count와 Count는 서로 다른 변수이다.)
자료형(date type)
자바스크립트는 var (변수명) = 뒤에 오는 값으로 자료형을 구분
- 수치형(number) : 정수나 실수가 될 수 있다.
ex) var a = 100;- 문자열(string) : 문자가 연결된 것을 의미한다. 텍스트
ex) var b = "안녕";- 부울형(boolean) : true or false 값 만 가질 수 있다. 둘 중 하나를 표현하는데 사용
ex) var c = (true) or (false);위의 수치형, 문자열, 부울형 3가지가 기본 자료형
- 객체형(object) : 객체를 나타내는 타입, 사물의 속성과 동작을 묶어서 표현하는 기법
ex) var d = { 1, 2 ,3 }
var myCar = { model: "bmz", color: "red", hp: 100 };
출력하려면 아래와같이 사용 ( 변수명.객체명 )
document.write( myCar.model + "<br>");
document.write( myCar.color + "<br>");
document.write( myCar.hp + "<br>");- undefined : 값이 정해지지 않은 상태
ex) var e;
수치형, 문자열 예제]
객체형 예제]
연산자
산술 연산자 : 수학에서 사용되는 연산자와 유사. + , - , * , /
// 3+4에서 3 피연산자, 4 피연산자, + 연산자연산자 종류
- 연산자
+, -, *, /, %
document.write(x+y+"<br>");// 10 + 20 = 30 덧셈
document.write(x-y+"<br>"); // 10 - 20 = -10 뺄셈
document.write(x*y+"<br>"); // 10 * 20 = 200 곱셈
document.write(x/y+"<br>"); // 10 / 20 = 0.5 나눗셈
document.write(x%y+"<br>"); // 10 % 20 = 10 나머지
증감연산자
- ++, -- 값을 증가시키거나 감소 시킬때 사용하는 연산자
var x;
x = 10;
y=++x; // ++x 전위형) x 먼저 증가시키고 y에 값을 넣어줌(선 증가 후 저장)
y=x++; // x++ 후위형) y에 값을 먼저 넣어주고 x를 증가시킴(선 저장 후 증가)
결과
11
11
11
10
대입연산자
- = 변수에 값을 할당할때 사용하는 연산자(우선순위가 가장 낮기때문에 마지막에 계산)
x = x + y;
x += y; /* x = x + y를 줄여서 사용 가능, x=a+b 이런건 안됨 */문자열에서의 + 연산자
- 문자열 결합하는 용도로 사용
s1 = "Welcome to ";
s2 = "Javascript";
s3 = s1 + s2;
s3 결과 : "Welcome to Javascript"
비교 연산자
두개 숫자를 비교할때 사용하는 연산자
연산자 설명
== 값이 같으면 참
!= 값이 다르면 참
> 크면 참
< 작으면 참
>= 크거나 같으면 참
<= 작거나 같으면 참
=== 값과 타입이 모두 같으면 참(===는 자료형(타입)과 값을 보고 비교)
!== 값이나 타입이 다르면 참
논리 연산자
여러개의 조건을 조합하여 참인지 거짓인지를 따질 때 사용
연산자 사용 예 설명
&& a&&b AND 연산, a와 b가 모두 참이면 참, 그렇지 않으면 거짓
|| a||b OR 연산, a와 b중에서 하나만 참이면 참, 모두 거짓이면 거짓
! !a NOT 연산, a가 참이면 거짓, a가 거짓이면 참조건 연산자
유일하게 3개의 피연산자를 가지는 삼항 연산자, 값을 비교하여 결과를 알려주는 연산자
ex) 나이가 30세 미만이면 청년부 출력, 그렇지 않으면 장년부 출력
group = (age < 30) ? "청년부" : "장년부";
(true일때) : (false일때)연산자 우선순위
우선순위 연산자
1 .[]new
2 ()
3 ++, -- 증감 연산자
4 ! ~ + - typeof void delete
5 * / %
6 + -
7 << >>
>>>
8 <<= >>= in instanceof
9 == != === !==
10 &
11 ^
12 |
13 &&
14 ||
15 ?:
16 yield
17 = += -= *= %= <<= >>= >>>= &= ^= != 대입연산자
18 .끝
뉴비 개발자 입니다. velog 주소 : https://velog.io/@jjinny_0609 Github 주소 :