응용 ) 1
var arr = [ //5개의 객체 정보를 배열화
{
quote : "아이들은 누구나 예술가이다.",
author : "피카소"
},
{
quote : "내면의 목소리는 들리지 않게 된다.",
author : "반 고흐"
},
{
quote : "완벽을 두려워하지 말라",
author : "달리"
},
{
quote : "영감이 오는 것을 기다리고 있을 수는 없다.",
author : "런던"
},
{
quote : "의욕만 있으면 이런 노력만으로도 얼마든지 많은 생각을 찾을 수 있다.",
author : "수스"
},
];
//배열에 접근해는 방법+객체에 접근하는 공식 응용
//console.log(arr[0].author);
//console.log(arr[0].quote);
var quote = document.getElementById('quote');
var author = document.getElementById('author');
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
var random = Math.floor(Math.random() * arr.length);
quote.textContent = arr[random].quote;
author.textContent = arr[random].author;});
//주사위게임 응용 배열안에 있는 객체정보를 접근하는 방법을 실
응용 ) 2
// 인픗테그를 이용해서 사용자가 인풋테그에 입력한 정보를 화면에 출력하도록하는 것
// 인풋안에 글자가 있으면 출력 없으면 에로 알람창을 설정하도록
// css.class show를 이용해서 입력값을 넣으면show가 없어지는 기능도 삽입
var form = document.getElementById('form');
var input = document.getElementById('msg');
//js에서 css처럼 선택자 접근하는 방법 querySelector메서드 <테그는 테그명 ,
//아이디 =#아이디값 . 클래스 = . 클래스 클라이언트 js접근법
var feedback = document.querySelector('.feedback');
var txt = document.getElementById('txt');
//html btn-submit>테이터를 보낼때의 버튼 타입 > 이벤트 동작이 됨
// 데이터를 전송하면서 브라우저가 자동으로 새로고침을 하기 떄문에, 제출이 잠깐 나타났다 사라짐
//이런 테그의 속성을 js로 제어를 해된다. >function(e) /e.preventDefault();
form.addEventListener('submit', function(e) {
//테그의 속성을 제어하는 코드
e.preventDefault(); //본연 태그의 기능을 정지함.
//console.log(e);
//console.log('제출');
//z클릭을 할때마다 msg의 값을 가지고 오는 것 2가지 방법
//1다이렉트로 가저오는 법
//1
var msg = document.getElementById('msg').value;
//2 밖에 변수를 형성하고
//var msg = input.value;
console.log(msg);
//빈 문자열을 인지 못하게 하는 코드
//if문을 활용해서 글자가 있는 경우와 없는 경우는 나눠서 분기 처리
// 글자가 있다 참/ 글자가 없다 거짓
if(msg){
//console.log('참');
txt.textContent = msg;
//reset이라는 메서드 - 해당되는 태그내에 있는 태그의 텍스트 내용을 초기화
form.reset();
} else {
//console.log('거짓');
// 특정영역에 클래스를 추가/삭제 할때 쓰는 프로펄티/메서드 classList.add/remove()
// display.none이 클래스 show가 작동이 되면서 block처리 되면서 보임.
feedback.classList.add('show');
setTimeout(function() {
feedback.classList.remove('show');
}, 2000);
}})
// 왜 콘솔에 제대로 작동이 안되는 지 찾았는데...html에 제대로 js랑 연결을 안했던 거였음..
//
// 시간이 지날때 특정인수/함수를 호출하는 메서드( 익명합수.콜백함수, 시간)
/*
setTimeout(function(){
console.log("2초후에 실행")
},2000)*/
//1000 = 1초