구문: 스크립트는 컴퓨터가 단계별로 수행할 수 있는 일련의 명령이다.
이 중 각각의 명령이나 단계를 구문이라고 한다.
구문은 세미콜론으로 끝나야 한다.
//구문
var today = new Date();
var hourNow = today.getHours();
var greeting;
// { } 코드블록의 시작과 끝을 알려준다. 구문은 코드 블록 내에 작성한다.
if (hourNow > 18) {
greeting = 'Good evening!';
} else if (hourNow > 12) {
greeting = 'Good afternoon!';
} else if (hourNow > 0) {
greeting = 'Good morning!';
} else {
greeting = 'Welcome!';
}
document.write('<h3>' + greeting + '</h3>');
변수란
스크립트는 자신의 작업을 시작하는 동안 어떤 정보들을 임시로 저장해야 할 필요가 있다.
이 때 스크립트가 데이터를 저장해둘 수 있는 어떤 것을 변수라고 한다.
변수선언하기
변수를 사용하기 위해서는 먼저 변수를 사용하고 싶다고 알려야한다.
즉, 변수를 생성하고 이름을 부여해야 한다.
var num ;
var 선언 키워드
num 변수명
변수에 값 대입하기
일단 변수를 만들었으면 어떤 정보를 저장하고 싶은지를 지정해야 한다.
num = 3;
= 은 대입 연산자다. 같다가 아니다.
데이터 타입
자바스크립트는 숫자, 문자열, 그리고 true 혹은 false 중 하나의 값을 갖는 불리언이라고 알려진 형식을 구별한다. 이 외에도 배열, 객체, undefined 가 있다.
변수에 숫자 저장하기
// 세계의 변수를 선언한다.
var price;
var quantity;
var total;
// 변수에 값을 대입한다.
price = 5;
quantity = 14;
// 전체 가격을 계산해서 저장한다.
total = price * quantity;
//id 가 cost 인 요소 값을 구하고 textContent을 이용해서 값을 대입시켜준다.
var el = document.getElementById('cost');
el.textContent = '$' + total;
변수에 문자열 저장하기
var username;
var message;
username = 'Molly';
message = 'See our upcoming range';
var elName = document.getElementById('name');
elName.textContent = username;
var elNote = document.getElementById('note');
elNote.textContent = message;
문자열 내에서 따옴표 사용하기
//변수 선언
var title;
var message;
// 변수에 값 대입
title = "Molly's Special Offers";
message = '<a href=\"sale.html\">25% off!</a>';
// 요소값 변수에 대입
var elTitle = document.getElementById('title');
// id 가 title 인 요소에 title 값 대입
elTitle.textContent = title;
var elNote = document.getElementById('note');
elNote.innerHTML = message;
변수에 불리언 값 저장하기
//변수 선언
var inStock;
var shipping;
inStock = true;
shipping = false;
// id로 요소값 구하기
var elStock = document.getElementById('stock');
// id로 구한 요소값의 class 이름 대입
elStock.className = inStock;
// id로 요소값 구하기
var elShip = document.getElementById('shipping');
// id로 구한 요소값의 class 이름 대입
elShip.className = shipping;
배열
배열은 특별한 종류의 변수이다.
이 변수는 하나의 값이 아니라 값의 목록을 저장한다.
목록이나 서로 관련된 일련의 값을 다루고자 한다면 배열의 사용을 고려해보아야 한다.
얼마나 많은 목록을 처리해야 할지 알 수 없을 때 유용하다.
배열만들기
1.
var colors;
colors = ['white', 'black', 'custom'];
// 배열로부터 구한 첫 번째 아이템 값을 대입 시킨다
var el = document.getElementById('colors');
el.textContent = colors[0];
2.
var colors = new Array('white',
'black',
'custom');
var el = document.getElementById('colors');
el.textContent = colors[0];
배열 응용)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>문자</title>
<script>
var fruits = new Array(); //배열선언
fruits[0] = "Apple"; //배열참조변수 [인덱스]
fruits[1] = "banana";
fruits[2] = "orange";
for(var f in fruits){
document.write(fruits[f]+"<br>");
}
var sports = ["scoccer","baseball","pingpog"]
for (var f in sports){
document.write(sports[f]+"<br>")
}
var fruits1 = new Array(); //배열선언
fruits1["a"] = "Apple"; //배열참조변수 [인덱스]
fruits1["b"] = "banana";
fruits1["c"] = "orange";
for(var f in fruits1){
document.write(fruits1[f]+"<br>");
}
document.write(fruits1["a"]+"<br>")
document.write(fruits1["b"]+"<br>")
document.write(fruits1["c"]+"<br>")
</script>
</head>
<body>
</body>
</html>
배열에 값을 대입할 때는 대괄호 안에 쉼표로 구분하여 값을 나열하면 된다.
배열의 값은 반드시 같은 데이터 타입일 필요는 없으므로 문자열과 숫자, 불리언값 등을 하나의 배열에 담을 수도 있다.
이와 같이 배열을 생성하는 방법을 배열식 이라고 한다.
배열 생성자를 이용하여 배열을 만들 수도 있다.
new 키워드와 Array() 생성자를 사용해서 만든다.
이 경우에는 대괄호를 사용하지 않는다.
items(); 라는 메서드를 호출하여 배열내의 데이터를 조회 할 수도 있다.
(괄호 안에 아이템의 인덱스를 지정하면 된다.)
배열에 저장된 값들
배열에 저장된 값에는 각기 다른 번호가 할당되며,
이 번호를 통해 원하는 값에 접근할 수 있다.
중요한 것은 목록의 첫 번째 값부터 0 이 할당된다는 점이다.
배열 내의 값에 접근하여 수정하기
// 배열을 생성한다.
var colors = ['white', 'black', 'custom'];
// 배열의 세 번째 아이템을 수정한다.
colors[2] = 'beige';
// id 특성값이 colors 인 요소를 찾는다.
var el = document.getElementById('colors');
// 배열의 세 번째 아이템의 값을 출력한다.
el.textContent = colors[2];
배열 값에 번호 매기기
배열의 각 아이템에는 자동적으로 인덱스라고 부르는 번호가 매겨진다. 이 번호를 이용하여 배열내의 특정 아이템에 접근이 가능하다.
var colors;
colors = [‘white’,‘black’,‘custom’];
인덱스 0, 값:white
인덱스 1, 값:black
인덱스 2, 값:custom
배열 아이템에 접근하기
배열의 세 번 째 아이템을 가져오려면 배열 이름 뒤에 대괄호를 이용하여 해당 아이템의 인덱스 값을 지정하면 된다.
아래는 itemThree 라는 이름의 변수를 선언하고 colors 배열의 세 번째 값을 가져와 할당하는 예제이다.
var itemThree;
itemThree = colors[2];
배열에 저장된 아이템의 개수
각각의 배열은 length라는 이름의 속성을 가지고 있다. 이 속성은 배열에 저장된 아이템의 개수를 알려준다.
아래 예제는 numColors 라는 변수를 선언하고 배열의 아이템 개수를 그 값으로 할당하는 방법을 보여준다.
배열의 이름 다음에 마침표를 붙인 후 length 라는 키워드를 순서대로 작성하면 된다.
var numColors;
numColors = colors.length;
표현식
표현식은 하나의 값으로 평가 될 수 있는 문장이다.
자바스크립트에는 크게 두가지 종류의 표현식이 존재한다.
1.변수에 값을 대입하는 표현식
2.하나의 값을 리턴하기 위해 두 개 혹은 그 이상의 값을 사용하는 표현식
연산자
표현식은 연산자에 의존적이다.
연산자는 개발자가 하나 혹은 그 이상의 값을 하나의 값으로 만들 때 사용한다.
산술연산자
관계연산자
논리 연산자
정리
-스크립트는 일련의 구문으로 구성된다. 각각의 구문은 요리 레시피를 구성하는 각각의 단계와 같다.
-스크립트는 매우 간결한 명령을 포함한다. 예를 들어, 값을 사용하여 어떤 계산을 수행하기에 앞서 이 값을 어딘가에 저장하라고 명령할 수 있다.
-변수는 스크립트에서 사용할 정보를 임시로 저장하기 위해 사용한다.
-배열은 하나 혹은 그 이상의 연관된 정보를 저장할 수 있는 특별한 형태의 변수 이다.
-자바스크립트는 숫자와 문자 그리고 불리언 값을 구분한다.
-표현식은 하나의 값으로 평가 된다.
-표현식은 값을 계산하기 위해 연산자를 사용한다.
'매일코딩 > 자바스크립트 개념' 카테고리의 다른 글
| [자바스크립트 기초]DOM 문서객체모델의 이해 2 (2) | 2017.02.25 |
|---|---|
| [자바스크립트 기초]DOM 문서객체모델의 이해1 (4) | 2017.02.24 |
| [자바스크립트 기초]함수 메서드 객체 (2) | 2017.02.23 |
| [자바스크립트 기초] 스크립트 왕기초 개념 2 (2) | 2017.02.17 |
| [자바스크립트 기초] 스크립트 왕기초 개념 1 (2) | 2017.02.16 |
댓글