배운 것

사용해 본 코드

• alert("text")
• console.log("text")
• prompt("나이를 입력하세요","27")
  디폴트 값으로 27을 넣어둘 수 있음.
• var name = prompt("text")
  document.write(name + "text")

기본 용어

• 표현식: 자바 스크립트에서 값을 만들어내는 간단한 코드

• 문장 : 하나 이상의 표현식이 모여서 구성, 문장의 끝에는 세미클론(;) 또는 줄바꿈을 넣어서 끝났음을 알려야 함

• 프로그램: 줄바꿈으로 문장을 구분해 코드를 작성

• 키워드 : 자바 스크립트가 처음 만들어 질 때 정해 놓은 특별한 의미가 있는 단어
  

• 식별자: 프로그래밍 언어에서 이름을 붙일 때 사용하는 단어. 주로 변수명이나 함수명 등으로 사용

  • 키워드를 사용 못함
  • 숫자로 시작 불가
  • 특수 문자는 _와 $ 만 허용
  • 공백 문자를 포함할 수 없음

  식별자의 일반적 관례

  • 클래스의 이름은 항상 대문자로 시작
  • 변수와 인스턴스, 함수, 메소드의 이름은 항상 소문자로 시작
  • 여러 단어로 이루어진 식별자는 각 단어의 첫 글자를 대문자

  식별자 종류
  

• 주석: // 로 한줄을 표현, /**/로 여러줄 표현

• 출력 : JS는 다른 프로그래밍 언어와 비교해서 출력 방법이 많고 복잡함

  • 간단한 표현식 결과 학인하기
    F12 로 개발자 모드 들어가기
  • 경고창에 출력하기
    • 개발자 모드에서 alert() 함수 사용
  • 콘솔에 출력하기
    - console.log() 메소드 사용
    

자바 스크립트 스타일 가이드

왜 코딩 규칙이 필요할까?

• JS는 다름 프로그래밍 언어에 비해 데이터 유형이 유연 = 오류발생이 잦다.
• 오픈 소스에 기여하거나 공유 = 깔끔한 소스가 중요
• 팀 프로젝트 진행 = 통일된 코딩 규칙 (제일 중요)
• 코딩 규칙에 따라 작성된 웹 사이트는 유지 보수가 수월하고 그만큼 비용이 줄어든다.

1. 코드를 보기 좋게 들여 쓴다

• tap 키나 스페이스 바를 눌러 2칸이나 4칸 들여씀
• 최근에는 공백 2칸 들여쓰기를 많이 사용함

2. 세미 클론으로 문장을 구분한다.

• 세미클론을 붙일 것을 권장함
  소스는 한 줄에 한 문장만 작성하는 것이 좋다.

3. 공백을 넣어 읽기 쉽게 작성한다.
   식별자나 연산자, 값 사이에 공백을 넣어 읽기 쉽게 작성한다.
4. 코드를 설명하는 주석을 작성한다.

• 한 줄 주석 : 슬래시(/) 2개 바로 뒤에 작성
• 여러 줄 주석 : /* */
• 주석 사이에 또 다른 주석 넣을 수 없다

5. 식별자는 정해진 규칙을 지켜 작성한다.

• 첫 글자는 반드시 _ 나 $, 영문자로 시작해야 한다.
• 두 단어 이상이 하나의 식별자를 만들 때 단어 사이에 공백을 들 수 없다.
• 예약어는 식별자로 사용할 수 없다.

6. 중괄호의 위치 (사람 마다 다름)

for(){
const element =array[i]
}
<또는>
for()
{
const element =array[i]
}

자료(data) : 프로그래밍에서 프로그램이 처리할 수 있는 모든 것

자료형 data type

컴퓨터가 처리할 수 있는 자료의 형태
기본형: 숫자형, 문자열, 논리형(T,F)
복합형: 배열(하나의 변수에 여러개의 값을 저장), 객체(함수와 속성을 함꼐 포함)
특수형: undefined, null

