본문 바로가기
학원수업/1월

01/27 국비학원 43회차 JavaScript수업 (DOM모델, This )

by 코딩마스터^^ 2023. 1. 27.

Filter로 내가 정의하는 

Array.prototype.forEach()

forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다.

 arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

 

구조분해할당 복습

...연산자

 

 

자바스크립트 구조

window : 가장 최상위 객체

document :

html : 루트태그

head

body : 화면을 그려주는태그

DOM (문서 객체 모델)이란?

문서 객체 모델, 즉 DOM은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스입니다. 즉 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당합니다.

출처 : https://www.codestates.com/blog/content/dom-javascript 

 

문서 객체 모델 DOM 과 자바스크립트 JavaScriptㅣ생성 방식 및 접근 방법 - 코드스테이츠 공식 블로

웹 개발을 하는 프론트엔드 개발자라면 알고 있어야하는 자바스크립트(JavaScript)와 DOM(문서 객체 모델)란 무엇일까요?자바스크립트와 DOM(문서 객체 모델)의 관계와 차이점은 무엇인지, 자바스크

www.codestates.com

 

쿠키와 세션

우리가 지금 쓰는 Live Server는 프론트만 보여주는 서버이다.

live sever가 AWS등에 내가만든걸 뿌려준다?

 

Live Server(5500)

 

웹서비스에서 영속성을 담당하는것

쿠키, 세션

 

지금하는 채팅프로그램에는 없어서 디비에서 끌어오고있다.

 

변수->배열->객체배열(deptno[ ])->List, Map->쿠키, 세션

 

세션은 캐시메모리에 관리된다. 서버쪽이다.

쿠키는 클라이언트 사이드에서 관리된다. 로컬이다.

 

비상태 프로토콜의 단점을 보완해주는것이 쿠키와 세션이다.

http(stateless)-> 비상태 프로토콜

 

request 하면 URL이 들어가야 한다.

브라우저에서 실행이 안된다.?JSP,Servlet이 필요하다.

 

 Servlet은? 클라이언트의 요청을 처리하고, 그 결과를 반환하는 
Servlet 클래스의 구현 규칙을 지킨 자바 웹 프로그래밍 기술

 

정적페이지

자바가 되려면 톰캣이 필요하다.

톰캣은 자바 등등을 해석할수있는 엔진이 탑재되어있다.

 

그래서 프론트는 정적페이지이다.

 

html, css, js는

클라이언트쪽에 다운로드가되어서 처리가 되는것이지 서버와 연결이 되어서 상태가 유지되는것이 아니다.

 

모니터 안에는 브라우저가 있다.

브라우저는 다운받은 문서를 실행한다.

브라우저가 문서를 실행하기 위해서 DOM tree를 그린다.

CSS를 통해서 전체적인 디자인 결정이 된다.

그것이 다시 사용자의 화면에 응답이 된다.

 

클라이언트에서 요청을 받을때 사용자가 원하는것은 CRUD

이런것들을 지원해주는 API가 있는데 이것이 Restful API이다.

인터프리터?

태그는 때어내고 컨텐트만 보여준다.

 그러기 위해서는 body태그안에 넣어야 한다.

브라우저가 해석해서 보여준다.

 

node.js는 브라우저가 없어도 테스트가 가능하다. 보여준다.

nodemon우리가 한것이 node.js이다.

 

메인메소드 대신에 URL을 통해서 요청을 한다.(live server p:5500) 통신을 하는것이다.

이 통신에 필요한 API가 Reatful이다.

요청의 처리를 자바가 하고 자바를 오라클 서버(p : 1521)와 연동해서 통신한다.

 

포트번호마다 서비스 되는 내용이 다르다.

무신사의 포트번호랑 쿠팡의 포트번호 다르다.

 

StateLess 비상태 프로토콜

Https : 안전하니까 안심하고 이용하세요. 

국가에 신고를 해야한다.인증을 받으면 S붙음

 

우리가 쓰는 아이피는 외부에서 접근이 불가능하다.

 

//이벤트


이벤트란 무언가 일어난다=액션=요청=request

1.사용자가 발생 시키는 이벤트
:click, mouseover,mousemove,mousewheel,scroll
2.시스템이 발생 시키는 이벤트
:load, error

//이벤트 연결 방법
1. 이벤트 핸들러를 이용하는 방법
    DOM요소.onclick=()=>{}
2. 내장 함수를 이용
    DOM요소.addEventListener('이벤트명',()=>{})

 

이벤트 버블링 - Event Bubbling

이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미합니다.

이벤트 버블링이란 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상을 말한다.

메뉴이벤트

토글버튼에 이벤트 넣기

눌렀을때 색이 변하는 리스트를 만들고싶다~!

* {
  box-sizing: border-box; /* 계산하기 용이하다 */
  margin: 0;
  padding: 0; /* 구슬 없애려면 0줘야한다. */
}
body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.list {
  display: flex;
}

li {
  width: 150px;
  height: 50px;
  list-style: none; /* 구슬없애 */
  border: 1px solid rgb(0, 0, 0);
  float: left;
}

