본문 바로가기
Front-End/JavaScript

JavaScript(6)-2

by newny 2023. 2. 16.
반응형

1. 표준 객체

Math 객체

Number 객체

 

✅Date객체

Date객체 메소드 종류

  • getDate() : 일자
  • getDay() : 요일 (일요일 : 0 ~ 토요일 : 6)
  • getFullYear() : 연도
  • getMonth() : 월 (1월 : 0 ~ 12월 : 11)
  • getTime() : 1970년 1월 1일부터 현재까지의 시간을 밀리초(millisecond) 단위의 숫자로 반환
  • getHours() : 시간중 시 (0시(0) ~ 23시(23))
  • getMinutes() : 시간 중 분 (0분(0) ~ 59분(59))
  • getSeconds() : 시간 중 초 (0초(0) ~ 59초(59))
  • getMilliseconds() : 시간 중 초를 밀리초(millisecond) 단위로 반환

 

메소드 사용방법

let date = new Date() // 객체 생성
date.getFullYear() // 현재 년도 출력

 

Date객체 초기화

  1. new Date()
  2. new Date("날짜를 나타내는 문자열")
  3. new Date(밀리초)
  4. new Date(년, 월, 일, 시, 분, 초, 밀리초)

 

2. 브라우저 객체 모델

✅Window 객체

  • 브라우저와 관련한 다양한 기능을 제공
  • 객체명 생략하고 메소드명으로만 사용 가능

 

alert() 메소드

브라우저에 경고창을 띄워줌

확인버튼 하나만 있음

alert('\\"') -> "
alert('\\'') -> '
alert('""') -> ""
alert("''") -> ''
alert('\\\\') -> \\

 

confirm() 메소드

브라우저에 경고창을 띄워줌

boolean(true, false) 값으로 반환

확인, 취소 버튼 두개가 있음

let flag = confirm("영구히 삭제됩니다.\\n지울까요?")
if(flag) {
  alert("휴지통 비우기 성공")
} else {
  alert("휴지통 비우기 실패")
}

 

open() 메소드

실행 시 새 창을 띄워줌

 

print()

실행 시 인쇄창을 띄워줌

 

setInterval()과 setTimeout() 메소드

  • 주어진 시간에 따라 자동으로 함수 호출
  • 시간 단위 : 1 second = 1000 milliseconds

new version

  • setInterval(함수명, 시간) : 주기적으로 함수 호출
  • setTimeout(함수명, 시간) : 한번만 호출

old version

  • setInterval("함수명()", 시간)
  • setTimeout("함수명()", 시간)
const hello = () => {
  alert('안녕하세요')
}
setInterval(hello, 3000) // 3초마다 주기적으로 hello함수 호출
setTimeout(hello, 3000) // 3초후에 hello함수 한번만 호출

재귀적 함수 호출 관계를 이용해서 3초마다 주기적으로 hello함수 호출

const hello = () => {
  setTimeout(hello, 3000)
}

 

✅Screen 객체

사용자 device의 해상도 확인

alert(screen.width)
alert(screen.height)

 

✅Location 객체

현재 접속중인 페이지 정보를 갖고 있음

페이지 이동할 때 많이 사용

location.reload() // 현재페이지 새로고침
location.href="URL 또는 페이지명" // URL 또는 페이지명으로 이동
location = "URL 또는 페이지명" // href 생략가능

 

✅history 객체

페이지의 뒤로가기 버튼, 앞으로가기 버튼의 역할과 동일함

history.back() // 뒤로버튼 1번 클릭
history.forward() // 앞으로버튼 1번 클릭
history.go(-2) // 뒤로버튼 2번 클릭
history.go(2) // 앞으로버튼 2번 클릭

 

✅변수의 유효범위(SCOPE)

전역변수(Global variable)와 지역변수(Local variables)

  • 전역변수와 지역변수명이 같다고 가정할 때, 해당 지역에서 같은이름의 변수명을 호출하게되면 해당지역의 지역변수가 호출됨
  • 선언위치에 따라 구분됨
    • 전역변수 : 코드가 시작되어 선언되는 순간 메모리가 생성되고 코드 전체가 끝날 때까지 메모리를 차지하고 있음
    • 지역변수 : 특정한구역({})안에 생성되어 그 지역에서 선언되는 순간 메모리가 할당되며 해당 지역을 벗어나면 자동 소멸됨
let one = "하나" // 전역변수
const test3 = () => {
  alert("one : " + one)
  alert("two : " + two)
  alert("three : " + three)

  let uid = '아이디' // 지역변수
  alert(uid)
}

let two = "둘" // 전역변수 two
const test4 = () => {
	let two = '두번째' // 지역변수 two
  alert("one : " + one)
  alert("two : " + two) // 지역변수가 호출되어서 '두번째'라고 출력됨
  alert("three : " + three)

  let upw = '1234' // 지역변수
  alert(upw)
}

let three = "셋" // 전역변수

 

✅자바스크립트 적용

외부 자바스크립트 파일 (External)

  • .js 확장자를 사용하여 저장
  • 자바스크립트 파일을 적용하고 싶은 모든 웹 페이지에 <script>를 사용해 외부 스크립트 파일을 포함하면됨
  • 외부 자바스크립트 파일을 사용하면 웹의 내용을 담당하는 html 코드로부터 분리시킬 수 있음
  • 웹 브라우저가 외부 자바스크립트부터 미리 읽어올 수 있어 웹페이지의 로딩속도가 빨라짐
function printDate() {
    document.getElementById("date").innerHTML = Date();
}

<head>
    <meta charset="UTF-8">
    <title>JavaScript Apply</title>
    <script src="/examples/media/example.js"></script>
</head>

 

3. 이벤트 활용

✅키보드 이벤트

이벤트 설명

keydown 키가 눌릴 때 실행됨
키보드를 꾹 누르고 있을 때도, 입력될 때도 실행됨
keyup 키보드에서 키가 떨어질 때 실행됨
keypress 키가 입력되었을 때 실행 (웹 브라우저에 따라서 아시아권의 문자를 제대로 처리하지 못하는 문제가 있음) → 잘 사용하지 않음

 

키보드를 눌렀다 떼었을때 웹상에 문자가 출력되는 이벤트

스페이스바 누르는중

<script>
    document.addEventListener('DOMContentLoaded', () => {
        document.addEventListener('keydown', () => {
            document.body.innerHTML = '<h1>keydown</h1>'
        })
        document.addEventListener('keyup', () => {
            document.body.innerHTML = '<h1>keyup</h1>'
        })
    })
</script>

 

✅이벤트객체의 속성 이용하기

  • 이벤트가 발생되면 이벤트의 콜백함수의 첫번째 매개변수로 '이벤트객체'라는것이 전달됨
  • 이벤트 객체에 도트연산자를 사용하면 여러가지 속성을 이용할 수 있음
  • 매개변수 이름은 e 또는 event로 사용하는 경우가 많음

키보드 키 코드 사용하기

이벤트 속성 이름 설명

code 입력한 키
keyCode 입력한 키를 나타내는 숫자
altKey alt키를 눌렀는지
ctrlKey ctrl키를 눌렀는지
shiftKey shift키를 눌렀는지

 

이벤트객체의 code속성을 이용하여 입력한 키 출력하기

<script>
    document.addEventListener('DOMContentLoaded', () => {
        document.addEventListener('keydown', (e) => {
            document.body.innerHTML = `<h1>keydown ${e.code}</h1>`
        })
        document.addEventListener('keyup', () => {
            document.body.innerHTML = '<h1>keyup</h1>'
        })
    })
</script>

 

입력한 글자 수 출력하기

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>useEvent</title>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const h1 = document.querySelector('h1')
            const textarea = document.querySelector('textarea')
            textarea.addEventListener('keyup', () => {
                h1.textContent = `글자 수: ${textarea.value.length}`  // textarea에 입력된 글자의 길이를 추출
            })
        })
    </script>
