[Frontend] TIL August 3rd week
210816
함수(저번 주 내용에서 계속)
retrun문
다른 실행문을 수행하지 않고 함수를 마침. 함수 호출문에 값을 반환.
반환하지 않고 종료해야하는 경우 return false;
재귀함수
함수안에 실행문에서 자기자신함수를 스스로 호출하는 함수
지역변수 && 전역변수
지역변수 - 변수가 정의되어있는 함수 내에서만 쓴다.(우선호출),
함수내에서 선언하며 반드시 앞에 var키워드를 붙여 선언한다.
전역변수 - 현재페이지 내 자바스크립트 어디서든 사용가능
함수 바깥에 선언하거나 함수내에서 var없이 선언한다.
body 먼저 읽은 후 자바스크립트 코드 실행하기
랜덤 값 등 클릭할 때 마다 다르게 나오도록. 전체 코드를 아래 함수로 감싸줌.
window.onload = function(){
// enter JS code here ...
}
document.getElementById("id").value
input등에 입력한 값을 가져와서 사용할 수 있음
.innerHTML
해당 태그 안에 내용을 입력할 수 있음
<script type="text/javascript">
var myArea = document.getElemgetById("Area");
myArea.innerHTML = "입력값이 html에 입력됩니다.";
</script>
<body>
<div id="Area"> </div>
</body>
버튼을 눌렀을 때 전송하지 않고 종료하기
HTML
<form onsubmit="return function()">
JS
button.onsubmit = function(){return fucntion();}
변수.toFiexd(2)
다른 실행문을 수행하지 않고 함수를 마침. 함수 호출문에 값을 반환.
반환하지 않고 종료해야하는 경우 return false;함수안에 실행문에서 자기자신함수를 스스로 호출하는 함수지역변수 - 변수가 정의되어있는 함수 내에서만 쓴다.(우선호출),
함수내에서 선언하며 반드시 앞에 var키워드를 붙여 선언한다.
전역변수 - 현재페이지 내 자바스크립트 어디서든 사용가능
함수 바깥에 선언하거나 함수내에서 var없이 선언한다.랜덤 값 등 클릭할 때 마다 다르게 나오도록. 전체 코드를 아래 함수로 감싸줌.
window.onload = function(){
// enter JS code here ...
}input등에 입력한 값을 가져와서 사용할 수 있음해당 태그 안에 내용을 입력할 수 있음
<script type="text/javascript">
var myArea = document.getElemgetById("Area");
myArea.innerHTML = "입력값이 html에 입력됩니다.";
</script>
<body>
<div id="Area"> </div>
</body>HTML
<form onsubmit="return function()">
JS
button.onsubmit = function(){return fucntion();}소숫점 둘째 자리까지 표시
210817
input에 입력된 값 인자로 받아올 때 초기값이 들어오는 현상 해결방법
JS실행 후 input값을 변수를 통해 바로 읽어들이지 말고,
읽는 함수를 따로 만들어서 필요할 때(사용자가 button을 눌렀을 때 등)
호출하기
JS내장함수
eval() - 문자열을 자바스크립트 문장으로 변환(수식은 계산, 문자는 변수로)
parseInt() - 숫자를 정수로 변환
parseFloat() - 숫자를 실수로 반환
isNaN() - Not a Number의 약자로 숫자가 아닌 문자가 포함되면 true를 반환
isFinite() - 주어진 값이 유리수인지 아닌지 판단
Number() - 문자를 숫자형으로 반환
String() - 숫자를 문자형으로 반환
escape() - 문자를 16진수 아스키코드 값으로 반환
unescape() - escape()로 변환된 값을 다시 되돌려 반환
생성자함수
특정 속성, 메서드를 가진 객체(사용자정의)를 생성
function 함수명(매개변수1,매개변수2,매개변수3){ //생성자함수
this.속성1 = 매개변수1;
this.속성2 = 매개변수2;
this.속성3 = 매개변수3;
this.메서드1 = function(){실행문;}
}
var 객체명 = new 함수명(값1,값2,값3);//사용
210818
이벤트
onload 문서를 모두 불러오고 나서 실행
onunload 문서 종료할때 발생
ondbclick 더블클릭
onclick 클릭
onkeypress 키보드 눌렀을때
onkeydown 키보드 눌렀을때
onkeyup 키보드 누르고 땠을때
onmouseover 대상에 마우스를 올렸을때
onfocus 포커스 / onblur 포커스를 잃었을때
onmouseout 마우스가 벗어났을때
onsubmit 폼에서 submit 확인 버튼 눌렀을때
onreset 폼에서 reset취소버튼 눌렀을때
onchange 입력요소의 값이 바뀌고 포커스가 옮겨졌을때 발생
onmousemove 마우스 움직일때
onresize 브라우저 창을 조절할때마다 발생
onerror 문서나 이미지를 불러올때 에러가 나면 발생
onabort 문서를 불러오다가 중단되면 발생
이벤트 - 웹브라우저에서 일어나는 모든 행동들을 이벤트
이벤트핸들러 - 이벤트가 발생한 시점에서 함수를 호출하거나 스크립트를 실행하게 하는 요소
괄호 붙이면 자동실행, 안붙이면 이벤트 발생 시 실행
DOM(Document Object Model, 문서객체구조)
Dom Level 0 -
객체 하나와 이벤트 하나를 연결해서 작동,
한 객체에 동시에 같은 이벤트를 두번이상 적용 안됨. 마지막에 적용된 이벤트만 실행
아래 코드에서 중복된 동작이 실행안됨
function theFnc(){
alert("자바스크립트");
}
window.onload = function(){//실행안됨
var myBtn = document.getElementById("btn1");//button
myBtn.onclick = function(){theFnc();}
}
window.onload = function(){//실행됨
var myBtn = document.getElementById("btn2");//button
myBtn.onclick = function(){theFnc();}
}
Dom Level 2 - 한 객체에 같은 이벤트를 두 번 작동할 수 없는 Dom Level 0의 문제 해결
이벤트대상객체.addEventListener("이벤트명",함수명,false)
아래 두 줄을 추가
window.addEventListener("load",clickBtn1,false);
window.addEventListener("load",clickBtn2,false);//일반적인 사용
IE8이하를 고려하는 경우 아래 코드 추가
if(window.addEventListener){//표준방식 브라우저의 경우
표준 이벤트 등록 메서드;//2줄
}else if(window.attachEvent){//비표준방식 브라우저(IE8이하)일 경우
비표준 이벤트 등록 메서드;
이벤트 객체
이벤트 객체
- 이벤트 핸들러가 구동될때 생성되는 객체,
클릭 또는 키보드입력 등의 동작 자체를 의미.
특정 이벤트 핸들러를 구동하면, 함수의 매개변수에 이벤트객체가 자동으로 생성됨.
표준방식 브라우저는 이벤트객체 자동생성
비표준방식 브라우저는 IE전용(IE8.0) 이벤트객체인 window.event 강제생성.
선택대상.onclick = function(매개변수){
매개변수(이벤트객체).속성
}
document.onclick = function(e){//이벤트객체(e에 이벤트 객체가 들어감)
theEvent = e ? e : window.event;
console.log(theEvent.clientX);
keydown, keypress 이벤트객체 속성
altKey 알트키를 눌렀을 때 true값이 반환
shiftKey 시프트키를 눌렀을 때 true값이 반환
ctrlKey 컨트롤키를 눌렀을 때 true값이 반환
keyCode 입력된 문자키의 고유한 유니코드값을 반환
type 이벤트의 종류
click, mousemove, mouseover, mouseup, mousedown 이벤트객체 속성
clientX 현재문서기준 이벤트가 발생한 곳 x좌표(스크롤바 너비 계산 x)
clientY 현재문서기준 이벤트가 발생한 곳 y좌표(스크롤바 너비 계산 x)
screenX 모니터기준 이벤트가 발생한 곳 x좌표
screenY 모니터기준 이벤트가 발생한 곳 y좌표
pageX 현재문서기준 이벤트가 발생한 곳 x좌표(스크롤바 너비 계산 o)
pageY 현재문서기준 이벤트가 발생한 곳 y좌표(스크롤바 너비 계산 o)
target 이벤트가 발생한 대상 요소
button 마우스버튼(왼쪽/오른쪽/휠)의 클릭된 상태 체크
type 이벤트의 종류
브라우저객체
브라우저 객체 모델(BOM) - 브라우저 창에 포함된 모든 객체 요소들을 의미함.
최상위 객체 window 아래 존재.
브라우저 객체 종류
window - 최상위 객체, 새 창을 생성하는 역할
document - 문서객체, 하위 form, cookie, image
navigator - 브라우저에 대한 정보를 제공하는 객체
location - 위치(url)관련 정보를 제공하는 객체
screen - 스크린(모니터)에 대한 정보를 제공하는 객체
history - 인터넷방문기록에 대한 정보를 제공하는 객체
window - 최상위 객체, 새 창을 생성하는 역할
메소드 - window객체 생략가능
window.open("경로","창이름","옵션width,height,left,top스크린기준,scrollbars,
menubar,toolbar,location,status,resizeable - yes,no") - 새창으로 문서를 열때 사용
alert("문자") - 경고창 열때 사용
prompt("질문","기본응답")
confirm("질문") - 확인true/취소false
setTimeout("실행문","간격시간") - 해당 간격시간 뒤에 실행문을 한번만 수행
setInterval("실행문","간격시간") - 해당 간격시간 뒤에 실행문을 반복적으로 수행
ex)
//팝업창 열기
// window.open("popup.html","newbook1","width=300px,height=400px,left=200px,top=20px,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,resizeable=no")
// window.open("popup.html","newbook2","width=300px,height=400px,left=500px,top=20px,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,resizeable=no")
// window.open("popup.html","newbook3","width=300px,height=400px,left=800px,top=20px,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,resizeable=no")
//1초마다 바뀌는 이미지
// var banner = new Array("img1-31","img2-31","img3-31");
// var today = new Date();
// var snum = today.getSeconds();//0~59
// var iNum = snum % 3;//0,1,2
// document.write("<p><img src='images/" + banner[iNum] + ".jpg' alt='메인이미지' /></p>");
// setInterval("location.reload()",1000);//1초마다 새로고침
location객체
브라우저의 현재 url주소값에 대한 정보를 제공
속성
location.hash - 주소창에 url에서 #뒤에오는 문자열을 반환
location.host - 주소창에 url에서 도메인명을 반환
location.hostname - 주소창에 url에서 도메인명을 반환
location.href - 주소창에 url에서 전체정보를 반환
location.pathname - 주소창에 url에서 도메인명 다음에 오는 경로를 반환
location.port - 주소창에 url에서 포트번호를 반환
location.protocol - 주소창에 url에서 프로토콜을 반환
navigator객체
브라우저에 대한 정보를 제공
appCodeName - 브라우저의 코드명을 제공
appName - 브라우저의 이름을 제공
appVersion - 브라우저의 기본 버전과 실행중인 플랫폼 정보를 제공
userAgent - 브라우저의 전체적인 정보를 제공
screen객체
스크린(모니터)에 대한 속성을 제공
속성
availWidth - 사용가능한 스크린 가로 너비값 반환
availHeight - 사용가능한 스크린 세로 높이값 반환, 작업 표시줄을 제외한 높이값
availTop - 창이 위치할 수 있는 최상위의 위치값을 반환, 비IE계열 브라우저만 사용
availLeft - 창이 위치할 수 있는 가장 좌측의 위치값을 반환, 비IE계열 브라우저만 사용
210819
history객체
브라우저로 방문한 페이지들의 정보를 제공, '이전', '다음', 등의
페이지 이동을 위한 버튼을 만들 수 있다.
go(값) - 값만큼 다음 또는 이전페이지로 이동 go(1), go(-1)
back() - 이전페이지로 이동
forward() - 다음페이지로 이동
DOM(Document Object Model) - 문서객체
도식화
최상위 노드 node - html
요소 - 노드 node
노드 Node - 요소(Element)노드1, 속성노드2, 텍스트노드(공백문자포함) 3
선택자 -
원거리 선택자 -
id선택자 - 선택대상.getElementById("아이디명");
요소명 선택자 - 선택대상.getElementsByTagName("태그명"); //배열
근거리 선택자 - 특정 요소를 기준으로 상대적인 다른 요소를 선택할때
parentNode - 선택한 요소를 기준으로 부모요소 선택
childNodes - 선택한 요소 기준으로 자식 요소 선택
childeren - 선택한 요소 기준으로 자식 요소 선택
firstChild - 선택한 요소 기준으로 첫번째 자식요소 선택
lastChild - 선택한 요소 기준으로 마기막 자식요소 선택
previousSibling - 형제요소중 이전요소를 선택
nextSibling - 형제요소중 다음요소를 선택
tagName(속성) - 선택된 요소의 태그명을 반환
nodeValue(속성) - 선택된 요소의 텍스트를 반환
문서객체조작
새로운 요소를 생성, 추가, 삭제, 복제
메서드
생성 - createElement("요소명")
appendTextNode("텍스트") / createTextNode("텍스트")
추가 - 선택요소.appendChild(새요소) - 선택요소에 새로운 자식 요소를 추가
부모요소.insertBefore(새요소,자식요소) - 자식요소 앞에 새로운 자식요소 추가
교체 - 부모요소.replaceChild(새요소,자식요소) - 자식요소를 새요소로 덮어쓰기
삭제 - 부모요소.removeChild(자식요소) - 자식요소 삭제
복제 - 선택요소.cloneNode(true or false)
- 선택요소를 복제해서 true일 경우 하위요소까지 모두 복제
속성부여 - 선택요소.setAttribute("속성","값") - 선택요소에 해당 속성값 부여
210820
탭메뉴 만들기(전체적인 로직만 정리)
1.재료 ul, li, 하위ul 가져오기
2.하위ul 모두 안보이게(선택사항)
3.for문 사용 li하나하나 클릭했을 때
4.모든 하위ul은 안보이게, 내가 클릭한 li의 하위ul만 보이게
5.모든 이미지는 일반이미지, 내가 클릭한 li의 이미지 컬러로
JS실행 후 input값을 변수를 통해 바로 읽어들이지 말고,
읽는 함수를 따로 만들어서 필요할 때(사용자가 button을 눌렀을 때 등)
호출하기eval() - 문자열을 자바스크립트 문장으로 변환(수식은 계산, 문자는 변수로)
parseInt() - 숫자를 정수로 변환
parseFloat() - 숫자를 실수로 반환
isNaN() - Not a Number의 약자로 숫자가 아닌 문자가 포함되면 true를 반환
isFinite() - 주어진 값이 유리수인지 아닌지 판단
Number() - 문자를 숫자형으로 반환
String() - 숫자를 문자형으로 반환
escape() - 문자를 16진수 아스키코드 값으로 반환
unescape() - escape()로 변환된 값을 다시 되돌려 반환특정 속성, 메서드를 가진 객체(사용자정의)를 생성
function 함수명(매개변수1,매개변수2,매개변수3){ //생성자함수
this.속성1 = 매개변수1;
this.속성2 = 매개변수2;
this.속성3 = 매개변수3;
this.메서드1 = function(){실행문;}
}
var 객체명 = new 함수명(값1,값2,값3);//사용이벤트
onload 문서를 모두 불러오고 나서 실행
onunload 문서 종료할때 발생
ondbclick 더블클릭
onclick 클릭
onkeypress 키보드 눌렀을때
onkeydown 키보드 눌렀을때
onkeyup 키보드 누르고 땠을때
onmouseover 대상에 마우스를 올렸을때
onfocus 포커스 / onblur 포커스를 잃었을때
onmouseout 마우스가 벗어났을때
onsubmit 폼에서 submit 확인 버튼 눌렀을때
onreset 폼에서 reset취소버튼 눌렀을때
onchange 입력요소의 값이 바뀌고 포커스가 옮겨졌을때 발생
onmousemove 마우스 움직일때
onresize 브라우저 창을 조절할때마다 발생
onerror 문서나 이미지를 불러올때 에러가 나면 발생
onabort 문서를 불러오다가 중단되면 발생
이벤트 - 웹브라우저에서 일어나는 모든 행동들을 이벤트
이벤트핸들러 - 이벤트가 발생한 시점에서 함수를 호출하거나 스크립트를 실행하게 하는 요소
괄호 붙이면 자동실행, 안붙이면 이벤트 발생 시 실행DOM(Document Object Model, 문서객체구조)
Dom Level 0 -
객체 하나와 이벤트 하나를 연결해서 작동,
한 객체에 동시에 같은 이벤트를 두번이상 적용 안됨. 마지막에 적용된 이벤트만 실행
아래 코드에서 중복된 동작이 실행안됨
function theFnc(){
alert("자바스크립트");
}
window.onload = function(){//실행안됨
var myBtn = document.getElementById("btn1");//button
myBtn.onclick = function(){theFnc();}
}
window.onload = function(){//실행됨
var myBtn = document.getElementById("btn2");//button
myBtn.onclick = function(){theFnc();}
}
Dom Level 2 - 한 객체에 같은 이벤트를 두 번 작동할 수 없는 Dom Level 0의 문제 해결
이벤트대상객체.addEventListener("이벤트명",함수명,false)
아래 두 줄을 추가
window.addEventListener("load",clickBtn1,false);
window.addEventListener("load",clickBtn2,false);//일반적인 사용
IE8이하를 고려하는 경우 아래 코드 추가
if(window.addEventListener){//표준방식 브라우저의 경우
표준 이벤트 등록 메서드;//2줄
}else if(window.attachEvent){//비표준방식 브라우저(IE8이하)일 경우
비표준 이벤트 등록 메서드;이벤트 객체
이벤트 객체
- 이벤트 핸들러가 구동될때 생성되는 객체,
클릭 또는 키보드입력 등의 동작 자체를 의미.
특정 이벤트 핸들러를 구동하면, 함수의 매개변수에 이벤트객체가 자동으로 생성됨.
표준방식 브라우저는 이벤트객체 자동생성
비표준방식 브라우저는 IE전용(IE8.0) 이벤트객체인 window.event 강제생성.
선택대상.onclick = function(매개변수){
매개변수(이벤트객체).속성
}
document.onclick = function(e){//이벤트객체(e에 이벤트 객체가 들어감)
theEvent = e ? e : window.event;
console.log(theEvent.clientX);
keydown, keypress 이벤트객체 속성
altKey 알트키를 눌렀을 때 true값이 반환
shiftKey 시프트키를 눌렀을 때 true값이 반환
ctrlKey 컨트롤키를 눌렀을 때 true값이 반환
keyCode 입력된 문자키의 고유한 유니코드값을 반환
type 이벤트의 종류
click, mousemove, mouseover, mouseup, mousedown 이벤트객체 속성
clientX 현재문서기준 이벤트가 발생한 곳 x좌표(스크롤바 너비 계산 x)
clientY 현재문서기준 이벤트가 발생한 곳 y좌표(스크롤바 너비 계산 x)
screenX 모니터기준 이벤트가 발생한 곳 x좌표
screenY 모니터기준 이벤트가 발생한 곳 y좌표
pageX 현재문서기준 이벤트가 발생한 곳 x좌표(스크롤바 너비 계산 o)
pageY 현재문서기준 이벤트가 발생한 곳 y좌표(스크롤바 너비 계산 o)
target 이벤트가 발생한 대상 요소
button 마우스버튼(왼쪽/오른쪽/휠)의 클릭된 상태 체크
type 이벤트의 종류브라우저객체
브라우저 객체 모델(BOM) - 브라우저 창에 포함된 모든 객체 요소들을 의미함.
최상위 객체 window 아래 존재.
브라우저 객체 종류
window - 최상위 객체, 새 창을 생성하는 역할
document - 문서객체, 하위 form, cookie, image
navigator - 브라우저에 대한 정보를 제공하는 객체
location - 위치(url)관련 정보를 제공하는 객체
screen - 스크린(모니터)에 대한 정보를 제공하는 객체
history - 인터넷방문기록에 대한 정보를 제공하는 객체
window - 최상위 객체, 새 창을 생성하는 역할
메소드 - window객체 생략가능
window.open("경로","창이름","옵션width,height,left,top스크린기준,scrollbars,
menubar,toolbar,location,status,resizeable - yes,no") - 새창으로 문서를 열때 사용
alert("문자") - 경고창 열때 사용
prompt("질문","기본응답")
confirm("질문") - 확인true/취소false
setTimeout("실행문","간격시간") - 해당 간격시간 뒤에 실행문을 한번만 수행
setInterval("실행문","간격시간") - 해당 간격시간 뒤에 실행문을 반복적으로 수행
ex)
//팝업창 열기
// window.open("popup.html","newbook1","width=300px,height=400px,left=200px,top=20px,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,resizeable=no")
// window.open("popup.html","newbook2","width=300px,height=400px,left=500px,top=20px,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,resizeable=no")
// window.open("popup.html","newbook3","width=300px,height=400px,left=800px,top=20px,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,resizeable=no")
//1초마다 바뀌는 이미지
// var banner = new Array("img1-31","img2-31","img3-31");
// var today = new Date();
// var snum = today.getSeconds();//0~59
// var iNum = snum % 3;//0,1,2
// document.write("<p><img src='images/" + banner[iNum] + ".jpg' alt='메인이미지' /></p>");
// setInterval("location.reload()",1000);//1초마다 새로고침location객체
브라우저의 현재 url주소값에 대한 정보를 제공
속성
location.hash - 주소창에 url에서 #뒤에오는 문자열을 반환
location.host - 주소창에 url에서 도메인명을 반환
location.hostname - 주소창에 url에서 도메인명을 반환
location.href - 주소창에 url에서 전체정보를 반환
location.pathname - 주소창에 url에서 도메인명 다음에 오는 경로를 반환
location.port - 주소창에 url에서 포트번호를 반환
location.protocol - 주소창에 url에서 프로토콜을 반환navigator객체
브라우저에 대한 정보를 제공
appCodeName - 브라우저의 코드명을 제공
appName - 브라우저의 이름을 제공
appVersion - 브라우저의 기본 버전과 실행중인 플랫폼 정보를 제공
userAgent - 브라우저의 전체적인 정보를 제공screen객체
스크린(모니터)에 대한 속성을 제공
속성
availWidth - 사용가능한 스크린 가로 너비값 반환
availHeight - 사용가능한 스크린 세로 높이값 반환, 작업 표시줄을 제외한 높이값
availTop - 창이 위치할 수 있는 최상위의 위치값을 반환, 비IE계열 브라우저만 사용
availLeft - 창이 위치할 수 있는 가장 좌측의 위치값을 반환, 비IE계열 브라우저만 사용210819
history객체
브라우저로 방문한 페이지들의 정보를 제공, '이전', '다음', 등의
페이지 이동을 위한 버튼을 만들 수 있다.
go(값) - 값만큼 다음 또는 이전페이지로 이동 go(1), go(-1)
back() - 이전페이지로 이동
forward() - 다음페이지로 이동
DOM(Document Object Model) - 문서객체
도식화
최상위 노드 node - html
요소 - 노드 node
노드 Node - 요소(Element)노드1, 속성노드2, 텍스트노드(공백문자포함) 3
선택자 -
원거리 선택자 -
id선택자 - 선택대상.getElementById("아이디명");
요소명 선택자 - 선택대상.getElementsByTagName("태그명"); //배열
근거리 선택자 - 특정 요소를 기준으로 상대적인 다른 요소를 선택할때
parentNode - 선택한 요소를 기준으로 부모요소 선택
childNodes - 선택한 요소 기준으로 자식 요소 선택
childeren - 선택한 요소 기준으로 자식 요소 선택
firstChild - 선택한 요소 기준으로 첫번째 자식요소 선택
lastChild - 선택한 요소 기준으로 마기막 자식요소 선택
previousSibling - 형제요소중 이전요소를 선택
nextSibling - 형제요소중 다음요소를 선택
tagName(속성) - 선택된 요소의 태그명을 반환
nodeValue(속성) - 선택된 요소의 텍스트를 반환
문서객체조작
새로운 요소를 생성, 추가, 삭제, 복제
메서드
생성 - createElement("요소명")
appendTextNode("텍스트") / createTextNode("텍스트")
추가 - 선택요소.appendChild(새요소) - 선택요소에 새로운 자식 요소를 추가
부모요소.insertBefore(새요소,자식요소) - 자식요소 앞에 새로운 자식요소 추가
교체 - 부모요소.replaceChild(새요소,자식요소) - 자식요소를 새요소로 덮어쓰기
삭제 - 부모요소.removeChild(자식요소) - 자식요소 삭제
복제 - 선택요소.cloneNode(true or false)
- 선택요소를 복제해서 true일 경우 하위요소까지 모두 복제
속성부여 - 선택요소.setAttribute("속성","값") - 선택요소에 해당 속성값 부여
210820
탭메뉴 만들기(전체적인 로직만 정리)
1.재료 ul, li, 하위ul 가져오기
2.하위ul 모두 안보이게(선택사항)
3.for문 사용 li하나하나 클릭했을 때
4.모든 하위ul은 안보이게, 내가 클릭한 li의 하위ul만 보이게
5.모든 이미지는 일반이미지, 내가 클릭한 li의 이미지 컬러로
브라우저로 방문한 페이지들의 정보를 제공, '이전', '다음', 등의
페이지 이동을 위한 버튼을 만들 수 있다.
go(값) - 값만큼 다음 또는 이전페이지로 이동 go(1), go(-1)
back() - 이전페이지로 이동
forward() - 다음페이지로 이동도식화
최상위 노드 node - html
요소 - 노드 node
노드 Node - 요소(Element)노드1, 속성노드2, 텍스트노드(공백문자포함) 3
선택자 -
원거리 선택자 -
id선택자 - 선택대상.getElementById("아이디명");
요소명 선택자 - 선택대상.getElementsByTagName("태그명"); //배열
근거리 선택자 - 특정 요소를 기준으로 상대적인 다른 요소를 선택할때
parentNode - 선택한 요소를 기준으로 부모요소 선택
childNodes - 선택한 요소 기준으로 자식 요소 선택
childeren - 선택한 요소 기준으로 자식 요소 선택
firstChild - 선택한 요소 기준으로 첫번째 자식요소 선택
lastChild - 선택한 요소 기준으로 마기막 자식요소 선택
previousSibling - 형제요소중 이전요소를 선택
nextSibling - 형제요소중 다음요소를 선택
tagName(속성) - 선택된 요소의 태그명을 반환
nodeValue(속성) - 선택된 요소의 텍스트를 반환새로운 요소를 생성, 추가, 삭제, 복제
메서드
생성 - createElement("요소명")
appendTextNode("텍스트") / createTextNode("텍스트")
추가 - 선택요소.appendChild(새요소) - 선택요소에 새로운 자식 요소를 추가
부모요소.insertBefore(새요소,자식요소) - 자식요소 앞에 새로운 자식요소 추가
교체 - 부모요소.replaceChild(새요소,자식요소) - 자식요소를 새요소로 덮어쓰기
삭제 - 부모요소.removeChild(자식요소) - 자식요소 삭제
복제 - 선택요소.cloneNode(true or false)
- 선택요소를 복제해서 true일 경우 하위요소까지 모두 복제
속성부여 - 선택요소.setAttribute("속성","값") - 선택요소에 해당 속성값 부여탭메뉴 만들기(전체적인 로직만 정리)
1.재료 ul, li, 하위ul 가져오기
2.하위ul 모두 안보이게(선택사항)
3.for문 사용 li하나하나 클릭했을 때
4.모든 하위ul은 안보이게, 내가 클릭한 li의 하위ul만 보이게
5.모든 이미지는 일반이미지, 내가 클릭한 li의 이미지 컬러로피그마 기울이기 팁
프로젝트 랜딩페이지 디자인 완료 완성본만 기록
Author And Source
이 문제에 관하여([Frontend] TIL August 3rd week), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hyeonze/Frontend-TIL-August-3rd-week저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
