정리노트
[javascript]
망고고래
2023. 11. 24. 17:28
javascript로 태그 추가시 순서
①태그 생성
②노드 연결(제일 하단의 부모부터)
③자기 속성 설정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
text-decoration: none;
}
div{
position: fixed;
left: 100px;
top: 10px;
width: 200px;
height: 200px;
background: #718c00;
text-align: center;
line-height: 200px;
}
div a{
color: white;
}
</style>
<script>
function createEle(){
var bt = document.getElementById('bt');
function popup(){
var div1 = document.createElement('div');
var a1 = document.createElement('a');
var txt1 = document.createTextNode('아이콕스');
a1.appendChild(txt1);
a1.setAttribute('href','http://icoxpublish.com');
a1.setAttribute('target','_blank');
a1.setAttribute('title','새창');
div1.appendChild(a1);
document.body.appendChild(div1);
}
bt.onclick = popup;
}
addEventListener('load',createEle);
</script>
</head>
<body>
<button id="bt">요소 생성</button>
</body>
</html>
innerHTML: 문자 방식으로 요소 생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
position: fixed;
left: 0px;
right: 0px;
width: 200px;
height: 200px;
background: #718c00;
}
.m1{
background: #fff;
}
</style>
<script>
function createEle(){
var content = document.getElementById('content');
content.innerHTML = '<p class="m1">자바스크립트</p>';
}
addEventListener('load',createEle)
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
응용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="appendchild2.css">
</head>
<body>
<section>
<div id="container">
<h1>참가 신청</h1>
<form action="">
<input type="text" id="userName" placeholder="이름" required autocomplete="off">
<button onclick="newRegister(); return false;">신청</button>
</form>
<br>
<div id="nameList"></div>
</div>
</section>
<script src="appendchild2.js"></script>
</body>
</html>
function newRegister(){
var newP = document.createElement('p');
var userName = document.querySelector('#userName');
var newText = document.createTextNode(userName.value);
newP.appendChild(newText);
var delBttn = document.createElement('span');
var delTxt = document.createTextNode('X');
delBttn.setAttribute('class','del');
delBttn.appendChild(delTxt);
newP.appendChild(delBttn);
var nameList = document.querySelector('#nameList');
nameList.insertBefore(newP, nameList.childNodes[0]);
userName.value = '';
//초기화
var removeBttns = document.querySelectorAll('.del');
for(var i = 0; i<removeBttns.length; i++){
removeBttns[i].addEventListener("click",function(){
if(this.parentNode.parentNode)
{
this.parentNode.parentNode.removeChild(this.parentNode);
}
})
}
}
스타일 변경: 요소.style.속성='속성값'
*margin-top: -기호 없이 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
var content = document.getElementById('content');
content.style.width = '200px';
content.style.height = '200px';
content.style.border = '4px solid #718c00';
content.style.textAlign = 'center';
content.style.lineHeight = '200px';
}
</script>
</head>
<body>
<div id="content">내용</div>
</body>
</html>
form의 name으로 form 객체 선택 가능
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
var frm1 = document.frm1;
var frm2 = document.frm2;
console.log("kkkk"+document.forms[1].tagName);
// console 출력 방법: tagName, 클래스 등
console.log(frm1.search.placeholder);
console.log(frm2.subject.placeholder);
console.log(frm2.credit.placeholder);
console.log(document.forms[0].elements[0].placeholder);
console.log(document.forms[1][1].placeholder);
// 2차원 배열: form이 행, form 내의 입력요소가 열
console.log(document.forms['frm1'].elements['search'].placeholder);
console.log(document.forms['frm2']['subject'].placeholder);
}
</script>
</head>
<body>
<form action="#" name="frm1">
<input type="search" name="search" placeholder="검색어입력">
<input type="submit" value="확인">
</form>
<form action="#" name="frm2">
<input type="text" name="subject" placeholder="과목입력">
<input type="password" name="credit" placeholder="학점입력">
<input type="submit" value="확인">
</form>
</body>
</html>
| form 프로퍼티/메서드 | 설명 및 특징 |
| value | input, textarea 등의 value값을 반환합니다. |
| checked | checkbox나 radio가 체크되어있으면 true, 아니면 false |
| disabled | 요소가 활성화되면 false, 비활성화되면 true |
| defaultValue | 초기 설정값 반환 |
| length | 요소의 개수 반환 |
| focus() | 요소에 포커스를 맞춤 |
| blur() | 요소에서 포커스를 없앰 |
| submit() | form의 요소 값 전송 |
| reset() | form의 요소 값 리셋 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
var login = document.login;
login.onsubmit = function(){
if(!login.id.value){
alert('아이디를 입력해주세요');
login.id.focus();
return false;
}
if(!login.pw.value){
alert('비밀번호를 입력해주세요');
login.pw.focus();
return false;
}
}
}
</script>
</head>
<body>
<form action="#" method="post" name="login">
<div>
<label for="id">아이디</label>
<input type="text" name="id" id="id">
</div>
<div>
<label for="pw">비밀번호</label>
<input type="password" name="pw" id="pw">
</div>
<div>
<input type="submit" value="확인">
</div>
</form>
</body>
</html>
HTML/CSS/JavaScript 활용 연습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Color Flipper</title>
<!-- styles -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<nav>
<div class="nav-center">
<h4>color flipper</h4>
<ul class="nav-links">
<li><a href="index.html">simple</a></li>
<li><a href="hex.html">hex</a></li>
</ul>
</div>
</nav>
<main>
<div class="container">
<h2>background color : <span class="color">#f1f5f8</span></h2>
<button class="btn btn-hero" id="btn">click me</button>
</div>
</main>
<!-- javascript -->
<script src="app.js"></script>
</body>
</html>
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
/* 부가설정 */
font-family: "Roboto", sans-serif;
font-size: 20px;
}
nav{
background: white;
/* nav height 설정
1. 내용+padding
2. 100px/150px 고정<많이 사용됨 */
height: 100px;
}
.nav-center{
height: 100%;
width: 60vw;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
h4{
color: cornflowerblue;
margin-left: 30px;
}
ul{
width: 10%;
display: flex;
justify-content: space-between;
margin-right: 30px;
}
li>a{
color: black;
padding-left: 10px;
transition: all 500ms;
}
nav a:hover{
color: red;
}
main{
text-align: center;
}
div.container{
width: 100vw;
}
.container h2{
background-color: black;
color: white;
padding: 20px;
margin-bottom: 20px;
}
.btn{
background: transparent;
color: black;
padding: 10px 20px;
border-radius: 10px;
cursor: pointer;
}
var colors = ["green", "red", "rgba(133, 122, 200)", "#f15025", "cornflowerblue"];
var btn = document.getElementById("btn");
var color = document.querySelector('.color');
btn.addEventListener("click", function(){
var randomNumber = getRandomNumber();
// console.log(randomNumber);
document.body.style.backgroundColor = colors[randomNumber];
color.textContent = colors[randomNumber];
});
function getRandomNumber(){
return Math.floor(Math.random() * colors.length);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Slider</title>
<!-- styles -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="slider-container">
<div class="slide">
<img src="./img-1.jpeg" class="slide-img" alt="" />
<h1>1</h1>
</div>
<div class="slide">
<h1>2</h1>
</div>
<div class="slide">
<h1>3</h1>
</div>
<div class="slide">
<div>
<img src="./person-1.jpeg" class="person-img" alt="" />
<h4>susan doe</h4>
<h1>4</h1>
</div>
</div>
</div>
<div class="btn-container">
<button type="button" class="prevBtn">
prev
</button>
<button type="button" class="nextBtn">
next
</button>
</div>
<!-- javascript -->
<script src="app.js"></script>
</body>
</html>
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
/* 부가설정 */
font-family: "Roboto", sans-serif;
font-size: 20px;
line-height: 1.5;
}
h1,h2,h3,h4{
line-height: 1.25;
margin-bottom: 0.75rem;
}
h1{
font-size: 3rem;
}
h2{
font-size: 2rem;
}
h3{
font-size: 1.25rem;
}
h4{
font-size: 0.875rem;
}
p{
margin-bottom: 1.25rem;
}
button{
text-transform: uppercase;
background: transparent;
padding: 0.375rem 0.75rem;
display: inline-block;
font-size: 0.875rem;
border: 2px solid black;
cursor: pointer;
}
/* slider */
.slider-container{
border: 5px solid #49a6e9;
width: 80vw;
margin: 0 auto;
height: 40vh;
max-width: 80rem;
border-radius: 0.5rem;
overflow: hidden;
margin-top: 4rem;
position: relative;
}
.slide{
/* 부모 속성 */
text-align: center;
/* place-items: center; */
/* 자신 속성 */
position: absolute;
width: 100%;
height: 100%;
background: hsl(205, 90%, 88%);
color: white;
transition: all 0.25s ease-in-out;
}
.slide img{
height: 100%;
/* object-fit: cover; */
}
.slide h1{
font-size: 5rem;
}
.person-img{
border-radius: 50%;
width: 6rem;
height: 6rem;
margin: 0 auto;
margin-bottom: 1rem;
}
.slide:nth-child(1) h1{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.slide:nth-child(3){
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url("./img-2.jpeg") center/cover no-repeat;
}
.btn-container{
display: flex;
justify-content: center;
margin-top: 0.75rem;
}
.prevBtn,.nextBtn{
background: transparent;
border-color: transparent;
font-size: 1.75rem;
cursor: pointer;
margin: 0 0.25rem;
text-transform: capitalize;
letter-spacing: 2px;
color: hsl(210, 22%, 49%);
}
.prevBtn:hover,
.nextBtn:hover {
color: hsl(209, 34%, 30%);
}
var slides = document.querySelectorAll(".slide");
var nextBtn = document.querySelector(".nextBtn");
var prevBtn = document.querySelector(".prevBtn");
slides.forEach(function(slide,index){
slide.style.left = `${index * 100}%`;
// slide.style.left = '${index*100}%'; $(el구문)에는 ''x, ``o
})
//슬라이드를 왼쪽으로 100% 단위로 배치
// css에 absolute로 지정되어있음
// slide: 임의로 지정한 변수명. slides 배열 안의 요소 하나
// ${}: 변수 표시 ${index*100}
let counter = 0;
nextBtn.addEventListener("click",function(){
counter++;
carousel();
// counter를 1씩 더하고 carousel() 호출하는 이벤트리스너 설정
});
function carousel(){
if(counter>0){
prevBtn.style.display="block";
}else{
prevBtn.style.display="none";
}
// counter가 1보다 크면 이전 버튼을 보이게 함
slides.forEach(function(slide){
slide.style.transform = `translateX(-${counter * 100}%)`;
});
}
prevBtn.style.display="none";
수업에서 만든 코드를 수정해 마지막 슬라이드에서 Next를 누르면 1번 슬라이드로 돌아가도록 만들었다.
function carousel(){
if(counter>0){
prevBtn.style.display="block";
}else{
prevBtn.style.display="none";
}
// counter가 1보다 크면 이전 버튼을 보이게 함
if(counter<4){
slides.forEach(function(slide){
slide.style.transform = `translateX(-${counter * 100}%)`;
} );
}else{
// document.querySelector('.slide').style.transform = `translateX(0)`;
//document.querySelector('.slide').style.left=0;
slides.forEach(function(slide){
slide.style.transform = `translateX(0)`;
);
counter = 0;
}
}
else문에서 주석처리해둔 코드는 마지막 슬라이드에서 Next를 누르면 1번 슬라이드로 돌아가지 않고, 한 번 더 누르면 2번 슬라이드로 이동한다.
console창에도 별다른 오류 메시지가 뜨지 않았다.
function carousel(){
if(counter>0){
prevBtn.style.display="block";
}else{
prevBtn.style.display="none";
}
// counter가 1보다 크면 이전 버튼을 보이게 함
if(counter>=4){
counter = 0;
}
slides.forEach(function(slide){
slide.style.transform = `translateX(-${counter * 100}%)`;
});
}
실무에서는 forEach를 많이 사용한다고 한다.
그래서 counter가 4가 되면 먼저 counter를 0으로 만들고 forEach를 실행하도록 수정했다.
코드가 훨씬 간단해졌다.
하는 김에 1번 슬라이드에서 Prev 버튼이 보이게 하고 거기서 Prev 버튼을 누르면 4번 슬라이드로 가게 만들었다.
function carousel(){
if(counter>=4){
counter = 0;
}
else if(counter<0)
{
counter = 3;
}
slides.forEach(function(slide){
slide.style.transform = `translateX(-${counter * 100}%)`;
});
}