2024. 6. 19 - JavaScript

JavaScript

함수

•

화살표 함수 - function 키워드 생략

◦

홀수 판단

function getValue(value) {
    return value % 2
}
JavaScript
복사

◦

콜백 함수를 매개변수에 넣어줄 때 - 가독성 좋음

const fn = (value) => {
    return value % 2 == 1
}
JavaScript
복사

•

eval() - 사용빈도 낮음

let codeRun = `
    var num11 = 1111;
    alert(num11)
`
eval(codeRun)
JavaScript
복사

객체

•

객체 (object) ⇒ 속성 + 메서드

◦

객체가 가지고 있는 특징을 속성이라고 한다.

◦

객체는 기능을 가지고 있다.

▪

ex) 스마트폰

•

기능: 전화걸기 및 받기, 컴퓨팅

◦

객체는 묶음이다 ⇒ 변수와 함수의 묶음

◦

제공하는 객체 ⇒ 변수 / 메서드(함수)

◦

메모리에 올려서 사용할 수 있는 상태를 객체라고 한다.

◦

최근 react는 함수 기반으로 만듦

◦

객체가 가지고 있는 함수 ⇒ 메서드

◦

객체 표현 ⇒ {} object

•

객체 표현 예시

const menu1 = {
    productName: 'Americano',      // 속성이름 : 속성값
    price: 3000,                    
    ctgy: 'Coffee'
}

console.log('menu1 > ', menu1)
JavaScript
복사

•

배열 → arr[index]

console.log('제품 이름 >> ', menu1['productName'])
console.log('제품 이름 >> ', menu1.productName)
JavaScript
복사

•

객체의 속성은 변수와 같이 모든 타입의 자료형을 가질 수 있다.

const menu2 = {
    productName: 'Americano',       // 속성이름 : 속성값
    price: 3000,
    ctgy: 'Coffee',
    makeCoffee : () => {        // 메서드
        console.log('원두 20g과 뜨거운 물 120ml 섞어서 만듭니다.')
    }
} 
JavaScript
복사

•

객체의 메서드 호출

// 객체의 메서드 호출
menu2.makeCoffee()
JavaScript
복사

•

this: 객체 자신의 멤버 참조, 현재객체 자신을 가리킴

◦

화살표 함수 에서는 this 지원 안 됨

const menu3 = {
    productName: 'Americano',       // 속성이름 : 속성값
    price: 3000,
    ctgy: 'Coffee',
    makeCoffee: function() {        // 메서드
        console.log(`${this.productName}는 20g과 뜨거운 물 120ml 섞어서 만듭니다.`)
    }
}
JavaScript
복사

•

객체의 속성을 동적으로 추가

// 객체의 속성을 동적으로 추가
menu3.event = false
console.log(menu3)
if (menu1.event) {
    alert('이벤트 상품입니다.')
} else {
    alert('이벤트 미 대상 상품!')
}
JavaScript
복사

•

기본 자료행 객체 선언 : 숫자, 문자열, 불리언 그리고 배열

let obj_string = new String('   안녕하세요   ')
console.log(obj_string, obj_string.length)
console.log(obj_string.trim(), obj_string.trim().length)
let obj_phoneNumber = new String('010-9999-7777')
console.log(obj_phoneNumber.split('-'))
console.log(obj_phoneNumber.replace('-', '.'))

const obj_num = new Number(100.123456)
console.log(obj_num, obj_num.toString())

// 자릿수 표현
console.log(obj_num.toFixed(2))

// isNaN() => NaN 판단, isFinite() => 무한대 수 판별

let priNum = 1000
console.log(priNum.toString())

// 배열
let arr1 = [1, 2, 3, 4, 5]
console.log(arr1)
let arr2 = new Array()
console.log(arr2)
let arr3 = new Array(10)
console.log(arr3)
let arr4 = new Array(1, 2, 3, 4, 5)
console.log(arr4)
JavaScript
복사

•

JSON

◦

JSON 활용 예시

// JSON : JSON 타입의 형식 변환
// object => JSON, JSON => object 
// Data => 규격화

let menu = {
    productName : 'americano',
    price : 3000,
    ctgy : 'coffee'
}
console.log(menu, typeof(menu))

let json_string = JSON.stringify(menu)
console.log(json_string)
console.log(typeof(json_string))

// JSON => Object
let obj_json = JSON.parse(json_string)
console.log(obj_json)

let menus = [
    {name : '아메리카노', price : 3000},
    {name : '블랙 티', price : 4000},
    {name : '밀크', price : 5000}
]

let menus_json = JSON.stringify(menus)
console.log(menus_json)
console.log(JSON.parse(menus_json))
JavaScript
복사

◦

JSON 데이터 양식

[
    {
        "name": "아메리카노",
        "price": 3000
    },
    {
        "name": "블랙 티",
        "price": 4000
    },
    {
        "name": "밀크",
        "price": 5000
    }
]
JavaScript
복사

