본문 바로가기

Webstoryboy

Category

Explanation

JAVASCRIPT

자바스크립트 기초

기초

자바스크립트를 다루기 위해서는 기초적인 특징과 문법이 있습니다. 가장 기본이기 때문에 이 부분을 숙지 후 스크립트를 공부하는 것이 좋습니다.


주석

/* ... */ : 여러 줄에 주석을 적용하는 경우
// : 한 줄에 주석을 적용하는 경우

자바스크립트 주석은 일반적으로 특정 코드에 대한 설명을 입력하거나 특정한 부분의 코드가 실행되지 않도록 사용합니다. 주석 표시는 프로그램에 영향을 미치지 않습니다.

대문자와 소문자

날짜 객체 생성 : New date();(X)
날짜 객체 생성 : new Date();(O)

자바스크립트는 대문자와 소문자를 구별합니다. console와 Console은 각각 다른 문자열로 처리되니 유의하시기 바랍니다.

토큰과 공백문자

토근 : 프로그램을 구성하는 최소 단위

프로그램을 구성하는 최소 단위를 토큰(어휘)라고 합니다. 자바스크립트 언어는 프로그램을 실행하기 전에 토큰으로 분해합니다. 이러한 동작을 어휘 분석이라고 하며, 이러한 분석을 통해 올바른 프로그램인지 판단합니다. 이 동작을 구문 분석(파싱)이라고 합니다. 토큰은 공백을 넣지 않고 나열하기만 해서는 토큰을 판단 할 수 없습니다. 그래서 프로그래밍 언어에서는 토큰과 토큰 사이에 공백문자를 통해 구분합니다. 이때 토큰과 토큰 사이의 공백 문자를 여러개 입력해도 공백문자를 하나만 인식합니다.

사용 방법

자바스크립트의 사용하는 방법은 1외부파일, 2스크립트 태그, 3태그에 직접 기술하는 방법이 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Javasript</title>

    <!-- 1. 외부 파일로 로드하는 방법 -->
    <script type="text/Javasript" src="js/script.js"></script>

    <!-- 2. script 태그 사이에 기술하는 방법 -->
    <script>
        document.write("Javasript");
    </script>
</head>
<body>
    <!-- 3. 태그에 직접 기술하는 방법 -->
    <a href="#" onclick="alert('Javasript')"></a>
</body>
</html>

출력 방법

자바스크립트에서 출력하는 방법은 1콘솔 로그, 2웹 문서 출력, 3경고창 출력, 4innerHTML을 이용한 방법이 있습니다.

<!DOCTYPE html> 
<html lang="ko"> 
<head> 
    <meta charset="UTF-8">
    <title>Javasript</title> 
</head> 
<body> 
    <div id="id"></div> 
    
    <script> 
        //1. 콘솔로그를 이용한 방법 
        console.log("javascript 출력1"); 
        
        //2. 웹 문서에 출력하는 방법 
        document.write("javascript 출력2"); 
        
        //3. 경고창을 이용하는 방법
        alert("javascript 출력3"); 
        
        //4. innerHTML을 이용하는 방법 
        document.getElementById("id").innerHTML = "javascript 출력4";
    </script>
</body> 
</html>

엄격 모드

자바스크립트의 문법을 정확하게 사용하고 엄격한 규칙을 적용하기 위해서 엄격 모드를 사용할 수 있습니다.

<!DOCTYPE html> 
<html lang="ko"> 
<head> 
    <meta charset="UTF-8">
    <title>Javasript</title> 
</head> 
<body> 
    <div id="id"></div> 
    
    <script> 
        //엄격 모드를 사용하는 경우
        "use strict";

        var x = 123;
        var y = "webstoryboy";

        document.write(x, y);
    </script>
</body> 
</html>

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기