본문 바로가기
Kosta DevOps 과정 280기

자바 스크립트(JavaScript)

by 롯슈83 2024. 7. 9.

JavaScript 정의와 역사

  • 프론트엔드 동작 -- *
  • 백엔드 동작

전통적으로 자바스크립트는 jsp 와 마찬가지로 웹프로그래밍 언어이며 동적인 Html 을 생성하는 것이 목적이다. 

초기에 자바스크립트는 jsp 와 달리 실행되는 위치가 웹브라우저이기 때문에 소스코드가 모두 노출된다. 따라서 웹 초기에는 이러한 자바스크립트를 그다지 중요하게 여기지 않았다. 그러나 현재는 사용자의 요청에 의해서 다른 문서로 이동이 될 때 문서 전체를 모두 변경시키는 풀 브라우징보다는 문서의 일부분만 변경시키는 동작이 상당하다. 이 때 서버로부터 필요한 데이터만 받아와서 동적인 html 을 생성할 수 있다.

이것은 모두 자바스크립트로 표현할 수 있다.

또 2007년 쯤 크롬 브라우저가 발표되면서 웹브라우저가 아닌 곳에서도 자바 스크립트를 동작시킬 수 있는 기술인 node.js 가 만들어진다. 웹 브라우저가 아닌 곳에서도 동작하는 이 node.js 를 이용하면 톰캣같은 무거운 웹어플리케이션 서버를 별도로 두지 않고 서버를 가동시킬 수 있다. 그래서 현재는 자바스크립트가 굉장히 중요하게 여겨진다. 

또 서버로부터 데이터를 받아와서 동적인 html 을 생성하는 기술로서는 자바스크립트를 기반으로 한 jquery, react, angular, VueJS 등이 중요하게 여겨지고 있다. 

 

JavaScript 와 Java 언어가 이름이 유사하지만 전혀 상관이 없다. 그러나 둥 다 C언어를 기반으로 만들어졌기 떄문에 문법이 60% 정도 비슷한 부분이 있다.

 

기본 문법

  • 명령어 끝에 세미콜론을 붙여도 되고 안붙여도 된다. (자바보다는 유연하다)
  • 자바와 같은 의미의 예약어를 사용할 수 있다.
    • break, if, else, for, ...
  • 식별자 : 변수이름 또는 함수, 클래스 이름과 같은 이름을 정해주는 것을 뜻한다.
    • 자바 식별자 규칙과 같은 규칙을 따른다.
  • 주석문 : 자바와 같은 방법으로 주석문을 표현할 수 있다.
  • 웹브라우저에 경고창 띄우기
    • alert("메세지내용");

 

변수의 사용

  • 자바의 경우는 변수를 선언하고 값을 저장할 수 있다. 그러나 자바스크립트는 따로 변수를 선언하는 명령이 없다. 따로 선언하는 문장 필요없이 값을 바로 저장할 수 있다.

 

오류의 처리 방법

  • 크롬 > 개발자도구 > console 에서 오류 메세지를 확인하고 고친다.

var의 사용

  • 이러이러한 변수를 사용하겠습니다. 라고 명시하기 위해 사용하는 키워드
  • 변수 선언에 사용됨.

타이머 설정

setIntercal(함수, 시간);
  • 정해진 시간 간격마다 함수를 동작시킨다. 시간은 밀리세컨드 단위를 받는다.

