JAVAScript 객체

태그들을 Dom이라고 하는 객체라고 부른다.

자바스크립트에서 class만들기가 가능하고 객체도 만들수 있다.

new라는 키워드 사용

new Date()에 년월일 시분초에 관한 게 다있다

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/getDate

Date.prototype.getDate() - JavaScript | MDN

getDate() 메서드는 주어진 날짜의 현지 시간 기준 일을 반환합니다.

developer.mozilla.org

자바스크립트 내장객체에 대해서 관찰할 수있다. 실행해서 결과값도 볼 수있고

함수는 끝에 괄호 열고 닫고 가 있다

클래스의 메소드에 접근할때는 .으로 접근한다.

new Array안쓰고 요새는 []를 쓴다.

p559의 array메소드는 다 알아둬아한다. 잘해야 자바스크립트 잘할수 잇다. 데이터베이스 없이 자바스크립트로 사용해서 사용할 수 있기때문에 jquery 기반이다.

Array 기반 메소드는 이것말고 도 많으니까 공부해두는 것이 낫다

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

Array - JavaScript | MDN

JavaScript Array 클래스는 리스트 형태의 고수준 객체인 배열을 생성할 때 사용하는 전역 객체입니다.

developer.mozilla.org

join("연결문자열") 문자열을 지정해주지않으면 ,로 함

document.write("<ul><li>"+nums.join("</li><li>")+"</li></ul>"+"<br>")

shift() 배열의 맨앞에 애를빼내고 pop()은 배열의 맨뒤에 애를 빼낸다 ->가능하면 이런 방식으로 제거 하지 않는 것이 낫다

삭제

splice(위치-인덱스로 0부터시작함)

splice(2) - > 인덱스 2부터 잘라온다. - >기존의 배열에서는 삭제된다.

splice(위치, 건수) - > 시작위치부터 건수만큼만 가져온다.

splice(위치,건수,"원본배열에 추가할 요소1","원본배열에 추가할 요소2",...)

slice()-->원본데이터는 변화가 없으면서 가져오기만 한다.

slice(2) - > 인덱스 2번ㅌ부터 끝까지 가져온다.

시작날짜부터 얼마나 됐는지 확인하려면 date의 객체의 메소드 getTime()을 활용해서 두 날짜에서 빼면된다.

window - > 앞에 아무것도안쓰인애들은 window가 생략되었다고 보면된다.

웹브라우저를 누를때마다 window가 하나씩 만들어진다.

window가 최상위 객체

sessionStorage - >dB없이 키값문자열로 데이터를 관리한다.

window.scroll(x,y좌표) - > 숫자만큼 이동한다.

요새는 결제창에만 사용하고 잇고 이걸 쓰지 ㅇ낳느다. -> 보안때문에 레이어로 만든다

var win = window.open("새창이름","pop", "width=500,height=500")

win.close();//나오자마자 꺼짐

onclick=childWindowClose()

navigator의 useragent를 가장 많이 사용한다.

history

내가 주소창을 통해 왓다갔다담겨져있는 기록물이다.

이전으로 돌아가ㅏ고자할때

replace()하면 기록이 남지 않는다. 이전으로 되돌아갈수 없다.

걍 location쓰면 되돌아가기 버튼을 누를 수 있다.

부모에서 열어주려면 win.opener = window.self();

<a href-"#" onclick=windwow.opener.location.replace("html");window.close();return false;">자세히보기</a>

(전체길이 - 팝업창길이 )/ 2 = 중간의 시작지점 --> 이걸 지정해주는게 left 속성이다.

var left = (screen.availWidth - 500)/2

var topp = (screen.availHeight -400)/2

top객체가 있네.....오류쓰 최상위 윈도우를 의미함

시간을 멈추고 진행시킬수 있는거

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>현재 시각은?</title>
  <style>
    p {
      margin-top:20px;
      font-size:1.2em;
      text-align: center;
    }
    .display {
      font-size:1.5em; 
      font-weight:bold;
      color:blue;
      /* text-align:center; */
    }
  </style>
