JavaScript 개요

JavaScript

JavaScript 개요

Dodledd 2024. 3. 14. 17:19

오늘은 자바스크립트를 처음 배웠다.

먼저 JavaScript를 배우기전에 알면 좋은 것부터 알고가자!

웹은 크게 3요소로 나뉜다.
- html : 웹문서의 큰 틀을 잡을 때 사용한다.
- css : html로 구성된 DOM에 다양한 스타일속성을 부여할 때 사용한다.
- JavaScript : 웹 문서에서 이벤트가 발생했을 때 실행해야 되는 동작(기능)을 처리

JavaScript는 스크립트 언어라고 불리며 우리가 일반적으로 배우는 프로그래밍 언어와는 다르다.

스크립트 언어란?

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

빠르게 배울 수 있고 짧은 소스코드로 상호작용이 되도록 고안됨.

JavaScript란?

웹 브라우저에서 많이 사용되는 "인터프린터 방식"의 스크립트 언어이다.

인터프린터 방식 : 코드를 한 줄씩 한 줄씩 읽어가며 바로 실행하는 방식이다. (실시가능로 텍스트를 분석해서 실행된다.) -> 코드에 문법오류가 있으면 실행시점에서야 알려준다.

그럼 장단점을 알아보자

장점

컴파일 과정이 없어서 인터프리터로 코드를 한 줄씩 읽어가며 바로 실행되기 때문에 수행속도가 빠르다.(실행속도가 빠른 것과는 다른 의미이다)
코드 작성이 간단해서 초보가 작성하기 쉽다.
1. ex) 접근제한자 개념이 없음
2. 변수의 선언시 자료형 정해둘 필요 없음
3. 단순한 구조와 원칙을 가지고있다.

단점

웹에 특화된 기술 -> 내부에서 제공되는 기능이 제한적이다.
html 소스코드에서 같이 작성하면 외부에 공개된다 -> 보안취약점 발생가능.

여기까지 간단하게 자바스크립트에 대해 알아보았다.

이제 자바 스크립트의 사용법을 알아보자.

JavaScript 사용법

inline(인라인) : 태그 내에 간단한 소스코드를 작성해서 실행되게 하는 방법
internal(내부) : html문서 내에 소스코드를 작성해서 실행되게 하는 방법 (css는 헤드에 작성하는 것과 다르게 JavaScript는 어디에서나 사용하면 된다)

external(외부) : 별도의 .js 파일로 소스코드를 작성해서 가져다가 실행되게 하는 방법.

inline 방식

[표현법]
<on이벤트명 = "해당 요소의 이벤트 발생시 실행할 코드">

<button onclick='window.alert("알림창 출력 버튼 클릭!!")'>알림창 출력</button>

알림창 출력을 누르면

이렇게 나오게 된다.

<button onclick="console.log('콘솔출력 버튼 클릭!!')">콘솔출력</button>

버튼을 클릭하면

f12 를 열어 console창에 보면 저렇게 출력된다.

internal 방식

script태그는 영역안에 소스코드를 작성
script태그는 head 태그, body 태그 다 작성가능

    <button id="btn">알림창 출력</button>
    <button onclick="btnClick();"> 콘솔 출력</button>

	<script>
        //자바스크립트 영역
        //이벤트를 부여하고자 하는 요소 선택해서 변수에 담아두기

        let btn = document.getElementById("btn") //객체형식안에 메소드를 가져옴
        btn.onclick = function(){ //익명함수
            window.alert("버튼클릭!!");
        }

        //함수의 이름을 지어서 정의
        function btnClick(){
            console.log("콘솔 버튼 클릭!");
        }
    </script>

알림창 출력은 익명함수를 이용하여 바로 btn.onclick에 넣어버리는 것이고

콘솔 버튼 클릭은 함수이름을 따로 정의하여 html 코드에서 버튼 클릭이 되면 그때 btnClick()을 onclick에 넣는 것이다.

그럼 실행결과를 보자

방식만 다른 것이기 때문에 위와 똑같은 결과가 나온다.

external 방식

외부의 .js파일을 생성해서 따로 js코드를 작성한다.

<button onclick="test();">알림창 출력</button>

위 처럼 .js 파일을 따로 만들어서 작성해주고

위와 같은 형식으로 따로 써줘야 적용이 된다.

html에서 css를 link시키는 것과 비슷하다.

실행결과는 똑같게 나온다.

오늘은 여기까지이다 !