Javascript 입문

mdn 자바스크립트 기본
https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/JavaScript_basics

JavaScript 는 뭔가요?

JavaScript 는 웹 브라우저에서 사용하기 위하여 만들어진 HTML과 웹의 프로그래밍 언어입니다.

왜 JavaScript를 공부해야합니까?

JavaScript는 모든 웹 개발자 가 배워야 하는 3 가지 언어 중 하나입니다 .

1. 웹 페이지의 내용을 정의하는 HTML
2. 웹 페이지의 레이아웃을 지정하는 CSS
3. 웹 페이지의 동작을 프로그래밍하는 JavaScript

• 웹 개발
  JavaScript는 웹 애플리케이션의 동적인 기능을 구현하기 위해 필수적입니다. 웹 페이지에서 사용자와의 상호작용, 데이터의 동적 로딩, 폼 유효성 검사 등을 구현할 수 있습니다. JavaScript를 배우면 웹 개발의 폭넓은 영역에서 더욱 창의적이고 동적인 웹 애플리케이션을 만들 수 있습니다.
• 범용 프로그래밍 언어
  JavaScript는 웹 브라우저뿐만 아니라 서버 사이드 개발, 모바일 애플리케이션 개발, 게임 개발 등 다양한 플랫폼과 분야에서 사용됩니다. Node.js라는 플랫폼을 사용하면 JavaScript로 서버 사이드 애플리케이션을 개발할 수 있습니다. 이는 JavaScript의 범용성을 보여주는 좋은 예입니다.
• 커뮤니티와 생태계
  JavaScript는 엄청난 규모의 개발자 커뮤니티와 생태계를 가지고 있습니다. 수많은 오픈 소스 프로젝트, 도구, 라이브러리, 프레임워크 등이 JavaScript를 기반으로 만들어졌습니다. JavaScript를 배우고 사용하면 이러한 생태계에 접근하여 다양한 지식과 도움을 받을 수 있습니다.
• 쉬운 학습 곡선
  JavaScript는 상대적으로 배우기 쉬운 언어입니다. 문법이 간결하고 직관적이며, 다른 언어와 비교하여 학습 곡선이 상대적으로 낮습니다. 이로 인해 초보자도 빠르게 JavaScript를 익힐 수 있습니다.
• 채용 시장에서의 수요
  JavaScript는 현재 IT 산업에서 가장 인기 있는 언어 중 하나입니다. 웹 개발자, 프론트엔드 개발자, 백엔드 개발자, 모바일 애플리케이션 개발자 등 다양한 직무에서 JavaScript 기술을 요구합니다. JavaScript를 공부하고 습득하면 취업 기회를 더욱 넓힐 수 있습니다.

이러한 이유들로 인해 JavaScript는 현대적인 소프트웨어 개발자에게 필수적인 언어로 여겨집니다. JavaScript를 공부하면 웹 개발과 범용 프로그래밍에 대한 지식을 획득하고, 개발자 커뮤니티에서 적극적으로 참여할 수 있습니다.

표기법

Naming

• dash-case(kebab-case)
  lorem-ipsum-dolor-sit-amet
• snake_case
  lorem_ipsum_dolor_sit_amet
• camelCase
  loremIpsumDolorSitAmet (첫글자 소문자)
• PascalCase
  LoremIpsumDolorSitAmet (첫글자 대문자)

Zero-based Numbering

0 기반 넘버링, 특수한 경우를 제외하고 0부터 숫자를 시작합니다.

let animals = ['dog', 'cat', 'fish'];

console.log(animals[0]); // 'dog'
console.log(animals[1]); // 'cat'
console.log(animals[2]); // 'fish'

console.log(new Date('2023-07-08').getDay()); // 6, 토요일
console.log(new Date('2023-07-09').getDay()); // 0, 일요일
console.log(new Date('2023-07-10').getDay()); // 1, 월요일

주석

// 한 줄 메모
/* 한 줄 메모 */

/**
* 여러 줄
* 메모1
* 메모2
*/

변수

데이터를 저장하고 참조(사용)하는 데이터의 이름

var, let, const

// 변수 선언!
let a = 5;
let b = 10;

console.log(a + b); // 15
console.log(a - b); // -5
console.log(a * b); // 50
console.log(a / b); // 0.5

let

// 값(데이터)의 재할당 가능!
let a = 10;
console.log(a); // 10

a = 555;
console.log(a); // 555

const

// 값(데이터)의 재할당 불가
const a = 10;
console.log(a); // 10

a = 555;
console.log(a); // TypeError: Assignment to constant variable.

데이터 종류

String(문자 데이터)

// 따옴표를 사용합니다.
let myName = "odada";
let email = 'eehd10@naver.com';
let hello = `Hello ${myName}!!`

console.log(myName); // odada
console.log(email); // eehd10@naver.com
console.log(hello); // Hello odada!!

Number(숫자 데이터)

// 따옴표 없이 사용합니다.
let age = 10;

console.log(age); // odada

Boolean(불린 데이터)

