JavaScript 개요 (23.06.19)

현·2023년 6월 19일

JavaScript

Javascript

목록 보기

1/13

📝 웹의 3요소

html : 웹 문서의 큰 틀(뼈대)
css : 스타일 (색상, 디자인, 간격, 배치 등)
javascript : 웹 문서에서 이벤트가 발생했을 때 실행해야 되는 동작들 처리

📝 스크립트(script) 언어

기본 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해 주는 용도의 언어

별도의 소스코드를 컴파일 하지 않고 인터프리터(interpreter)를 이용하여 소스코드를 한 줄씩 읽어서 바로 실행
-> 컴파일에 소요되는 시간이 없음
대신 프로그램 실행 시간이 느림

짧은 소스코드 파일로 상호작용 하도록 고안됨

📝 자바스크립트(JS)란?

웹 브라우저에서 많이 사용하는 인터프리터 방식의 객체 지향 프로그래밍 언어
== 웹 브라우저에서 많이 사용되는 인터프리터 방식의 스크립트 언어

인터프리터 방식 : 코드를 한 줄 한 줄씩 읽어 가며 바로 실행하는 방식

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

📌 자바스크립트 작성 방법

브라우저 콘솔에 직접 작성
html 내부에서 script 태그를 이용해서 작성(internal)
html 외부에 (.js) 파일을 이용해서 작성(external)
태그에 직접 JS코드를 작성(inline)

💡 inline 방식

태그 내에 간단한 소스코드를 작성해서 실행되게 하는 방법

✏️ 표현법

<태그 on이벤트명 = "해당 요소에 해당 이벤트 발생 시 실행할 소스코드">

    <!-- 소스코드가 소량일 경우 inline 방식 많이 사용 -->

    <!-- JS는 "" / '' 둘 다 문자열 리터럴 표기법으로 인식됨 -->
    <button onclick="window.alert('inline 알림창 출력')">알림창 출력</button>

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

✏️ 출력화면

-> '알림창 출력' 버튼을 눌렀을 때 "inline 알림창 출력" 문구가 작성된 알림창이 뜬다.

-> 알림창이 따로 뜨지는 않지만 개발자 도구로 보았을 때 Console 창에 내가 입력한 문구가 나타나는 모습을 볼 수 있다.

💡 internal 방식

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

    <!-- 버튼이 클릭되었을 때 btnClick1() 함수를 호출 -->
    <button onclick="btnClick1()">알림창 출력</button>
 
    <script>
        // 자바스크립트 영역 주석
        function btnClick1(){
            window.alert("internal 알림창 출력 버튼!!");
        }
    </script>

✏️ 출력화면

-> '알림창 출력' 버튼을 눌렀을 때 "internal 알림창 출력 버튼!!" 문구가 작성된 알림창이 뜬다.

💡 external 방식

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

✏️ 01_JS개요.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01_JS 개요</title>

    <script src="js/01_개요.js"></script>

    <style>
        #box{
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
    </style>
</head>
  
  .
  .
  .
  
    <!-- external 방식은 js 파일을 연결해야 사용 가능(head, body태그 어디든 작성 가능) -->
    <button onclick="btnClick2()">external 방식</button>

    <hr>

    <h3>JS 테스트</h3>

    <div id="box"></div>
        <button onclick="changeColor1()">red</button>
        <button onclick="changeColor2()">yellow</button>

✏️ 01_개요.js

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

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

function btnClick2(){
    window.alert("external 알림창 출력!!");
}

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

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