본문 바로가기

웹프로그래밍

자바스크립트 기본문법

[자바스크립트 데이터 (주로 웹브라우저) 표시 방법]

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

 

출처 : https://jinbroing.tistory.com/48

'웹프로그래밍' 카테고리의 다른 글

CSS / 구글 웹폰트 사용하는 방법  (0) 2020.06.11
React란 무엇인가?  (0) 2020.06.09
자주 사용하는 html 태그들  (0) 2020.06.03
부트스트랩 (1)  (0) 2020.04.01