대제목
본문내용 삽입
중제목 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);
// 쿠키 , 로컬스토리지 이런 저장소에 민감한 값을 저장하면안된다.
// 보안이슈
// 오늘도 내용도 어려운게 정상이기때문에
//노오력합시다.
'frontend > html' 카테고리의 다른 글
| 202302 html 학습목록 (0) | 2023.07.19 |
|---|