티스토리 뷰
JavaScript 구문
프로그램(스크립트)은 컴퓨터(Client-side Javascript의 경우, 엄밀히 말하면 웹 브라우저)에 의해 단계별로 수행될 명령들의 집합이다.
각각의 명령을 statement(구문)이라 하며 statement가 실행되면 무슨 일인가가 일어나게 된다. 구문은 값(Values), 연산자(Operators), 표현식(Expressions), 키워드(Keywords), 주석(Comments)으로 구성되며 세미콜론(;)으로 끝나야 한다.
var robot = '태권 V';
var body = document.querySelector('body');표현식(Expression)
표현식(Expression)은 값, 변수, 연산자의 조합이며 이 조합은 값을 연산한다.
즉, 표현식은 하나의 값으로 평가(연산, 계산)될 수 있는 문장이다.
( (10 - 2) * x ) % y;
'오늘 하루도' + mood + '행복하세요.';변수(Variables)
프로그래밍 언어에서 변수는 데이터(자료)를 저장(할당), 참조하기 위해 사용된다. 한 번 쓰고 버리는 값이 아닌 값(value)을 유지(기억)할 필요가 있는 경우에 변수를 사용한다. 변수를 선언할 때 var 키워드가 사용된다. 할당연산자(=)는 변수에 값을 할당하기 위해 사용된다.
아래의 예에서는 our_plan 이름의 변수를 선언한 후, 변수 our_plan에 문자 값 '36계 줄행랑'을 할당했다.
1. 변수 선언
선언만 하는 경우 undefined 원시 데이터 유형 값으로 변수에 할당(복제)된다.
// 변수 선언 시, 기본적으로 undefined 값 할당
var my_name;
// var 키워드를 한 번만 사용하는 방법
var tisue, remote_control, cup, mike;2. 선언된 변수에 값 할당
var current_state; // 변수 선언과 초기화
current_state = 200; // 선언된 변수에 숫자 값을 할당(대입)3. 선언과 동시에 값 할당 (대입, =)
var our_plan = '36계 줄행랑'; // 문자열
var current_state = 200; // 숫자
var is_finished = false; // 불리언(논리)
var container_el = null; // Null 비어 있다// 선언과 동시에 값을 할당(대입, =)하는 경우
var html = document.documentElement; // <html> 문서 객체 {참조형 데이터, 값 참조}
var body = document.body; // Legacy 방법(웹의 초창기에 사용되던... 하지만 지금도 빈번하게 사용되는 유물)4. var 키워드를 한 번만 사용하는 싱글톤(Singleton) 패턴
var current_state = 200, // 숫자
is_finished = false, // 불리언
container_el = null; // 비어 있다// ※ var 키워드를 한 번만 사용할 경우
var html = document.documentElement,
body = document.body;
// 아래 코드와 위 코드는 역할은 동일하나, 사용하는 방법의 차이가 있을 뿐.
var html, body;
html = document.documentElement;
body = document.body;
See the Pen PpmQge by Kim Youngsun (@grapelove79) on CodePen.
값(Value)
JavaScript는 리터럴(literal)을 통해 값을 사용한다. 리터럴이란? 값을 표현하는 방식이다. 그리고 값은 대부분 변수에 저장된다.
9.01 // 숫자 값 (Literal: Number Value)
'보온/재가열' // 문자 값 (Literal: String Value)
true // 논리 값 (Literal: Boolean Value)
function(){} // 함수 값 (Literal: Function Value)
[] // 배열 값 (Literal: Array Value)
{} // 객체 값 (Literal: Object Value)데이터 값 ‘복사’와 ‘참조’
변수(Variable)에 값이 할당 : 값의 유형(Data Type)에 따라 복사 또는 참조(Reference)된다.
// 복사의 예)
var first = 'data';
var second;
second = first;
second === first; //true ( '==='은 등호. Strict Equal `완벽 일치 비교`)단, 여기서 first와 second의 데이터는 같으나 메모리 저장소는 다름.
따라서 한 변수에만 다른 값을 할당하면 둘은 다른 값을 가지게 된다.
first = 'another data';
second === first; //false1. 값 ‘복사’
원시 데이터(Primitive Data Type) 유형 5가지
- undefined (정의되지 않았다, 부정)
- null (비어있다, 부정)
- Number (숫자형 데이터)
- String (문자형 데이터)
- Boolean (논리형 데이터)
var study_name; // undefined
var no_exist_el = document.getElementById('no-ex'); // null
var pre_count = -12; // Number
var course_name = 'JJ 첫걸음 CAMP'; // String
var is_continue = true; // Boolean2.값 ‘참조’
참조형 데이터(Reference Data Type) 유형 [객체(Object)]
참조 데이터 유형 3가지
- 객체(Plain Object, {})
- 함수(Function Object, function(){})
- 배열(Array Object, [])
var a = 10;
var b = a;
var c = {x: a};
var d = c; // c에 참조된 객체를 d도 참조함.
console.log('a:',a);
console.log('b:',b);
console.log('c:',c);
console.log('d:',d);
a = 100;
b = 200;
c.x = 300;
console.log('a:',a);
console.log('b:',b);
console.log('c.x:',c.x);
console.log('d.x:',d.x); // c에 참조된 객체를 d도 참조하고 있기에 값이 변경됨.문서 객체 제어
HTML 문서에서 ‘my-parent’라는 id 이름이 ‘my-parent’와 일치하는 문서 객체를 변수 my_parent에 할당한다.
※ 자바스크립트에서는 변수명에 -을 사용 할 수 없다. _를 사용하는 것에 주의.
var my_parent = document.getElementById('my-parent');변수에 할당된 값(문서 객체)을 사용해서 자바스크립트에서 인라인 스타일 제어할 수 있다.
my_parent.style.border = '1px solid #7e5dc4';
child_1.style.color = '#7e5dc4';
child_2.style.background = '#7e5dc4';
child_2.style.color = '#fff';연산자 (Operator)
연산자(Operators)는 하나 혹은 그 이상의 값을 하나의 값으로 만들 때 사용한다.
// 대입 연산자
var listen_to_music = '음악을 듣다.';
// 산술 연산자
var multiply_numbers = 9 * 3;
// 문자열 연산자
var message = '저항이 있다는 것은 ' + '세상을 바꾸고 있다는 증거지.';
// 비교 연산자
var greater_than = multiply_numbers > 21; // true
// 논리 연산자
var boo = (11 < -1) || (0 > 1); // false키워드 (keyword)
키워드(keyword)는 수행되어져할 동작을 규정한 것이다. 예를 들어 var 키워드는 브라우저에게 새로운 변수를 생성할 것을 지시한다.
키워드 / 예약어
| abstract | arguments | boolean | break | byte |
| case | catch | char | class | const |
| continue | debugger | default | delete | do |
| double | else | enum | eval | export |
| extends | false | final | finally | float |
| for | function | goto | if | implements |
| import | in | instanceof | int | interface |
| let | long | native | new | null |
| package | private | protected | public | return |
| short | static | super | switch | synchronized |
| this | throw | throws | transient | true |
| try | typeof | var | void | volatile |
| while | with | yield |
주석 (Comment)
주석(Comment)은 작성된 코드의 의미를 설명하기 위해 사용한다. 코드는 읽기(이해하기) 쉬워야 한다(가독성이 좋아야 한다)
여러분이 작성한 코드를 다른 누군가가 읽는다면 “아니, 이게 뭐하는 코드야?”라고 생각하는 순간이 있기 마련이다. 여러분이 해야 하는 일은 바로 그런 부분에 주석을 다는 것이다. (읽기 좋은 코드가 좋은 코드이다)
한줄 주석은 // 다음에 작성하며 여러 줄 주석은 /*과 */의 사이에 작성한다. 주석은 해석기가 무시하며 실행되지 않는다.
/*
* 로봇 시대
* 제목/슬로건 설정
*/
// 로봇 제목 설정:
document.getElementById("robot-heading").innerHTML = '로봇 시대를 열다.';
// 로봇 슬로건 설정:
document.getElementById("robot-slogan").innerHTML = "성큼 다가온 로봇 시대! 공존 방식은?";'Client > JavaScript' 카테고리의 다른 글
| ES6 사용 HTML 파일에서 include 하는 방법 (0) | 2022.11.24 |
|---|---|
| Fetch 사용하기 (0) | 2022.11.23 |
| Data Type (자료형) (0) | 2017.03.12 |
| HTML + JavaScript 작성 방법 (0) | 2017.03.08 |
| JAVASCRIPT에 대해 (0) | 2017.03.08 |