</head>

 

✅이벤트 발생 객체

  • textarea → 이벤트가 발생되는 객체
  • e.currentget → 이벤트 발생 객체(textarea)를 직접 사용하는대신 이벤트객체(e)의 currentTarget 속성을 사용
  • this → 익명함수 선언(function())으로 this 키워드를 이용

 

✅기본 이벤트 막기

  • preventDefault() 메소드 사용
  • a태그의 기본이벤트인 ‘클릭 시 링크로 이동’ 막기
document.addEventListener('DOMContentLoaded', () => {
    const a = document.querySelector('a')
    a.addEventListener('click', (e) => {
        event.preventDefault()
    })
})

 

✅입력 양식: 버튼

form 태그 안에 button 태그가 들어가면 <input type="submit">과 똑같이 동작함

→ 따라서 form 태그 안에 submit 기능이 없는 버튼을 만들고 싶다면 <input type= “button”>을 사용해야함

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>useEvent</title>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const buttonA = document.querySelector('button')  //button 태그 불러오기
            buttonA.addEventListener('click', (e) => {
                e.currentTarget.textContent += '글자'
            })

            const buttonB = document.querySelector('input[type=button]')  //button 타입의 input 태그 불러오기
            buttonB.addEventListener('click', (e) => {
                e.currentTarget.value += '글자'
            })

            const form = document.querySelector('form')  //form 태그 불러오기
            form.addEventListener('submit', (e) => {
                const text = document.querySelector('input[type=text]')
                if (text.value.indexOf('@') >= 0) {     //입력받는 텍스트 안에 '@'가 포함되어있는지 확인
                    alert('정상적으로 제출합니다!')
                } else {
                    alert('이메일 형식으로 입력해주세요!')
                    e.preventDefault()   // 잘못 입력 받았을 때 제출을 막기위해 preventDefault()메소드 사용
                }
            })

        })
    </script>