</head>
<body>
  <p>현재 시각 <span id="current" class="display"></span></p>
  <button id="start">시작</button>
  <button id="stop" disabled>멈춤</button>
  <script>
    var interval = 0;
    var start = document.querySelector("#start");
    var stop = document.querySelector("#stop");
    
    start.onclick = () => {
      interval = setInterval(displayNow, 1000);  // 1초마다 시간 계산 함수 실행
      start.disabled = true;
      stop.disabled = false;
    }

    document.querySelector("#stop").onclick = () => {
      clearInterval(interval);
      start.disabled = false;
      stop.disabled = true;
    }

    function displayNow() {  // 시간 계산 함수
      let now = new Date();
      let currentTime = now.toLocaleTimeString()

      document.querySelector("#current").innerHTML = currentTime;   // id="current" 인 요소에 현재 시간 표시
    }

    displayNow();

  </script>
</body>
</html>

특정이벤트일때 시간을 가져오는거

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>현재 시각은?</title>
  <style>
    p {
      margin-top:20px;
      font-size:1.2em;
      text-align: center;
    }
    .display {
      font-size:1.5em; 
      font-weight:bold;
      color:blue;
      /* text-align:center; */
    }
  </style>
</head>
<body>
  <p>현재 시각 <span id="current" class="display"></span></p>
  <button id="start">시작</button>
  <button id="stop" disabled>멈춤</button>
  <script>
    var interval = 0;
    var start = document.querySelector("#start");
    var stop = document.querySelector("#stop");
    
    start.onclick = () => {
      interval = setTimeout(displayNow, 1000);  // 1초마다 시간 계산 함수 실행
      start.disabled = true;
      stop.disabled = false;
    }

    document.querySelector("#stop").onclick = () => {
      clearTimeout(interval);
      start.disabled = false;
      stop.disabled = true;
    }

    function displayNow() {  // 시간 계산 함수
      let now = new Date();
      let currentTime = now.toLocaleTimeString()

      document.querySelector("#current").innerHTML = currentTime;   // id="current" 인 요소에 현재 시간 표시

      interval = setTimeout(displayNow, 1000);
    }

  </script>
</body>
</html>

Dom

트리형태의 문서모델

getElementById()

옛날버전이고 1개만 찾을 때는 가장 빠르다 1개만 찾아옴

요새는 querySelector를 사용한다.

getElementsByClassName()

클래스 이름을 갖고 찾아옴 복수개를 찾아옴

getElementsByTagName()

태그이르을 가지고 찾아옴 복수개를 찾아옴

innerText, innerHTML

태그에 넣기 태그를 아ㅣㄴ면 요소를

innerText - > 태그 못들어감 -> 빠르다

innerHTML->태그가 들어갈 수 있다. ->전체를 대상으로 할때는 이게 제일 빠르다

alert두줄이 같은의미이고 cup.src=""설정이 setAttribute와 같다.

event의 종류를알고 싶을 때 function의 매개변수로ㅗ event를 준다. 아니면 그냥 매개변수 없이 써도된다.

target : 이벤트를 발생한 원본객체를 나타냄

이벤트 핸들러가 여러개의 함수를 등록받아 실행 할 ㅅ ㅜ있다.

addEventListener를 통해서

addEventListener("수행할 이벤트",실행할 함수명,캡쳐여부)

true-캡처링한ㄷ. - >부모태그에서 받아서 처리하겠다 -> 공통의 이벤트 처리에서는 이렇게 쓴다.

false - 버블링을 한다. -> 자식태그까지 들어가서 처리하겠다

사용자 정의 속성

data-src이런식으로 써서 정보값으로 사용할 수 잇다.

data-를 붙여줘야함

단. 속성 이름 안에 - 이게 잇는건 뺄셈을 인식해서 getAttribute로 얻어와야한다.

appendChild()-> 태그안에 태그 추가

한줄로 정리할 수 있다.

  <script>
    function addP() {
      // var newP = document.createElement("p");
      // var txtNode = document.createTextNode("DOM은 Document Object Model의 줄임말입니다.");
      // newP.appendChild(txtNode);
      // document.getElementById("info").appendChild(newP);

      document.getElementById("info").innerHTML = "<p>DOM은 Document Object Model의 줄임말입니다.</p>";
    }
  </script>

