HTML 문서의 정적이고 단조로운 한계를 극복하기 위해 넷스케이프(Netscape)사가 만든 livescript가 그 이름을 달리 한 것으로서 브라우저 자체에 내장된 해석기능을 이용한 클라이언트(client) 기반의 일종의 스크립트 언어이다. 작고도 빠르기 때문에 웹문서를 동적으로 꾸밀 때 가장 널리 쓰인다.
[네이버 지식백과] 자바스크립트 [JAVA script] (NEW 경제용어사전, 2006. 4. 7., 미래와경영)
1. 기본형
<script type="text/javascript">
내용
</script>
2. 작성위치
<head>영역 또는 <body> 영역에 선언하여 사용,
보통 <head> 영역에 사용
반드시 그래야 하는것은 아님..
3. 주석처리
// 주석문 : 한줄 주석
/* 주석문 */ : 여러줄 주석
4. 내부 스크립트 외부로 분리
<script type="text/javascript" src="파일경로"><script>
실습
HTML 기본 파일(js.html)을 생성 한후 javascript로 화면에 "안녕하세요"를 출력해 보세요.
* document.write("문자열"); document 문서객체의 write 메서드로 문서에 text 출력이 가능하다.
실습
실습 1에서 작성한 javascript 영역을 외부 파일 (script.js) 로 분리해 보세요.
5. 기본 규칙
- 중괄호({}), 괄호()의 짝이 맞아야 한다. 열리면 닫아주자~~~
- 실행문이 끝나면 세미콜론을 붙여 주자(선택사항)
- 대소 문자의 구별
6. 변수
값(데이터)을 기억하기 위한 메모리 상의 임의의 공간(장소)
변수를 가리키는 이름(명)이 변수명
6.1 데이터형
변수에 저장할 수 있는 데이터의 종류
- 문자형(String)
- 숫자형(Number)
- 논리형(Boolean)
- 객체(Object)
- null
6.2 변수의 선언 및 초기화(값의 저장)
선언 : var 변수명
초기화(값의 저장) : 변수명 = 값
또는
var 변수명 = 값;
6.3 문자형 데이터
큰따옴표 또는 작은 따옴표로 감싸고 있는 데이터
만약 태그를 포함할 경우 태그는 태그로 해석되어 화면에 표시 됨.
6.4 숫자형 데이터
숫자 데이터, 숫자를 큰따옴표로 감쌀 경우 문자 데이터가 된다.
문자 데이터는 숫자로 형변환 후 사용해야 한다. 예: Nember("10")
실습
변수 a, b, c를 선언한 후 a 에는 10, b 에는 20 를 저장한 후 a 와 b의 합을 구해서
c에 저장, 마지막에 c의 값을 화면에 출력 하세요.
<script type="text/javascript">
var a = 10;
var b = 20;
var c = a + b;
document.write(c);
</script>
6.5 논리형 데이터
true(참), false(거짓) 데이터
6.6. 기본 규칙
변수명의 첫글자는 영문자, _(언더바), $로 시작할 수 있다.
변수명 첫글자 다음에는 숫자가 올 수 있다. 즉 숫자, 영문자, _(언더바), $ 사용가능
예약어는 사용할 수 없다.
대/소문자를 구분한다.
7. 연산자
다양한 계산작업을 수행하는 것으로 산술연산자, 대입연산자, 증감연산자, 비교연산자, 논리 연산자 등이 있다.
7.1 산술 연산자
+ : 더하기
- : 빼기
* : 곱하기
/ : 나누기
% : 나머지
더하기(+)는 문자에 적용할 경우 문자의 더하기. 즉 문자의 결합이 발생 한다.
실습
두개의 변수 a, b를 선언한 후 두 변수의 값을 10과 3으로 초기화 하여 사직 연산 결과값을 화면에 출력 하세요.
7.2 대입 연산자
연산된 결과를 변수에 대입할 때 사용
종류 :
a = b -> a = b
a += b => a = a+b
a -= b => a = a-b
a *= b => a = a*b
a /= b => a = a/b
a %= b => a = a%b
7.3 증감 연산자
숫자 데이터를 1씩 증감 시키는 연산자로 증가: ++, 감소 : --가 있다.
문제 : b의 값은
var a = 10;
document.write(b = ++a);
document.write("<br>");
document.write("변수 b의 값 : " + b);
문제 : b의 값은
var a = 10;
document.write(b = a++);
document.write("<br>");
document.write("변수 b의 값 : " + b);
7.4 비교 연산자
두 데이터를 비교할 때 사용하는 연산자
a > b : a는 b보다 크다
a < b : a는 b보다 작다
a >= b : a는 b보다 크거나 같다.
a <= b : a는 b보다 작거나 같다.
a == b : a는 b와 같다.
a != b : a는 b는 같지 않다.
a === b ; a는 b와 같다. (값과 데이터 형식을 같이 비교)
a !== b : a는 b는 같지 않다. (값과 데이터 형식을 같이 비교)
7.5 논리 연산자
논리적으로 참(true), 거짓(false)을 계산하는 연산자
&& : and 연산자
|| : or 연산자
! : not 연산자
7.6 연산자 우선 순위
{}
++, --, !
산술연산자 (*, /, %, +, -)
비교연산자
논리 연산자
대입 연산자
** 제어문 : 프로그램의 흐름을 제어할 수 있도록 도와주는 실행문..
제어문에는 조건의 만족 여부에 따라 실행문을 제어하는 조건문(if)과 값의 일치여부에 따라 실행문을 제어하는 선택문(switch), 특정 실행문을 여러 번 반복 실행하는 반복문이 있다.
8. if 조건문
실행 순서를 제어하는 기본 제어문으로 형태는 다음과 같다.
기본형태 :
if(조건){
실행문 1;
}
if(조건){
실행문 1;
}else{
실행문 2
}
if(조건){
실행문 1;
}
else if(조건 2){
실행문 2
}
.......
else{
실행문 N
}
실습
학점 계산 프로그램 만들기
A+ : 90 ~ 100
A : 80 ~ 89
B+: 70 ~ 79
B: 60 ~ 69
C+: 50 ~ 59
C: 40 ~ 49
D+: 30 ~ 39
D: 20 ~ 29
F :0 ~ 19
변수 a의 점수를 저장하고 a의 값을 조사하여 학점을 화면에 출력 한다.
문제 :
var cDate = new Date();
var cTime = cDate.getHours();
를 이용하여 현재 오전인지 오후 인지 화면엘 출력해 보세요.
9. switch 문
if문과 같은 분기문에 사용
기본형태 :
switch(표현식){
case 값1:
실행문 1;
break;
case 값2:
실행문 2;
break;
case 값3:
실행문 3;
break;
default:
실행문 4;
}
실습:
현재 시간을 정오(12시), 자정(0시), 나머지는 현재 시간을 출력하도록 하세요.
10. for 반복문, while 반복문 ,do ~ while 반복문..
같은 실행 구문을 반복 실행할때 사용
10.1 for 반복문 기본 형태
for( 초기값 ; 종료 조건 ; 증감식){
실행문.
}
실습 : 1 부터 10까지 화면에 출력 하세요.
문제 : 다음과 같이 출력될 수 있도록 script를 작성 하세요.
11. while 문
기본형 : while(조건){
실행문;
증감식;
}
실습 : 1부터 100까지의 숫자 중에서 3의 배수 이면서 5의 배수인 것은??
12. do while문
기본형 : do{
실행문;
증감식;
}while(조건식)
실행문을 먼저 실행하고 조건을 검사한다.
13. 반복문의 흐름 제어문
break; 반복문을 강제로 종료 한다.
continue : 현재의 반복 주기를 끝내고 다음 반복을 계속 한다.
실습 : 1부터 100까지의 합을 구한다.
만약 합이 30을 넘어가면 반복을 종료 한다.
문제 : 1부터 얼마까지 더해서 36이 나왔는가?
실습 : 1부터 10까지의 숫자 중에서 2의 배수가 아닌 것만 화면에 출력 하세요.
문제 : if 조건문을 사용하여 2의 배수가 아닌 것만 화면에 출력 하세요.
[출처] [JAVASCRIPT] javascript의 기본 문법 1|작성자 CUBE
'JAVASCRIPT > 소스코드' 카테고리의 다른 글
| [JavaScript] 날짜를 YYYYmmdd 형태로 반환하는 함수 (Date, format, yyyymmdd) (0) | 2018.02.27 |
|---|---|
| [JAVASCRIPT] 이벤트 및 함수 (0) | 2016.05.03 |
| [JAVASCRIPT] javascript의 기본 문법 3 (0) | 2016.05.03 |
| [JAVASCRIPT] javascript의 기본 문법 2 (0) | 2016.05.03 |
| JavaScript 2차원 배열 (0) | 2016.05.02 |
| [JavaScript] replace (문자 치환) (0) | 2016.01.20 |
| 초간단 자바스크립트 명령어-뒤로가기,앞으로가기,새로고침,창닫기,인쇄초간단 자바스크립트 명령어 (0) | 2015.10.15 |
| 자바스크립트 팝업창 띄우기 여러버젼 (0) | 2015.10.15 |
nineDeveloper
안녕하세요 현직 개발자 입니다 ~ 빠르게 변화하는 세상에 뒤쳐지지 않도록 우리모두 열심히 공부합시다 ~! 개발공부는 넘나 재미있는 것~!