[Javascript] 자바스크립트 기본 개념

웹은 크게 3요소  1. HTML : 웹 문서의 큰 틀(뼈대) 2. CSS : 스타일(색상,디자인,간격,배치 등등) 3. Javascript : 웹 문서에서 이벤트가 발생했을 때 실행해야하는 동작 처리

---

📌 스크립트(script) 언어란 ? 

기본 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도의 언어 
별도의 소스코드를 컴파일 하지 않고 인터프리터를 이용하여 소스코드를 한 줄씩 읽어 바로 실행

 

 

📌 자바스크립트 란 ? 

웹 브라우저에서 많이 사용하는 인터프리터 방식의 객체 지향 프로그래밍 언어
== 웹 브라우저에서 많이 사용되는 인터프리터 방식의 스크립트 언어
-> 인터프리터 방식 : 코드를 한줄 한줄 씩 읽어가며 바로 실행하는 방식

ECMA Script 표준을 따르는 대표적인 웹 기술이다.

 

📌 자바스크립트 작성법 

 

🔊 1) html 내부에서 script 태그를 이용해서 작성 (internal)

현재 html 문서내 script 태그 영역안에 소스코드 작성 / script 태그는 head태그, body태그든 다 작성 가능 

[작성예시]
<button onclick="btnClick1()">알림창 출력</button>

<script>
function btnClick1(){
window.alert("interanl 알림창 출력 버튼!")
}
</script>

 

🔊 2) html 외부에 (.js) 파일을 이용해서 작성 (external)

별도의.js 파일로 소스코드를 작성해서 가져다가 사용하는 방법

html 파일 
<button onclick="btnClick2()">external 방식</button>

js 파일 =  <script> 태그 내부라고 생각하면 됨 
function btnClick2(){
    alert("external 알림창 출력!!");
}

 

🔊 3) 태그에 직접 JS 코드를 작성 (inline)

태그 내에 간단한 소스코드를 작성해서 실행되게 하는 방법
[표현법] < 태그 on 이벤트명 = "해당 요소에 해당 이벤트 발생 시 실행한 소스코드 ">

* 코드가 소량일 경우 많이 사용 *

[작성예시]
<button onclick="window.alert('inline 알림창 출력')">알림창출력</button>
<button onclick="console.log('inline콘솔 출력!')">콘솔 출력</button>

 

---

📌 데이터를 출력하는 구문 

 

🔊 1) [window.]alert("알림창에 출력할 문구");

:  alert (알리다, 경보, 경고) 브라우저에 대화상자를 띄우는 함수 

html 파일 
<button onclick ="fnAlert()">alert 확인</button>

js 파일
funcion fnAlert(){
alter("alter 버튼 클릭됨!");
}

🔊 2) [window.]console.log("콘솔창에 출력할 문구");

🔊 3) document.wirte("화면상에 출력할 문구");

🔊 4) 선택한요소.innerText = "요소에 출력할 문구";

🔊 4) 선택한요소.innerHTML = "요소에 출력할 문구";