[javascript] basic

javascript

  • VScode 에서 js 파일 실행시키기
    • pip install node
    • node [파일명]

image-20200512140757973

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- Vanilla JS -->
  <script>
    // let, const
    // let : 재 할당이 가능하다. ( 변수 )
    let a = 1
    a = 1

    // const : 재 할당이 불가능하다. !== 값이 바뀌지 않는다. ... = 할당 연산자 못온다.
    const b = 1
    b = 'a' // Error

    const c = [1,2,3]
    c = 3 // Error 재할당
    c.push(4) // c = [1,2,3,4]
      
    // 스타일 가이드 잘 맞출것.
    function(){}
    function () {}
      
    // Naming Convention 꼭 지키자.
    // const add_one_to_number ( bad )
    // addOneToNumber ( good )
  </script>
</body>
</html>

:one: 개념/문법

image-20200512145343505

:two: Parse (이해 / 해석)

데이터 -> 파싱 -> 컴퓨터가 이해할 수 있는 자료구조

Parsing

:three: 문법

ㅇㅇ

document.head // 자바스크립트에서 키값에 접근하는 방법
// python : documnet['head'] 파이썬에서 키 값에 접근하는 방법
// 가장 자주 쓰이게 될 예정
document.querySelector('h1')

// 크롬 개발자도구 - 검사 - copy - selector
document.querySelectorAll('body > h1')

const liTag = document.querySelector('body > h1')
liTag.innerHTML // Hello world

liTag.classList // ['my', 'new', 'class', 'here']
liTag.classList.add('hihi') // ['my', 'new', 'class', 'here', 'hihi']

# 수정
liTag.innerText = "B"
liTag.innerHTML // B

# 생성

const num1 = 123
const num2 = -2.38
const a = NaN
const b = Infinity
const c = -Infinity
const firstName = 'jaegu'
const lastName = "Kang"
const middleName = 'raegu'

const fullName = firstName + lastName
const greeting = `Hello ${meddleName}`
  1. Truthy

    • Falsy 가 아닌 모든 값들
  2. Falsy

    없거나, 정의되지 않거나

    • null
    • undefined

:four: 자료구조

어떻게 저장하고, 조작하는지 ( CRUD )

CRUD => 메서드 파악

:five: 함수

:six: OOP

class를 잠시 잊어두세요..( Prototypal Inheritance )

// 객체 오브젝트를 만든다. {} 중괄호
const unani92 = {
    name: '유나니',
    birth: '1992',
    greeting() {
        return `안녕하십니까 ${this.name}입니다.` // python 에서는 self 였지만 JS 에서는 this
    }
    // greeting: function() {
    //     return `안녕하십니까 정윤환입니다.`
    // }
}


// 4개 다 되는 코드
// JS 는 클래스 없이 객체를 만들 수 있다. ( 파이썬은 클래스 없이 객체 못 만든다. )
console.log(unani92.name)
console.log(unani92.birth)
console.log(unani92.greeting())
unani92.money = 5000
console.log(unani92.money)


// JS 에서 class 쓴다는 것.. -> 동일한 구조를 갖춘 아이들을 찍어내기 위함
class Person {
    constructor(name, birth) { // JS 에서의 생성자
        this.name = name
        this.birth = birth
    }
    greeting() {
        return `안녕하십니까. ${this.name}`
    }
}

const unani = new Person('정윤환', 1992)
const hangrae = new Person('조항래', 1995)

console.log(unani.name)
console.log(unani.greeting())

console.log(hangrae.name)
console.log(hangrae.greeting())


/*
파이썬 버전

class Person:
    def __init__(self, name, birth):
        self.name = name
        self.birth = birth

    def greeting(self):
        return f'안녕하십니까 {self.name}입니다.'

unani = Person('unani', 1992)
*/