- 숫자형 number

정수, 실수

JS는 실수를 정밀하게 계산하지 못함, 반올림이나 버림이 발생하게 됨

+(더하기) , -(빼기) , *(곱) , /(나누기), %(나머지)

- 문자열 string

작은 따옴표, 큰 따옴표 로 묶은 것
콘솔 출력이 큰따옴표로 감싸져 있으면 문자열을 의미

• 특수문자

  • 이스케이프(₩) : 따옴표를 문자 그대로 사용해야 할 때
    ₩n: 줄바꿈, ₩t:탭, ₩₩:역슬래시 그 자체를 의미

• 문자열 연산자

  • 숫자 자료와 마찬가지로 문자열도 기홀르 사용해서 연산 처리

    '가나다' + '라마' + '바사하'
    "가나다마바사하"

• 문자 선택 연산자

  • 문자열 내부의 문자 하나를 선택

    '안녕하세요'[0]
    "안"
    '안녕하세요'[1]
    "녕"

• 길이 구하기

  "안녕하세요".length
  5
  "자바스크립트".length
  6
  "".length (빈 문자열도 문자열이다.)
  0

• Uncaught SyntaxError : Unexpected identifier(구문 오류)

  • 시결자가 예상하지 못한 위치에서 등장했다는 오류
  • 예를 들어 이스케이프 문자를 사용하지 않고 한 종류의 따옴표만 사용하면 다음과 같이 오류가 발생

    'This is 'string' '

- 논리형 boolean

• True False의 값을 표현함,
• 불 만들기
  • 비교 연산자
    
• 표현식

<script>
 if(273<52){
	 alert('273은 52보다 작습니다.')	}
 if(273>52){
	 alert('273은 52보다 큽니다.')	}
<script>

• 부정 연산자
  • 논리 부정 연산자는 ~ 기호를 사용하며 참->거짓, 거짓->참 으로 바꿈
• 논리합/논리곱 연산자
  • && : 논리곱
  • || : 논리합

undefined

• 자료형이 정의 되지 않았다.
• 변수 선언만 하고 값은 할당되지 않은 것

null

• 데이터 값이 유효하지 않다.
• 변수에 할당된 값이 유효하지 않음

배열

하나의 변수에 여러 값을 저장 할 수 있는 복합 유형

빈 배열을 선언할 수 있음

JS의 데이터 유형 자동 변환

JS의 유연함은 양날의 검이다. = 데이터 유형이 중간에 바뀔 수 있다.
입력받은 값은 문자열 이지만, 사칙 연산에 사용된 문자열은 자동으로 숫자형으로 변화되어 계산

내가 무엇을 잘못 입력했는지 알아내는 방법과 찾는 방법

1. 현재 상태에서 코드를 실행해보면 아무 것도 출력되지 않음
2. 크롬에서 코드를 실행한 후 마우스 오른쪽 버튼을 클릭해 [검사]를 선택
3. 개발자 도구 오른쪽 위에 × 표시가 되어 있는 붉은색 원 X (자바스크립트 코드 등에 오류가 발생했을 때 출력되 는 아이콘) 아이콘을 클릭하거나 개발자 도구의 [Console] 탭을 클릭
4. ‘Uncaught ReferenceError: alrt is not defined’라는 오류 출력, 어떤 오류인지 확인. test.html : 6은 오류가 발생한 위 치. [test.html : 6]을 클릭하면 오류가 발생한 위치로 이동
5. 붉은색 밑줄이 표시되어 있어 쉽게 오류를 찾을 수 있음

처음 자바스크립트를 공부할 때 자주 접하는 오류
• ReferenceError: 예외 처리
• SyntaxError: 구문 오류

어려운 점

기본 개념적인 내용이라 없었음

소감

자바스크립트를 한달 2달만에 다시 배우게 되서 걱정됐지만 괜찮은것 같다.