여기서 부터는 웹디자인에서 의 js의 역할을 배운다. css는 그냥 정적인 디자인을 다루지만 jsqurery는 그 이상의 것들을 다룰 수 있다. ex) 움직임...?
이것도 css처럼 선택자를 이용하여 디잔인을 한다.
query selector
queuy selector로 dom문서에 접근이 가능하다.
html코드
<body>
<!-- todo: querySelector 예제 -->
<h1>process - 1</h1>
<h1>process - 2</h1>
<script src="./js/01_dom_querySelector.js"></script>
</body>js코드
document객체는 웹브라우저에 내제되어있다. html문서 관련 속성들을 가지고 있다.
여기에 접근하는 방법을 알아보자.
document.querySelector("h1").style.backgroundColor = "red";
document.querySelector("h1").style.backgroundColor = "yellow";태그 선택 방법
document함수를 하고.querySelector() 이 괄호에 "태그"를 넣어준 다음속성을 바꿔주면 된다.
속성 변경 방법
속성을 바꿔보자 태그선택을 한 것 뒤에 .속성을 해준뒤 마지막에 = "속성값"을 해주면 된다.
결과
css작용을 해주지 않아도 다음과 같이 디자인을 할 수있다.
이와 똑같은 기능을 하는 함수로 "getElementById("id명")이 있다. 방법은 완전 똑같고 id만 사용할 수 있다는 차이가 있다.
~~여기서 이상한 점은 태그에 ""처리를 한다는 것이다. ~~
detail
사람이 html을 작성하면 컴퓨터웹브라우저에서 html문서를 파싱(html해석)한다.
이 파싱된 문서를 메모리에 트리구조로 저장하는데 이것이 DOM이다.
// 파싱된 문서(DOM) : 트리구조(자료구조)
// 예) html 현재 문서(03_dom.detail.html)
// window(최상위 부모객체: html문서, 주소창, 메뉴, 상태바등)
// |
// document(객체, html 문서)
// |
// html(태그, 부모)
// |
// -------------------------------------
// | |
// head(태그, 자식) body(태그)
// |
// ----------------------------------------
// | |
// div(태그) - style="backgroundColor='aqua'"(속성) script - src="./js/03_dom_detail.js"
// |
// "안녕하세요"(텍스트, ==innerHTML속성)뿌리가 있고 이것은 조상과 비슷.
최상위 부모객체가 window
그 다음이 document
그다음이 html태그
그다음이 head와 body태그
그다음이 우리가 body에 작성한 태그들이 된다.
html의 주요요서(노드)
1) 태그 : div 등
2) 속성 : style 속성 등
3) 텍스트 : "안녕하세요"
4) 주석
innerHTMl
자바스크립트의 속성중 하나이다. html에 문구를 적지 않아도 js에서 적을수 있는 기능을 제공한다.
html코드
<body>
<div id="output" style="background-color: aqua;"></div>
<script src="./js/02_dom_innerHTML.js"></script>
</body>html에 아무 글자도 적지 않았다.
document.querySelector("#output").innerHTML = "Hello World"사용법은 .innerHTML = "적고싶은 문자"를 해주면 된다.
결과
html에 hello world를 작성하지 않았음에도 결과에서는 나오는 것을 확인할 수 있다. 이게 innerHTML의 기능이다.
이런 css와 html의 기능들을 js에서 할 수 있게 만들 수 있다.
변수를 활용한 코딩
let output = document.querySelector("#output");
output.innerHTML("hello world");output에 처리할것이라는 코드를 변수에 담아 변수를 이용하여 다음과 같이 사용할 수 있다.
여기서 주의할 점은 대소문자를 잘 지켜주어야한다. js에서는 css와 달리 낙타표기법을 사용하는데 대문자를 빼먹을 시 작동이 되지 않는다.
위와같이 js만으로 디자인 하는 것을 바닐라 js라고 한다.
참고로 바닐라js가 실행속도와 메모리등을 적게 잡아먹어 이것을 사용하자는 운동이 많이 일어난다. 그러나 아직은 Jquery가 우세하다...
querySelectAll
dom태그를 여러개 선택하는 함수로, 태그들이 배열로 저장을 하게 된다.
그래서 여러개의 태그를 선택하고 싶으면 그냥 querySelect만 하면 안되고 All을 해줘야한다.
let elements = document.querySelectorAll("ul li");
for (let i = 0; i < elements.length; i++) {
console.log(elements);
elements[i].innerHTML = i + ": 목록";
}querySelectorAll은 배열로 저장을 해준다고 했다. 그래서 elements는 배열변수가 된다.
사용방법
변수를 하나 만들어주고 querySelectAll을 이용해서 태그들을 배열에 넣어준다. 이것을 사용할때는 "배열변수.속성 = "속성값""을 해주면 된다.
분석
for문을 분석해보면 i마다 elements[i]의 innerHTML을 실행하고 그건 i + ": 목록"이라는 것이다.
결과
이벤트
클릭이벤트
이벤트 : js에서는 클릭이나 마우스, 키보드 키다운 같은 것을 이벤트라고 한다.
이 이벤트가 발생했을때 어떤 현상이 일어날 것인지를 정하는 방법들을 알아보자.
클릭이벤트
팝업창을 만들어서 닫기를 눌렀을때 어떤 현상이 일어나는지 확인해보자.
html코드
<body>
<!-- 버튼 누르면 팝업창 사라짐 -->
<p>팝업 창</p>
<div class="popup">
<h1>공지사항</h1>
<ul>
<li>내용</li>
<li>내용</li>
<li>내용</li>
<li>내용</li>
<li>내용</li>
</ul>
<button>닫기</button>
</div>
<script src="./js/06_dom_display.js"></script>
</body>js코드
let closeBtn =document.querySelector(".popup > button");
closeBtn.addEventListener("click", function () {
//여기 function은 이름이 없는 함수라 하여 익명함수라한다.
// todo 클릭시 실행될 코드
document.querySelector(".popup").style.display = "none";
});사용법
여기선 클릭이벤트를 사용했다.
변수에 .addEventListener()함수를 주고 괄호안 오른쪽에는 이벤트종류를, 왼쪽에는 function()을 넣어주면 된다. 그후 중괄호안에 이벤트가 발생할 시에 일어날 현상을 속성과 속성값으로 넣어주면 된다.
온클릭 이벤트
html코드
<body>
<ul>
<li>
<!-- 사용법 : <태그></태그> -->
<!-- 클릭하면 함수명() 실행됨 -->
<a href="#" onclick="changeBg('green')">Green</a>
<br/>
<a href="#" onclick="changeBg('orange')">Orange</a>
<br/>
<a href="#" onclick="changeBg('purple')">Purple</a>
<br/>
</li>
</ul>
<!-- 출력위치 -->
<div id="result"></div>
<script src="./js/06_dom_onclick.js"></script>
</body>여기의 온클릭 속성은 a태그가 가지는 속성이다.(모든태그가 가진다.) a태그의 링크를 클릭할 시 일어나게 되는 메서드를 입력해줄 수 있다. 그럼 여기서 필요한 메서드를 js에서 만들어보자.
js코드
// 예제) 3가지 글자 링크를 클릭하면 그 색깔로 배경색을 바꾸기
function changeBg(color) {
// 연결시키기
let result = document.querySelector("#result");
//배경색 바꾸기
result.style.backgroundColor = color;
}함수에 result라는 함수를 만들었다. 여기서 result라는 id를 선택해주었고, 그다음은 배경색을 바꾸기 위해 result변수의 스타일을 "color"로 바꾸게 하는 속성을 줬다.
여기서 color은 매개변수로 함수를 쓸때마다 값을 바꿀수 있게 해준다. 그래서 메서드괄호안에 원하는 색을 넣어주면 color의 값이 입력해준 값으로 바뀌는 원리이다.
온클릭 또다른 예제
이건 자바스크립트를 html의 body영역에 작성한 것인데
js에서 함수를 만들어서 html의 img태그에 준 것이다.
여기서 사용한 속성은 event.target.태그 속성으로, 태그속성의 상태를 출력해주는 속성이다. 그림에서는 src이지만 id를 나타내게 할 수도있다.
사진을 클릭하면 event.target.src에의해 src가의 정보가 나타나게된다.
결과
마우스이벤트
여기에는 많은 기능들이 있다 마우스커서가 올라왔을 때, 마우스커서가 벗어났을 때 등등..
html코드
<body>
<style>
div {
color: white;
background-color: skyblue;
padding: 10px;
width: 200px;
text-align: center;
}
</style>
<h2 onclick="changeText(event)">클릭해보세요</h2>
<div onmouseover="mouseOver(event)"
onmouseout="mouseout(event)">
마우스를 올려보세요
</div>
<script src="./js/08_event_mouseover.html.js"></script>
</body>여기서는 mouse를 올렸을경우 모양을 변하게 만들 수 있는데, onclick에서 배웠던 것과 같이 함수와 매개변수를 통해서 이용하면된다. 그런데 차이는 속성에 있다onmouse속성을 사용하면된다.
js코드
function changeText(event) {
event.target.innerHTML = "클릭하셨네요?";
};
//마우스 커서가 올라왔을때
function mouseOver(event) {
event.target.style.backgroundColor = "orange";
};
// 마우스 커서가 없어졌을때
function mouseOut(event) {
event.target.style.backgroundColor = "skyblue";
};결과
마우스가 있을 때
마우스가 없을 때
여러개의 기능 한번에 넣기
여러개의 기능을 클릭한번에 바꿀수는 없을까해서 메서드를 하나 더 만들어서 넣어봤는데 메서드는 onclick속성에 하나만 넣을수 있는것 같았다. 확인해보니 메서드를 하나 더 만들지 말고 한 메서드의 여러개의 기능을 넣어주는 방법이 있었다.
quiz_05, 06
quiz05
id = open버튼을 누르면 열리고 class = detail이 열리고 id = close버튼을 누르면 detail이 닫히게 만들어야한다.
html코드
<body>
<div id="item">
<!-- showDetail() 버튼 클릭하면 아래 목록 보이고 -->
<!-- hideDetail() 버튼 클릭하면 아래 목록 안보이기 -->
<!-- 힌트 : .style.display = "none" (안보이기) -->
<!-- 힌트 : .style.display = "block" (보이기) -->
<img src="./img/flower.jpg" alt="">
<button class="over" id="open" onclick="showDetail()">상세 설명 보기</button>
<!-- 상세목록 -->
<div id="desc" class="detail">
<h4>등심붓꽃</h4>
<p>북아메리카 원산으로 각지에서 관상초로 흔히 심고 있는 귀화식물이다.
길가나 잔디밭에서 흔히 볼 수 있다.
아주 작은 씨앗을 무수히 많이 가지고 있는데 바람을 이용해 씨앗들을 날려보내거나,
뿌리줄기를 통해 동일한 개체들을 많이 만들어 냄으로써 번식한다. </p>
<button id="close" onclick="hideDetail()">상세 설명 닫기</button>
</div>
</div>
<!-- 자바스크립트 링크 -->
<!-- TODO: 넘버링 고치기 -->
<script src="./js/quiz_05.js"></script>
</body>js코드
function showDetail() {
let detail= document.querySelector(".detail");
detail.style.display = "block";
}
function hideDetail() {
let detail= document.querySelector(".detail");
detail.style.display = "none";
}quiz 05에서는 새로운 속성을 배웠다. display속성인데 요소를 숨기거나 다시 보이게 할 수 있다. display = "none"을 해주면 요소가 사라지고 dispaly = "block"을 해주면 요소를 보여주게된다. 이 속성을 안다면 쉽게 풀 수 있었다.
quiz06
id = open버튼을 누르면 열리고 class = detail이 열리고 id = close버튼을 누르면 detail이 닫히게 만들어야한다.
html코드
<body>
<!-- 연습문제 5) prompt 입력창에 y 을 넣으면 -->
<!-- 글쓰기 버튼이 #app 위치에 나오고 -->
<!-- y 이외의 것을 넣으면 글수정 버튼이 나오게 하세요 -->
<!-- 힌트 : innerHTML : 문자열 , html 태그도 가능 -->
<!-- 예) .innerHTML = "<b>가나다</b>" -->
<!-- 조건문 : y이면 , 아니면 -->
<div id="app"></div>
<script src="./js/quiz_06.js"></script>
</body>js코드
let char = prompt("문자를 입력하세요.");
let app = document.querySelector("#app");
if (char == "y") {
app.innerHTML = "<button>글쓰기</button>";
}else{
app.innerHTML = "<button>글수정</button>";
}여기서는 innerHTML을 이용해서 글자를 입력하여 넣을수 있다는 것은 알았지만 태그를 입력할 수 있다는 것은 몰랐다. innerHTML은 진짜 html판을 만들어준다고 생각하고 그위에 html입력하듯이 다 입력할수 있다고 생각하면 될거 같다. 이거만 알면 쉽게 풀 수 있었다.
codeUp문제풀이
1076) 퀴즈 (반복 포함 문제)
📃 1076) 퀴즈
a부터 입력한 문자까지 순서대로 공백을 두고 출력한다.
입력 : f
출력 : a b c d e f
이 문제가 막혔던 이유는, 보통 반복을 멈추면 자기 자신을 포함하지 않고 자신에서 멈추는 문제가 많았다. 그런데 이문제는 자기자신이 출력을 되야하는 것 때문에 좀 당황했던 것같다.
풀이
let f = prompt("문자를 입력하세요");
let alphabet = ["a", "b", "c", "d", "e", "f"];
let i = 0;
let result = "";
while (true) {
if (alphabet[i - 1] == f) {
break;
};
result = result + alphabet[i] + " ";
i++
};
console.log(result);- 문제에서 입력하는 문자가 알파벳 나열이었으면 배열을 따로 지정 안 해줘도 됐겠지만 이번엔 f만 넣어줘야하기에 임의로 내가 alphabet이라는 출력할 배열을 만들어 주었다.
- 반복문에서 한번에 한줄로 출력하려면 변수를 만들어서 거기에 값들을 담아서, 변수를 출력해야한다. 그래서 result라는 변수를 만들어 값을 거기에 담았다.
- 여기가 문제였는데 어떻게 하면 자기 자신을 담아야할까 고민했다. 그래서 일단 f에서 빠져나오게 if문을 써주었다. 그러고 생각을 해보니 g가 있다면 g에서 탈출하게 하면 되겠구나 해서 alphabet[i]가 g이면 탈출하게 하려고 했다. 그런데 g가 없으니 alphabet[i-1]이 f인것이 alphabet[i]가 g인것과 똑같다는 생각을 해서 위와 같은 코드를 작성하게 됐다. 결과
f를 포함한 값이 잘 나온것을 확이할 수 있다.
앞으로는 자기자신을 포함해야할때에는 " i - 1 = 자기 자신 "을 이용하자.
느낀점
함수를 내가만들어서 디자인을 쉽게 이용할 수 있다. 조건을 줄수도 있고 반복을 할수도 있고.. 그리고 매개변수를 이용해서 html에서 상황(이벤트)에 따라 만들어진 함수를 내가 원하는 방법으로 만들 수 있다. 이 매개변수는 속성값이 될 수도 있고, 속성이 될수도 있고, 직접 화면에 나오는 문구가 될수도 있는 등 다야한 형태가 될수 있고 이런 형태를 함수에서 정의해줄 수 있다.
dom은 html을 작성하면 이것이 저장된 데이터로 js는 queryselect를 통해 여기에 접근이 가능하다. 접근후 접근한 id, class, 태그등의 디자인이나 움직임등 반복등을 조절할 수 있다. 이것은 바꾸고 싶은 영역이 있을때 사용하여 그 영역을 선택할수 있게 해준다.
지금까지 배웠던 반복 조건문 함수등을 이용해 특정조건에서 어떻게 웹디자인을 바꿀수 있는지 이런것을 눈으로 확인 할 수 있었다. 지금까지 이런것들이 어떻게 적용되는지 많이 궁금했는데 조금씩 궁금증이 풀리는거같다.
