서론

프로그래밍 : 컴퓨터 프로그램을 작성하는 일

⇨ 프로그래밍 언어를 이용해 프로그램을 만든다.

프로그래밍 언어 : 소프트웨어를 작성하기 위한 언어

코드작성(고급언어) ⇨ 컴파일러 ⇨ 기계어(저급언어)

기계어 ⇨ 0과 1로 이루어진 컴퓨터가 이해할 수 있는 언어

값 value : 더 이상 평가될 수 없는 하나의 식. 자료형을 간단히 이루는 값.

자료형 data type :
숫자형 ⇨ 1,2,3...
불리언(논리) ⇨ true-false
문자형 ⇨ "A", "a", "가"...
문자열 ⇨ "사랑한단 말을 더 쉽게 하고 싶어"

변수 variable : 다양한 값을 담을 수 있는 박스 같은 컨테이너

값이 저장된 메모리 주소와 이름을 연결한다. 그 주소의 별칭을 변수라 한다.

식 Expression : 값을 만들어내는 표현식

⇨ 값 자체도 식으로 인정하는 값식
⇨ 연산자를 포함하는 연산식

연산자 Operator : 값의 연산을 위해 사용되는 부호

⇨ 연산의 대상이 되는 피연산자
⇨ 연산을 부호로 표현하는 연산자

할당 연산자 ⇨ =
비교 연산자 ⇨ ==
산술 연산자 ⇨ + - * /
비트 연산자 ⇨ &
논리 연산자 ⇨ &&

문 Statement : 특정 작업을 위한 명령으로 프로그래밍의 흐름을 제어

조건문

if(식){ 문 }

if(식){
참일 때 실행
}else{
거짓일 때 실행
}

반복문

for( 식; 식; 식) {
두번째 식의 결과가 참일 때 실행
}
while (식) {
참일 때만 실행
}

함수 function : 특정 일을 처리하는 코드 묶음

function 함수이름 (인자) {
  인자를 어떻게 요리할 지 적는다.
  실행문

  return 완성된 요리
}

⇨ 함수는 만들었으면 다른 곳에서 호출 할 수 있다.

function 감자스프만들기 (🥔) {
  1. 감자를 깎는다.
  2. 감자를 요리한다.
  3. 감자스프를 완성한다.
  
  return 감자스프🥔
}

감자스프만들기(🥔)

const 감자슾 = 감자스프만들기(🥔)

JavaScript

JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어.

페이지의 내용이 가만히 정적인 정보만 보여주는 것이 아니라 주기적으로 갱신되거나, 사용자와 상호작용이 가능하거나, 애니메이션이 적용된 2D/3D 그래픽을 볼 수 있다면 JavaScript가 관여한다.

"javascript is everywhere"

node.js "node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임 입니다."

런타임js를 실행할 수 있는 환경

기본문법

키워드(예약어)

MDN JavaScript
MDN 기본문법

주석

// 한 줄 주석
/* */ 여러 줄 주석

키워드(예약어)

프로그래밍에서 미리 저장되어 있는 단어
해당 키워드를 사용하면 언어(자바스크립트) 차원에서 실행되는 행동이 있기 때문에 이외의 용도로 사용할 수 없다.

리터럴(Literal)

리터럴은 데이터(값) 그 자체. 변수 안에 넣어 사용할 수 있는 값들을 말한다.
리터럴 표기법 이란 변수에 리터럴값을 넣어 사용하는 것을 말한다.

/선언/
const a;

/할당/
a = 'abc';

/재할당/
a = 'zxc';

/선언과 동시에 할당/
const a = 'qwe';


/복합할당연산자/
const count = 0;

count = count + 1;
count += 1;

값 value

값의 종류 : 원시형 vs 객체형

원시형 = 기본타입 = Primitive Value

type of 로 확인되는 기본 데이터 유형

• null = objects
• undefined
• boolean
• number
• string
• bigint
• symbol

