[zb11] 초심자의 자바스크립트 001

괴발·2023년 2월 2일
JavaScript
0

zero-base

목록 보기
20/27
post-thumbnail

#1 프로그래밍이란

  • 프로그래밍 : 컴퓨터에세 명령 할 프로그램을 만드는 작업
  • 프로그래밍 언어 : 컴퓨터에게 명령하는 언어
  • 프로그램 : 컴퓨터에게 하는 명령어 모음
  • 소프트웨어 : 프로그램 모음집
  • 코드 : 컴퓨터가 알아듣는 언어
  • 코딩 : 코드를 작성하는 것 = 컴퓨터에게 할 명령을 만드는 것

라이브러리와 프레임워크의 차이?

01 프레임워크 FrameWork
원하는 기능 구현에 집중하여 개발할 수 있도록 일정한 형태와 필요한 기능을 갖추고 있는 골격, 뼈대
문제해결을 위한 클래스와 인터페이스가 모여있는 집단.
프레임워크라는 틀, 흐름(flow) 위에 개발자가 필요한 코드를 작성하여 동작한다.
애플리케이션 코드는 프레임워크가 짜 놓은 틀 안에서 수동적으로 동작한다.


02 라이브러리 Library
활용 가능한 도구들의 집합. 손쉬운 도구 모음집.
미리 작성된 코드, 함수를 사용해 애플리케이션을 쉽게 만들 수 있다.
라이브러리는 필요할 때마다 호출하여 사용 할 수 있다.


03 프레임워크와 라이브러이의 차이
'누가 코드를 돌리냐' 의 차이.
결국 코드를 실행하는 주체가 누구냐 가 프레임워크와 라이브러이의 차이라고 할 수 있겠다.
라이브러리는 개발자가 필요한 함수나 미리 작성된 코드를 가져와서 빠르게 코드를 만들 수 있도록 도와주는 도구로
코드는 개발자가 작성한대로 움직이기 때문에 코드를 실행하는 주체는 개발자가 된다.
반면 프레임워크는 프레임워크가 제공하는 개발 범위 내에서 개발자가 코드를 작성하면
프레임워크가 개발자의 코드를 가져가 동작하기 때문에 코드 실행의 주체가 프레임워크 자신이 된다.
이처럼 개발자가 아니라 프레임워크가 개발의 주도권을 가져가는 것을 "제어의 역전" 이라 한다.

컴파일과 인터프리터의 차이

컴퓨터는 사람의 언어를 이해하지 못한다.
그래서 고급언어로 작성한 코드를 컴퓨터에게 실행시키기 위해서는 번역을 해줘야 하는데
번역 방식이 컴파일과 인터프리터로 나뉜다.

01 컴파일
컴파일 : 작성한 코드를 컴퓨터가 실행가능한 코드로 번역하는 것
컴파일러 : 컴파일 과정을 거친 코드를 실행파일로 만드는 것

컴파일의 장단점
장점 : 컴파일 과정은 시간이 걸리더라도 컴파일을 마친 컴파일러 파일은 코드 실행에 최적화가 된 파일이기 때문에 빠르게 실행된다.
단점 : OS에 의존적이라 OS에 맞는 컴파일을 다시 해줘야 한다.(호환불가) 또 코드가 바뀌면 다시 컴파일을 해줘야 하는 불편함이 있다.


02 인터프리터
컴퓨터가 이해하는 기계어로 바꾸는 것이 아니라 인터프리터가 한 줄 씩 읽고 이를 컴퓨터에게 전달한다.
한 줄씩 읽기 때문에 오류 발생시 어느 줄(line)에서 오류가 발생했는지 개발자는 확인할 수 있다.

인터프리터 장단점
장점: 한 줄씩 읽고 실행하기 떄문에 빠른 수정이 가능하다.
단점 : 실시간으로 읽고 실행하기 때문에 실행 속도가 느리다. 그리고 코드 변경 후 재실행 시 또 다시 처음부터 한 줄씩 읽기 때문에 실행 속도가 느리다.

데이터와 변수

데이터 : 어떤 이론을 세우는데 기초가 되는 사실 또는 바탕이 되는 자료.
데이터 타입 : 공간에 저장되는 값의 종류
변수 : 분류된 데이터를 담을 수 있는 이름을 가진 공간.
다른 공간에 있는 값들을 모아 하나의 공간에 담을 수도 있다.

변수 선언 : 데이터 종류 + 변수이름 + ;