</head>
<body>
    <!-- click 이벤트 -->
    <button>글자</button>
    <input type="button" value="글자">

    <!-- submit 이벤트 -->
    <form action="">
        이메일 형식을 입력해주세요!<br>
        <input type="text" name="test" id="">
        <input type="submit" value="글자">

				<!-- form 태그 안에 button 태그가 들어가면 <input type="submit">과 똑같이 동작함 -->
        <button>버튼</button>

        <!-- 따라서 form 태그 안에 submit 기능이 없는 버튼을 만들고 싶다면 button타입의 input태그를 사용해야함 -->
        <input type="button" value="버튼">
    </form>
</body>
</html>

 

✅입력 양식: 글자 입력

글자 입력으로 사용할 수 있는 태그

<input type="text"> 한줄 입력 가능

<textarea> 여러 줄 입력 가능
<p contenteditable="true">글자</p> • p태그의 속성중 contenteditable을 true로 주면 텍스트 입력양식으로 사용할 수 있음
• 웹상에서 텍스트를 직접 수정할 수 있음  

text 불러올 때 지정할 속성 : value로 하면됨

사용되는 이벤트 : change이벤트, key관련 이벤트

 

inch를 cm단위로 변환하는 예제

입력태그로 input type="text" 사용

<head>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const input = document.querySelector('input')
      const button = document.querySelector('button')
      const p = document.querySelector('p')
      button.addEventListener('click', () => {
	      p.textContent = `${Number(input.value) * 2.54}cm로 변환 되었습니다`
      })
    })
  </script>
</head>
<body>
  <input type="text"> inch <br>
  <button>계산</button>
  <p></p>
</body>

 

입력태그로 textarea 사용

<head>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const textarea = document.querySelector('textarea')
      const button = document.querySelector('button')
      const p = document.querySelector('p')
      button.addEventListener('click', () => {
        p.textContent = `${Number(textarea.value) * 2.54}cm로 변환 되었습니다`
      })
    })
  </script>
</head>
<body>
  <textarea name="" id="" cols="30" rows="10"></textarea>
  <button>계산</button>
  <p></p>
</body>

 

keyup 이벤트 사용: 버튼을 누르지않아도 키 입력만으로 단위 환산

<head>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      keydown -> keypress -> 입력양식에 값이 들어감 -> keyup
      const input = document.querySelector('input')
      const p = document.querySelector('p')
      input.addEventListener('keyup', () => {
        p.textContent = `${Number(input.value) * 2.54}cm로 변환 되었습니다`
      })
    })
  </script>
</head>
<body>
  <input type="text"> inch <br>
  <p></p>
</body>
</html>

 

change 이벤트 사용: 입력 양식 전체에 값 입력 마쳤을때 실행됨, 엔터를 누르거나 마우스로 입력양식을 떠나는 경우에 실행됨

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>javascript-event3</title>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const input = document.querySelector('input')
      const p = document.querySelector('p')
      input.addEventListener('change', () => {
        p.textContent = `${Number(input.value) * 2.54}cm로 변환 되었습니다`
      })
    })
  </script>
</head>
<body>
  <input type="text"> inch <br>
  <p></p>
</body>
</html>

 

✅입력 양식: 선택상자

  • select 태그, option 태그 이용
  • keyup 이벤트, change 이벤트 이용
  • 중복되는 부분은 함수로 만들어서 사용
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const input = document.querySelector('input')
    const span = document.querySelector('span')
    const select = document.querySelector('select')
    
    const 함수 = () => {  // 중복되는 부분은 함수로 만들어서 사용
    const 현재값 = Number(input.value)
    const 선택된단위 = select.options[select.options.selectedIndex]
    span.textContent = 현재값 * Number(선택된단위.value)
    }

    input.addEventListener('keyup', 함수() // 콜백함수
      // () => {
      // const 현재값 = Number(input.value)
      // const 선택된단위 = select.options[select.options.selectedIndex] //select.options 배열의 선택된 인덱스(select.options.selectedIndex) 값 가져오기
      // span.textContent = 현재값 * Number(선택된단위.value) // 선택된단위에 저장되어있는 값 = 선택한 옵션값 > 그 옵션값의 value값 불러오기
      // }
    )
    select.addEventListener('change', 함수()
      // () => {
      // const 현재값 = Number(input.value)
      // const 선택된단위 = select.options[select.options.selectedIndex]
      // span.textContent = 현재값 * Number(선택된단위.value)
      // }
    )
  })
</script>
</head>
<body>
<input type="text"> cm = 
<span></span>
<select name="" id="">
  <option value="10">mm</option>
  <option value="0.01">m</option>
  <option value="0.393701">inch</option>
</select>
</body>
반응형
저작자표시 비영리 변경금지

'Front-End > JavaScript' 카테고리의 다른 글

자바스크립트 예제(6)  (0) 2023.02.16
JavaScript(6)-1  (2) 2023.02.16
자바스크립트 예제(5)  (0) 2023.02.15

관련글

댓글

티스토리툴바