작성 : 2024. 5. 3. 8:47
나는 빡대가리가 맞았다.
그리고 퐁규도 어쩌면 빡대가리일지도..
자동차 색깔 바꾸는 프로그래밍 초창기 내가 망친 ver.
계산 됨. 색 안됨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자동차 견적내기</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font: 12px/1.5 dotum,"돋움", gulim, "굴림", sans-serif;
}
li {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
h1 {
text-align: center;
}
#carZone {
width: 600px;
margin: 0 auto;
}
#estimate {
width: 100%;
}
#estimate th,
td {
border: 1px solid #ccc;
height: 30px;
}
#estimate th {
background-color: #333;
color: #fff;
}
#carZone td {
text-align: center;
}
tfoot {
font-size: 15px;
font-weight: bold;
}
#total {
border: none 0;
background: none;
font-size: 1.5em;
font-weight: bold;
text-align: center;
}
</style>
<script>
// 자동차 가격 바꾸기
function car() {
//let basic_car = parseInt(document.getElementById("total").defaultValue);
let basic_car = Number(document.getElementById("total").defaultValue);
let color_price = 0;
let colorChkCnt = document
.querySelectorAll('.opt4:checked')
.length;
let colorChk = document.getElementById("opt4")
if (colorChkCnt > 0) {
color_price += Number(colorChk.value);
}
for (let i = 1; i <= 3; i++) {
let chkObj = document.getElementById("opt" + i)
if (chkObj.checked) {
basic_car += Number(chkObj.value)
}
}
basic_car += color_price;
document.getElementById("total").value = basic_car;
}
// 자동차 색 바꾸기
// function changeColor(colorIndex) {
// // 모든 이미지를 숨김
// let images = document.querySelectorAll('#showColor img');
// images.forEach(image => {
// image.style.display = 'none';
// });
// // 선택한 색상의 이미지만 보이도록 변경
// images[colorIndex].style.display = 'block';
//}
function showColor() {
document.getElementsByName("").sre = "./"
}
</script>
</head>
<body>
<h1>자동차 견적</h1>
<div id="carZone">
<p id="showColor">
<img src="images/car4.jpeg" alt="자동차"/>
<img src="images/car.jpeg" alt="자동차"/>
<img src="images/car3.jpeg" alt="자동차"/>
<img src="images/car2.jpeg" alt="자동차"/>
</p>
<table id="estimate">
<colgroup>
<col width="380px"/>
<col width="160px"/>
<col width="160px"/>
</colgroup>
<thead>
<tr>
<th scope="row">옵 션</th>
<th scope="row">추가 가격</th>
<th scope="row">선택</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col">(기본)차량가격</th>
<td colspan="2">
<input
type="text"
name="total"
id="total"
value="13450000"
readonly="readonly"/>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
<label for="opt1">인조가죽시트</label>
</td>
<td>250000</td>
<td>
<!-- 옵션 체크박스에 클릭할 때 마다 car()에 저장된 일련의 실행문을 실행합니다. -->
<input type="checkbox" name="opt1" id="opt1" value="250000" onclick="car();"/></td>
</tr>
<tr>
<td>
<label for="opt2">내비게이션</label>
</td>
<td>250000</td>
<td><input type="checkbox" name="opt2" id="opt2" value="250000" onclick="car();"/></td>
</tr>
<tr>
<td>
<label for="opt3">선루프</label>
</td>
<td>440000</td>
<td><input type="checkbox" name="opt3" id="opt3" value="440000" onclick="car();"/></td>
</tr>
<tr>
<td>
<label for="opt4">색상선택</label>
</td>
<td>100000</td>
<td>
<input
type="radio"
name="opt4"
id="opt4"
value="100000"
class="opt4"
onclick="car();"/>red
<input
type="radio"
name="opt4"
id="opt4"
value="100000"
class="opt4"
onclick="car();"/>green
<input
type="radio"
name="opt4"
id="opt4"
value="100000"
class="opt4"
onclick="car();"/>blue
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
두번째, 뭔가 더 해본 ver.
계산 됨, 색 안됨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자동차 견적내기</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font: 12px/1.5 dotum,"돋움", gulim, "굴림", sans-serif;
}
li {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
h1 {
text-align: center;
}
#carZone {
width: 600px;
margin: 0 auto;
}
#estimate {
width: 100%;
}
#estimate th,
td {
border: 1px solid #ccc;
height: 30px;
}
#estimate th {
background-color: #333;
color: #fff;
}
#carZone td {
text-align: center;
}
tfoot {
font-size: 15px;
font-weight: bold;
}
#total {
border: none 0;
background: none;
font-size: 1.5em;
font-weight: bold;
text-align: center;
}
</style>
<script>
// 자동차 가격 바꾸기
function car() {
//let basic_car = parseInt(document.getElementById("total").defaultValue);
let basic_car = Number(document.getElementById("total").defaultValue);
for (let i = 1; i <= 6; i++) {
let chkObj = document.getElementById("opt" + i)
if (chkObj.checked) {
basic_car += Number(chkObj.value)
}
}
document.getElementById("total").value = basic_car;
}
자동차 색상 변경 함수
function carColor(obj) {
let carImage = document.getElementById("selected-image");
switch(obj.id) {
case "opt4":
carImage.src = "images/car.jpeg";
break;
case "opt5":
carImage.src = "images/car3.jpeg";
break;
case "opt6":
carImage.src = "images/car2.jpeg";
break;
}
}
</script>
</head>
<body>
<h1>자동차 견적</h1>
<div id="carZone">
<p id="showColor">
<img src="images/car4.jpeg" alt="기본 자동차" id="selected-image"/>
</p>
<table id="estimate">
<colgroup>
<col width="380px"/>
<col width="160px"/>
<col width="160px"/>
</colgroup>
<thead>
<tr>
<th scope="row">옵 션</th>
<th scope="row">추가 가격</th>
<th scope="row">선택</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col">(기본)차량가격</th>
<td colspan="2">
<input
type="text"
name="total"
id="total"
value="13450000"
readonly="readonly"/>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
<label for="opt1">인조가죽시트</label>
</td>
<td>250000</td>
<td>
<!-- 옵션 체크박스에 클릭할 때 마다 car()에 저장된 일련의 실행문을 실행합니다. -->
<input type="checkbox" name="opt1" id="opt1" value="250000" onclick="car();"/></td>
</tr>
<tr>
<td>
<label for="opt2">내비게이션</label>
</td>
<td>250000</td>
<td><input type="checkbox" name="opt2" id="opt2" value="250000" onclick="car();"/></td>
</tr>
<tr>
<td>
<label for="opt3">선루프</label>
</td>
<td>440000</td>
<td><input type="checkbox" name="opt3" id="opt3" value="440000" onclick="car();"/></td>
</tr>
<tr>
<td>
<label for="opt4">색상선택</label>
</td>
<td>100000</td>
<td>
<input
type="radio"
name="colorRed"
id="opt4"
value="100000"
class="opt4"
onclick="car();"/>red
<input
type="radio"
name="colorGreen"
id="opt5"
value="100000"
class="opt4"
onclick="car();"/>green
<input
type="radio"
name="colorBlue"
id="opt6"
value="100000"
class="opt4"
onclick="car();"/>blue
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
우리 조의 구세주 ver.
<!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 type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font: 12px/1.5 dotum,"돋움", gulim, "굴림", sans-serif;
}
li {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
h1 {
text-align: center;
}
#carZone {
width: 600px;
margin: 0 auto;
}
#estimate {
width: 100%;
}
#estimate th,
td {
border: 1px solid #ccc;
height: 30px;
}
#estimate th {
background-color: #333;
color: #fff;
}
#carZone td {
text-align: center;
}
tfoot {
font-size: 15px;
font-weight: bold;
}
#total {
border: none 0;
background: none;
font-size: 1.5em;
font-weight: bold;
text-align: center;
}
</style>
<script>
function car() {
//let basic_car =parseInt(document.getElementById("total").defaultValue);
let basic_car = Number(document.getElementById("total").defaultValue); //parseInt(정수전체) = Number(숫자전체)
for (let i = 1; i <= 6; i++) {
let chkObj = document.getElementById("opt" + i)
if (chkObj.checked) {
basic_car += Number(chkObj.value)
}
}
document.getElementById("total").value = basic_car;
let carcolor1 = document.getElementById("opt4")
let carcolor2 = document.getElementById("opt5")
let carcolor3 = document.getElementById("opt6")
if (carcolor1.checked) {
document
.getElementById("carcolor")
.src = "./images/car1.jpeg"
}
if (carcolor2.checked) {
document
.getElementById("carcolor")
.src = "./images/car3.jpeg"
}
if (carcolor3.checked) {
document
.getElementById("carcolor")
.src = "./images/car2.jpeg"
}
}
</script>
</head>
<body>
<h1>자동차 견적</h1>
<div id="carZone">
<p ><img id="carcolor" src="./images/car4.jpeg" alt="자동차"/></p>
<table id="estimate">
<colgroup>
<col width="380px"/>
<col width="160px"/>
<col width="*"/>
</colgroup>
<thead>
<tr>
<th scope="row">옵 션</th>
<th scope="row">추가 가격</th>
<th scope="row">선택</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col">(기본)차량가격</th>
<td colspan="2">
<input
type="text"
name="total"
id="total"
value="13450000"
readonly="readonly"/>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
<label for="opt1">인조가죽시트</label>
</td>
<td>250000</td>
<td>
<!-- 옵션 체크박스에 클릭할 때 마다 car()에 저장된 일련의 실행문을 실행합니다. -->
<input type="checkbox" name="opt1" id="opt1" value="250000" onclick="car();"/></td>
</tr>
<tr>
<td>
<label for="opt2">내비게이션</label>
</td>
<td>250000</td>
<td><input type="checkbox" name="opt2" id="opt2" value="250000" onclick="car();"/></td>
</tr>
<tr>
<td>
<label for="opt3">선루프</label>
</td>
<td>440000</td>
<td><input type="checkbox" name="opt3" id="opt3" value="440000" onclick="car();"/></td>
</tr>
<tr>
<td>
<label for="opt4">색상선택</label>
</td>
<td>100000</td>
<td>
<input type="radio" name="opt4" id="opt4" value="100000" onclick="car();"/>red
<input type="radio" name="opt4" id="opt5" value="100000" onclick="car();"/>green
<input type="radio" name="opt4" id="opt6" value="100000" onclick="car();"/>blue
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>함수를 두 개 못쓰면 그냥 안쓰면 되는 것이었다..ㅋ
함수를 하나 더 만든 바람에 함수 두개를 어떻게 써야하지? 이러고 해맴..
이제 오늘의 내용 :
<script>
// EM6 버전으로 넘어오며 생긴 것들
// var, let, const 버전이 업되면서 구분되기 위해 사용
// 될 수 있으면 let을 사용
// 함수의 호이스팅
// 화살표 함수
this.num = 10;
let obj = {
num : 5,
add1 : function(a) {
console.log(this.num + a , this); // 8
},
add2 : (a) => {
// 화살표 함수는 this가 없다
console.log(this.num + a , this); // NaN
}
}
obj.add1(3);
obj.add2(3);
---------------------------------------------------------------------------
// 기본값에 대해
function addNum(a = 0, b = 0){
console.log(a + b); // 기본값 넣기 전 : NaN , 넣은 후 : 5
console.log(a); // 기본값 넣기 전 : 5 , 넣은 후 : 5
console.log(b); //기본값 넣기 전 : undefined , 넣은 후 : 0
}
addNum(5);
---------------------------------------------------------------------------
// EM5
function addNum(){ //가변형인자
// argument
for(let i = 0; i < arguments.length; i++){
console.log(arguments[i])
}
}
console.log(addNum());
console.log(addNum(1));
console.log(addNum(1, 2, 3)); // 배열구조
---------------------------------------------------------------------------
// EM6 가변인자를 직접 표시해서 사용 , 자바와 똑같음
function addNum(... number){
for(let i = 0; i < number.length; i++){
console.log(number[i])
}
}
addNum(1, 2, 3);
---------------------------------------------------------------------------
// 펼침연산자
let numbers = [1, 2, 3, 4, 5];
let max;
max = Math.max(...numbers);
console.log(max); // 5
console.log(numbers); // [1, 2, 3, 4, 5]
console.log(...numbers); // 1, 2, 3, 4, 5
let numbers = [1, 2, 3, 4, 5];
let max;
for(let i = 0; i < numbers.length; i++) {
if (numbers[i] > numbers[0]) {
max = numbers[i];
}
}
console.log(max); // 5
---------------------------------------------------------------------------
// 스크립트의 향상된 for문
let numbers = [1, 2, 3, 4, 5];
for (let i of numbers) {
console.log(i);
}
---------------------------------------------------------------------------
// ~ 자판 영어 상태일 때는 `가 입력된다.
// 표현식 (백티)
let name = 'hong';
console.log("나의 이름은" + name + "입니다.");
let num1 = 1;
let num2 = 2;
let text = `${num1}과 ${num2}의 합계는 ${num1} + ${num2} 입니다`
console.log(text);
---------------------------------------------------------------------------
// 배열의 비구조화
let numbers = [3, 4];
let a, b;
a = numbers[0];
b = numbers[1];
let numbers = [3,4,5];
let [a, b] = numbers;
let [c, ,d] = numbers;
console.log(a); // 3
console.log(b); // 4
console.log(`${c} ${d}`); // 3 5
let numbers = [1, 2, 3];
let [a, ...b] = numbers;
console.log(a); // 1
console.log(b); // (2) [2, 3]
</script>
제이 쿼리
$(function(){
});위와 같이 쓰는 것이
window.onload = function(){ // 현재 페이지가 모두 로딩되기 전까지 대기
}와 같다.
제이쿼리를 CDN 방식으로 불러와 작성
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
// 제이쿼리 문법으로 위 식을 표현하기 onload 이벤트와 똑같음.
// $("document").ready(function(){
// });
// 생략된 버전
$(function(){
$("선택자").기능(); // 제이쿼리의 기본 문법
$("#title").css("color", "red");
$("*").css("color","red");
$(".tit").css("color","blue");
$("h3").css("color","green");
$("h1,h2").css("color", "red"); // 두 가지 태그를 넣기
// 종속선택자
$("h2.tit").css("color", "red");
parent(), parents(), parents(div)와 같이 선택할 수 있음, closest(요소이름)
next(), prev(), siblings()
nextAll(), prevAll()
$("h2").next().css("color", "red");
$("h2").parent().css("border", "1px solid red");
$("#inner_wrap h1").css("color", "green");
// 자식선택자
$("#inner_wrap > p").css("color", "red");
$(".txt").siblings().css("color", "red"); // 나를 뺀 형제들을 선택할 때
$(".txt").parents().css("border", "1px solid red")
// 상위요소 closest()
$(".txt1").closest("div").css("border", "1px solid red");
});
</script>
</head>
<body>
<!-- <h1 id="title">제목</h1> -->
<!-- <h1>선택1</h1>
<h2 class="tit">선택2</h2>
<h2>선택2_1</h2>
<h3>선택3</h3> -->
<!-- 인접선택자 -->
<!-- a는 c의 상위 closest
b는 c의 부모 parent
c는 b의 자식 children
d는 e의 형 prev
f는 e의 동생 next -->
<!-- <div id ="wrap">
<div id="inner_wrap">
<h1>제목1</h1>
<h2>제목2</h2>
<p class="txt">내용1</p>
<p>내용2</p>
<p>내용3</p> -->
<h1 class="title">선택자</h1>
<div>
<div>
<p class="txt1">내용</p>
</div>
</div>
</body>형식은 무조건 외워야 함. 이해의 문제가 아니라 어떻게 코드를 쓰는 건지는 기본적으로 익숙하게 쳐야 한다.
a는 c의 상위 closest
b는 c의 부모 parent
c는 b의 자식 children
d는 e의 형 prev
f는 e의 동생 next
탐색선택자 / 배열 관련 메서드
<!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
src="https://code.jquery.com/jquery-3.7.1.js"
integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
crossorigin="anonymous"></script>
<script>
$(function () {
// 탐색선택자
// $("#menu li:first").css("color", "red");
// $("#menu li:last").css("color", "red");
// $("#menu li:even").css("color", "red"); // 짝수 (기준은 인덱스번호 0, 2)
// $("#menu li:odd").css("color", "blue"); // 홀수 (기준은 인덱스번호 1, 3)
// $("#menu li").eq(2).css("color", "red"); // eq() 가로 안에는 인덱스 번호
// $("#menu li:lt(2)").css("color", "blue"); // lt = less then 자기 자신보다 작은, 미만 (자신 포함 x)
// $("#menu li:gt(2)").css("color", "blue"); // gt = greater then 자기 자신보다 큰 (자신 포함 x)
// nth-child() -> 가로 안에 작성된 순서, 위치 번호 적기
// $("#menu1 li:nth-child(1)").css("color", "red");
// $("#menu1 li:nth-child(2n)").css("color", "blue");
// $("#menu1 li:nth-last-child(2)").css("color", "green"); // 역순
---------------------------------------------------------------------------
// 배열 관련 메서드 -> 읽기 (효율성 증가)
// 배열 안에 객체가 들어있음
each, foreach -> return 이 없다
map : 반복문 -> 결과를 새로운 배열로 만든다.
index() : 요소의 인덱스 번호
let obj = [
{"area" : "서울"},
{"area" : "부산"},
{"area" : "전주"}
];
$(obj).each(function(i, o){ // i => index, o -> 배열의 값
console.log(i + ":" , o) // 객체로 출력
});
// $.each($("#menu2 li"), function(i, o){ // i => index, o -> 배열의 값
// console.log(i + ":" , o) // <li></li> 태그 출력
// });
// obj.forEach(function(value,index,array){
// console.log(`Value: ${value}, Index: ${index}, Array: ${array}`)
// });
let arr1 = [
{
"area" : "서울",
"name" : "무대리"
},
{
"area" : "부산",
"name" : "홍과장"
},
{
"area" : "대전",
"name" : "박사장"
},
{
"area" : "서울",
"name" : "빅마마"
}
];
// map : 반복문, for문이라고 생각하면 된다 -> 결과를 새로운 배열로 만든다.
let arr2 = $.map(arr1, function(a, b){ // a가 배열의 값을 받아온다, b가 인덱스
if (a.area === "서울"){
return a;
}
});
console.log(arr1);
console.log(arr2);
let index = $("li").index($("#list3"));
console.log(index); // 2
});
</script>
</head>
<body>
<ul id="menu1">
<li>내용1_1</li>
<li>내용1_2</li>
<li id="list3">내용1_3</li>
<li>내용1_4</li>
</ul>
<!-- <ul id="menu2">
<li>내용2_1</li>
<li>내용2_2</li>
<li>내용2_3</li>
</ul> -->
</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>
<script>
// Event 2가지 방식
// 1. 인라인 정의 방식
// 2. 내부 정의 방식
window.onload = function(){
let btn = document.getElementById("target");
btn.addEventListener("click", function(event){
alert('hellow world' + btn.value);
//alert('hellow world' + event.target.value);
});
}
</script>
</head>
<body>
<!-- 1번 방식 -->
<input type="button" onclick="alert('hello' + this.value)" value="인라인 이벤트">
<input type="button" id="target" value="내부 이벤트">
</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>
<style>
* {
list-style-type: none;
}
a {
text-decoration: none;
color: inherit;
}
.tab {
display: flex;
align-items: center;
padding: 1rem;
}
.tab__item {
padding: 0.6rem 1.3rem;
margin-right: 1rem;
border: 1px solid #ddd;
border-radius: 2rem;
}
.tab__item.active {
display: inline-block;
border: 1px solid tomato;
background-color: tomato;
color: white;
}
.tab__content-wrapper {
padding: 1rem;
}
.tab__content {
display: none;
}
.tab__content.active {
display: block;
}
</style>
<script>
window.onload = function(){
let tabItem = document.querySelectorAll(".tab__item");
let tabContent = document.querySelectorAll(".tab__content");
tabItem.forEach((item, index) => {
item.addEventListener("click", function(event){
event.preventDefault(); // a 태그 속성 제거 -> 링크 속성 금지
tabContent.forEach((content) => {
content.classList.remove("active");
});
tabItem.forEach((content) => {
content.classList.remove("active");
});
tabItem[index].classList.add("active");
tabContent[index].classList.add("active");
}); //addEventListener end
}); // forEach end
};
</script>
</head>
<body>
<ul class="tab">
<li class="tab__item active">
<a href="#tab1">Tab 1</a>
</li>
<li class="tab__item">
<a href="#tab2">Tab 2</a>
</li>
<li class="tab__item">
<a href="#tab3">Tab 3</a>
</li>
<li class="tab__item">
<a href="#tab4">Tab 4</a>
</li>
</ul>
<!-- 탭 내용 영역 -->
<div class="tab__content-wrapper">
<div id="tab1" class="tab__content active">첫번째 탭 내용</div>
<div id="tab2" class="tab__content">두번째 탭 내용</div>
<div id="tab3" class="tab__content">세번째 탭 내용</div>
<div id="tab4" class="tab__content">네번째 탭 내용</div>
</div>
</body>
</html>
추가적으로 공부하며 이렇게 만듦.
로그인 버튼들과 단체여행 있는 부분을 나란히 두고 싶은데ㅠ 안된다..
'2024_UIUX 국비 TIL' 카테고리의 다른 글
| UIUX _국비과정 0502 [제이쿼리 객체 조작과 이벤트] (1) | 2024.06.08 |
|---|---|
| UIUX _국비과정 0430 [제이쿼리 선택자] (1) | 2024.06.08 |
| UIUX _국비과정 0426 (0) | 2024.06.03 |
| UIUX _국비과정 0425 (1) | 2024.06.03 |
| UIUX _국비과정 0424 (1) | 2024.06.03 |