반응형

# 자바스크립트 학습

# 주석(Comment)

  • JS(자바스크립트) 코드로 인식하지 않도록 하는 것

## 주석의 종류

  • 한 줄 주석
// 한 줄 주석
var book = "책";	// 여기부터 주석
  • 블록 주석
/* 블록 주석 */
/*
	var book = "책";
	var music = "음악";
*/
  • /** 코드*/ 형태
/** 코드 */ 형태
/**
* @function getName
*	1. 이 형태로 작성
*	@param {String} code. 코드
*/
function getName(code){};

- 개발자들 사이의 코딩 관례!!
- 이렇게 작성 시 프로그램 설명 문서를 자동으로 만들어 주는 툴이 있다.

# JS 스펙(Specification)이란?

  • 자바스크립트 문법을 작성한 문서로 ES3, ES5는 JS 스펙의 에디션(Edition)(흔히 버전이라고 하지만 JS에서는 에디션이라고 한다.)
  • 자바스크립트 개발자는 자바스크립트 스펙에 작성된 문법을 기준으로 코드를 작성하게 된다.
  • 자바스크립트 엔진은 작성된 코드를 자바스크립트 스펙의 문법에 맞추어 컴파일, 실행하게 된다. 
  • 자바스크립트가 프로그래밍 언어를 나타내는 반면에, 자바스크립트 엔진은 내부에서 컴파일 하고 실행하는 처리 측면을 의미한다.

# console.log()

  • 소괄호( ) 안에 작성 된 값을 브라우저의 콘솔 창에 출력한다.
var point = 123;
console.log(point);
log(point);
  • 문자, 숫자 등을 출력하며, 콤마로 구분하여 다수 작성 가능하다.
  • 파라미터 값 : 소괄호( ) 안에 작성 된 값을 의미한다.
  • 콘솔 로그는 JS(자바스크립트)에서 제공하는 것이 아닌 console API에서 제공한다.

## 콘솔 창 여는 방법

  • 브라우저마다 다르지만 보통 F12를 누르면 개발자 도구에서 확인할 수 있다.

# 정수, 실수

  • 정수 : 소수가 없는 숫자를 의미한다.
123, -123
  • 실수 : 소수를 가진 숫자
1.232, 1.0
  • 자바스크립트는 정수와 실수를 구분하지 않는다. (IEEE 754 표준 준수)
1, 1. , 1.0 을 모두 1.0으로 간주한다!!
(단, 표시는 1로 표시한다.)

log(1);
log(1.);
log(1.0);
log(1.00001);

## 숫자 처리

  • 자바스크립트는 정수와 실수를 구분하지 않는다.
  • 64비트(Bit : 비트는 0, 1만의 값을 갖는 것) 부동 소수점 처리
  • 부동 소수점 처리 : 123을 123.0 으로 처리하는 것 ( 정수를 실수로 간주하여 처리하는 것 )
  • ES6에서는 정수, 실수 구분하는 기능이 추가됨
log(.123);
=> 소수점 앞에 값을 작성하지 않으면 0.123으로 사용한다.

log(0.12 + 5);
=> 정수와 실수를 구분하는 언어(C++, JAVA 등)에서는 정수와 실수의 계산이 불 가능,
하지만 자바스크립트의 경우 정수와 실수를 구분하지 않아 계산 가능
=> 표시는 5로 했지만 5.0 이므로 5.12

# 상수, 진수

  • 상수 : 변경할 수 없는 값
  • 상수 변수 : 상수가 설정된 변수, 자바스크립트의 경우 변수의 값을 변경할 수 있으므로 상수 변수는 선언적 의미가 있다.

## 상수, 변수 표기 방법

  • 코딩 관례로 영문 대문자 사용!!
var ONE = 1;
이것은 상수로 사용한다는 시맨틱 선언(값을 바꾸지 말라는 선언)

ONE = 456;
log(ONE);
log(Number.MAX_VALUE);
=> 상수 ONE의 변수 변경 가능하지만, 바꾸지 말라는 시맨틱 선언.
=> Number.MAX_VALUE는 최댓값으로 자바스크립트 상수이며, 값을 변경할 경우 에러가 발생한다.(변경 불가능)
그 외에 MIN_VALUE 등이 있다.
  • 진수의 경우 10진수, 16진수, 8진수, 2진수 등이 존재
