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