하나의 태그를 변수로 만들어서 js상에서 조작할 수 있다.
let _div = document.createElement("div");
이렇게 되면 _div라는 변수는 div태그가 저장된 주소를 가리키는 변수가 된다.
다양한 변화를 줄 수 있다.
_div.innerHTML = "<p>내용이</p><div>없냐</div>?";
_div.classList.add("new_tag");
이러면 _div가지고 있는 div태그 안에 innerHtml에서 입력한 문자및 태그와 classList로 추가한 클래스를 넣어진다.
document.body.append(_div);
body에 붙이자.
누가봐도 적용됐다.
주의)append 함수는 복붙이 아니라 이동이다. 즉, 원래 있던 태그는 사라지고 append한 부분으로 이동! 하는 것이다.
/ load=>페이지 기타 요소들의 그릴 준비 로딩이 끝날을 때
// on이 붙으면 어트리뷰트 방식
// load이벤트 구독
// addEventListener('이벤트의 타입',함수의 내용)을 사용해서
// 이벤트를 구독해놓는다.
window.addEventListener("load", function () {
// load이벤트가 실행되면 내용실헹
});
//onresize:브라우저의 창 크기가 바뀌면 실행되는 이벤트
window.addEventListener("resize", () => {});
// scroll 이벤트:사용자가 태그나 페이지에서 스크롤 했을 때
// 스크롤 값이 없으면 동작 하지 않아요.
// 태그의 이벤트로 원하는 이벤트를 구독하면 그 태그에서 그 이벤트가 발생할 때
// 실행된다.
// 여기는 우리가 생성한 태그에서 scroll 이벤트에 구독
_div.onscroll = () => {
// 스크롤 이벤트가 실행되면 우리가 추가할 기능
console.log("나 스크롤 되고있니?.");
};
// 여기는 body 태그에서 스크롤 이벤트가 발생할 때
document.body.addEventListener("scroll", () => {
console.log("나 스크롤 되고있니?.");
});
scroll,resize등등 여러 윈도우를 조작 했을 때 일어나는 이벤트 들이다.
// onkeydown:사용자가 키보드를 눌렀을 때
window.onkeydown = function () {
console.log("나 키보드 눌렀음");
};
// onkeyup: 사용자가 키보드를 누르고 땠을때
window.onkeyup = function () {
console.log("키보드를 똈음");
};
// onkeypress:키보드를 누르고 있을 때(누르고 있으면 계속 실행)
window.onkeypress=function(){
console.log('키보드를 누르고 있는 동안')
}
키보드 이벤트와 관련된 이벤트들이다.
onkeypress느 deprecated됐다.. 어차피 onkeydown으로 누르고 있을 때를 잡을 수 있어서 인 것 같다.
// 마우스 이벤트
// click:사용자가 해당 태그를 클릭했을 때 발생하는 이벤트
window.onclick=function(){
console.log('asd');
}
// dbclick:더블 클릭 했을 때 실행되는 함수
window.ondblclick=function(){
console.log('더블 asd')
}
//mousedown:마우스를 누르자 마자 실행되는 이벤트
window.onmousedown=function(){
console.log('마우스 키다운');
}
// mouseup:마우스를 누르다가 땠을 때 실행되는 이벤트
window.onmouseup=function(){
console.log('마우스 키 업')
}
// 마우스 키를 누르고 이동한 뒤 키를 뗐을 때
// 좌표로 계산해서 동작해야 하는 기능을 만들 때 사용합니다.
// mousemove: 마우스가 태그 위에서 이동 되는 동안
_div.onmousemove = function () {
console.log("마우스 이동");
};
let box = document.querySelector(".box");
// mouseenter:마우스를 태그위로 올려졌을때 실행되는 이벤트
// hover같네 ㅎㅎ
box.onmouseenter = function () {
console.log("마우스가 올려짐");
};
// mouseleave:마우스가 태그에서 위에서 빠져 나갔을 때 실행되는 이벤트
// hover 같네
box.onmouseleave = function () {
console.log("마우스가 나가짐");
};
// 기능을 hover처럼 추가 할 수 있겠구나.
// 개발할 때 pc, 모바일 이렇게 웹을 만들텐데
// 모바일 환경에서 실행되는 이벤트
// 모바일 터치
// touchstart:화면을 터치한 순간
window.ontouchstart = function () {
console.log("모바일 터치됐어");
};
// touchend:화면을 터치하다가 떼면
window.ontouchend = function () {
console.log("뗐다!");
};
//touchmove:화면을 터치하고 이동할 때.
window.ontouchmove = function () {
console.log("터치하고 이동중");
};
마우스 클릭,더블클릭,클릭후 이동,클릭후 뗐을 때, 터치했을 때, 터치하고 화면을 움직일때 등등 클릭과 관련된 이벤트들이다.
drag이벤트는 하나의 객체가 아닌 여러 객체가 필요하니 디자인을 좀 했다.
<style>
.container {
width: 800px;
height: 800px;
border: 1px solid;
display: flex;
flex-wrap: wrap;
}
.box {
width: 400px;
height: 400px;
border: 1px solid red;
box-sizing: border-box;
}
#item {
width: 100%;
height: 100%;
background-color: grey;
}
</style>
<div class="container">
<div class="box">
<!-- 드래그를 허용시켜주는 어트리뷰트 속성 true false로 설정하면 되는데 -->
<div id="item" class="item" draggable="true"></div>
</div>
<div class="box">
</div>
<div class="box"></div>
<div class="box"></div>
</div>
먼저 드래그가 시작됐을 때이다.
let _target = null;
// ondragstart:드래그가 시작될 때
document.ondragstart = function (e) {
// e.target에 item클래스가 있는 태그였으면
if (e.target.classList.contains("item")) {
console.log(e.target);
// 전역공간에 담아 놓고 드래그할 태그를
_target = e.target;
//e.target.style 태그의 스타일 값을 추가 할 수있다.
// e.target.style 안에 적용시킬 스타일의 키값에 스타일 value를 추가해주면된다.
// css에서 작성하던 이름과는 좀 달라요 카멜
e.target.style.backgroundColor = "red";
}
};
하나의 대상을 클릭후 드래그가 시작된다.
이 때 item이라는 클래스가 있다면 _target을 선택한 객체로 한다.
움직이는 순간 빨간색이 됐다.
다음은 끝났을 때이다. 드래그가 끝나면 색을 또 변경시키자
// ondragend
document.ondragend = function (e) {
// 드래그 끝났으니까 초기화
_target = null;
// e.target에 item클래스가 있는 태그였으면
if (e.target.classList.contains("item")) {
// 처음에 입혀줬던 색으로 다시 변경
e.target.style.backgroundColor = "grey";
}
};
원래 있던 회색으로 변경시켜줬다. 여기서 e.target은 당연히 item이 있는 태그, 즉 처음 드래그를 시작한 그 객체이다.
이제 영역침범을 해보자
// 드래그 하고 태그의 위에 올려졌을 때
document.ondragenter = function (e) {
// e.target이 box클래스를 가지고 있고 _target 이 비어있지 않을때
if (e.target.classList.contains("box") && _target !== null) {
e.target.style.backgroundColor = "silver";
}
};
영역을 침범하면 당연히 다른 div,즉 class가 box인 태그이다.
들어갔으면 나오자
// ondragleave:드래그 하다가 태그위에서 빠져나갔을 때
document.ondragleave=function(e){
if (e.target.classList.contains("box") && _target !== null) {
//배경을 파란색으로 변경
e.target.style.backgroundColor = "blue";
}
}
만약 다른 태그로 가서 드랍을 한다면? leave와 비슷해보이지만 leave는 드래그한 이미지가 다시 원래대로 돌아간다.마치 이미지가 원한은 곳에 드랍되듯이 자연스럽게 만들어보고 싶다.
그러기 위해선 일단 이미지가 다시 돌아가는 것을 막아줘야 한다.
// ondragover:drop 이 완료됐을 때 발생하는 이벤트가 ondragover 이벤트이다.
document.ondragover=function(e){
if (e.target.classList.contains("box") && _target !== null) {
// preventDefault:기본 동작을 없애준다. 브라우저에서 기본적으로 동작하는 기능을 제거해준다.
e.preventDefault();
// form 태그 쓰다가 새로고침되는 현상을 막아준다
}
}
drop이 완료됐을 때 e.preventDefault();로 이미지가 돌아가는 것을 막아주자
// ondrop:드래그 한다가 마우스 버튼을 떼면 드롭
document.ondrop = function (e) {
if (e.target.classList.contains("box") && _target !== null) {
e.target.style.backgroundColor = "transparent";
// 원하는 위치에 태그에 내용으로 태그를 이동시켜줄 수 있다.
e.target.append(_target)
}
};
원하는 곳에 태그를 떨구자 ㅎㅎ
성공적으로 드랍됐다.
HTTP 쿠키(HTTP cookie)란 하이퍼 텍스트의 기록서(HTTP)의 일종으로서 인터넷 사용자가 어떠한 웹사이트를 방문할 경우 사용자의 웹 브라우저를 통해 인터넷 사용자의 컴퓨터나 다른 기기에 설치되는 작은 기록 정보 파일을 일컫는다.[1] 쿠키, 웹 쿠키, 브라우저 쿠키라고도 한다. 이 기록 파일에 담긴 정보는 인터넷 사용자가 같은 웹사이트를 방문할 때마다 읽히고 수시로 새로운 정보로 바뀐다. 이 수단은 넷스케이프의 프로그램 개발자였던 루 몬툴리(Lou Montulli)가 고안한 뒤로 오늘날 많은 서버 및 웹사이트들이 브라우저의 신속성을 위해 즐겨 쓰고 있다.[2]
출처:wikipedia
사용자의 pc에 저장되어 있다 같은 사이트를 들어갈 때 쿠키에 담긴 정보를 이용해 사용자에게 적합한 응답을 내주는 것이다.
console.log(document.cookie);
쿠키는 이렇게 간단하게 불러올 수 있다. 물론 저장된 것이 없으니 null이 뜬다.
let date = new Date();
console.log(date);
현재시간이 ms단위로 출력된다.
쿠키의 기간을 1일로 하고 싶다면 하루를 ms단위로 바꿔주고 더해주면 된다.
date.setTime(date.getTime() + time * 24 * 60 * 60 * 1000);
그 후 UTC방식으로 포맷시켜주자
let currentTime=date.toUTCString()
이제 쿠키를 정해진 형식으로 (정규식)으로 넣자
document.cookie = name+"="+value+";expires"+date.toUTCString()+";path=/";
삭제는 만료기간을 고의로 바꿔주면 된다.
function deleteCookie(name){
document.cookie = name +"=; expires=Thu, 01 Jan 1999 00:00:10 GMT;";
}
로컬 스토리지 : 브라우저에 데이터를 저장하는 방법들중 하나고.
pc에 데이터가 저장되고, 쿠키와 세션과 다른점 만료일이 없어. 만료 기간이 없다.
브라우저에 저장하는 방법이다. key,value형태로 저장된다.
window.localStorage.setItem("user_id","soo");
let a = window.localStorage.getItem("user_id");
console.log(a); //soo
정말 간단하다.
리덕스를 사용했을 때 꽤 신세를 졌다.