○ JavaScript 언어
JavaScript는 1995년 Netscape Communication Corporation 사에서 개발되고
Netscape Navigator 2.0 브라우저에서 최초로 탑재되어 웹 프로그래밍의 개념을 창시한 언어이다
현재는 모든 브라우저에서 실행되는 웹 범용 언어가 되었다
2. 자바 스크립트 소스 코드는 컴파일 과정 없이 브라우저 내부의 자바 스크립트 처리기(인터프리터)에 의해 처리된다
3. 자바 스크립트는 C언어 구조를 차용하고 단순화시켜 쉽게 배울 수 있다
● 웹 페이지에서 자바 스크립트의 역할
웹 페이지는 html5 태그, CSS 스타일 시트, 자바 스크립트 프로그램의 3가지 코드가 결합되어 작성된다
html5 코드는 웹 페이지의 구조와 내용을 작성하고, 색상이나 폰트, 배치 등 웹 페이지의 모양은 CSS로 꾸민다
자바 스크립트는 사용자의 입력을 처리하거나 웹 어플리케이션을 작성하는 등 웹 페이지의 동적 제어에 사용된다
구체적으로 자바스크립트는
- 사용자의 입력 및 계산 : html 폼은 입력 창만 제공할 뿐 입력을 받고 계산 기능은 수행할 수 없다
키나 마우스의 입력과 계산은 자바 스크립트만 가능하다 - 웹 페이지 내용 및 모양의 동적 제어 : 자바 스크립트 코드로 html 태그의 속성이나 컨텐츠,
CSS 프로퍼티 값을 변경하여 웹 페이지에 동적인 변화를 일으키는데 활용된다 - 브라우저 제어 : 브라우저 윈도우의 크기나 모양 변경, 새 윈도우나 탭 열기, 다른 웹 사이트 접속,
브라우저의 히스토리 제어 등 브라우저의 작동을 제어하는데 활용된다 - 웹 서버와의 통신 : 웹 페이지가 웹 서버와 데이터를 주고 받을 때 활용된다
- 웹 어플리케이션 작성 : html5는 캔버스, 로컬 및 세션 스토리지, 위치 정보 서비스 등 자바 스크립트
언어로 활용할 수 있는 많은 정보(API)를 제공하므로, 웹 브라우저에서 실행되는 다양한 웹 어플리케이션을 개발할 수 있다
● 자바 스크립트 코드의 위치
- html 태그의 이벤트 리스너 속성에 작성
- <script> 태그 내에 작성
- 자바 스크립트 파일에 작성
- URL 부분에 작성
html 태그의 이벤트 리스너 속성에 자바 스크립트 코드 작성
html 태그에는 마우스가 클릭되는 등의 이벤트가 발생할 때 처리하는 코드를 등록하는 리스너 속성이 있다
사용자는 이 속성에 이벤트를 처리할 자바 스크립트 코드를 작성할 수 있다
<img src="apple.jpg" alt="과일 그림" onclick = "this.src='banana.jpg'">
- onclick : onclick 이벤트 리스너 속성
- "this.src='banana.jpg'" : 자바 스크립트 코드
=> apple 이미지를 클릭하면 banana 이미지로 바뀌게 한다
<script> ~ </script> 태그에 자바 스크립트 코드 작성
<script> 태그에 자바 스크립트 코드를 작성할 수 있으며 다음과 같은 특징이 있다
- <script> </script>는 <head> </head>나 <body> </body>내 어느 곳이나 가능하다
- 웹 페이지 내 <script> </script>를 여러 번 작성할 수 있다.
자바 스크립트 코드를 별도의 파일로 작성
자바 스크립트 코드를 확장자가 .js인 파일로 저장하고 아래와 같이 <script> 태그의 src 속성으로 불러 사용한다
<script src="파일 이름.js">
//html5부터 이곳에 자바 스크립트 코드를 추가하면 안된다
</script>
● 자바 스크립트로 html 콘텐츠 출력
자바 스크립트 코드로 html 콘텐츠를 웹 페이지에 직접 삽입하여 바로 브라우저 윈도우에 출력되게 할 수 있다
이때 document.write()나 document.writeln()을 사용한다
아래 내용은 웹 페이지에 <h3> 텍스트를 삽입하는 방법이다
document.write("<h3>Welcome!</h3>");
- 자바 스크립트 경고 다이얼로그 : alert("메시지")
- 자바 스크립트 확인 다이얼로그 : confirm("메시지")
- 자바 스크립트 프롬프트 다이얼로그 : prompt("메시지", "디폴트 값")
● 데이터 타입과 변수
■자바 스크립트 식별자
식별자(Identifie)란 자바 스크립트 개발자가 자바 스크립트 프로그램의 변수, 상수(리터럴), 함수에 붙이는 이름이다
개발자는 식별자를 만들 때 다음 규칙을 준수 해야한다
- 첫번째 문자 => 알파벳, '_', '$' 문자만 가능하다
- 두번째 이상 문자 => 알파벳, 숫자, '_', '$'만 가능하다
- 대.소문자를 구분한다
| 77variable | X |
| student_ID | O |
| _code | O (허용하나 '_'로 시작하는 것은 특수 용도이다) |
| if | X (키워드라서 사용 못한다) |
| %calc | X |
| bar | O |
● 데이터 타입의 종류
자바 스크립트는 c, Java 등의 범용 컴퓨터 언어와 달리 데이터 타입이 단순하다
| 데이터 타입 | 예 |
|---|---|
| 숫자 타입 | 428, 5.29 |
| 논리 타입 | true(참), false(거짓) |
| 문자열 타입 | '대한민국', "코리아", "5+29" |
| 객체 레퍼런스 타입 | 객체를 가리킨다 |
| null | 값이 없음을 뜻하는 특수 키워드, Null, NULL과 다르다 |
● 변수
변수는 자바 스크립트 코드가 실행 중에 데이터를 저장하는 공간의 이름이다
C, Java와 같은 범용 컴퓨터와 달리 자바 스크립트는 변수에 데이터 타입을 정하지 않는다
■변수의 선언 방법
(1)
var score; => undefined라는 값으로 초기화된다
var year, month, day;
var address="서울시";
(1)
age=25; => var없이 age 변수를 선언하고 25로 초기화
하지만 이미 선언된 변수라면 이 변수는 새로운 변수를 생성하지 않고 이미 존재하는 변수에 값을 할당을 할당한다
var 변수를 선언하면 선언이 명료하고 이미 있는 변수를 또 선언하는 오류를 막을 수 있다
이미 있는 변수를 var로 선언하면 실행 중 오류가 발생하고 프로그램이 잘못된 결과를 발생시킬 수 있다
var 키워드로 변수를 만드는 게 바람직하다
● 상수(Literal)
변수가 데이터 저장 공간의 이름이라면 상수는 데이터 값 자체이다
var x=10; => x : 변수, 10 : 상수
■상수의 종류
| 종류 | 특징 | 예 |
|---|---|---|
| 정수 | 8진수 : 0으로 시작 10진수 16진수 : 0x로 시작 |
var n=015; var n=77; var n=0x45; |
| 실수 | 소수형 지수형 |
var height=0.1234; var height=1234E-4; (1234 X 10 - 4 => 0.1234) |
| 논리 | 참 : true 거짓 : false |
var a=true; var b=false; |
| 문자열 | " "로 묶음 ' '로 묶음 |
var hello="안녕하세요"; var hello='안녕' |
| 기타 | null : 값이 없음 NaN : 숫자가 아님 (Not a Number) |
var x=null; var y=parseInt("kor"); => parseInt()는 NaN을 리턴 |
● 식과 연산자
식(Expression)을 계산하여 결과를 얻는 과정을 연산이라고 한다
| 연산 | 연산자 종류 |
|---|---|
| 산술 연산 | +, -, *, /, % |
| 증감 연산 | ++, -- |
| 비트 연산 | &, |, ^, ~ |
| 시프트 연산 | >>, <<, >>> |
| 대입 연산 | =, *=, /=, +=, -=, &=, ^=, |=, <<=, >>=, >>>= |
| 비교 연산 | >, <, >=, <=, ==, != |
| 논리 연산 | &&, ||, ! |
| 조건 연산 | ?: |
'JavaScript' 카테고리의 다른 글
| JavaScript 간단한 함수들 (0) | 2020.06.22 |
|---|---|
| 간단한 JavaScript 코드 (0) | 2020.06.21 |