선택문과 반복문

  • if, switch, for 문 등을 자바와 같은 방법으로 사용할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function aaa(){
            var today = new Date();
            var year = today.getFullYear();
            var month = today.getMonth();
            var startDate = new Date(year, month, 1);
            var endDate = new Date(year, month+1, 0);
            
            var last = endDate.getDate();
            
            var yoil = startDate.getDay();
            var str = "<h2>";
                str += year + "년 " + (month+1)+"월";
                str += "</h2>";
            str += "<table>";
            str += "<thead><tr><th>일</th><th>월</th><th>화</th><th>수</th><th>목</th><th>금</th><th>토</th></tr></thead>"
            str += "<tr>";
                //첫 날 요일만큼 빈칸 출력
                for(var i=0; i<yoil; i++){
                    str += "<td></td>";
                }
                for(var i=1; i<=last;i++){
                    str += "<td>"+i+"</td>";
                    if((i+yoil) % 7 == 0){
                        str += "</tr><tr>"
                    }
                    
                }
            str += "</tr>";
            str += "</table>";
            document.getElementById("tableWrap").innerHTML = str;
        }
        //html 문서를 모두 다 읽어들인 다음에
        //우리가 작성하게 되는 모든 자바스크립트 코드는 이 속에 넣도록 해야한다.
        window.onload = function(){
            aaa();
        }
    </script>
    <style>
        h2{
            text-align: center;
        }
        table{
            width:100%;
            border:1px solid #DDD;
            border-spacing: 0;
            border-collapse: collapse;
        }
        th{
            background:#F0F0F6;
        }
        th, td{
            padding:4px;
            border:1px solid #DDD;
            text-align: center;
        }
        tr th:first-child, tr td:first-child{
            font-weight: bold;
            color:rgb(192, 0, 0);
        }
        tr th:nth-child(7), tr td:nth-child(7){
            font-weight: bold;
            color:rgb(0, 0, 189);
        }
        .today{
            background:#c3ccff;
            font-weight: bold;
        }
        
    </style>
</head>
<body>
    <div id="tableWrap"></div>
</body>
</html>

배열

  • 대괄호 안에 배열값을 나열한다.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var data = ["김예은", "홍석영", "유요한", "조영흔", "이재원"];

        function pro(){
            var str ="<ul>";
            for(i=0; i<data.length;i++){
                str += "<li>"+data[i]+"</li>";
            }
            str+= "</ul>";
            document.getElementById("list").innerHTML=str;
        }
    </script>
    <style>
        button{
            min-width:100px;
            padding:4px 8px;
            border-radius: 20px;
            background:#000;
            color:#FFF;
            font-weight: bold;
            font-size:14px;
        }
        .list ul{
            padding:0;
            border-top: 2px solid #000;
        }
        .list ul li{
            padding:8px 0;
            border-bottom:1px solid #ddd;
            list-style:none;
        }
    </style>
</head>
<body>
    <h2>저기어때</h2>
    <div class="list" id="list"></div>
    <button onclick="pro()">출력</button>
</body>
</html>

함수(function)

  • 어떤 기능을 수행하기 위한 서로 관련있는 명령어들의 집합
  • 함수 생성방법
  • 선언적 함수 
    • function 함수 이름 (){}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            function pro(){
                var today = new Date();
                document.getElementById("output").innerHTML=today;
            }
            setInterval(pro, 1000);
        }
    </script>
</head>
<body>
    현재 시간 : <span id="output"></span>
</body>
</html>
  • 익명함수(이름 없는 함수)
    • function(){}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            setInterval(function(){
                var today = new Date();
                document.getElementById("output").innerHTML=today;
            }, 1000);
        }
    </script>
</head>
<body>
    현재 시간 : <span id="output"></span>
</body>
</html>

 

 

콜백함수

  • 어떤 함수를 호출할 때 그 함수가 완료된 다음에 바로 또 다른 함수를 동작시키고자 할 때가 있다. 
  • 함수 호출 시 그 함수가 끝나고 동작할 함수를 매개변수로 전달한다. 이 함수를 콜백 함수라고 한다.
  • 대체로 익명함수로 많이 사용함.
function pro(){}
function end(){}
pro(end);

 

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

        let add = function (arr, k){
            let tot = 0;
            for(i = 0; i<arr.length; i++){
                tot+= arr[i];
            }
            alert("배열의 총합 : " + tot);
            k();
        }
        let data = [10, 20, 30, 40, 50];
        add(data, function(){
            alert("작업완료");
        });   
        /*
        let end = function(){
            alert("작업완료");
        }
        add(data, end);
        */
    </script>
</head>
<body>
    
</body>
</html>

 

  • 콜백 지옥: callback 안에 callback 안에 callback 이 끊임없이 있는 것
저작자표시 비영리 변경금지

'Kosta DevOps 과정 280기' 카테고리의 다른 글

div, span와 시멘틱 태그  (2) 2024.07.05

관련글

티스토리툴바