Visual Studio Code

[WINDOW] chapter_01

DEVELOPERS_Ivan ㅣ 2023. 8. 23. 14:51

01_window_open
새창(새탭) 열기/닫기, 새창/새탭 금지(웹브라우저 설정)
myWin : let(예약어 없음 : 전역변수, 추천하지 않음)
※ html 경로 연결
더보기
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>공지사항</title>
    <style>
      #content {
        border: 2px double skyblue;
        border-radius: 10px;
        padding: 10px;
      }
      ul {
        margin-left: 15px;
        list-style-type: none;
      }
      ul li {
        margin: 10px 5px;
      }
      button {
        position: absolute;
        bottom: 20px;
        right: 20px;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <h1>공지사항</h1>
      <ul>
        <li>항목 1</li>
        <li>항목 2</li>
        <li>항목 3</li>
        <li>항목 4</li>
        <li>항목 5</li>
      </ul>
      <button onclick="window.close();">닫기</button>
    </div>
  </body>
</html>
더보기
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
    <title>새창(새탭) 열기/닫기, 새창/새탭 금지(웹브라우저 설정)</title>
 
    <style>
      #container {
        width: 300px;
        margin: 20px auto;
      }
      button {
        border: 1px solid #222;
        padding: 15px;
        font-size: 0.8em;
        margin-right: 20px;
      }
    </style>
  </head>
 
  <body>
    <div id="container">
      <button onclick="openWin()">팝업 창 열기</button>
      <button onclick="closeWin()">팝업 창 닫기</button>
    </div>
 
    <script src="./js/01_window_open.js"></script>
  </body>
</html>
더보기
// 새창(새탭) 열기/닫기, 새창/새탭 금지(웹브라우저 설정)
function openWin() {
  let opt = "width=400, height=350"; // 새창 크기
  // myWin : let(예약어 없음 : 전역변수, 추천하지 않음)
  myWin = window.open("notice.html", "doit", opt);
}
function closeWin() {
  myWin.close(); // 새창 띄우고 리턴된 변수를 사용
}

