[자바스크립트 비기너] 1. 기본 문법

Speedwell🍀·2021년 12월 17일
0
post-thumbnail

HTML 파일 작성

  • 확장자 : html

  • 인코딩 : utf-8


HTML 파일에 JS 파일 작성 방법

<head>
     <script scr="hello.js" defer></script>
</head>
<body>
     <script src="hello.js" defer></script>
</body>

1) <head> or <body><script>에 js 파일 작성

2) defer 속성 작성

rendering 하다가 hello.js 만나면 서버에서 hello.js 가져와서 코드 실행하는데 그 코드에서 body의 element에 접근하면 아직 body를 렌더링하지 않았기 때문에 에러 발생. 하지만 defer 쓰면 body까지 rendering한 후에 hello.js 실행하므로 에러 발생하지 않음

3) HTML과 JS 분리



Statement

  • JS 코드 실행 단위

  • 세미콜론(;)까지 하나의 문장

  • 문장 시작 위치는 제약 없지만 일반적으로 2칸, 4칸 들여쓰기


Variables

: 값을 저장하는 영억

"시맨틱(Semantic)" : 의미를 부여하여 변수 이름 작명

  • 변수 사용 목적 : 변수에 저장된 값의 재사용

  • 변수 사용 방법 : var을 작성하고 변수 이름 작성. 값을 저장할 영역만 선언한 것

  • 값을 변수에 할당하는 방법 : = 오른쪽의 값을 왼쪽의 변수에 할당

  • 변수 선언 방법 : 콤마로 구분하여 다수 작성

    1. 콤마 다음에 var을 작성하지 않음

    2. 콤마와 변수 이름 사이에 일반적으로 한 칸 띄움

    3. 세미콜론 앞까지 콤마 사용 가능

  • 변수에 값 할당 방법 : 나중에 할당한 값으로 바뀜, 같은 값 할당 가능(e.g. var point=amount=123;)


주석

1) 한 줄 주석 // (주석의 확장성을 위해 코드 윗줄에 작성)

2) 블록 주석 /* */

3) /* 코드 / 형태 (개발자들 사이의 코딩 관례 - 이렇게 작성하면 프로그램 설명 문서를 자동으로 만들어 주는 툴 존재)

JS 스펙(Specification)이란?

  • JS 문법을 작성한 문서

  • ES3, ES5는 JS 스펙의 에디션


console.log()

  • 소괄호() 안에 작성된 값을 브라우저 콘솔 창에 출력

  • 문자, 숫자 등을 출력

  • 콤마로 구분하여 다수 작성 가능

  • 소괄호 안에 작성한 값을 강좌에서는 파라미터 값이라고 부름

  • JS에서 제공하는 것은 아님 console api에서 제공


브라우저 콘솔 창 열기

  1. 브라우저 상단 오른쪽 끝의 "Chrome 맞춤설정 및 제어" 클릭

  2. 도구 더보기

  3. 개발자 도구(D) 클릭

  • 개발자 도구 단축 키 : Ctrl+Shift+I
  1. 도구 창 메뉴에서 Console 클릭

정수, 실수, 숫자 처리

JS는 정수, 실수 구분하지 않음

  • 1, 1., 1.0 모두 1.0으로 간주

  • 단, 표시는 모두 1로 함

  • 64bit 부동 소수점 처리(123을 123.0으로 처리)

  • IEEE 754 표준

  • ES6에 정수, 실수 구분 추가


상수

  • 변경할 수 없는 값

  • 상수 변수 : 상수가 설정된 변수. JS는 변수의 값을 변경할 수 있으므로 상수 변수는 선언적 의미

  • 상수 변수 표기 방법

    1. 코딩 관례로 영문 대문자 사용 (var ONE = 1;)

    2. 상수로 사용한다는 시맨틱 선언

  • JS가 제공하는 상수값은 변경 불가(MAX_VALUE, MIN_VALUE 등)


진수

10진수, 16진수(영문자 대소문자 구분 안함), 8진수(ES3에서 폐지, ES6 재정의), 2진수(ES6에서 특별한 방법 제공)


데이터 타입(자료형)

  • 데이터의 사전적 의미는 자료

  • 데이터 타입 형태 : 숫자 타입, 문자 타입

  • JS는 데이터를 기준으로 타입을 결정

  • 타입을 먼저 선언하고 타입에 맞는 데이터를 할당하지 않음


typeof 연산자

  • 데이터(값) 타입 변환

  • typeof value에 데이터를 작성



데이터 타입 분류(언어 타입과 스펙 타입)

언어 타입

  • JS 프로그램에서 사용할 수 있는 타입

  • Undefined, Null, Boolean, String, Number, Object


스펙(문서) 타입

  • 언어 알고리즘을 위한 타입으로 JS 프로그램에서 사용 불가

  • Reference, List, Completion, Property Descriptor, Data Block, Lexical Environment, Lexical Record 등



Number 타입

  • 부호를 가진 값

  • 숫자 값 범위 : 18,437,736,874, 454, 810, 627(2^64 - 2^53 + 3)

  • Number 타입의 특수한 3개 값

    1. NaN : Not-a-Number

    2. Infinity : 양의 무한대

    3. -Infinity : 음의 무한대


String 타입

  • 값을 "" or '' 사이에 작성

  • 최대 문자수 : 2^53-1

  • 따옴표에 숫자를 작성하면 문자 타입


Undefined 타입

  • 값 : undefined(소문자)

  • 변수의 디폴트 값

  • 변수를 선언만 한 것으로 undefined가 초기값으로 설정

  • 변수에 값을 할당하지 않은 것을 나타내는 시맨틱

  • 변수에 undefined 할당 가능


Null 타입

  • 값 : null(소문자)


null과 undefined 차이

  • undefined는 단지 변수만 선언

  • null을 할당해야 값이 null이 됨

  • 의도적으로 값을 할당한 것으로 코드를 수행한 것이 됨


Boolean 타입

  • 값 : true/false


Object 타입

  • {name : value} 형태

  • 프로퍼티(Property) : name과 value 하나를 지칭

  • Object는 property 집합

0개의 댓글