연산자

연산자(operator) : 연산에 사용하는 기 (= + - * / %...)
피연산자(operand) : 연산의 대상 (a,b,10,20...)
연산자의 종류 : 산술, 증감, 대입, 관계, 논리, 비트 6종류 (MDN 연산자)

함수

함수(function) : 기능을 만드는 코드의 집합. 독립적인 설계
함수 호출 : 함수를 선언하고 해당 함수를 불러서 기능을 사용한다.

함수 사용 이유 :
반복적인 코드 작성을 피할 수 있다. 이는 개발시간의 단축을 의미하며
코드가 간결해져 가독성이 높아진다.
또한 수정 및 유지 보수에 용이하다.

함수 선언 방식

function 함수이름 (파라미터...) {
  함수 기능을 표현한 코드
}

function sum(num1,num2) {
  return num1 + num2;
}
console.log(sum(10,20)); // 30

식

식(expression) : 수식 또는 식 / 연산자와 피연산자의 조합 / 식은 항상 값이 존재한다. = 값이 존재하면 식이다.

문

문(statement) : 어떤 것을 수행하는 구문 단위. 함수 기능을 구현한 코드로 사용.
문 유형 :

  • 조건문 : 주어진 조건에 따라 판별하는 문 (if~else/ switch~case)
  • 반복문 :
    • for문(초기화; 조건식; 증감식;) => 조건에 맞으면 반복수행. 맞지 않으면 종료
    • while문(조건식) => 조건에 맞으면 로직 반복 실행. 맞지 않으면 종료



#2 기본문법

변수

변수: 분류된 데이터를 담을 수 있는 이름을 갖은 어떤 공간
변수 선언 : 데이터 종류(var,let,const) + 변수명 + ;
변수 종류 : int실수, double정수, string문자 => 일반적인 변수의 종류 => 그러나 JS에는 이게 없다. 대신,
var 가변형 변수
let 가변형 블록 지역 변수
const 불변형 블록 지역 변수
변수 선언 규칙 :
대,소문자를 구분한다. 예약어를 사용하지 않는다.
변수 선언 팁 :
의미없는 이름 사용하지 X, 추상적인 이름 사용하지 X, camelCase를 사용한다.
할당 : 공간에 데이터를 넣는 것.
let nation = 'korea';

값(value)

조작이 가능한 어떤 표현.
문자열, 문자, 숫자 등을 가짐
피연산자 + 연산자

let myAge = 20;
let myAge (공간 - L Value)
20 (값 - R Value)

값의 종류 : 원시값, 참조값
원시값 : 기본 데이터
참조값 : 객체

값 출력 방법 :

  • console.log()
  • alert
  • document.write
  • innerHtml

숫자 (MDN Number)

숫자를 표현함. 원시값.
상수(constant)와 함수(method)를 가짐.
float, double, int 같은 데이터 타입은 없다.

문자열 (MDN String)

문자를 표현함. 원시값.
'' 또는 "" 안에 작성한 값은 문자로 인식한다.
문자열 리터럴과 "템플릿 리터럴" = 내장된 표현식을 허용하는 것
`` <-백틱을 사용한다. 보통 값은 한 줄로 길이가 제한적인데, 템플릿 리터럴을 사용하여 여러 줄로된 문장을 값으로 사용할 수 있다.

<!--기존 장문 입력 방식 -->
var str = 'Template literals are string literals allowing embedded expressions. \n' + 
'You can use multi-line strings and string interpolation features with them. \n' + 
'They were called "template strings" in prior editions of the ES2015 specification.';
<!--템플릿 리터럴 사용 -->
const str = `Template literals are string literals allowing embedded expressions.
You can use multi-line strings and string interpolation features with them.
They were called "template strings" in prior editions of the ES2015 specification.`;

또한 문자 중간에 변수를 쉽게 바로 대입할 수 있다.

<!--기존 장문 입력 방식 -->
var language = 'Javascript';
var expression = 'I love ' + language + '!';
console.log(expression); // I love Javascript!
<!--템플릿 리터럴 사용 -->
var language = 'Javascript';
var expression = `I love ${language}!`;
console.log(expression); // I love Javascript!

<!--간단한 연산도 가능 -->
var language = 'Javascript';
var expression = `I love ${language.split('').reverse().join('')}!`;
console.log(expression); // I love tpircsavaJ!

템플릿 리터럴 참고

연산자