10 진수 : 123 

16진수
0xFF: 255
1번째 자리 : 숫자 0 작성
2번째 자리 : 영문자 x 작성
3번째 이후 : 0 ~ f 작성
대소문자 구분하지 않는다.

8진수
ES3에서 폐지, ES6에서 재 정의
1번째 자리 : 숫자 0 작성
2번째 자리 : 영문자 o 작성
3번째 자리 : 0 ~ 7 작성

2진수
0 또는 1을 가진 비트를 조합하여 값을 표현한다.
ES6에서 특별한 방법을 제공한다.(머신러딩, 딥러닝 등 연산을 많이하며 빠른처리를 요구할때 사용)
반응형
반응형

# 자바스크립트 학습

  • 학습 환경을 구성하기 위해 기존에 사용하던 에디터가 있으면 해당 에디터를 사용한다.
  • 사용하던 에디터가 없다면 Visual Studio Code (VS Code)를 다운받아서 사용한다.

# html, js 파일 생성하여 출력해보기

  • 아래와 같이 코드를 작성 후 hellow.html로 저장한다.
<!DOCTYPE html>
<html lang=ko>
<head>
	// meta charset="utf-8" : 해당 코드를 입력하지 않을 경우 간혹 한글이 깨지는 현상이 발생한다.
    <meta charset="utf-8">
    <title>자바스크립트</title>
    <script src="./hellow.js" defer></script>
</head>
<body>

</body>
</html>

 

  • hellow.html 파일과 동일한 위치에 hellow.js 파일을 생성한 후 아래와 같이 코드를 작성 후 저장한다.
var hello = "안녕하세요.";
document.body.innerText = hello;
  • hellow.html 파일을 클릭하여 실행 하거나 혹은 웹브라우저에 파일을 드래그하여 드롭하면 아래와 같이 출력이 된다.

 

# 문장 (Statement)

  • 문장이란 JS(자바스크립트) 실행 단위이다.
  • 세미클론(;)까지를 하나의 문장으로 처리한다.
var book = "책";
  • 자바스크립트의 경우 세미클론으로 문장을 구분하기 때문에 들여쓰기의 유무가 크게 관계 없으나, 일반적으로 가독성을 위해 들여쓰기를 사용한다.
  • 들여쓰기는 가독성을 위한 것으로 일반적으로 2칸, 4칸을 사용한다. 들여쓰기에 정해진 건 없고, 개발자의 취향이며 들여쓰기를 적용 할 경우 일관성을 갖고 적용하는 것이 바람직하다.

 

# 변수 (Variable)

  • 값을 저장하는 영역
  • 변수에 저장된 값을 재 사용하기 위해 변수를 사용한다.
  • 변수의 선언과 값 할당은 아래와 같이 진행한다.
  • 변수 선언 시 사용되는 var는 Variable의 약어.
// 변수의 선언
var 변수명;

// 변수의 선언과 값 할당하는 방법
var book = "책";

## 변수의 선언 방법

  • 콤마로 구분하여 다수 작성
var book = "책", point = "12345";
  • 줄을 바꾸어 작성
var book = "책", 
	point = 12345;
  • 변수 이름 앞에 콤마를 작성
var book = "책"
	, point = 12345;
  • 시맨틱(Semantic) : 의미를 부여하여 변수 이름을 작명하는 것으로, 변수 이름은 포괄적인것 보다 구체적인게 좋다.

## 변수에 값을 할당하는 방법

  • 나중에 할당한 값으로 바뀐다.
var point = 222, point = 345;

point = 555;

=> 
JS(자바스크립트)는 코드를 왼쪽에서 오른쪽으로 실행하며 처리한다.(세미클론이 나올떄 까지)
point라는 변수의 값이 222 > 345 > 555로 변경된다.
  • 같은 값을 할당한다.
var point = amount = 555;

=>
좋은 형태는 아니며,
point와 amount의 값은 555
반응형

+ Recent posts