JavaScript_자바스크립트 개요, 기본 개념

1. 인터프리터와 컴파일 언어

인터프리터

 프로그래머가 작성한 코드를 다른 형태로 변환할 필요가 없이 바로 읽어서 실행하는 프로그램 언어
 코드를 위에서 아래로 실행하고 코드 구동결과 즉시 반환

 =>JavaScript, Python, Ruby 등

 

컴파일 언어

 프로그래머가 작성한 코드를 모두 기계어로 변환한 후 기계어 코드를 실행하는 프로그램 언어

 => Java, C,C++ 등

2. 서버사이드와 클라이언트 사이드코드

클라이언트 사이드코드

 웹 페이지의 요청은 대부분 웹 브라우저(웹 클라이언트)가 한다. 사용자의 컴퓨터에서 동작하는 코드

서버사이드코드 

 웹 클라이언트로부터 요청을 받아 처리하고 처리 결과를 브라우저에 송신, 응답 / 서버에서 동작하는 코드

3. SCRIPT

script :  스크립트 요소는 데이터와 실행 가능한 코드를 문서에 포함할 때 사용

 

defer :특성을 지정한 스크립트는 순서를 유지한 채로 가져오며 모든 콘텐츠를 다 불러온 이후에 실행

 

* script src = "js파일 주소 "    <=>      defer : 외부 스크립트와 html 을 동시에 불러온다.

 

async :특성을 지정한 스크립트는 다운로드가 끝나는 즉시 실행 -> . 실행은 현재 페이지 렌더링을 중단하며, 실행 순서는 보장 X    (의존성이 없는 스크립트를 불러온 즉시 실행할 때 사용)

 

 

 

인라인 JavaScript 처리기 =>  비추천

 html <button onclick = "함수()">

addEventListner 사용하기 => 추천

const buttons = document.querySelectorAll('button');

for (const button of buttons) {
  button.addEventListener('click', createParagraph);
}

4. 변수, 상수, 객체 개념

• 변수는 기본적으로 값(숫자,텍스트 문자열)의 컨테이너이다
• 상수 또한 변수처럼 이름을 붙인 값이지만, 변수와 달리 상수의 값은 바꿀 수 없다.
• 객체는 실제 사물을 모델링하는 코드 구조
   ex. var dog = {name : 'Lili', age: 5};      /  console : dog.name    => Lili;

5. 배열

하나의 변수명 아래에 데이터 아이템의 리스트를 저장하는 방법, 리스트 같은 객체

배열 관련 함수

• split('구분자 매개변수')       문자열(구분자로 정제) -> 배열
  join ('구분자 매개변수')       배열 -> 문자열
  toStriing()                            배열 -> 문자열  항상 콤마로 사용 
• .push('배열 끝에 추가할 값');                                                       추가
• .unShift('배열 맨앞에 추가할 값');                                                추가
• .pop('배열 마지막 값 삭제'); / .shift('배열 첫번째 값 삭제');          삭제

등등

6. 자바스크립트 오류

• 구문오류 Uncaught TypeError: 인터프리터가 인식하지 못할 때, 철자 오류
• 논리오류 연산자 주의
• 일반적 오류 SyntaxError : missing; befor statement 연산자 오타, ';' 빼먹었을 때