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
복사