객체형 = 객체타임 = 원시형이 아닌 데이터 타입

const obj = {
	name : 'hyun'
}

const arr = ['hyun']

function name() {
	return 'hyun'
}

console.log(typeof obj) //object
console.log(typeof arr) // object
console.log(typeof name) // function

자바스크립트는 '느슨한 비교' '==' 와 '엄격한 비교' '===' 를 할 수 있다.
'느슨한 비교' 는 대충 형태만 맞으면 맞다고 해주고
'엄격한 비교' 는 형태, 값이 모두 맞아야 맞다고 해준다.

const num = 0
const str = '0'

console.log(num == str); // true
console.log(num === str); // false

원시값과 참조값=래퍼런스 객체

숫자 number

console.log(1 == 1.0); // true
console.log(Math.pow(2, 9999)); // Infinity
console.log(Number.MAX_SAFE_INTEGER); 9008199254740991

Not a Number
console.log(isNaN('1'); // 괄호 안에 값이 숫자인지 아닌지를 알려준다.

console.log(1 == 1.0); // true인 이유는 '부동소수점' 때문
JS는 언어 표현 방식을 IEEE754 방식을 사용.

문자 string

const word = '문자';
const word2 = '문자';

console.log(word[0]); // 문 = 문자열의 첫번째에 접근한다.
console.log(word.length); // 3 = 문자열의 길이를 알 수 있다.

const words = word + `` + word2;
console.log(words); // 문자 문자

연산자 operator

MDN 표현식과 연산자

삼항연산자
(조건) ? 참 : 거짓;

배열

문자, 숫자, boolean값 모두를 한번에 담을 수 있다.

Array

const arr = [ data, num, boolean, 'name' ]

console.log( arr[3] ); // 'name'

arr[4] = 'test'
console.log(arr) // [ data, num, boolean, 'name', 'test' ]

arr.push('push는 마지막');
console.log(arr) // [ data, num, boolean, 'name', 'test', 'push는 마지막' ]

arr.unshift('unshift는 첫번째');
console.log(arr) // [ 'unshift는 첫번째', data, num, boolean, 'name', 'test', 'push는 마지막' ]

문 Statement

프로그래밍의 명령과 흐름을 제어할 수 있다.

if (조건, 식, 값) {
	return 
} else if() {
	return
  } else {
  	return
    }

const array = [0,1,2,3,4];

for (let i = 0; i < array.length; i++) {
	(let 초기화; 평가(참-실행,거짓-종료); 반복실행되는 평가식;)
	console.log(array[i]); // 0 1 2 3 4     
}

함수 function

특정 일을 처리하는 코드 묶음

function func(매개변수) {
	if (10 > 매개변수 ) {
    	return 'hello';
    }
}

console.log(func(매개변수 )); // hello

⭐️ 객체 object

객체 object :

const lee-geabal = {
	// key(property,속성) : value (행동메서드) 
    // 객체에서 어떤 key가 함수를 갖고 있으면 그걸 메서드 라고 한다.
	name: {first: 'geabal',
    		last: 'lee',
          },
    age: 10,
    hello: function(s) {
    	return 'hello,' + s + 'world'
    },
    love: ['music', 'library', 'game']
}

console.log(lee-geabal.age); // 10
console.log(lee-geabal.name.first); // geabal
console.log(lee-geabal['name']['last']); // lee
console.log(lee-geabal.hello(my)); // hello, my world
console.log(lee-geabal.love[0]); // music

⭐️ 스코프 Scope

유효범위.

var ⇨ 처음부터 존재
let, const ⇨ ES2015 부터 사용

var s = 함수 레벨 스코프
const ss = 블록 레벨 스코프

function test() {
	var s = 1;
    
    return 'test';
}

console.log(s) // 0;
console.log(test()); // 'test';

• 함수 외부에서 함수 내부에서 선언된 s를 찾으려 했으나 1 이 아닌 0이 나옴(함수 외부에서는 내부에 선언된 변수를 찾을 수 없다.)
• 함수 외부 선언 -> 함수 내부에서 불러오기 가능.
• 함수 내부 선언 -> 함수 외부에서 불러오기 불가능.

<!--함수 외부-->
var v1 = 'scope';
const v2 = 1234;

<!--함수 내부-->
function varia () {
	var v3 = 'test';
    const v4 = true;
    
    return 'hello';

	console.log(v1); 
}

<!--함수 외부-->
console.log(v3) // v3 is not defined

// scope at v1 (정상출력 확인)

선언 위치에서 상위 범위로 올라가면서 찾는다.

반복문 에서도

var globalSCP = '전역변수';

for (var index = 0; index <3; index++){
	};

function outter () {
	console.log(globalSCP); // 전역변수
    
    function inner () {
    	var innerVar = '함수 내부 지역 변수';
        
        console.log(index); // 3 
        ⭐️inner 함수 외부에서 선언된 for문 속 변수 var index 의 결과값을 inner 함수 내부에서도 확인할 수 있다.
    }
}

var globalSCP = '전역변수';

for (let index = 0; index <3; index++){
	};

function outter () {
	function inner () {
    	var innerVar = '함수 내부 지역 변수';
        
        console.log(index); // index is not defined
        ⭐️for문 속 변수가 var 에서 let으로 바뀌면 스코프 범위가 블록 레벨(for문 내부에서만 유효)로 바뀌게 돼 inner 함수에서 확인할 수 없다.
    }
}

if문도 비슷하다

if(true){
	var a = 'a';
    let b = 'b';
}

console.log(a); // a
console.log(b); // b is not defined

** var 는 함수 범위로

개발환경과 도구

에디터 - JetBrain / VSC + LiveServer
Node.js - nvm 추천? + brew
GitHub 필수
브라우저 - Chrome / FireFox / Safari...
터미널 도구
Post Man
MDN ES 최신명세를 유지
모던 JavaScript 인포

웹 브라우저

html 문서

HTML : Hypertext Markup Language 초월한 데이터 구조 언어
태그를 사용한 마크업

DOM 소개

Document Object Model 문서 객체 모델
HTML은 < 태그 > 기반의 마크업 언어이다.

JS를 사용하면서 특정 행동에 발생하는 이벤트를 만들고 싶을 때,
변화하고자 하는 부분. 즉 특정 < 태그 > 를 고르고 그 < 태그 > 만 변화하게 만들면 된다.
이때 필요한 개념이 DOM 이다.
DOM은 HTML 태그를 구조화 시킨 것을 말한다. (일종의 html 지도 : 어디에 어떤 태그가 있는지)

DOM은 문서의 구조화된 표현(structured representation)을 제공하며
프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여
그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
-MDN DOM 소개

⭐️ DOM 선택과 조작

document.querySelector('body')
> <body> ... </body> // body 태그에 접근하여 내부 요소를 확인할 수 있다.

객체 모델로 보고싶다면
console.dir(document.querySelector('body'))
> body

📍 html 문서에서 < body > 보다 < script > 가 상위에 있고, < script > 에서 다시 document.querySelector('body') 를 적용하면 null 값이 뜬다. 이유는 JS는 실행 시 문서를 위에서 아래로 한번 읽고 시작하는데 이때 document.querySelector('body')가 있는 < script > 가 상위에 있으면 처음 읽을 때 아직 하단에 < body > 태그를 읽지 못해서 null 값이 뜨는 것이다.

Dom접근

const element = document.querySelector('selector');

🟡 document.querySelector(selector)

• selector를 입력하면 해당 요소의 첫번째 값을 가져온다.
  • TagName
  • #id
  • .class
• 복잡한 접근도 가능하다.

<div class="user-panel main-board">
  <input name="login">
</div>

const inputElement = 
      document.querySelector('div.user-panel.main-board input[name=login]')

Dom변경

element.innerText = 'change inner text';

<!-- DOM에 접근하여 바꾸기 -->
<h2> 반갑습니다. </h2>

<script>
	const h2Element = document.querySelector('h2');

	console.log(h2Element); // <h2> 반갑습니다. </h2>

	h2Element.innerText = '안녕하세요';

	console.log(h2Element); // <h2> 안녕하세요 </h2> 웹페이지도 바뀜.

	function replaceH2 () {
    	h2Element.innerText = 'Hello, World';
    };
	
	replaceH2 () // <h2> 안녕하세요 </h2> 웹페이지도 바뀜.

</script>

Dom조작 - Event 추가

element.addEventListener('event type', event-function)

event type = 'click' 'mouseover' 등 사용할 수 있는 이벤트 타입이 정해져 있음

event-function = 이벤트 발생 시 작동할 내용을 함수로 만들어 적용한다.

<!-- 이벤트 주기 -->
<h2> 반갑습니다. </h2>

<script>
	const h2Element = document.querySelector('h2');

	function replaceH2 () {
    	h2Element.innerText = 'Hello, World';
    };
	
	h2Element.addEventListener('click',replaceH2); 
	// 웹에서 h2Element가 선택한 태그 document.querySelector('h2') 를 
	// 클릭 'click' 하면 이벤트 함수 replaceH2 가 실행됨.
	// h2Element.innerText = 'Hello, World';

</script>

문법 grammer

문법 개요

문장을 구성하는 규칙

키워드, 변수, 값, 문항수, 객체, 배열, 스코프...

주석

모든 프로그래밍 언어에 사용.
개발자 간의 소통을 위해 작성하는 편이다.

/* 내용 */

값 & 식 & 문

프로그래밍 언어는 틀리면 컴퓨터가 이해할 수 없다.

값 : 하나의 값
식 : 표현식 expression : 값을 생성하고 값으로 귀결된다.
문 : statement : 행동을 제어한다.

표현식은 값으로 귀결될 수 있고, 값과 식의 차이를 인식하라.

제어문과 블럭

// 제어문에서 바디(본문) <= 로직(명력)
for(반복조건 초기화) {
  if(비가 온다.) {
     // 우산을 쓴다.
     if(비가 많이 온다.) {
  	    // 큰 우산을 쓴다.
      } else if(비가 적당히 온다.) {
        // 작은 우산을 쓴다.
      }
   }
}

// switch case 문
switch (기상상태) { //break 가 반드시 있어야 함.
  case 비가 온다: // 명령
    [break;]
  case 비가 많이 온다: // 명령
    [break;]
  case 비가 조금 온다: // 명령
    [break;]
  [default: // 맞는 명령이 없을 경우 실행 
   [break;]]
}

// while 문
//continue를 이용해 짝수를 걸러내기
let i = 0;
const max = 10;

while (i < max) {
  i++;
  
  if(i % 2 === 0) {
    continue;
  }
  
  console.log(i); // 1 3 5 7 9
}

식별자

식별자는 문자열로 이루어져야 하는데 $ _ 같은 것을 사용하기도 한다.
식별자는 어떻게 보면 예약어라고 볼 수 있는데 이로 인해 사용에 주의가 필요하다.

리터럴

프로그램에서 가장 작은 단위의 데이터 값.

배열이나 객체를 만들 때 래퍼 객체(wrapper object)를 이용해 만들 수 있다.

new String ('hello');
const arr = new Array(1,2,3)
console.log(arr) // [1,2,3]

하지만 더 쉽고 간편하게 리터럴 문법을 이용하여 만들 수도 있다.

'hello'
[1,2,3]

use strict

느슨한 자바스크립트 언어를 엄격하게 사용하게 하는 모드다.
ES2015 부터는 기본으로 JS에 적용되므로 신경쓰지 않아도 된다.

// use strict

function func() {
	'use strict'; // 최상위에 문자로 선언하면 끝.
  
  globalVar = 10; // globalVar is not defined
  
  return 'hello';
}

func(); // globalVar is not defined