Javascript 문법 및 함수 정리

자바스크립트는 웹 브라우저 내에서 사용할 수 있는 프로그래밍 언어이다.

1. JS 출력

JavaScript는 다양한 방식으로 데이터를 "표시"할 수 있다.

• innerHTML을 사용하여 HTML 요소 쓰기
• document.write()를 사용하여 HTML 출력
• window.alert()를 사용하여 경고 상자 쓰기
• console.log()를 사용하여 브라우저 콘솔에 쓰기
• window.print()를 사용하여 현재 페이지 출력하기

Example

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
document.write(5+6);
window.alert(5+6);
console.log(5+6);
</script>
<button onclick="window.print()">Print this page</button>

2. JS 이벤트

JavaScript를 사용하면 이벤트가 감지될 때 코드를 실행할 수 있다.
다음은 몇 가지 일반적인 HTML 이벤트 목록이다.

Event	Description
onchange	HTML 요소가 변경되었습니다.
onclick	사용자가 HTML 요소를 클릭합니다.
onmouseover	사용자가 HTML 요소 위로 마우스를 이동합니다.
onmouseout	사용자가 HTML 요소에서 마우스를 멀리 이동합니다.
onkeydown	사용자가 키보드 키를 누릅니다.
onload	브라우저가 페이지 로드를 완료했습니다.

더 많은 이벤트를 확인하고 싶으면 : HTML 이벤트 목록 보기

The time is?

<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>

3. JS HTML DOM

웹페이지가 로드 되면 브라우저는 페이지의 DOM(Document Object Model)을 만든다.

문서 개체를 사용하여 HTML에 액세스하고 조작하는 방법에 대한 몇 가지 예를 살펴봅시다:

HTML 요소 찾기

Method	Description
document.getElementById(id)	요소의 id로 요소 찾기
document.getElementsByTagName(name)	태그 이름으로 요소 찾기
document.getElementsByClassName(name)	클래스 이름으로 요소 찾기

HTML 요소 변경

Property	Description
element.innerHTML = new html content	요소의 inner HTML 변경
element.attribute = new value	HTML 요소의 속성 값 변경
element.style.property = new style	HTML 요소의 스타일 변경

Method	Description
element.setAttribute(attribute, value)	HTML 요소의 속성 값 변경

요소 추가 및 삭제

Method	Description
document.createElement(element)	HTML 요소 만들기
document.removeChild(element)	HTML 요소 지우기
document.appendChild(element)	HTML 요소 추가하기
document.replaceChild(new, old)	HTML 요소 변경하기
document.write(text)	HTML 출력 스트림에 쓰기

4. JS Form Validation

HTML 양식 유효성 검사는 JavaScript로 수행할 수 있습니다.

양식 필드(fname)가 비어 있는 경우 이 함수는 메시지를 경고하고 false를 반환하여 양식이 제출되지 않도록 합니다.

JavaScript Example

function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}

HTML 양식 유효성 검사는 브라우저에서 자동으로 수행할 수 있습니다.

양식 필드(fname)가 비어 있으면 required속성으로 인해 이 양식이 제출되지 않습니다.

HTML 양식 예

<form action="/action_page.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

5. DOM 애니메이션

JavaScript 애니메이션은 요소 스타일의 점진적인 변경을 프로그래밍하여 수행됩니다.
변경 사항은 타이머에 의해 호출됩니다. 타이머 간격이 작으면 애니메이션이 연속적으로 보입니다.

기본 코드는 다음과 같습니다.

Example

id = setInterval(frame, 5);
function frame() {
  if (/* test for finished */) {
    clearInterval(id);
  } else {
    /* code to change the element style */ 
  }
}

6. JS 브라우저 BOM

BOM(Browser Object Model)을 사용하면 JavaScript가 브라우저와 "대화"할 수 있습니다.

JS Windows

두 가지 속성을 사용하여 브라우저 창의 크기를 결정할 수 있습니다.
두 속성 모두 크기를 픽셀 단위로 반환합니다.

window.innerHeight - 브라우저 창의 내부 높이(픽셀 단위)
window.innerWidth - 브라우저 창의 내부 너비(픽셀 단위)

다른 방법:

window.open() - 새 창 열기
window.close() - 현재 창 닫기
window.moveTo() - 현재 창 이동
window.resizeTo() - 현재 창 크기 조정

JS Screen

window.screen객체는 윈도우 접두사없이 작성 할 수 있습니다.

속성:

screen.width - 픽셀 단위로 방문자의 화면의 폭을 돌려줍니다.
screen.height- 픽셀 단위로 방문자의 화면의 높이를 반환합니다.
screen.availWidth- 인터페이스 기능을 뺀 화면의 너비를 픽셀 단위로 반환합니다.
screen.availHeight- 인터페이스 기능을 뺀 화면의 높이를 픽셀 단위로 반환합니다.
screen.colorDepth - 하나의 색을 표현하기 위해 사용되는 비트의 수를 반환합니다.
screen.pixelDepth- 화면의 픽셀 깊이를 반환합니다.

JS Location

window.location객체는 윈도우 접두사없이 작성 할 수 있습니다.

몇 가지 예:

window.location.href -현재 페이지의 href(URL)를 반환합니다.
window.location.hostname -웹 호스트의 도메인 이름을 반환합니다.
window.location.pathname -현재 페이지의 경로와 파일 이름을 반환합니다.
window.location.protocol- 사용된 웹 프로토콜을 반환합니다(http: 또는 https:).
window.location.assign()- 새 문서를 로드

7. JS AJAX

AJAX = Asynchronous JavaScript And XML.

AJAX는 다음과 같은 일들을 할 수 있습니다:

• 페이지가 로드된 후 웹 서버에서 데이터 읽기
• 페이지를 다시 로드하지 않고 웹 페이지 업데이트
• 백그라운드에서 웹 서버에 데이터 보내기

XMLHttpRequest 객체 생성

모든 최신 브라우저(Chrome, Firefox, IE, Edge, Safari, Opera)에는 XMLHttpRequest객체 가 내장되어 있습니다.

XMLHttpRequest객체 생성 구문 :

variable = new XMLHttpRequest();

콜백 함수 정의

콜백 함수는 다른 함수에 매개변수로 전달되는 함수입니다.

이 경우 콜백 함수는 응답이 준비되었을 때 실행할 코드를 포함해야 합니다.

xhttp.onload = function() {
  // What do do when the response is ready
}

요청 보내기

서버에 요청을 보내려면 XMLHttpRequest객체 의 open() 및 send() 메서드를 사용할 수 있습니다 .

xhttp.open("GET", "ajax_info.txt");
xhttp.send();