20230322 dom 내용추가 내가만든 쿠키~ local storage

대제목

본문내용 삽입

 

 

중제목 1

//dom 내용 추가 document obj model

//우리가 사용하는 div p h1 태그들

//DOM트리라고한다.
//dom 트리구조 한번보자.

//DOM트리의 기본구조는 노드라고한다.

//문자를 태그사이에 넣어서 태그를 추가하는 방법

document.querySelector(".add_class").innerHTML = "<div>태그내용</div>";

// 노드에 추가하는방법

// div 태그를 생성하는 방법
// createElement태그 생성해주는 메소드
// create(태그명)
let _div = document.createElement("div");
// 여기까지는 생성해서 _div변수에 담았고
// 생성된 태그는 메모리 공간에있는것

console.log(_div);
// 생성한 태그에 내용을 넣고
_div.innerHTML = "<div>냐옹</div><p>으아</p>";
// _div.classList.add("new_tag");
// 태그를 추가하고싶은 위치에 추가를 해줘야 트리에 추가되어보인다.
// 원하는 위치에 추가 해주자
// 사용할 메소드가있는데

// append() 메소드
// 태그 추가
document.body.append(_div);
setTimeout(() => {
  document.querySelector(".add_class").append(_div);
}, 2000);

//append 테모스는 원하는 이치에 태그를 추가할수있따.
// 태그참조.apped(생성한태그) = 태그참조 태그의 내용으로 태그가 추가된다.

//innnerHTML : 문자로 내용이 들어가서 보안이 좀 취약해진다.
//apend : dom트리으 노드이기때문에 보안이좋다. 문제가없다. 태그작업을 세분화가능하다

// 태그의 내용 전부확인
console.log(_div.innerHTML);

//태그의 내용에서 문자만가져오고싶어

//innterText가 있어요
//태그 사이의 태그 내용 문자만 가져온다.

console.log(_div.innerText);

// button 태그 생성
let _button = document.createElement("button");
_button.innerHTML = "눌러봐";
document.body.append(_button);
document.querySelector(".add_class").append(_button); // 제일위로간다?

//태그를 만들고 우리가 사요하는것처럼 그대로 사용하면되고
// 내용을 추가해준다음 원하는위치에 태그를 넣어주면된다

_button.onclick = function () {
  // 태그를 제거해보자
  // _div.remove();
  // remove() 메소드가 _div태그를 제거한다.
  // 원하는 태그를 제거할수있다.
  // 태그의 자식태그도 제거할수있다.
  // 태그의 자식태그는 removechild 메소드를 사용
  //let _div2=document.querySelector('');
  console.log(_div);
  // document.body.removeChild(_div);
  // _div 태그를 body 내용에서 찾아서 제거해준다.
};
// onclick 이렇게 이벤트명으로 직접함수를 대입해서 추가하는방법
// 함수를 덮어씌운다
// 또 다른 방법이 하나 더있다.

// 이벤트를 구독시킨다.
// onclick = > on만 뺴면된다.
// onscroll => on만 빼고 scroll
// addEventListener 메소드의 매개변수로 "구독할 이벤트 이름"
// 두번째 매개변수로 실행시킬 함수.
_button.addEventListener("click", function () {
  console.log("나 클릭 구독중");
});
_button.addEventListener("click", function () {
  console.log("나 역시 구독중");
});

// addEventListener 메소드는 이벤트를 누적시킬수있다. 추가가 가능하다는 얘기
// onclick은 이벤트를 덮어쓴다.

_button.onclick = function () {
  console.log("나 onlick 이벤트");
};
console.log(_button.onclick);
_button.onclick = function () {
  console.log("나 onlick 이벤트2");
};
console.log(_button.onclick);

// 이벤트들 뭐있나?

// load - 페이지와 기타 요쇼들의 그릴 준비 로딩이 끝났을때
// on이 붙으면 어트리뷰트 방식
window.onload = function () {};
// load 이벤트 구속시켜놓고
// addEventListener("이벤트의 타입",함수의 내용)을사용해서
// 이벤트를 구독해놓는다.
window.addEventListener("load", function () {
  // load이벤트가 실행되면 내용실행
});

