FrontEnd/JavaScript

[JavaScript] 기본 개념

minsukim.kms 2022. 6. 8. 11:57

 

HTML로 웹 화면을 구현하고, CSS로 웹을 디자인 해보았다.

그렇다면 이제는 만들어진 웹 페이지를 사용하려면 웹에 기능을 넣어줄 차례이다.

 

웹의 동작을 구현하는 JavaScript에 대해 알아보자!

 

 

자바스크립트(JavaScript)

자바스크립트는 객체(object)기반의 스크립트 언어이다.

웹의 동작을 구현할 수 있다.

 

 

자바스크립트의 특징

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

2. 동적이며, 타입을 명시할 필요가 없다.

*자바스크립트 언어는 컴파일 작업을 거치지 않고, 소스 코드를 바로 실행할 수 있는 언어이기 때문

3. 객체 지향형 프로그래밍과 함수형 프로그래밍 모두 표현할 수 있다.

 

 

자바 vs 자바스크립트

코딩을 공부하기 전 자바스크립트가 자바에서 파생된 언어일 것이라 생각했다.

하지만 두 언어는 서로 직접적인 관련은 없으며,

비슷한 점보다는 다른 점이 훨씬 많다.

문법상 비슷한 부분은 두 언어의 문법이 모두 C언어를 기반으로 만들어졌기 때문이다.

자바 자바스크립트
컴파일 언어 인터프리터 언어 (컴파일 거치지 않음)
타입 검사 O 타입 명시 X
클래스 기반 객체 지향 언어 프로토타입 기반의 객체 지향 언어

 

 

자바스크립트 문법

- 실행문은 세미콜론 ; 으로 구분된다.

- 대소문자를 구분한다.

 

 

리터럴(literal) : 직접 표현되는 값 그 자체

 

식별자(identifier) : 변수나 함수의 이름

   - 식별자는 영문자(대소문자), 숫자, 언더스코어(_), 달러($)만 사용 가능

   - 숫자로 시작 불가

   - 식별자 작성 방식 

      1. Camel Case(첫 번째 단어 모두 소문자, 다음 단어부터 첫 문자만 대문자 / 대부분 Camel Case 사용)

      2. Underscore Case(단어들을 소문자로만 작성하고, 언더스코어(_)로 연결)

 

키워드(Keyword) [예약어 (reserved word)] : 특별한 용도로 사용하기 위해 미리 예약된 단어

                                                                                     식별자로 사용할 수 없다.

                                                                                     ex) let - 변수 정의 / function - 함수 정의

 

주석(comment) : 코드 내에 삽입된 설명 , 웹 브라우저 동작에 영향 미치지 않는다.

   1. 한 줄 주석 : // 주석문

   2. 여러 줄 주석 : /* 주석문 */

 

 

자바스크립트 출력

자바스크립트 실행문을 HTML 페이지에 출력할 수 있다.

 

1. window.alert() 메소드

브라우저와는 별도의 대화 상자를 띄워 사용자에게 데이터를 전달

<body>
    <!-- alert() -->
    <button onclick="alert('HelloWorld')">버튼1</button>
    <button onclick="alert (10+20)">버튼2</button>
    <button onclick="alert('줄바꿈문자도\n허용이됩니다\n확인')">버튼3</button>

    <!-- confirm -->
    <!-- confirm : 확인/취소 버튼 함께 출력-->
    <button onclick="confirm('yes/no')">버튼4</button>
</body>

버튼1 실행결과
버튼2 실행결과

    

버튼3 실행결과
버튼4 실행결과

 

 

2. HTML DOM 요소를 이용한 innerHTML 프로퍼티

document 객체의 getElementByID(),  getElementsByTagName() 등의 메소드를 사용하여 HTML 요소를 선택한 후,

innerHTML 프로퍼티를 이용하면 선택된 HTML 요소의 내용이나 속성값 등을 손쉽게 변경할 수 있다.

ex) 아래의 예시를 실행하면 바뀌어진 문장이 출력된다.

<body>
    <h1>innerHTML 프로퍼티</h1>
    <!-- 실행 시 '바꾸기 전'이라는 문장 표시 -->
	<p id="text">바꾸기 전</p>
	
	<script>
        // getElementById를 통해 위 HTML 실행문의 id값 "text"를 str 변수로 가져옴
		let str = document.getElementById("text");
        // str변수의 text내용을 innerHTML 프로퍼티로 바뀐 문장 출력
		str.innerHTML = "문장이 바뀌었습니다!";
	</script>
</body>

 

실행 결과

 

3. document.write() 메소드

웹 페이지가 로딩될 때 실행되면, 웹 페이지에 가장 먼저 데이터를 출력

대부분 테스트나 디버깅을 위해 사용한다. (테스트 이외의 용도로 사용할 때에는 주의해서 사용해야한다)

웹 페이지의 모든 내용이 로딩된 후에 document.write() 메소드가 실행되면,

웹 페이지 내에 먼저 로딩된 모든 데이터를 지우고 자신의 데이터를 출력

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

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

첫 실행 화면
버튼 누른 후 실행결과

 

4. console.log() 메소드

웹 브라우저의 콘솔을 통해 데이터를 출력

F12를 누른 후, 메뉴에서 콘솔을 클릭하면 콘솔 화면을 사용할 수 있다.

자세한 사항까지 출력되므로, 디버깅하는데 도움이 된다.

<body>
    <script>
        console.log("Hello World");
    </script>
</body>

실행 후 console 결과

 

 

 

자바스크립트 적용 방법

 

 

1. 내부 자바스크립트 코드로 적용

<script>태그를 사용하여 HTML 문서 안에 삽입

자바스크립트 코드는 HTML 문서의 <head>태그, <body>태그,  양쪽 모두에 위치할 수 있다.

ex)

<script>
    document.getElementById("text").innerHTML = "자바스크립트";
</script>

 

 

2. 외부 자바스크립트 파일로 적용

외부에 작성된 자바스크립트 파일은 .js 확장자를 사용하여 저장

적용하고 싶은 웹 페이지에 <script>태그를 사용해 외부 자바스크립트 파일 포함시켜 주어야 한다.

ex)

<head>
    <meta charset="UTF-8">
    <title>JavaScript Apply</title>
    <script src="/example.js"></script>
</head>