연산자(operator) : 연산에 사용하는 기 (= + - * / %...)
피연산자(operand) : 연산의 대상 (a,b,10,20...)
연산자의 종류 : 산술, 증감, 대입, 관계, 논리, 비트 6종류 (MDN 연산자)

대입/할당연산자

산술/증감연산자

관계/비교연산자

논리연산자

비트연산자

유형연산자

삼항연산자

연산자 우선순위

문(statement)

문(statement) : 어떤 것을 수행하는 구문 단위. 함수 기능을 구현한 코드로 사용.
문 유형 :

  • 조건문 : 주어진 조건에 따라 판별하는 문 (if~else/ switch~case)
  • 반복문 :
    • for문(초기화; 조건식; 증감식;) => 조건에 맞으면 반복수행. 맞지 않으면 종료
    • while문(조건식) => 조건에 맞으면 로직 반복 실행. 맞지 않으면 종료
    • do~while문
  <!--if~else-->
  if (조건1) {
    로직 1
  } else if (조건2) {
    로직 2
  } else {
    로직 3
  }

  <!--실습-->
  let n = 74;
  let result = '';

  if (n == 100) {
    result = 'A+';
  } else if (n >= 90) {
    result = 'A';
  } else if (n >= 80) {
    result = 'B';
  } else if (n >= 70) {
    result = 'C';
  } else if (n >= 60) {
    result = 'D';
  } else {
    result = 'F';
  }

  console.log('점수는'+result+'입니다.')
  <!--switch-->
  switch (값 a) {
    case 값 b:
      로직 1
      break;
    case 값 c:
      로직 2
      break;
    default;
  }

  <!--while-->
  let i = 0;
  while ( i<3 ){
    로직 실행
    i++;
  }

  <!--실습-->
  let sum = 0;
  let i = 0;
  while(i<=10) {
    if(i%2 == 0) {
      sum += i;
    }
    i++;
  }
  console.log(sum);
  <!--for-->
  for(let i=0; i<10; i++){
    로직 실행
  }

  <!--실습-->
  //10까지 짝수 합
  let sum = 0;
  for(i=0; i<=10; i+=2){
    console.log('중간값은' +sum); 
    sum = sum + i;
  }
  console.log('결과는' +sum);

함수(function)

함수(function) : 기능을 만드는 코드의 집합. 독립적인 설계
함수 호출 : 함수를 선언하고 해당 함수를 불러서 기능을 사용한다.

함수 사용 이유 :
반복적인 코드 작성을 피할 수 있다. 이는 개발시간의 단축을 의미하며
코드가 간결해져 가독성이 높아진다.
또한 수정 및 유지 보수에 용이하다.

함수 선언 방식

function 함수이름 (파라미터...) {
  함수 기능을 표현한 코드
}

function sum(num1,num2) {
  return num1 + num2;
}
console.log(sum(10,20)); // 30
<!--두 수를 곱하는 함수-->
function multi(num1, num2) {
  return num1 * num2;
}
console.loe(multi(10,30)) // 300

<!--1~10까지 홀수의 합을 리턴하는 함수 만들기-->
function oddsum() {
  let sum = 0;
  for(let i = 1; i <=10; i+=2){
    sum = sum + i;
  }
  return sum; // 1+3+5+7+9 = 25
}

<!--수학 점수에 따라 A~F 등급을 출력하는 함수 만들기-->
function mathScore(score) {
  let scr = '';
  
  if(score === 100) {
    scr = 'A+';
  }else if(score >= 90) {
    scr = 'A';
  }else if(score >= 80) {
    scr = 'B';
  }else if(score >= 70) {
    scr = 'C';
  }else if(score >= 60) {
    scr = 'D';
  }else {
    scr = 'F';
  }
  return scr;
}
console.log(mathScore(88)) // 'B'

객체(Object)

우리가 인식할 수 있는 사물.
원시값 을 제외한 나머지
key : value 로 이루어져 있다.
property
객체표현식
let desk {};
let desk {
color : 'white',
width : 1200mm,
methodName: function(){
alert('안녕!');
},
};
[객체 프로퍼티 참조 방식]
객체이름.프로퍼티이름
객체이름['프로퍼티이름'][객체 메소드 참조 방식]
객체이름.메소드이름()

profile
괴발
괴발개발
이전 포스트

[zb11] 007-러닝메이트 html-css : css 편

다음 포스트

[zb11] cs test 대비 포인트

0개의 댓글