//onresize : 브라우저의 창크기가 바뀌면 실행되는 이벤트
window.onresize = function () {
  console.log("창사이즈 변환");
};

// window.addEventListener("resize",function(){

// })

//scroll : 사용자가 태그나 페이지에서 스크롤 했을때
//          스크롤 값이 없으면 동작하지앟는다

// 태그의 이벤트로 원하는 이벤트로 구족하면 태그에서 그 이벤트가 발생될때
// 실행된다

//scroll overflow scroll 넘어가는 부분에 스크롤을 건다

//우리가 생성한 태그에서 scroll 이벤트가 일어날때
_div.onscroll = function () {
  console.log("나 스크롤 되고있니?");
};

//여기는 body 태그에서 scroll 이벤트가 발생할때
document.body.onscroll = function () {};

//키보드 이벤트들

//onkeydown : 사용자가 키보드를 눌렀을때 누르자마자 (누르고 땐게아니라 누르자마자)
window.onkeydown = function () {
  //console.log(" 나 키보드 누르자마자 ");
};

// onkeyup :사용자가 키보드를 누르고 땠을때(누르고 있다가 키를 때는순간)
window.onkeyup = function () {
  //console.log("키보드를 누르다 땠어!");
};

//onkeypress : 키보드를 누르고 있을때 (누르고 있으면 계속실행)

window.onkeypress = function () {
  //console.log("키보드를 누르는중ㅇㅇ");
};
// onkeydown 하는순간 동작 할 기능하나
// 누르고있는동안 발생시킬 기능 onkeypress

//마우스 이벤트
//click : 사용자가 해당태그를 클릭했을때 발생하는 이벤트
// window.onclick = function(){
//     console.log("나 클릭");
// }

//dbclick 되었을때 실행되는 함수

window.ondblclick = function () {
  //console.log("더블클릭");
};

//mousedown : 마우스를 누르자마 실행되는 이벤트
window.onmousedown = function () {
  //console.log("마우스 키다운");
};

//onmouseup: 마우스를 누르다가 땠을때 발생하는이벤트
window.onmouseup = function () {
  //console.log("마우스 키업");
};

//down up
//마우스  키를 누르고 이동한뒤 키를 땠을때 좌표를 계산해서 동작해야한느 기능을
// 만들때 사용한다.

//mousemonev : 마우스가 이동되는동안
// 그태그에서 일어날때
// 즉 태그에는 이벤트 속성이 다들어가있다
window.onmousemove = function () {
  console.log("마우스 이동중입니다.");
};

// onmouseenter: 마우스를 태그위로 올려졋을때 실행되는 이벤트
// hover랑 비슷
document.querySelector(".box").onmouseenter = function () {
  console.log("마우스 올려짐.");
};

//mouseleave 마우스 태그위에서 나갈떄 실행되는이벤트
document.querySelector(".box").onmouseleave = function () {
  console.log("마우스 나갔어");
};
_box = document.querySelector(".box");

//개발할때 pc, 모바일 이렇게 웹을 만들텐데
// 모바일 환경에서 실행되는 이벤트
// 모바일 터치

//touchstart : 화면을 터치한순간
window.ontouchstart = function () {
  console.log("터치한순간");
};

//touchend: 터치하다 떄면
window.ontouchend = function () {
  console.log("터치 떔");
};

//toucmove: 화면을 터치하고이동할때
window.ontouchmove = function () {
  console.log("터치하고이동중");
};

//드래그 이벤트

// 이벤트를 좀알아봣는데.
// 이벤트가 실행될때 매개변수로 해당 이벤ㅌ의 내용이 전돨되빈다.

_box.onclick = function (e) {
  // 이벤트의 내용들 이벤트가 실행되면 이벤트의 내용이
  //값으로 넘어온다.

  console.log(e);
  //해당 이벤트가 일어난 타겟
  // 지금은 winddow에 click 이벤트가 일어나면 실행되는
  //기능을 실행시켰고
  // 클릭된 태그를 가져온다
  //event.target의 클릭된 태그를 가지고온다.;
  console.log(e.target);
};

