FlowerBombs
Javascript 작성 방법 본문
Javascript 작성 방법
Javascript는 HTML 소스코드에 포함되는 형태로 작성된다.
HTML 소스코드에 포함시키기
다음의 코드를 HTML 소스코드 안에 명시, 일반적으로 <head>~</head>에 위치한다.
<script [type="text/javascript"]>
... javascript 구문...
</script>
외부 파일에 대한 참조를 포함시키기
<script>태그를 제외한 javascript 구문한 *.js로 저장된 별도의 파일로 분리하고 <script> 태그의 src속성으로 분리된 파일의 경로를 참조시킨다.
<script [type="text/javascript"] src="*.js파일의 경로"></script>
결과를 출력시키는 방법
화면에 메시지 박스 형태로 표시하기
alert(내용)
브라우저의 개발자도구 내에 포함된 콘솔을 통한 출력
console.log(내용)
변수
데이터를 저장하기 위한 키워드. 변수를 사용하기 위해서는 선언과 할당의 과정이 필요하다.
var 변수이름; // 변수의 선언
변수이름 = 값; // 선언된 변수에 값 할당
선언과 할당을 결합한 형태.
var 변수이름 = 값;
- 변수의 이름은 영어+숫자+언더바의 조합으로 구성한다.
- 띄어쓰기가 필요한 경우 언더바를 사용하거나 첫 글자를 대문자로 표현.
- 값의 할당은 오른쪽에서 왼쪽으로만 가능.
- 저장 가능한 값의 종류
* Boolean : 논리값. 참(true)/ 거짓(false)
* Number : 정수(integer), 실수(double)값
* String : 문자열(문장). 쌍따옴표나 홑따옴표로 감싸서 표현
* Null : 값이 확정되기 이전에 임의로 비워둔 형태
* undefined : 값이 할당되지 않은 상태.
* Object: 객체(이후 살펴봄)
연산자
사칙연산
- 기본적인 +, -, *, /(몫), %(나머지)
- 곱하기, 나누기가 더하기 빼기보다 우선함.
- 괄호()로 묶은 부분이 최우선처리됨.
- 더해지는 값에 문자열이 포함되어 있는 겨우 모두 하나의 문장으로 결합된다.
var a = "가나다";
var b = 123;
var c = a+b // "가나다123"
단항연산
- 연산 결과를 변수 스스로에게 다시 적용할 경우의 단축표현.
- 모든 사칙연산자에 대해서 표현 가능함
var a = 100;
a = a+ 10; // a가 10증가됨.
a += 10; // 같은 표현.
증감연산
- 단항연산에서 사용되는 값이 1이고 덧셈과 뺄셈의 경우만 축약 가능함.
var a = 100;
a++;
++a;
a--;
--a;
- 다른 연산식에 포함될 경우 증감연산자의 위치에 따라서 계산되는 시점이 다르다.
var a = 1;
// (뒷북) 100+1을 먼저 수행해서 y값을 확정, 그 후 a가 증가함.
y = 100 + a++;
//(앞북) a가 먼저 1증가하고 100+2가 수행되서 y값을 확정
y = 100 + ++a;
비교연산
- 일반적인 부등식
* 같다 : ==
* 다르다 : !=
* 크다(초과):>
* 크거나 같다(이상):>=
* 작다(미만) : <
* 작거나 같다(이하)<=
- 부등식의 결과는 참(true), 혹은 거짓(false)이 된다.
var a = 100 < 1000; // true
var b = 50 >== 1000; // false
논리연산
- 참과 거짓을 and(&&), or(||)로 비교하여 결과를 도출
- && : 모든 값이 참인 경우만 결과가 참.
- || : 하나라도 참이면 결과가 참.
프로그램의 흐름제어(1)
조건문
if문
괄호 안에 주어진 조건이 참인 경우 블록{}안을 수행.
if (조건) {
// ... 조건이 참인 경우 실행할 명령 ...
}
조건에 명시할 수 있는 형식
1. 비교식(==, 1=, >,>=, <,<=)
2. 논리식(&&,||)
3. 논리값(true/false)
if ~ else문
조건이 참인 경우 if블록이 실행, 그렇지 않은 경우 else 블록이 실행
if (조건) {
// ... 조건이 참인 경우 실행할 명령 ...
} else {
// ... 조건이 참이 아닌 경우 실행할 명령 ..
}
if ~ else if ~ else 문
여러개의 조건을 나열하여 그 중 가장 처음 만나는 참인 조건의 블록을 수행함.
그 외의 블록은 실행하지 않고 빠져 나간다.
if (1차 조건) {
...
} else if (2차 조건) {
...
} else if (3차 조건) {
...
} else {
...
}
switch문
하나의 변수값에 대한 여러가지 경우의 수를 나열하고 그 중 참인 경우를 실행함.
switch (변수) {
case '값1': // 경우의 수는 필요한 만큼 나열
...
break;
case '값2':
...
braek;
case '값n':
...
break;
default: // 일치하는 경우가 없을 경우 수행할 블록(생략가능)
...
Javascript 1일차 요점정리
'Javascript & JQuery&Ajax' 카테고리의 다른 글
| 객체 (0) | 2019.01.30 |
|---|---|
| 함수 정의의 또 다른 방법 (0) | 2019.01.30 |
| Javascript 구문 특성 (0) | 2019.01.30 |
| 이벤트 (0) | 2019.01.29 |
| 내장함수 (0) | 2019.01.29 |