// createElement(엘리먼트) : 태그 element 생성 후 변수에 할당
const divEl = document.createElement('div') // <div></div>

// classList.add(클래스명) : class 추가 (classList.remove()로 class를 지울 수도 있다.)
// + id 및 기타 속성 추가 방법 : setAttribute(추가할 속성 명, 들어갈 값)
divEl.classList.add('tweet') // <div class='tweet'></div>

// querySelector : 자식요소를 붙여줄 부모요소를 선택
let body = document.querySelector('body');

const hiLiEl = document.createElement('li') // <li></li>
hiLiEl.classList.add('hi') // <li class='hi'></li>

// textContent = '입력할 텍스트' or textContent = 변수의값
hiLiEl.textContent = 'Hello' // <li class='hi'>Hello<li>
// textContent로 특정 변수를 담아주고 싶은 경우 : (ex input 값)
// let input = document.querySelector('#input');
// hiLiEl.textContent = input.value 

const domLiEl = document.createElement('li') // <li></li>
domLiEl.classList.add('dom') // <li class='hi'></li>

domLiEl.textContent = 'DOM' // <li class='hi'>DOM<li>

// 현재 DOM을 활용하여 JS로 다음과 같은 구조를 만들었다. 
// (아직 append 전이므로 화면에 표시는 안된다.)
// <div class='tweet'>
//     <li class='hi'>Hello<li>  
//     <li class='dom'>DOM<li>  
// </div> 

// 부모요소.append(자식요소) / 부모요소.appendChild(자식요소) : 부모요소 마지막에 자식 요소를 붙인다.
body.append(divEl); // html에 div 요소 추가
divEl.append(hiLiEl); // html에 li.hi 요소 추가
divEl.append(domLiEl); // html에 li.dom 요소 추가

// [유효성 검증 함수]: n개의 글자 이상
function moreThanLength(str, n) {
  return str.length >= n;
}

// [유효성 검증 함수]: 영어 또는 숫자만 가능
function onlyNumberAndEnglish(str) {
  return /^[A-Za-z][A-Za-z0-9]*$/.test(str);
}

// [유효성 검증 함수]: 최소 8자 이상하면서, 알파벳과 숫자 및 특수문자(@$!%*#?&) 는 하나 이상 포함
function strongPassword(str) {
  return /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/.test(str);
}

let validFunction = function (str) {
    if (moreThanLength(str)) {
        return console.log('유효성 검증 통과')
    } else {
        return console.log('유효성 검증 실패')
    }
}

요소.이벤트 = 함수; 
// 함수에 ()를 넣으면 즉시 실행되므로 ()를 넣지않는다.

// querySelector로 요소를 지정
const buttonEl = document.querySelector('button');

// 연결할 function
let alertF = function () {
    alert('event에 function이 정상적으로 연결되었습니다.')
}

// 요소에 이벤트 연결
buttonEl.onclick = alertF;
//  button을 클릭했을 때 alertF 함수 실행

요소.addEventListener('이벤트', 함수명);
// 이벤트에서는 on을 제외한다. (ex onclick => click)

const buttonEl = document.querySelector('button');

function alertF1() {
  alert('event에 function1이 정상적으로 연결되었습니다.');
}

function alertF2() {
  alert('event에 function2가 정상적으로 연결되었습니다.');
}

// 이벤트 연결
buttonEl.addEventListener('click', alertF1); 
// 또 하나의 이벤트 연결
buttonEl.addEventListener('click', alertF2); 
// 연결할 이벤트 중 하나 제거
buttonEl.removeEventListener('click', alertF1); 

// 클릭 
onclick : 객체를 클릭했을 때
ondblclick : 더블 클릭할 때
onmouseover : 마우스가 객체 위에 올라왔을 때
onmouseout : 마우스가 객체 바깥으로 나갔을 때
onfocus : 객체에 focus가 되었을 때 (=input/textArea 등에서 마우스로 클릭한 상태)
onblur : 객체가 focus를 잃었을 때(=마우스가 클릭한 곳 밖을 클릭했을 때)
onchange : 객체의 내용이 바뀌고 focus를 잃었을 때(=마우스가 클릭한 곳 밖을 클릭했을 때)
onreset : Reset 버튼을 눌렀을 때
onscroll : 스크롤바를 조작할 때 
onsubmit : 폼이 전송될 때

// 키보드
onkeydown : 키를 눌렀을 때
onkeypress : 키를 누르고 있을 때
onkeyup : 키를 눌렀다 뗐을 때

// 기타 
onresize : 객체의 크기가 바뀌었을 때
onload : 문서나 객체가 로딩되었을 때

// addEventListener에서 사용할 때는 on을 제외.

// syntax
배열.forEach(콜백함수(시작 값[, 인덱스[, 배열]])[, thisArg])
// https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

// ex
const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));
// a
// b
// c

let arrDate = [ { name: 'lee', job: 'front' }, { name: 'kim', job: 'back' } ]

let createEl = function(name, job) {
    // 위에서 작성한 DOM 생성 코드. 변하는 값(ex textContent)을 파라미터로 지정
}

arrDate.forEach(createEl);

// 1. DOM 생성 함수 작성
let domFunction = function () {
    // DOM 생성 코드
}

// 2. 검증 함수 작성
let validFunction = function (파라미터) {
    // 검증 코드
    return true or false
}

// 3. DOM 생성 함수와 검증 함수를 합쳐 고차 함수로 만들어줌? 
// 코플릿에서도 내가 이걸 못함. 함수 표현식이 아닌 함수 선언식으로 표현?
// 파라미터와 인자에 무엇을 넣어야할지 모르곘음.
let clickFunction = function () {
    domFunction();
    if (validFunction) {
        return 성공문 실행;
    } else {
        실패문 실행
    }
}

// 4. 특정 요소에 고차 함수를 이벤트리스너로 연결
요소.onclick = clickFunction;