AI교육과정 - JavaScript.4

단비·2022년 11월 8일
0

AI교육과정

목록 보기
27/69

window: 페이지 전체

document: body


  • history 객체
    • 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체
    • 사용자의 개인정보를 보호하기 위해 이 객체의 대부분의 접근 방법을 제한
    1. back(): 뒤로 이동
    2. forward(): 앞으로 이동
    3. go(0): 새로고침
      • location.reload(): 새로고침
  • navigator 객체 브라우저 공급자 및 버전 정보 등을 포함한 브라우저에 대한 정보를 저장하는 객체
    1. geoloaction: GPS 정보를 수신하는 프라퍼티

😏🤭🧐 문서 객체모델(Document Object Model) 😏🤭🧐

  • HTML 문서 또는 XML문서 등을 접근하기 위한 일종의 인터페이스 역할
  • 문서 내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공
  • document 객체
    • 웹 페이지(body) 자체를 의미하는 객체
    • 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때 반드시 document 객체로부터 시작
    1. getElementsByTagName(): 해당 태그 이름의 요소를 모두 선택
    2. getElementById(): 해당 아이디의 요소를 선택
    3. getElementsByClassName(): 해당 클래스에 속한 요소를 모두 선택
    4. getElementsByName(): 해당 name의 속성값을 가지는 요소를 모두 선택
    5. querySelectorAll(): 선택자로 선택되는 요소를 모두 선택 [or querySelector()]

  • 노드(Node)
    • HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장
    • 노드 종류
      • 문서노드: 문서 전체를 나타내는 노드
      • 요소노드: HTML 요소는 요소 노드, 속성 노드를 가질 수 있는 유일한 노드
      • 속성노드: 속성은 모두 속성 노드이며, 요소 노드에 관한 정보를 가지고 있음
      • 텍스트 노드: 텍스트는 모두 텍스트 노드
      • 주석노드: 주석은 모두 주석 노드
    • 노드의 관계
      • parentNode: 부모 노드
      • children: 자식 노드 리스트
        • childNodes: 자식 노드 리스트
      • firstChild: 첫 번째 자식 노드 (띄어쓰기도 포함)
        • firstElementChild: 첫 번째 자식 요소 노드
      • lastChild: 마지막 자식 노드
        • lastElementChild: 마지막 자식 요소 노드
      • nextSibling: 다음 형제 노드
        • nextElementSibling: 다음 형제 요소 노드
      • previousSibling: 이전 형제 노드
        • previousElementSibling: 이전 형제 요소 노드
    • 노드 추가
      • appendChild(): 새로운 노드를 해당 노드의 자식 노드 리스트 맨 마지막에 추가
      • insertBefore(): 새로운 노드를 특정 자식 노드 바로 앞에 추가
      • insertData(): 새로운 노드를 텍스트 데이터로 추가
    • 노드 생성
      • createElement(): 새로운 요소 노드를 만듬
      • createAttribute(): 새로운 속성 노드를 만듬
      • createTextNode(): 새로운 텍스트 노드를 만듬
    • 노드 제거
      • removeChild(): 자식 노드 리스트에서 특정 자식 노드를 제거, 노드가 제거되면 해당 노드를 반환. 노드가 제거될 때 노드의 자식들도 다 같이 제거
      • removeAttribute(): 특정 속성 노드를 제거
    • 노드 복제
      • cloneNode(): 기존의 존재하는 노드와 동일한 새로운 노드를 생성하여 반환
    • 노드 교체
      • replaceChild(): 기존의 요소 노드를 새로운 요소 노드로 교체
      • replaceData(): 텍스트 노드의 텍스트 데이터를 교체

  • 정규식 표현식
    • 정규 표현식, 또는 정규식은 문자열에서 특정

      /   ~   / 시작과 끝
      
      ^ : 시작
      
      [ ] : 안의 문자를 찾음
      
      [x-z] : x~z 사이의 문자를 하나를 찾음
      
      x+ : x가 1번이상 반복
      
      x$ : 문자열이 x로 끝남
      
      ^x : 문자열이 x로 시작
      
      \d : 숫자
      
      x{n} : x를 n번 반복한 문자를 찾음
      
      x{n,m} : x를 n번 이상 m번 이하 반복한 문자를 찾음

      😂 test()

    • 정규표현식에 대입한 문자열이 적합하면 true, 아니면 false를 리턴

      😂 focus()

    • 해당 HTML 요소가 선택됨

      😂 method="post”

    • 해당 링크로 이동하나, ‘페이지를 표시할 수 없습니다’ 로 표시됨

    1. 아이디

      • 영문 대문자 또는 소문자로 시작하는 아이디, 길이는 4 ~ 20자
      /^[A-Za-z]{4,20}$/
    2. 이름

      • 한글만 사용
      /[가-힣]+$/
    3. 핸드폰 번호

      • 앞번호는 3글자, 중간번호는 3 또는 4글자, 마지막번호는 4글자. 하이픈(-)을 포함한 숫자
      /^\d{3}-\d{3,4}-\d{4}$/
    4. 이메일

      • 영문 대문자 또는 소문자 또는 숫자로 시작하고 @포함 .포함
      /^[A-Za-z0-9\-\.]+@[A-Za-z0-9\-\.]+\.[A-Za-z0-9]+$/
    5. 비밀번호

      • 대문자 1개 이상, 소문자 1개 이상, 숫자 1개 이상, 특수문자 1개 이상을 포함한 8자 이상
      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}/
profile
tistory로 이전! https://sweet-rain-kim.tistory.com/

0개의 댓글