•

문서객체 모델(DOM)

◦

<div>test</div> ⇒ object

◦

새로운 브라우저 window 생성, feature 속성 지정하면 새 창이 뜬다.

window.open('https://www.naver.com', 'newWin', 'width=300, height=400')
JavaScript
복사

•

브라우저 객체 모델

◦

window, location, navigator, history, screen, document

// 브라우저 주소창
console.log('check >>', location.href)

function gotoNaver() {
    location.href = 'https://www.naver.com'
}

window.onload = function(){
    console.log('onload : 페이지 로드 완료')
}
JavaScript
복사

◦

이벤트 연결

document.addEventListener('DOMContentLoaded', function(){
	    console.log('문서객체를 모두 읽고 나면 이벤트가 발생하고 콜백함수를 실행')
      let h1_el = document.getElementById('h1')                       
      console.log(h1_el.innerHTML)
})
JavaScript
복사

◦

캐스팅 : 문서객체 생성

// querySelector : css 선택자를 이용해서 캐스팅
const div_el = document.querySelector('div')'

// 텍스트 변경, 컬러, padding, margin, font-size
div_el.textContent = 'HEADER'
div_el.style.backgroundColor = 'yellow'            // 백그라운드 색상 변경됨 css는 background-color로 표기됨
div_el.style.color = 'blue'
div_el.style.padding = '20px'
div_el.style.fontSize = '32px'
JavaScript
복사

◦

여러개의 엘리먼트 캐스팅

const h3s = document.querySelectorAll('h3')
	    console.log(h3s)
	
	    h3s.forEach((item, index) => {
	        // item.textContent += index
	        item.innerHTML = item.innerHTML + ` <i>${index}</i>`
	        item.style.color = 'red'
})
JavaScript
복사

◦

속성 컨트롤

const a_el = document.querySelector('a')
let href_str = a_el.getAttribute('href')
console.log('href >>', href_str)
a_el.setAttribute('href', 'https://github.com')
console.log(a_el)

<body>

    <!-- <a href="https://www.naver.com">naver</a> -->

    <h3>header - 3</h3>
    <h3>header - 3</h3>
    <h3>header - 3</h3>

    <h1 id="h1" onclick="gotoNaver()"><span>페이지 이동</span></h1>
    <div><span>test</span></div>
</body>
JavaScript
복사

•

동적으로 태그 생성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js_dom3</title>
    <script>
        // load
        document.addEventListener('DOMContentLoaded', () => {
            // 1. 타깃(새롭게 위치할 위치) 엘리먼트
            const wrap = document.querySelector('#wrap')

            // 2. 새로운 엘리먼트 객체 생성
            const newEl = document.createElement('h2');

            //    속성, 스타일..
            newEl.textContent = '동적으로 생성한 h2 tag'
            newEl.style.textAlign = 'center'
            newEl.style.color = 'blue'
            newEl.style.backgroundColor = 'yellow'

            // 3. 타깃에 새로운 엘리먼트 추가
            wrap.appendChild(newEl)

            // 이미지 태그 생성
            const newImg = document.createElement('img')
            newImg.setAttribute('src', '/image/bonobono.jpg')
            wrap.appendChild(newImg)
        })
    </script>
</head>

<body>
    <!-- <h3>title</h3>
    <div id="wrap"></div> -->

    <h3>Menu</h3>
    <div id="wrap"></div>

</body>
</html>
JavaScript
복사

•

div > h3(상품명) > p(가격)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js_dom3</title>
    <style>
        #wrap {
            display: flex;
        }
        .box {
            border: 1px solid #aaa;
            width: 150px;
            height: 150px;
        }
    </style>
    <script>
        let menus = [
            {name: '아메리카노', price: 3000},
            {name: '아메리카노', price: 3000},
            {name: '아메리카노', price: 3000},
            {name: '아메리카노', price: 3000},
            {name: '아메리카노', price: 3000},
            {name: '블랙 티', price: 4000},
            {name: '밀크', price: 5000}
        ]

        // load
        document.addEventListener('DOMContentLoaded', () => {
            // menus 반복 해서 appendChild
            menus.forEach((item, index) => {
                // div > h3(상품명) > p(가격)
                const newDiv = document.createElement('div')
                newDiv.setAttribute('class', 'box')
                const newh3 = document.createElement('h3')
                newh3.textContent = item.name
                newDiv.appendChild(newh3)
                const newp = document.createElement('p')
                newp.textContent = `${item.price} 원`
                newDiv.appendChild(newp)
                wrap.appendChild(newDiv)
            })
        })
    </script>
</head>

<body>
    <h3>Menu</h3>
    <div id="wrap"></div>

</body>

</html>
JavaScript
복사

2024. 6. 19 - JavaScript

JavaScript

함수

객체

기타