02_location_back
Location.href 함수 페이지 이동방법
사용법 : location.href = "이동할페이지 내부 경로"
사용법 : location.href = "이동할페이지 외부 프로토콜(http) 경로"
※ html 경로 연결, 프로토콜 경로 연결
더보기
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>공지사항</title>
    <style>
      #content {
        border: 2px double skyblue;
        border-radius: 10px;
        padding: 10px;
      }
      ul {
        margin-left: 15px;
        list-style-type: none;
      }
      ul li {
        margin: 10px 5px;
      }
      button {
        position: absolute;
        bottom: 20px;
        right: 20px;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <h1>공지사항</h1>
      <ul>
        <li>항목 1</li>
        <li>항목 2</li>
        <li>항목 3</li>
        <li>항목 4</li>
        <li>항목 5</li>
      </ul>
      <button onclick="window.close();">닫기</button>
    </div>
  </body>
</html>
더보기
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
    <title>Location.href 함수 페이지 이동방법</title>
  </head>
 
  <body>
    <button onclick="movePage()">공지사항 이동</button>
 
    <!-- 간단한 코드라 js파일없이 아래에서 script 작성 -->
    <script>
      // 함수 정의
      function movePage() {
        // 페이지 이동
        // 사용법 : location.href = "이동할페이지 내부 경로"
        location.href = "./notice.html";
 
        // // // 페이지 이동
        // // // 사용법 : location.href = "이동할페이지 외부 프로토콜(http) 경로"
        // // // 프로토콜(http://) : 인터넷 문서 전송 규칙
        location.href = "http://www.naver.com";
      }
    </script>
  </body>
</html>

location.href = "./notice.html"; 실행시 내부경로 html 적용 및 뒤로가기가 가능
 location.href = "http://www.naver.com"; 실행시 외부경로 http 적용 및 뒤로가기 가능

03_location_replace
Location.(href & replace) 함수 차이
이력(histoy)을 남기면서 프로토콜 경로 네이버 페이지 이동(뒤로가기 가능)
사용법 : location.href = "이동할페이지 외부 프로토콜(http) 경로"
이력(histoy)을 남기지 않는 프로토콜 경로 구글 페이지 이동(뒤로가기 불가능) 
사용법 : location.replace = "이동할페이지 외부 프로토콜(http) 경로"
더보기
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
    <title>Location.(href&replace)</title>
  </head>
 
  <body>
    <button onclick="moveNaver()">네이버 이동</button>
    <button onclick="moveGoogle()">구글 이동</button>
   
  <!-- 간단한 코드라 js파일없이 아래에서 script 작성 -->
    <script>
      // 함수 정의
      function moveNaver() {
        // location.href
        // 웹 브라우저 기본 기능(방문한 페이지는 자동 저장됨)
        // 페이지 이동 : 이력(histoy)을 남기면서 이동(뒤로가기 가능)
        // 네이버 페이지로 이동 후 뒤로가기가 가능
        // 사용법 : location.href = "이동할페이지 외부 프로토콜(http) 경로"
        location.href = "http://www.naver.com";
      }
 
      // location.replace
      // 페이지 이동 : 이력(histoy)을 남기지 않음(뒤로가기 불가능)
      // 구글 페이지로 이동 후 뒤로가기 불가
      // 사용법 : location.replace = "이동할페이지 외부 프로토콜(http) 경로"
      function moveGoogle() {
        location.replace("http://www.google.com");
      }
    </script>
  </body>
</html>

location.href = "이동할페이지 외부 프로토콜(http) 경로 실행시 외부경로 http 적용되어 네이버 페이지 접속 후 뒤로가기(히스토리 남음) 가능
location.replace= "이동할페이지 외부 프로토콜(http) 경로 실행시 외부경로 http 적용되어 구글 페이지 접속 후 뒤로가기(히스토리 없음) 불가능

04_screen_size
화면 해상도 사이즈 표시 3가지
화면(모니터, 해상도), 웹브라우저 가로, 크기, HTML 문서 가로, 세로 크기
더보기
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
    <title>화면 해상도 사이즈 표시</title>
 
    <style>
      img {
        max-width: 30vw;
        height: auto;
      }
    </style>
  </head>
 
  <body>
    <h1>화면 설명</h1>
    <img src="./img/screen.png" alt="화면설명" />
 
    <h2>screen</h2>
 
    <h3>컴퓨터 화면의 해상도 가로, 세로를 표시합니다.</h3>
    <p>
      screenWidth : <span id="screenWidth"></span><br />
      screenHeight : <span id="screenHeight"></span><br />
    </p>
 
    <h2>browser</h2>
 
    <h3>웹 브라우저 화면의 가로, 세로를 표시합니다.</h3>
    <p>
      browserWidth : <span id="browserWidth"></span><br />
      browserHeight : <span id="browserHeight"></span><br />
    </p>
 
    <h3>html 페이지의 가로, 세로를 표시합니다.</h3>
    <p>
      pageWidth : <span id="pageWidth"></span><br />
      pageHeight : <span id="pageHeight"></span><br />
    </p>
 
    <p>
      참조 :
    </p>
 
    <!-- 간단한 코드라 js파일없이 아래에서 script 작성 -->
    <script>
      // TODO: 모니터
      //    화면의(모니터, 해상도) 가로 크기
      let screenWidth = screen.width;
      //    출력
      document.querySelector("#screenWidth").innerHTML = screenWidth;
      //    화면의 세로 크기
      let screenHeight = screen.height;
      //    출력
      document.querySelector("#screenHeight").innerHTML = screenHeight;
 
      // TODO: 웹브라우저
      //    웹브라우저의 가로 크기(메뉴 등은 제외한 부분)
      let browserWidth = window.innerWidth;
      //    출력
      document.querySelector("#browserWidth").innerHTML = browserWidth;
      //    웹브라우저의 세로 크기(메뉴 등은 제외한 부분)
      let browserHeight = window.innerHeight;
      //    출력
      document.querySelector("#browserHeight").innerHTML = browserHeight;
 
      // TODO: html 문서
      //    html 문서의 가로 크기
      let pageWidth = document.documentElement.scrollWidth;
      // 출력
      document.querySelector("#pageWidth").innerHTML = pageWidth;
      //    html 문서의 세로 크기
      let pageHeight = document.documentElement.scrollHeight;
      // 출력
      document.querySelector("#pageHeight").innerHTML = pageHeight;
    </script>
  </body>
</html>

SIZE 설정 값이 출력됨

05_scroll
지정된 좌표로 강제 이동
스크롤 가능하게 크게 세로 지정
사용법 : window.scrollTo(x좌표, y좌표);
더보기
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
    <title>지정된 좌표로 강제 이동</title>
    <style>
      body {
        width: 100%;
        /* 스크롤 가능하게 크게 세로 지정 */
        height: 2000px;
      }
      p {
        font-size: 3em;
      }
      button {
        margin: 10px;
        width: 200px;
        height: 200px;
        font-size: 2em;
      }
    </style>
  </head>
  <body>
    <!-- 예제 : 지정된 자표로 강제 이동 -->
    <button onclick="myScrollTo()">scrollTo()</button><br />
    이동 좌표 : <span id="absolute"></span>
 
    <!-- 간단한 코드라 js파일없이 아래에서 script 작성 -->
    <script>
      function myScrollTo() {
        // 사용법 : window.scrollTo(x좌표, y좌표);
        window.scrollTo(0, 100);
        // window.scrollY : 웹브라우저에서 y축기준 스크롤된 위치값
        document.querySelector("#absolute").innerHTML = window.scrollY;
      }
    </script>
  </body>
</html>

scrollTo button 클릭시 지정한 이동 경로만큼 스크롤 이동

저작자표시 비영리 동일조건

'Visual Studio Code' 카테고리의 다른 글

[JQUERY] chapter_02  (0) 2023.08.24
[JQUERY] chapter_01  (0) 2023.08.24
[DOM] chapter_01  (0) 2023.08.21
[JavaScript] chapter_02  (0) 2023.08.21
[JavaScript] chapter_01  (0) 2023.08.16
Visual Studio Code 다른글

티스토리툴바