JavaScript 개요

▶ JS 개요

• 웹의 3요소
  1) html : 웹 문서의 큰 틀(뼈대)
  2) css : 스타일(색상, 간격, 디자인, 배치 등)
  3) javascript  : 웹 문서에서 이벤트가 발생했을 때 실행해야되는 동작 처리
  
  
• 스크립트(script) 언어
  - 기본 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도의 언어
  - 별도의 소스코드를 컴파일 하지 않고, 인터프리터(interpreter)를 이용하여 소스코드를 한 줄씩 읽어서 바로 실행
     ※ 인터프리터 방식 : 코드를 한 줄씩 읽어가며 바로 실행하는 방식
  - 장점  : 컴파일에 소요되는 시간이 없음
     / 단점 : 코드의 문법오류가 있으면 실행시점에서 알려줌. 프로그램 실행시간 느림
  
  
• 자바스크립트(JS)란?
  - 웹 브라우저에서 많이 사용되는 인터프리터 방식의 객체 지향 프로그래밍 언어
    == 웹 브라우저에서 많이 사용되는 인터프리터 방식의 스크립트 언어
  - ECMA Script 표준을 따르는 대표적인 웹 기술
  
  
• 자바스크립트 작성 방법
  - inline(인라인) : 태그 內에 간단한 소스코드를 작성해서 실행되게 하는 방법
  - internal(내부) : html 문서 內에 소스코드를 작성해서 실행되게 하는 방법
  - external(외부) : 별도의 .js 파일로 소스코드를 작성해서 가져다가 실행되게 하는 방법
  + 브라우저 콘솔에 직접 작성
  
  
• 1) inline 방식
  - 태그 內에 간단한 소스코드를 작성해서 실행되게 하는 방법
  - [ 표현법 ] < 태그 on이벤트명 ="해당 요소에 이벤트 발생 시 실행할 소스코드">

<!-- 소스코드가 소량일 경우, inline 방식 많이 사용 -->
<!-- JS는 "" / '' 둘다 문자열 리터럴 표기법으로 인식됨 -->

<button onclick="window.alert('inline 알림창')">알림창</button>

<button onclick="console.log('inline 콘솔')">콘솔</button>

See the Pen 24-12-25 js review1 by Namu (@Namu-the-sans) on CodePen.

   - 콘솔 버튼 클릭 시 F12<개발자 도구>의 콘솔창에 문구 띄워짐

---

• 2) internal 방식
  - 현재 html 문서 內 script 태그 영역 안에 소스코드 작성 가능
  - script 태그는 head 태그, body 태그 둘다 작성 가능

<!-- 버튼이 클릭되었을 때 btnClick1() 함수를 호출 -->
<button onClick="btnClick1()">internal 방식</button>

<script>
// 자바스크립트 영역 주석
function btnClick1(){
window.alert("internal 방식 알림창")
}
</script>

See the Pen 24-12-25 js review2 by Namu (@Namu-the-sans) on CodePen.

---

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

<!-- external 방식은 .js 파일을 연결해야 사용 가능 (head, body 태그 내부 어디든 작성 가능) -->
<button onclick="btnClick2()">external 방식</button>

// 한 줄 주석
/* 범위 주석 */

// js 파일은 <script> 태그 내부라고 생각하면 됨

function btnClick2(){
    window.alert("external 방식 알림창")
}

See the Pen 24-12-25 js review3 by Namu (@Namu-the-sans) on CodePen.

---

• 자바스크립트 개요 예제 ( 사각형 배경색 변경 )

<div id="box"></div>

<!-- red 버튼 클릭 시 div 영역 내 색깔 '빨강'으로 변경 -->
<button onclick="changeColor1()">red</button>

<!-- blue 버튼 클릭 시 div 영역 내 색깔 '파랑'으로 변경 -->
<button onclick="changeColor2()">blue</button>

function changeColor1(){
    document.getElementById("box").style.backgroundColor = "red";
}

function changeColor2(){
    document.getElementById("box").style.backgroundColor = "blue";
}

See the Pen 24-12-25 js review4 by Namu (@Namu-the-sans) on CodePen.