JavaScript 입문과 웹 UI개발(24)- forEach, for in 반복문
2022. 10. 9. 13:42ㆍ애플코딩 javascript 강의
반응형
index.html
<!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가 test인 div 태그에 javascript로 html 생성
document.querySelector('.test11').appendChild(a); //app둥
//문자열에 html태그와 같이 작성
var template='<button><p>안녕</p></button>';
//그 문자열을 insertAdjacentElement를 통해서 beforeend(안쪽맨밑)에 넣어준다.
document.querySelector('.test11').insertAdjacentHTML('beforeend', template);
//html을 넣는걸 jquery로 할경우
$('.test11').append(template);
//array에 붙일 수 있는 forEach 반복문
//배열에 있는 수 만큼 반복해줌
//forEach() 안에 function을 사용해서 넣는다
//배열.forEach(function(a, i){
// a가 배열의 값이다.
// i가 0,1,2....처럼 기존 for문에서 사용하는 index 라고 생각하면 된다
// i는 쓰기 싫으면 안써도 된다.
//})
//object에 붙일 수 있는 for in 반복문
//object에 있는 수 만큼 반복
// var obj={name: 'jack' , age: 15}
//for(var k in obj){
//object의 key값으로 위에 있는 k를 사용함
// obj[k] 를 입력하면 각 key에 대한 value가 나온다
//}
//arrow function
//기존에 함수는 function(a) {}
//arrow function는 (a)=>{}
// 기존 함수와 arrow function의 차이점은
// this가 다르다.
//arrow function 안에서 this 쓰면 바깥에 있던 this를 그대로 가져다씀
//function 안에서 this를 쓰면 함수 안의 this가 알맞게 재정의 됨
// 그래서 이벤트리스너에서 this를 e.currentTarget 과 같이 쓰고 싶으면
// arrow function이 아닌 function(){}의 형태로 써야한다.
$('.form-select').on('change',function(e){
//셀렉트 박스에서 바지 선택시 사이즈가 28, 30 ,32로 바뀌도록 해보자
var psize=[28,30,32,34];
var ssize=[95,100,105];
$('.form-select1').html('');//select 태그내를 초기화 해줘서 기존의 option태그는 포함안되게 해준다
if('바지'==e.target.value){//e.target.value 대신에 $('.form-select').val() 사용가능
$('.form-select1').css('display', 'block');
//그냥 for 반복문 사용하는 경우
// for(let i=0; i<psize.length; i++){
// $('.form-select1').append(`<option>${psize[i]}</option>`);
// }
//forEach를 사용하는 경우
psize.forEach(function(a){
//addhtml+=`<option>${psize[i]}</option>`
$('.form-select1').append(`<option>${a}</option>`)
})
}else if('셔츠'==e.target.value){
//셀렉트 태그 값 변경시 값이 셔츠이면 사이즈 셀렉트 박스 보이게 하기
$('.form-select1').css('display', 'block');
//그냥 for 반복문 사용하는 경우
// for(let i=0; i<psize.length; i++){
// $('.form-select1').append(`<option>${ssize[i]}</option>`);
// }
//forEach를 사용하는 경우
ssize.forEach(function(a){
$('.form-select1').append(`<option>${a}</option>`)
})
}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개발(26)-ajax 개념(get,post, fetch) (0) | 2022.10.09 |
|---|---|
| JavaScript 입문과 웹 UI개발(25)-array, for 반복문 실력향상 과제 (1) | 2022.10.09 |
| JavaScript 입문과 웹 UI개발(23)-자바스크립트로 html 생성하는 법 (1) | 2022.10.08 |
| JavaScript 입문과 웹 UI개발(22)- Select 인풋 다루기 (0) | 2022.10.08 |
| JavaScript 입문과 웹 UI개발(21)-약간 복잡한 Array & Object 데이터바인딩 (0) | 2022.10.08 |