// 코딩애플 님의 웹개발로 배우는 자바스크립트 기초 듣는 중//
너무,, 안일하게 클론 코딩만 했어..
다들 설명하는 양이 다르고, 예제의 난이도가 다르니까.
거의 한 달을 들었는데도 코드를 못짜는... 나란 코린이..
모르는 거 당연하니깐 계속 해보자.
ps. 파라미터 설명을 쉽게 해주시고, 계속 과제를 주셔서 생각하게 하기 때문에 도움이 많이됨.
몇 개 해봤는데 여전히 잘 모르겠는 코린이라면 추천.
일단 10분짜리 강의 6개 정도로 alert 창을 계속 업데이트하면서
개념들을 설명해 주심.
앞에는 굳이 쓸 필요도 없이 쓰윽쓰윽 지나갔는데,
alert 창 2개 만드라는 지점부터 막힘.
대개 찾을 때까지 해보는 데 오늘은 1시간 정도 찾고 해보고 찾고 해보다가 문제점은 알겠는데 방법을 모르겠어서
그 상태로 다음 강의를 들었음.
문제)
- 클릭 시 alert에 나타나는 문구를 바꾸고 싶었음. <div> tag를 쪼개고 싶은 데 그러면 onclick이 적용이 안 되고 닫기 버튼이, alert창에서 튕겨나가서 이걸 어찌하냐.. 문제. 검색해도 비슷한 것 못 찾음.
- block처리하는 function이 하나에만 적용되는 데, 나는 하나로 2개다 적용되게 만들고 싶었음. 방법이 있을 것 같았으나, 쓰고 지우고 해봐도 답을 못 찾음.
다음 강의를 보고 나니 해결책을 발견함.
- tag 활용도를 높여야 함... <p id="title">alert 박스</p>에.. id 넣으면 document.getElementById("title").innerHTML = 구멍; 깔끔하게 해결 됨. 왜... 그렇게 못 쪼개고 그 앞뒤에 div를 넣어가면서 시간낭비를 했을까.....ㅠ 정확한 위치 아니고 쓰잘 데 없이, 클래스나 아이디 남발하지 말 것.
- 알지도 못하면서,, 한 번에 파라미터 2개 쓰려니깐 머리가 뽀개지지.. ㅎ ^^ 정직하게 이건 처음엔 block으로 했어야 함.
//1.제목을 바꾸고, 2.알림창 열기 => 일단 한글로 구현할 것을 적어놓고, 생각해보기.
그렇게 .. 숙제에 실패하고, 바로 다음 해결책
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="basic.css"
</head>
<body>
<div class="alert-box" id="alert">
<p id="title">alert 박스</p>
<button class="closed" onclick="alertOpen('none')">X</button>
</div>
<button onclick="openAlert1('아이디를 입력하세요.')">버튼1</button>
<button onclick="openAlert1('비밀번호를 입력하세요')">버튼2</button>
<script src="basic.js"></script>
</body>
</html>
<css>
.alert-box {
background: #aba8f4;
color: #4646b4;
padding: 20px;
border-radius: 5px; /*테두리 둥글게 */
display: none;
}
<js>
function alertOpen(구멍) {
document.getElementById("alert").style.display = 구멍;
}
function openAlert1(구멍) {
document.getElementById("title").innerHTML = 구멍;
document.getElementById("alert").style.display = "block";
}
// getElementByClassName은 class전부 다 찾으니까, 순서 지정해야 함 그 중 [0]
// 구멍을... 잘 활용해야 함... 근데 진짜... 쉽지 않네..
+++
- parameter가 이해하는 게 어려운 데 진짜, 매개 변수.. 이게 원래 내 전공이 심리학이라.. 거긴 연구 할 때 진짜 매개 변수가 있다고^^ 너무 헷갈려^^
- 여기선 통계에서 모집단의 모수 parmeter 가 의미하는 것처럼 있는 데 실제로는 없는 상상 속에 지정된 값이라고 생각하면 될 듯.
- 그냥 그 위치를 비워 놓을 수 없고, 뭐라도 낑겨 놓으면 a.k.a 구멍 처럼. 거기에 지정된 값만 오는 게 아니라, 다른 값을 넣을 수 있음.
- 파라미터를 쓰면, 함수 쓸 때 안에 아무거나 넣을 수 있음. 계속 바뀌는 함수인 거 같으면 "구멍" 뚫어놓을 것.
- 구멍은 여러 개를 "," 넣을 수 있고, 해당 위치만 잘 지정해주면 됨. --> 진짜 스치듯 매개(연결) 해주는 것으로 이해 함
//js
function alertOpen(구멍) {
document.getElementById("alert").style.display = 구멍;
}
//html
<button class="closed" onclick="alertOpen('none')">X</button>
//alertOpen("block"); //이런식 그럼 파리미터 구멍 자리에 block이 들어가는 것임. so, 보이게 함.
//alertOpen("none"); // 닫아줌. 굳이 2개 함수 만들 필요 없이 하나로 끝낼 수 있음.
그런데 이렇게 하면 on click 너무 기니깐,.. <button> onclick 을 js로 빼서 없애기.
.addEventListener 사용.
//html
<button id="close">X</button>
//js
//이벤트리스너. 왼쪽 요소가 클릭(이벤트)되면 오른쪽 함수 실행 해줘라
document.getElementById("close").addEventListener("click", function () {
document.getElementById("alert").style.display = "none";
});매우.. 깔끔해짐.
그리고는 jQeury로 간단하게 쓰느 법을 설명 중이심.
- jQeury를 다운 받아서 다른 이름으로 저장한 이후, 불러와서 쓰거나 다운로드 없이 CDN 복사해와서 쓰기.
- 강의에서는 minified 용으로 용량이 적은 것으로 붙여 넣음. 링크 눌러서 <body>에 넣으면 됨.
- 설치 위치가 중요함. head에 넣으면 html이 순서대로 가기 때문에 느려짐. so, body 태그 끝나기 전에 넣는 것이 가장 이상적임.
<body>
<h4 id="test">안녕하세요</h4>
<script>
// document.querySelector("#test"); //바닐라도 비슷하긴 한데..
// document.getElementById("title").innerHTML = 구멍;
$("#test"); //j쿼리가 훨씬 짧게 할 수 있음.
//inner.HTML이랑 비슷함.
//.text도 바뀜.
// 출력만 하고 싶으면,비워 놓으면 됨
$("#test").html();
$("#test").css("color", "red");
$("#test").attr("src", "dsddd.jpg"); //$('CSS셀렉터').attr(이걸, 이렇게 바꿈)
document.getElementById("test").className += "yellow-bg"; //과제 였음.
</script>
</body>
- document.querySelector("#test") = document.getElementById("title") = $("#test")
- 매우 짧아진 다는 것이 큰 장점임.
- jquery 이것저것 알려주셨는데 확실히, 바닐라 js보다 훨씬 짧아짐.
- 근데 바닐라도 못 해서 이걸 하는 게 맞나 싶달까. ?
...
숙제 내주셨는 데 유료로 넘어가서..일단.. 매우 머리가 아픔...
오 검색해 찾음.
id= test에 클래스 이름 추가하기 였음.
document.getElementById("test").className += "yellow-bg";
강의가 너무 좋긴한데.. 어떻게 할지는 조금 고민되네..
일단 깃부터 듣자..
지금껏 온라인으로 들은 것중에는 제일.. 뭐랄까 스스로 고민하게 시킴.
'Web Developing > JS' 카테고리의 다른 글
| [JS] Wordle 기능 넣고 수정하기 (2) | 2024.03.16 |
|---|---|
| [JS] 기본적인 개념 3 (1) | 2024.03.16 |
| [JS] 기본적인 개념 2 (0) | 2024.03.16 |
| [JS] 기본적인 개념 1 (1) | 2024.03.16 |
| [JS] 개념:Call Stack (1) | 2024.03.16 |