// true, false 두 가지 값밖에 없는 논리 데이터입니다.
let hungry = true; // 배고파?
let cool = false; // 추워?

console.log(hungry); // true
console.log(cool); // false

Undefied

// 값이 할당되지 않은 상태를 나타냅니다.
let undef;
let obj = { abc: 123 };

console.log(undef); // undefined
console.log(obj.abc); // 123
console.log(obj.xyz); // undefined

Null

// 어떤 값이 의도적으로 비어있음을 의미합니다.
let empty = null;

console.log(empty); // null

Object(객체 데이터)

// 여러 데이터를 {key:value} 형태로 저장합니다.
let user = {
    name: '김가을',
    age: 1,
    cute: true,
};

console.log(user.name); // 김가을
console.log(user.age); // 1

// 김가을 나이는 1살 입니다.
console.log(`${user.name} 나이는 ${user.age}살 입니다.`);
// 김가을은 귀여워요.
console.log(`${user.name}은 ${user.cute ? '귀여워요' : '귀엽지 않아요'}.`);

Array(배열 데이터)

// 여러 데이터를 순차적으로 저장합니다.
let fruits = ['바나나', '사과', '체리'];

console.log(fruits[0]) // '바나나'
console.log(fruits[1]) // '사과'
console.log(fruits[2]) // '체리'

예약어 (Reserved Word)

특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어

let this = 'Hello'; // SyntaxError
let if = 123; // SyntaxError
let break = true; // SyntaxError

함수 (Function)

특정 동작(기능)을 수행하는 일부 코드의 집합(부분)

함수 선언

// 함수 선언
function helloFunc() {
    // 실행 코드
  console.log(1234)
}

// 함수 호출
helloFunc(); // 1234

함수 내보내기 (return)

// return 내보내기
function returnFunc() {
    return 123;
}

let a = returnFunc();

console.log(a) // 123

함수의 재사용

// 함수 선언
function sum(a, b) { // a와 b는 매개변수(Parameters)
    return a + b;
}

// 재사용
let a = sum(5, 10); // 5과 10는 인수(Arguments)
let b = sum(1, 4);
let c = sum(10, 50);

console.log(a, b, c); // 15, 5, 60

기명, 익명 함수

// 기명(이름이 있는) 함수
// 함수 선언
function hello() {
    console.log('Hello');
}

// 익명(이름이 없는) 함수
// 함수 표현
let world = function () {
    console.log('World');
}

// 함수 호출
hello(); // Hello
world(); // World

객체 데이터

// 객체 데이터
const mokdong = {
  name: 'odada',
  age: 100,
  // 메소드(Method)
  getName: function () {
      return this.name;
  }
}

const herName = mokdong.getName();
console.log(hername); // odada
// or
console.log(mokdong.getName()); // odada

조건문 (if, else)

조건의 결과(truthy, falsy)에 따라 다른 코드를 실행하는 구문

if

let isShow = true;
let checked = false;

if(isShow) {
    console.log('Show!'); // Show!
}

if(checked) {
    console.log('Checked!');
}

if else

let isShow = true;

if(isShow) {
    console.log('Show!');
} else {
    console.log('Hide?');
}

DOM API

Document Object Model, Application Programming Interface

요소(Element) 찾기

<div class="box">Box!!</div>

// HTML 요소(Element) 1개 검색/찾기
const boxEl = document.querySelector('.box');

// HTML 요소에 적용할 수 있는 메소드!
boxEl.addEventListener();

// 인수(Arguments)를 추가 가능!
boxEl.addEventListener(1, 2);

// 1- 이벤트(Event, 상황)
boxEl.addEventListener('click', 2);

// 2- 핸들러(Handler, 실행할 함수)
boxEl.addEventListener('click', function () {
    console.log('Click');
})

클래스(Class) 정보

<div class="box">Box!!</div>

// HTML 요소(Element) 검색/찾기
const boxEl = document.querySelector('.box');

// 요소의 클래스 정보 객체 활용
boxEl.classList.add('active');
let isContains = boxEl.classList.contains('active');
console.log(isContains); // true

boxEl.classList.remove('active');
isContains = boxEl.classList.contains('active');
console.log(isContains); // false

요소(Element) 모두 찾기

<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>

// HTML 요소(Element) 모두 검색/찾기
const boxEls = document.querySelectorAll('.box');
console.log(boxEls);

// 찾은 요소들 반복해서 함수 실행!
// 익명 함수를 인수로 추가
boxEls.forEach(function () {});

// 첫 번째 매개변수(boxEl): 반복 중인 요소
// 두 번째 매개변수(index): 반복 중인 번호
boxEls.forEach(function (boxEl, index) {});

// 출력!
boxEls.forEach(function (boxEl, index) {
    boxEl.classList.add(`order-${index + 1}`);
      console.log(index, boxEl);
})

Getter, Setter

<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>

const boxEl = document.querySelector('.box');

// Getter, 값을 얻는 용도
console.log(boxEl.textContent); //Box!!

// Setter, 값을 지정하는 용도
boxEl.textContent = 'odada';
console.log(boxEl.textContent); // odada