[JAVASCRIPT] 자바스크립트 기본 문법

JavaScript 

 

객체기반의 스크립트언어이다.

정적인 HTML 콘텐츠를 프로그램 구현을 통해 동적으로 변경하거나 사용자와의 상호작용을 담당한다.

HTML이나 CSS와 달리 자바스크립트는 C언어, 자바와 같은 일반 프로그램언어와 비슷한 구조를 가지고 있다.

 

• 동적이며 타입을 명시할 필요가 없는 인터프리터 언어
• 객체지향 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다.
• HTML의 내용, 속성, 스타일을 변경 할 수 있다.
• 이벤트를 처리하고 사용자와의 상호작용을 가능하게 한다.
• AJAX 기술을 이용해 서버와 실시간 통신 기능을 제공

 

Alert, Conform

 

alert

알람창 띄우기

// 기본형

<button onclick="alert('HelloWorld')"">버튼1</button>

// 연산
<button onclick="alert(10+20)">버튼2</button>

 

confirm

 

// confirm 기본형

<button onclick="confirm('yes/no')">버튼4</button>

 

document write

계층형객체구조를 가지고 있다.

script태그 내부에 코드가 들어간다.

<script>
  document.write("HELLOWORLD<br>");
  document.write(10+20);
</script>


// 버튼을 클릭하면 document.write 실행된다.

<button onclick="document.write('기존페이지내용삭제됨!');">버튼</button>

 

 

ElementById

 요소 찾기

<div id="d1>기존내용</div>
<br>
<button onclick="document.getElementById('d1').innerHTML='<h1>Hello</h1>'">change</button>


// id값 d1 요소를 찾아 Hello 출력을 한다

 

 

innerText

태그 안의 텍스트를 가져오거나 바꾸는 기능 (바뀌는 범위 : <tag>text</tag> => text만 바뀜)

// HTML

<input type='button'
       value='innerText'
       onclick='addTitle()' />
     
<h1 id="title">제목</h1>



// JS

let i =1;
const tmp = document.getElementById("title");

function addTitle(){
	tmp.innerText += `\n제목${i++}`;
}

 

innerHTML 

태그 자체를 가져오거나 바꾸는 기능(바뀌는 범위 : (<tag>text</tag>) => 전체 다 바뀜)

 

// HTML
<input type='button'
       value='innerHTML'
       onclick='changeTitle()' />
       
<h1 id="title">제목</h1>


// JS

let i = 1;

const tmp = document.getElementById("title");

function changeTitle() {
	tmp.innerHTML = `<h1 id="title">제목${i++}</h1>`;
}