[자바스크립트 데이터 (주로 웹브라우저) 표시 방법]
1) window.alert() : alert box를 가지고 데이터를 보여줌
2) document.write() : html 문서의 내용 변경하는 방식(기존 문서내용 없애고, 데이터만 표시)으로 데이터를 보여줌
3) DOM객체.innerHTML : html 문서의 특정 태그에 내용을 추가하는 방식(태그 추가 가능)으로 데이터를 보여줌
=> 기존 내용 대체, DOM API를 통해서 html 태그를 DOM 객체화하는 방법 참조(1번 포스팅)
4) console.log() : 웹브라우저의 콘솔(개발자도구 이용)로 데이터를 보여줌
[자바스크립트 구문] : 웹브라우저에 명령을 하기위한 방식, 문법
1) 구성
- 변수명 : 연산에 의해 변할 수 있는 값을 넣는 공간, 사용자가 이름을 정의함
- 값 : 실제 값, 다양한 형태(자료형)가 있음. 기본 자료형 - Boolean, null, undefined, Number, String, Symbol / 객체 - Object
- 리터럴 표기법
1) 변수(기본, 객체 상관x)에 리터럴 표기법(값을 직접 변수에 넣는 것, 생성자 x)을 권장함
2) 가독성과 인터프리터(웹브라우저) 코드 해석 속도 향상(코드가 짧음)
- 연산자 : 하나 혹은 그 이상의 값을 하나의 값으로 만들 때 사용, +, -, /, *, >, <, >=, ==, &&, || 등이 있음
- 표현식 : 변수(명), 연산자, 값의 조합이며, 조합으로 인해 어떠한 연산을 함
- 키워드
1) var와 같이 수행되어져야할 동작을 규정하는 것
2) var는 새로운 변수를 생성할 것을 웹브라우져에 지시함, 다양한 것이 있지만 외우지않고 배우면서 이런게 있구나 느낄 것
- 주석 : 명령과는 상관없지만 개발 시에 숙지해야할 것, 코워커와의 의사소통이 필요한 점들을 쓸 수 있는 공간을 만듬
- 세미콜론(;) : 코드의 끝을 알리는 표시, 하나의 연산(명령)을 끝낼 때에는 세미콜론을 붙임
2) 예시
|
1
2
3
4
5
6
7
8
9
10
11
12
|
var dog= {
// 자바스크립트는 변수에 값을 넣을 때 리터럴로 표기함
name: "happy",
age: 3,
getName: function() {
return this.name;
}
};
document.getElementById("demo").innerHTML = x; // x값이 표시됨(DOM API 개념 및 사용방법 참조)
/* 긴 주석입니다. */ , // 짧은 주석입니다.
|
cs |
3) 함수(function)
- 구문은 code block {...} 으로 그룹화 할 수 있음. 이를 함수라 함.
- 함수는 어떤 특정 결과를 위한 동작들을 하나로 묶기위해 사용하는 방법, 반복 사용 시 편리함
- 파라미터(인자)
1) 함수에 필요한 값(연산에 필요한 값)들을 함수를 호출할 때 넘겨줄 수 있음, 이를 파라미터라 함
2) 파라미터가 필요할 시 함수를 만들 때 함수명 옆에 괄호 ( (...) )를 사용하여 필요한 수 만큼 파라미터명을 정함
4) 예시 : 함수명은 사용자정의임
|
1
2
3
|
function myFunction(x, y) {
return x+y;
}
|
cs |
[참고자료]
1) [Poiemaweb] Javascript Syntax Basics : http://poiemaweb.com/js-syntax-basics
2) [Frontend Development - Different] 자바스크립트 패턴 - 리터럴과 생성자 : https://goo.gl/wxpdeL
3) [kazikai's 개발자블로그] 객체선언에 리터럴 표현을 선호하는 이유 : http://blog.kazikai.net/?p=45
객체선언에 Literal ( {} ) 표현을 선호하는 이유 : new Object vs {}
자바스크립트 개발을 하다가 일정 수준 이상이 되면, 코드 가독성 및 더 좋은 패턴에 대해 연구 하게 되고, 널리 쓰이는 패턴을 내 코드에 사용하곤 한다. 물론 책으로도 대부분 접할수가 있으며
blog.kazikai.net
'웹프로그래밍' 카테고리의 다른 글
| CSS / 구글 웹폰트 사용하는 방법 (0) | 2020.06.11 |
|---|---|
| React란 무엇인가? (0) | 2020.06.09 |
| 자주 사용하는 html 태그들 (0) | 2020.06.03 |
| 부트스트랩 (1) (0) | 2020.04.01 |
