코딩애플(https://codingapple.com/course/javascript-jquery-ui/)에서 강의를 듣고 공부 목적으로 적은 정리글입니다.
<div id="test">
</div>
<script>
var a = document.createElement('p');
a.innerHTML = '안녕';
document.querySelector('#test').appendChild(a);
</script>
☞ document.createElement로 html 생성해서 innerHTML로 내용 넣고 appendChild로 붙이는 형식
<div id="test">
</div>
var 템플릿 = '<p>안녕하세요</p>'
document.querySelector('#test2').insertAdjacentHTML('beforeend' ,템플릿)
☞ beforeend은 안쪽 맨밑에 추가
<div id="test">
</div>
var 템플릿 = '<p>안녕하세요</p>'
$('#test').append(템플릿);
var 템플릿 = '<p>안녕하세요</p>'
document.querySelector('#test2').innerHTML = 템플릿;
☞ 제이쿼리는 .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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<form class="container my-5 form-group">
<p>상품선택</p>
<select class="form-select mt-2 product">
<option>모자</option>
<option>셔츠</option>
<option>바지</option>
</select>
<select class="form-select mt-2 hide size">
<option>90</option>
<option>95</option>
<option>100</option>
</select>
</form>
<script>
$('.form-select').eq(0).on('input', function(){
var value = $('.form-select').eq(0).val(); // 혹은 this 혹은 e.currentTarget.value;
if (value == '셔츠') {
$('.form-select').eq(1).removeClass('hide');
var 사이즈 = `<option>90</option>
<option>95</option>
<option>100</option>`
document.querySelector('.size').innerHTML = 사이즈;
}
else if(value == '바지'){
$('.form-select').eq(1).removeClass('hide');
var 사이즈 = `<option>28</option>
<option>30</option>
<option>32</option>`
document.querySelector('.size').innerHTML = 사이즈;
}
else {
$('.form-select').eq(1).addClass('hide');
}
});
</script>
</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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<form class="container my-5 form-group">
<p>상품선택</p>
<select class="form-select mt-2 product">
<option>모자</option>
<option>셔츠</option>
<option>바지</option>
</select>
<select class="form-select mt-2 hide size">
<option>90</option>
<option>95</option>
<option>100</option>
</select>
</form>
<script>
var pants = [28, 30, 32, 34, 36];
var shirts = [90, 95, 100, 105]
$('.form-select').eq(0).on('input', function(){
var value = $('.form-select').eq(0).val(); // 혹은 this 혹은 e.currentTarget.value;
if (value == '셔츠') {
$('.form-select').eq(1).removeClass('hide');
$('.form-select').eq(1).html('');
shirts.forEach(function(data){
$('.form-select').eq(1).append(`<option>${data}</option>`)
})
}
else if(value == '바지'){
$('.form-select').eq(1).removeClass('hide');
$('.form-select').eq(1).html('');
pants.forEach(function(data){
$('.form-select').eq(1).append(`<option>${data}</option>`)
})
}
else {
$('.form-select').eq(1).addClass('hide');
}
});
</script>
</body>
</html>
☞ 배열을 선언해주고 forEach를 통해서 반복 가능
var obj = {name : 'kim', age : 20}
for(var key in obj){
console.log(key); //key 출력
console.log(obj[key]); //value 출력
}
var 출석부 = ['흥민', '영희', '철수', '재석']; //배열선언
function 이름찾기(name) {
for(let i = 0; i < 출석부.length; i++){
if (name == 출석부[i]) { //만약에 이름이 출석부에 있으면
console.log('있어요'); //있어요하기
}
}
}
//출력
이름찾기('흥민');
이름찾기('영희');
이름찾기('철수');
이름찾기('재석');
이름찾기('영철');
//구구단 출력
/*
for(let i = 0; i < 10; i++){
console.log(2 * i);
}
for(let i = 0; i < 10; i++){
console.log(3 * i);
}
for(let i = 0; i < 10; i++){
console.log(4 * i);
}
*/
for(let j= 2; j < 10; j++){
for(let i = 0; i < 10; i++){
console.log(`${j}단 : ${j} x ${i} = ${j * i}`);
}
}
유저가 데이터 요청 하면 데이터를 보내주는 프로그램
가끔 유저 데이터를 DB에 저장하기도 함
웹브라우저의 주소창에 URL 입력이 Get 요청
<form action = "/new" method = "post">
</form>
☞ form 태그의 액션과 메소드 입력
GET이랑 POST 요청하면 브라우저가 새로 고침된다
###ajax
상품더보기처럼 새로고침 없이 get과 post 가능
<script>
$.get('https://codingapple1.github.io/hello.txt').done(function(data){
console.log(data);
})
</script>
$.post('https://codingapple1.github.io/hello.txt', {name: 'love'}).done(function(data){
console.log(data);
})
☞ url 잘적고 서버로 보낼 데이터를 적으면 됨
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<!--- <div class="col-sm-4">
<img src="https://via.placeholder.com/600" class="w-100">
<h5>Card title</h5>
<p>가격 : 70000</p>
</div> -->
</div>
</div>
<button class="btn btn-danger more">더보기</button>
<script>
var products = [
{ id: 0, price: 70000, title: 'Blossom Dress' },
{ id: 1, price: 50000, title: 'Springfield Shirt' },
{ id: 2, price: 60000, title: 'Black Monastery' }
];
products.forEach(function (data, i) {
var 카드 = `
<div class="col-sm-4">
<img src="https://via.placeholder.com/600" class="w-100">
<h5>${products[i].title}</h5>
<p>가격 : ${products[i].price}</p>
</div>`;
document.querySelector('.row').insertAdjacentHTML('beforeend', 카드)
})
document.querySelector('.more').addEventListener('click', function () {
$.get('https://codingapple1.github.io/js/more1.json')
.done(function (data) {
console.log(data);
data.forEach(function (a, i) {
var 카드2 = `
<div class="col-sm-4">
<img src="https://via.placeholder.com/600" class="w-100">
<h5>${data[i].title}</h5>
<p>가격 : ${data[i].price}</p>
</div>`;
document.querySelector('.row').insertAdjacentHTML('beforeend', 카드2)
})
})
})
</script>
</body>
</html>
var 어레이 = [7, 3, 5, 1, 30];
var 어레이2 = ['b', 'c', 'a', 'd', 'f', 'e'];
어레이.sort(function(a, b){
return a - b; //역순은 b - a
});
console.log(어레이);
어레이2.sort()});
console.log(어레이2);
☞ sort는 문자열을 정렬하는 함수임
☞ 숫자로 정렬하고 싶으면 안에 함수를 넣어야함 .
어레이.sort(function(a, b){
return a - b; //역순은 b - a
});
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<!--- <div class="col-sm-4">
<img src="https://via.placeholder.com/600" class="w-100">
<h5>Card title</h5>
<p>가격 : 70000</p>
</div> -->
</div>
</div>
<button class="btn btn-danger more">더보기</button>
<button class="btn btn-dark" id="price"> 정렬</button>
<script>
var products = [
{ id: 0, price: 70000, title: 'Blossom Dress' },
{ id: 1, price: 50000, title: 'Springfield Shirt' },
{ id: 2, price: 60000, title: 'Black Monastery' }
];
document.querySelector('#price').addEventListener('click',function(){
products.sort(function(a, b){
return a.price - b.price
})
document.querySelector('.row').innerHTML = '';
products.forEach(function (data, i) {
var 카드 = `
<div class="col-sm-4">
<img src="https://via.placeholder.com/600" class="w-100">
<h5>${products[i].title}</h5>
<p>가격 : ${products[i].price}</p>
</div>`;
document.querySelector('.row').insertAdjacentHTML('beforeend', 카드)
})
})
products.forEach(function (data, i) {
var 카드 = `
<div class="col-sm-4">
<img src="https://via.placeholder.com/600" class="w-100">
<h5>${products[i].title}</h5>
<p>가격 : ${products[i].price}</p>
</div>`;
document.querySelector('.row').insertAdjacentHTML('beforeend', 카드)
})
document.querySelector('.more').addEventListener('click', function () {
$.get('https://codingapple1.github.io/js/more1.json')
.done(function (data) {
console.log(data);
data.forEach(function (a, i) {
var 카드2 = `
<div class="col-sm-4">
<img src="https://via.placeholder.com/600" class="w-100">
<h5>${data[i].title}</h5>
<p>가격 : ${data[i].price}</p>
</div>`;
document.querySelector('.row').insertAdjacentHTML('beforeend', 카드2)
})
})
})
</script>
</body>
</html>
.sort는 원본의 변형이 있는데 .filter는 원본변형이 없음
var 어레이3 = [7, 3, 5, 1, 30];
var 새어레이 = 어레이3.filter(function(a){
return a < 4 //[조건식] 4이하의 자료만
});
console.log(새어레이);
var 어레이4 = [7, 3, 5, 1, 30];
var 새어레이2 = 어레이4.map(function(a){
return a * 4
});
console.log(새어레이2);
☞ 출력값 : [ 28, 12, 20, 4, 120 ]
오늘의 한줄평 : 재미있었으나 걱정이 많은 하루, 개인과제도 힘내서 잘해보자!! ㅠㅠ
출처 : 코딩애플 https://codingapple.com/course/javascript-jquery-ui