li.on a {
  background-color: blueviolet;
  
  font: bold 16px/1.25 "arial";
}

li.off a {
  background-color: rgb(43, 43, 226);
  width: 100%;
  height: 100%;
  font: bold 16px/1.25 "arial";
}

a {
  text-decoration: none; /* 밑줄없앰 */
  align-items: center;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}

JavaScript로 이벤트 넣기

const btns = document.querySelectorAll(".list li"); //array
let isFlag = 1; //0이 아닌것은 다 참이다!

// for(let i=0; i<btns.length;i++){
//   btns[i].addEventListener('click',function(e){
//     console.log(e.target);
//   })
// }
//인자가 1개이면 괄호 생략 가능
for (let i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", (e) => {
    //토글버튼 - 전류가 흘렀다가 안흘렀다가 0/1/0/1
    if (isFlag) {
      btns[i].setAttribute("class", "on");
      --isFlag;
    } else {
      btns[i].setAttribute("class", "off");
      ++isFlag;
    }
    console.log(e.target);
  });
}

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./menu.css" />
    <script defer src="./menu.js"></script>
  </head>
  <body>
    <!-- ul.list>(li>a{메뉴$})*5 -->
    <ul class="list">
      <li><a href="#">메뉴1</a></li>
      <li><a href="#">메뉴2</a></li>
      <li><a href="#">메뉴3</a></li>
      <li><a href="#">메뉴4</a></li>
      <li><a href="#">메뉴5</a></li>
    </ul>
  </body>
</html>

 

THIS

개발자 도구에서 this를 출력하면 window를 가리킨다.

bind를 통해 객체 지정해준다.

 

테이블 만들기

 

td : 테이블 셀 만드는 태그이다.

 

중첩테이블

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 한꺼번에 디자인주기 */
      a {
        text-decoration: none; /* 밑줄 없애기 */
      }
    </style>
  </head>
  <body>
    <!-- 태그는 중첩해서 사용 가능함 -->
    <!-- 크기는 %로 주는것이 좋다. 가변적이니까. 화면따라 늘었다 줄었다. -->
    <table border="1" width="1000px" height="" align="center">
      <!-- 빅테이블 -->
      <!-- 테두리 1줌.  -->
      <!-- ========================top================================ -->
      <tr>
        <!-- 가로한줄 -->
        <td width="100%" height="50px">
          <!-- 한칸씩 -->
          <table border="1" width="100%" height="100%" bordercolor="green">
            <tr>
              <td>top 영역</td>
            </tr>
          </table>
        </td>
      </tr>
      <!-- ============================body================================ -->
      <tr>
        <td>

      
      <table>
        <tr>
          <!-- 메뉴시작 -->
          <td width="200px" height="400px">
            <table border="1" width="100%" height="100%" bordercolor="red">
              <tr>
                <td valign="top">
                  <table>
                    <tr>
                      <td><a href="#">소개</a></td>
                    </tr>

                    <tr>
                      <td><a href="#">게시판</a></td>
                    </tr>

                    <tr>
                      <td><a href="#">로그인</a></td>
                    </tr>

                    <tr>
                      <td><a href="https://www.google.com">구글</a></td>
                    </tr>

                  </table>
                </td>
              </tr>
            </table>
          </td>
          <!-- 메뉴끝 -->
          <!-- 메인시작 -->
          <td width="800px" height="400px">
            <table border="1" width="100%" height="100%" bordercolor="green">
              <tr>
                <td>main</td>
              </tr>
            </table>
          </td>
          <!-- 메인끝 -->
        </tr>
      </table>
    </td>
  </tr>
      <!-- ===========================bottom=============================== -->
      <tr>
        <td width="1000px" height="30px" align="center">
          <table border="1" width="100%" height="100%" bordercolor="green">
            <tr>
              <td>bottom 영역</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>

겹쳐보기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      box-sizing: border-box;/* 똑같이 크기 맞춰줄려면 보더박스사용 */
    }
    div{
      width: 200px;
      height: 200px;
    }
    .d1{
      background-color: aquamarine;
      /*margin: 20px; */
      padding: 20px;
      position: absolute;
      top: 30px;
      left: 50px;
      z-index: 1;/* 겹치는 순서 */
    }
    .d2{
      background-color: blueviolet;
      position: relative;
      z-index: 2;/* 숫자가 클수록 위로 겹쳐진다. */
    }
  </style>
</head>
<body>
  <div class="d1">d1</div>
  <div class="d2">d2</div>
</body>
</html>

 

 

'학원수업 > 1월' 카테고리의 다른 글

01/31 44회차 수업 JSON, RestfulAPI, JSP, Servlet  (1) 2023.01.31
01/30 44회차 수업 HTML, CSS, JS  (1) 2023.01.30
01/26 국비학원 42회차수업 JavaScript (호이스팅, 함수, css)  (1) 2023.01.26
01/25 국비학원 41회차 JavaScript수업 (nodemon사용하기, 스프레드 연산자)  (0) 2023.01.25
01/20 국비학원 40회차 수업 MyBatist, Tomcat, Gson  (0) 2023.01.22

관련글

댓글

티스토리툴바