button 태그 대신 input태그의 submit 타입을 사용하면 키보드에서 enter키를 사용하면 서버로 넘어가도록할 수 있다.

이것 말고도 img 버튼을 만들어두면 똑같이 동작한다.

add +=....

내가 화면에 추가한 내용의 add를 화면 변경없이 하는 것

<!DOCTYPE html>
<html lang="ko">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Web Programming</title>
   <link rel="stylesheet" href="css/nodelist.css">
</head>
<body>
  <div id="container">
    <h1>Web Programming</h1>
    <p>공부할 주제를 기록해 보세요</p>
    <form action="add.jsp" id="myForm">
      <input type="text" id="subject" autofocus>
      <input type="submit" value="추가">
    </form>
    <hr>  
    <ul id="itemList"></ul>  
  </div>
  <script>
    //var myForm = document.getElementById("myForm");
    var myForm = document.querySelector("#myForm");
    var subject = document.querySelector("#subject");
    var itemList = document.querySelector("#itemList");

    myForm.addEventListener("submit", (event) => {
      event.preventDefault();
      console.log(subject.value);
//      itemList.innerHTML += "<li>" +  subject.value + "</li>";

      var li = document.createElement("li");
      var text = document.createTextNode(subject.value);
      li.appendChild(text);
      itemList.appendChild(li);

      subject.value = "";
      return false;
    });


  </script>
</body>
</html>

좌우 번갈아가며 입력한 내용이 저장되는거

<!DOCTYPE html>
<html lang="ko">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Web Programming</title>
   <link rel="stylesheet" href="css/nodelist.css">
</head>
<body>
  <div id="container">
    <h1>Web Programming</h1>
    <p>공부할 주제를 기록해 보세요</p>
    <form action="add.jsp" id="myForm">
      <input type="text" id="subject" autofocus>
      <input type="submit" value="추가">
    </form>
    <hr>  
    <ul id="itemList"></ul>  
  </div>
  <script>
    //var myForm = document.getElementById("myForm");
    var myForm = document.querySelector("#myForm");
    var subject = document.querySelector("#subject");
    var itemList = document.querySelector("#itemList");
    var len = 0;
    myForm.addEventListener("submit", (event) => {
      event.preventDefault();
      console.log(subject.value);
//      itemList.innerHTML += "<li>" +  subject.value + "</li>";

      var li = document.createElement("li");
      var text = document.createTextNode(subject.value);
      li.appendChild(text);
      itemList.appendChild(li);

      len++;
      li.className = (len % 2 == 0 ? "self" : "other");

      subject.value = "";
      return false;
    });


  </script>
</body>
</html>

css

*{
  box-sizing:border-box;
}
#container {  
  width:500px;
  margin:20px auto;
  padding:20px;
}
input[type="text"] {
  width:370px;
  float:left;
  height:30px;
  padding-left:30px;
}
button {
  width:90px;
  height:30px;
  float:right;
  background:#222;
  color:#fff;
  border:none;
}
hr { clear:both; display:none; }
ul { list-style:none; padding-top:50px;}
li { 
  line-height: 2.5; 
  border: 1px solid #000;;
}

li.other { 
  text-align: left;
  background-color: #fff;
}

li.self { 
  text-align: right;
  background-color: #ffff00;
}

li:hover { cursor:pointer;}

'Do it! HTML+CSS+자바스크립트' 카테고리의 다른 글

JSP 한글설정 (0)	2023.07.01
JAVASCRIPT (0)	2023.06.29
css 뷰포트 이어서 (0)	2023.06.28
css 8-5부터 (0)	2023.06.27
css (0)	2023.06.26

개발자가 되어주마!

JAVAScript 객체

'Do it! HTML+CSS+자바스크립트' 카테고리의 다른 글

티스토리툴바

JAVAScript 객체

'Do it! HTML+CSS+자바스크립트' 카테고리의 다른 글

'Do it! HTML+CSS+자바스크립트' Related Articles

티스토리툴바