window.onmousemove = function (e) {
  // 타입이 뭐지?
  console.log(e.type);
  //해당 이벤트 일어나면 마우스의 좌표 x값
  //좌표값은 픽셀단위다.
  // 0~브라우저 너비크기
  //console.log(e.pageX);
  // 이벤트 발생시 마우스 좌표 y값
  // 0 ~ 브라우저의 높이
  //console.log(e.pageY);
};

// 키보드 입력
window.onkeydown = function (e) {
  // e.keyCode
  console.log(e.keyCode);
  // ascii 코드: 숫자로 표현된다
  // a를 입력하면
  if (e.keyCode == 65) {
    console.log("a를 입력받았따.");
  }
};

// 기본동작을 취소하는 방법


//기본동작을 취소하는방법
let _button2 = document.querySelector(".btn_class");
_button2.onclick=function(e)
{
    //기본 동작이 제거된다.
    //브라우저 상에서 기본동작되는 기능을 제거해줄수있다.
    e.preventDefault();
}

 

 

중제목 2

 //null 값을 개발자가 사용하는 특수값
    //값을 비워놨다고 알려줌
    let _target=null;

    // ondragstart : 드래그가 시작되었을때
    document.ondragstart= function(e){
        if(e.target.classList.contains("item"))
        {
            console.log(e.target);
            // 전역공간에 담아놓고 드래그할 태그를
            _target=e.target;
            //e.target.style 태그의 스타일값을 추가할수있다.
            //e.target.style 안에 적용시킬 스타일의 키값에 스타일 값을 추가해주면된다.
            console.log(e.target.style);
            // css 에서 작성하던 이름과는 좀 다르다 카멜이다.
            // css 에서는 background- color ->  backgroundColor
            // - 하이픈 뒤 한자만 대문자로 구분해주면된다.
            e.target.style.backgroundColor="red";
        }

    }
    // ondragend : 드래그 끝났을때
    document.ondragend = function(e)
    {
        // 나 놔줘 비워줘
        _target= null;
        //e.target 에 item가 있는 태그였으면
        if(e.target.classList.contains("item")){
            e.target.style.backgroundColor= "aqua";
        }

    }

    //ondragenter : 드래고 하고 태그의 위에 올려졌을때
    document.ondragenter = function(e)
    {
      
        // e.target이 box 클래스를 가지고있고 _target이 비어있지않을때
        if(e.target.classList.contains('box') && _target !==null)
        {
            e.target.style.backgroundColor="blue"
        }
    }
   
    // ondragleave : 드래그하다가 태그위에서 빠져나갔을때
    document.ondragleave  =function(e)
    {
        if(e.target.classList.contains('box') && _target !==null)
        {
            e.target.style.backgroundColor="transparent";
        }
    }
   
    //ondragover : 드롭하고 대상이 드롭가능한지 여부를 설정해준다.

    document.ondragover=function(e)
    { 
        if(e.target.classList.contains("box")&& _target !== null)
        {
            //preventDefault : 기본동작을 업애준다. 브라우저에서 기본적으로 동작하는 
                        //      기능을제거해준다.
            e.preventDefault();
            // from 태그쓰다가 새로고침되는 현상을 본친구가있다.
            // 새로고침되는 현상같은 기본동작을 제거해주는 역할
        }
    }

    // ondrop : 드래그 하다가 마우스 버튼을때면 드롭
    document.ondrop = function(e){
        console.log("d");
        if(e.target.classList.contains("box")&& _target!==null)
        {   
            console.log("2");
            e.target.style.backgroundColor="transparent";
            //append원하는 위치에 태그르에 내용으로 태그를 이동시켲루수있다.
            e.target.append(_target);
        }
    }
    // document.ondrop = function(e)
    // {
    //     console.log("d");
    //     if(e.target.classList.contains("box")&& _target!==null)
    //     {   console.log("2");
    //         e.target.style.backgroundColor="transparent";
    //         //append원하는 위치에 태그르에 내용으로 태그를 이동시켲루수있다.
    //         e.target.append(_target);
    //     }
    // }

 

 

쿠키 세션 로컬스토리지

//쿠키, 세션, 로컬스토리지

