JavaScript 입문과 웹 UI개발(23)-자바스크립트로 html 생성하는 법
2022. 10. 8. 21:24ㆍ애플코딩 javascript 강의
반응형
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<!--부트스트랩 css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
crossorigin="anonymous">
<!--내가 만든 css 파일-->
<link href="main.css" rel="stylesheet">
<!--제이쿼리-->
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"></script>
</head>
<body>
<style>
ul.list {
list-style-type: none;
margin: 0;
padding: 0;
border-bottom: 1px solid #ccc;
}
ul.list::after {
content: '';
display: block;
clear: both;
}
.tab-button {
display: block;
padding: 10px 20px 10px 20px;
float: left;
margin-right: -1px;
margin-bottom: -1px;
color: grey;
text-decoration: none;
cursor: pointer;
}
.orange {
border-top: 2px solid orange;
border-right: 1px solid #ccc;
border-bottom: 1px solid white;
border-left: 1px solid #ccc;
color: black;
margin-top: -2px;
}
.tab-content {
display: none;
padding: 10px;
}
.show {
display: block;
}
.test11{
position: relative;
left: 500px;
top: 50px;
}
</style>
<div class="container mt-3">
<div class="card p-3">
상품명/ 가격
</div>
</div>
<div class="container mt-5">
<ul class="list">
<li class="tab-button" data-id="0">Products</li>
<li class="tab-button orange" data-id="1">Information</li>
<li class="tab-button" data-id="2">Shipping</li>
</ul>
<div class="tab-content">
<p>상품설명입니다. Product</p>
</div>
<div class="tab-content show">
<p>스펙설명입니다. Information</p>
</div>
<div class="tab-content">
<p>배송정보입니다. Shipping</p>
</div>
</div>
<form class="container my-5 form-group">
<p>상품선택</p>
<select class="form-select mt-2">
<option>모자</option>
<option>셔츠</option>
<option>바지</option>
</select>
<select class="form-select1 mt-2">
<option>95</option>
<option>100</option>
<option>105</option>
</select>
</form>
<div class="test11">
<h5>방가방가</h5>
</div>
<script>
//사이즈 셀렉트 태그 숨기기
$('.form-select1').css('display', 'none');
//p태그를 생성
var a=document.createElement('p');
//p태그 안에 글씨 넣기
a.innerHTML='<h1>aloha 알로하~</h1>';
//id가 test11인 div 태그에 javascript로 html 생성
document.querySelector('.test11').appendChild(a);
//문자열에 html태그와 같이 작성
var template='<button><p>안녕</p></button>';
//그 문자열을 insertAdjacentElement를 통해서 beforeend(안쪽맨밑)에 넣어준다.
document.querySelector('.test11').insertAdjacentHTML('beforeend', template);
//html을 넣는걸 jquery로 할경우
$('.test11').append(template);
//정리하자면
//1. 기존의 내용에서 html 추가되는경우
// 자바스크립트는 appendChild나 append, insertAdjacentHTML로 기존의 내용에서 추가
// 제이쿼리는 append나 appendChild로 추가한다
//2. 기존의 내용은 없어지고 새로 html 넣는경우
//document.querySelector('.test11').innerHTML='only this exist'; //자바스크립트
//$('.test11').html('나만 존재한다') //제이쿼리
$('.form-select').on('change',function(e){
//셀렉트 박스에서 바지 선택시 사이즈가 28, 30 ,32로 바뀌도록 해보자
var psize=[28,30,32];
var ssize=[95,100,105];
var addhtml='';
if('바지'==e.target.value){//e.target.value 대신에 $('.form-select').val() 사용가능
$('.form-select1').css('display', 'block');
for(let i=0; i<psize.length; i++){
addhtml+=`<option>${psize[i]}</option>`
}
$('.form-select1').html(addhtml);
}else if('셔츠'==e.target.value){
//셀렉트 태그 값 변경시 값이 셔츠이면 사이즈 셀렉트 박스 보이게 하기
$('.form-select1').css('display', 'block');
for(let i=0; i<psize.length; i++){
addhtml+=`<option>${ssize[i]}</option>`
}
$('.form-select1').html(addhtml);
}else{
$('.form-select1').css('display', 'none');
}
})
//배열 Array
var car=['소나타', 50000, 'white'];
console.log(car[1]); // 50000
console.log(car[2]); // white
car[0]='아반떼'; //수정
console.log(car[0]);//아반떼
// object 자료형 {이름1:자료1, 이름2:자료2, ....}
var car2={ name: '소나타', price: [50000,3000,4000]}
console.log(car2['name']) //소나타
console.log(car2.price) //50000
$('.card').html(car2.name+'/'+car2.price[1])
function openTab(aa){
$('.tab-button').removeClass('orange');
$('.tab-content').removeClass('show');
//버튼 클릭시 해당 버튼 오랜지 색으로
$('.tab-button').eq(aa).addClass('orange');
//버튼 클릭시 해당 내용이 나오도록 함
$('.tab-content').eq(aa).addClass('show');
}
$('.list').click(function(e){
openTab(e.target.dataset.id);
})
</script>
<!--거의 모든 자바스크립트 라이브러리는 <body> 끝나기전에 넣는거 권장-->
<!--부트스트랩 JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
</body>
</html>
상품명/ 가격
상품설명입니다. Product
스펙설명입니다. Information
배송정보입니다. Shipping
방가방가
강의 출처: JavaScript 입문과 웹 UI개발
코딩애플 온라인 강좌 - 개발자도 단기완성!
단연 NO1 강사님의 NO.1 강의 역시나 명강입니다. IT 업계의 대치동 NO1. 강사같은 엄청난 강의력. 코딩애플님의 강의는, 엄청나게 기초적인 것부터 가르치는 듯 보이지만, 실제로 다루는 깊이는 절
codingapple.com
반응형
'애플코딩 javascript 강의' 카테고리의 다른 글
| JavaScript 입문과 웹 UI개발(25)-array, for 반복문 실력향상 과제 (1) | 2022.10.09 |
|---|---|
| JavaScript 입문과 웹 UI개발(24)- forEach, for in 반복문 (0) | 2022.10.09 |
| JavaScript 입문과 웹 UI개발(22)- Select 인풋 다루기 (0) | 2022.10.08 |
| JavaScript 입문과 웹 UI개발(21)-약간 복잡한 Array & Object 데이터바인딩 (0) | 2022.10.08 |
| JavaScript 입문과 웹 UI개발(20)-dataset을 이용한 tab 기능 (0) | 2022.10.07 |