//쿠키는 많이 들어봤을건데.

// 쿠키는 해당 pc에 남아았다.

//쿠키는 : 웹사이트를 방문하면 사용자의 pc에 기록할 간단한 데이터
//pc 저장해두어싿가 값을 호출해서사용할수있다
//브라우저가 종료되어도 남아있다

// 세션: 브라우저가 동작되는 동안에 남아있는 데이터 
// 상태같은 내용을 다룰때 사용한다 state? ex) 로그인이 되어있는 상태
// 브라우저가 동료되는 시점까지 유지된다.

//document 객체 안에있다.
console.log(document.cookie);

// 쿠키구조 

//쿠키구조
//키와 값이있다.
//문자열로 저장 하면된다.
// name: 쿠키의 이름 (키)
// value : 값
// time : 유효시간
function createCookie(name,value,time){
    // 처음 필요한거 쿠키의 지속 시간
    // 쿠키 유효기간 썩으면 못먹는당
    // 시간과 날짜 년도 정보를 제공해주는 객체 만들수가 있다.
    // 생성자로 구현이 가능하다. new 뭘생성해줘야하지?
    // Date 

    // 지금시간에 정보를 가지고있는 객체를만들어준다.
    let date= new Date();
    console.log(date);

    // 1시간이후에 제거하고싶어
    let day = 1;
    // getTime : 현재 시간 - 
    console.log(date.getTime()+day*24*60*60*1000);
    // 지금시간에서 + 얼마나 쿠키를 유지할지
    //추가해줄거임
    //쿠키가 제거될 시간을 구해서 
    // 값을 만들어놓고.
    // 만료시간

    // set get
    // set : 변경할때 네이밍으로 많이 사용된다.
    // get : 정보를 호출할때
    // 개체만들어서 정보를 가져온느경우 메소드는 get을 많이 쓰고 
    // set 
    // setTime 메소드
    date.setTime(date.getTime()+day*24*60*60*1000);

    //쿠키를 추가하는방법
    // 기본 규격
    //쿠키의명 = 값;exoires+만료일+";path=/"
    //path=/ 페이지의 경로에대한 설정 쿠키를 다루는경로
    // toUTCString 메소드는 날짜 시간표시방법을 변경해준다.
    console.log(date.toUTCString());
    document.cookie=name+"="+value+";expires"+date.toUTCString()+";path\/"
}
// createCookie("이벤트 팝업","true","");
createCookie("hello","worldc");
console.log(document.cookie);

function getCookie()
{
    let value=document.cookie.split("="); // 키와 값분리
    console.log(value);
    return value[1];
}


//쿠키함수를 작성해보자
// 정규식이 포함되기는 하는데 지금으 무사해도된다.

// 찾아서 작성하는 경우가 많다

function getCookie2(name)
{
    // amtch 메소드
    let value=cookie.match("(^|;)?"+ name+"");
    console.log(value);
    return
}

// 쿠키를 제거하는 함수 이 함수가 제일쉽다.
// 쿠키를 상하게만 하면된다. 날짜를 지나게
function deleteCookie(name){
    document.cookie = name + "=; expires=Thu, 01 jan 1999 00:00:10 GMT;";
}



// 로컬스토리지 
// 로컬스토리지: 브라우저에 데이터를 저장하는 방법들중 하나고,
// pc에 데이터가 저장되고
// 쿠키와 다른점 만료일이 없어.만료 기간이없다.

// 로컬스토리지 쉽다. 쿠키보다
// 브라우저에서 기능을 사용해야하니까 window 객체안에 있는 메소드를 사용
// getItem 메소드가 값을 호출할때 사용한다
// get이 붙었네?
// getItem() 메소드는 매개변수로 "키값" 
// window.localStorage.getItem();
//setItem  메소드는 값을 키와 함께 저장시켜준다.

//window.localStorage.setItem("user_id","su"); 

// let a=window.localStorage.getItem("user_id");

// console.log(a);

// 쿠키 , 로컬스토리지 이런 저장소에 민감한 값을 저장하면안된다.
// 보안이슈

// 오늘도 내용도 어려운게 정상이기때문에 
//노오력합시다.