Javascript 맛보기

Javascript

Javascript 맛보기

Spell 2022. 5. 7. 23:05

Javascript?

브라우저가 유일하게 알아 들을 수 있는 프로그래밍 언어다.

초기에 공부할 때 클라이언트가 서버에 요청하면, 서버가 클라이언트에게 Html+CSS+Javascript를 준다고 했떤 것을 기억하자.

근데 왜 브라우저가 알아 들을 수 있는 유일한 프로그래밍 언어일까?

Java나 파이썬등은 안될까?

말이 안되는건 아니다. 하지만 이는 역사적인 이유와 이미 만들어진 표준이 존재하기 때문인데, 모든 브라우저는 기본적으로 Javascript를 알아듣게 설계되어 있으며, 모든 웹서버는 HTml+CSS+Javascript를 주게 되어있다.

예를 들어보면 첫 브라우저를 만든 사람이 Javascript를 알아들을 수 있게 만들었다. 그런데 친구가 와서 "오 뭐야 그거 신기하다, 나도 그걸로 만들어볼래" 라면서 따라 만든다. 물론 따라 만들었기에 여기서도 Javascript를 알아들을 수 있게 한다. 그렇게 친구가 100명, 1000명이 모두 따라했다. 그러면 이렇게 많은 사람들이 따라서 하다 보면, 처음의 시스템을 본떠왔기 때문에 그것이 그대로 사용되어지며 어느순간 표준이 되는 것 이다. 누군가가 "아! 나느 파이썬을 알아들을 수 있게 만들꺼야!"라고 할 수 있꼬 가능한 이야기이다. 하지만 이미 많은 사람들이 표준처럼 써 오던걸 쉽게 바꿀 수 있을까?

추가로 Java와 Javascript는 어던 차이가 있나?

이름이 비슷해서 헷갈린다. 파생된 언어인가? 뭐가 비슷하길래 같은 이름이 들어가지?

결론은... 배와 배꼽 같은? 바다와 바다코끼리 같은? 관계이다. 즉 아무 관련 없다.

그래서 어떻게 Javascript를 쓰냐?

우리는 CSS에서 <style></style>을 만들어서 여러 문구를 적어 적용시키고 작동시켰다.

이번에는 <script></script>를 만들어서 적어보고 적용시킬 것이다.

CSS를 공부하면서 만들었떤 나홀로 링크 메모장을 그대로 활용해보자.

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
    <title>부트스트랩 연습하기</title>
    <link href="https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'East Sea Dokdo', cursive;
        }
        .wrap {
            width: 1000px;
            margin: auto;
        }
        .comment{
            color: blue;
            font-weight: bold;
        }
        .postingbox{
            border: solid;
            border-color: black;
            border-radius: 10px;

            width: 500px;
            padding: 30px;
            margin: 0px auto 30px auto;
        }
    </style>
    <script>
        function hey() {
            alert('Hello!')
        }
    </script>
</head>

<body>
    <div class="wrap">
        <div class="jumbotron">
            <h1 class="display-4">나홀로 링크 메모장!</h1>
            <p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다</p>
            <hr class="my-4">
            <p class="lead">
                <a class="btn btn-primary btn-lg" href="#" role="button">포스팅 하기</a>
            </p>
        </div>
        <div class="postingbox">
            <div class="form-group">
                <label for="exampleInputEmail1">아티클 URL</label>
                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                       placeholder="URL">
<!--                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>-->
            </div>
            <div class="form-group">
                <label for="exampleFormControlTextarea1">간단 코멘트</label>
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
            </div>
<!--            <div class="form-check">-->
<!--                <input type="checkbox" class="form-check-input" id="exampleCheck1">-->
<!--                <label class="form-check-label" for="exampleCheck1">Check me out</label>-->
<!--            </div>-->
            <button type="submit" class="btn btn-primary">Comment 저장</button>
        </div>
        <div class="card-columns">
            <div class="card">
                <img class="card-img-top" src="https://images.unsplash.com/photo-1556195332-95503f664ced?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=736&q=80" alt="Card image cap">
                <div class="card-body cardimg">
                    <h5 class="card-title"><a href="https://www.naver.com">여기에 기사 제목</a></h5>
                    <p class="card-text">기사의 요약 내용이 들어감. 가나다라마바사 어쩌구저쩌구 블라블라블라 강약약중간약약강약중간약중간중간약약</p>
                    <p class="card-text comment">코멘트 란</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top" src="https://images.unsplash.com/photo-1556195332-95503f664ced?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=736&q=80" alt="Card image cap">
                <div class="card-body cardimg">
                    <h5 class="card-title"><a href="https://www.naver.com">여기에 기사 제목</a></h5>
                    <p class="card-text">기사의 요약 내용이 들어감. 가나다라마바사 어쩌구저쩌구 블라블라블라 강약약중간약약강약중간약중간중간약약</p>
                    <p class="card-text comment">코멘트 란</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top" src="https://images.unsplash.com/photo-1556195332-95503f664ced?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=736&q=80" alt="Card image cap">
                <div class="card-body cardimg">
                    <h5 class="card-title"><a href="https://www.naver.com">여기에 기사 제목</a></h5>
                    <p class="card-text">기사의 요약 내용이 들어감. 가나다라마바사 어쩌구저쩌구 블라블라블라 강약약중간약약강약중간약중간중간약약</p>
                    <p class="card-text comment">코멘트 란</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top" src="https://images.unsplash.com/photo-1556195332-95503f664ced?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=736&q=80" alt="Card image cap">
                <div class="card-body cardimg">
                    <h5 class="card-title"><a href="https://www.naver.com">여기에 기사 제목</a></h5>
                    <p class="card-text">기사의 요약 내용이 들어감. 가나다라마바사 어쩌구저쩌구 블라블라블라 강약약중간약약강약중간약중간중간약약</p>
                    <p class="card-text comment">코멘트 란</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top" src="https://images.unsplash.com/photo-1556195332-95503f664ced?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=736&q=80" alt="Card image cap">
                <div class="card-body cardimg">
                    <h5 class="card-title"><a href="https://www.naver.com">여기에 기사 제목</a></h5>
                    <p class="card-text">기사의 요약 내용이 들어감. 가나다라마바사 어쩌구저쩌구 블라블라블라 강약약중간약약강약중간약중간중간약약</p>
                    <p class="card-text comment">코멘트 란</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top" src="https://images.unsplash.com/photo-1556195332-95503f664ced?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=736&q=80" alt="Card image cap">
                <div class="card-body cardimg">
                    <h5 class="card-title"><a href="https://www.naver.com">여기에 기사 제목</a></h5>
                    <p class="card-text">기사의 요약 내용이 들어감. 가나다라마바사 어쩌구저쩌구 블라블라블라 강약약중간약약강약중간약중간중간약약</p>
                    <p class="card-text comment">코멘트 란</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

살펴보면 <style></style>아래 <script></script>구역이 새로 생긴 것을 알 수 있다.

    <script>
        function hey() {
            alert('Hello!')
        }
    </script>

이걸 적용시켜보자. 어디에? <body></body>안에 있는 jumbotron의 "포스팅 하기"라는 버튼에!

<div class="jumbotron">
    <h1 class="display-4">나홀로 링크 메모장!</h1>
    <p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다</p>
    <hr class="my-4">
    <p class="lead">
        <a onclick="hey()" class="btn btn-primary btn-lg" href="#" role="button">포스팅 하기</a>
    </p>
</div>

바뀐점이 느껴지는가?

보기 쉽게 전과 후를 비교해볼까?

전

<p class="lead">
    <a class="btn btn-primary btn-lg" href="#" role="button">포스팅 하기</a>
</p>

후

<p class="lead">
    <a onclick="hey()" class="btn btn-primary btn-lg" href="#" role="button">포스팅 하기</a>
</p>

<a></a>안에 onlick="hey()"라는 문구가 추가로 적혀있다. 어? "hey()"는 아까 내가 위에서 <script></script>로 만든거였잖아? 저장하고 페이지에 가서 확인해보자.

뭐 바뀐건 하나도 보이지 않는다. 하지만 생각해보면 나는 저 포스팅하기 파란색 박스에 적어놨지?

onclick이니까 한번 클릭해볼까?

오! 내가 적어놓은 Hello라는 문구가 클릭하면 이렇게 나온다!

다시 집고 넘어가면 <script></script>에서 다음과 같이 만들었다.

<script>
    function hey() {
        alert('Hello!')
    }
</script>

풀어 쓰자면 funtion은 함수라는 뜻인데, hey()라는 함수를 만든것이다. alert는 경고창인데 hey()라는 함수는 'Hello!'라는 메세지를 동반한 경고창이라는 말이다.

자 그럼 버튼에 적용시킨 코드를 살펴보자.

<p class="lead">
    <a onclick="hey()" class="btn btn-primary btn-lg" href="#" role="button">포스팅 하기</a>
</p>

먼저 onlick="hey()"를 풀어보자.

우리는 포스팅 하기라는 버튼에 onlick="hey()"를 추가해 놨는데, 즉 해당 버튼을 클릭하면 "hey()"라는 함수를 불러와라! 라고 할 수 있다. "hey()"라는 함수는 ['Hello!라는 메세지를 동반한 경고창을 띄워라!] 라는 함수니, 아까 화면처럼 작동이 되는 것 이다.

이런 함수를 잘 만들고 적용해서 원활하게 동작을 시키려면 Javascript의 문법을 알아야 한다.

개발자도구로 페이지를 확인해보자.

해당 페이지에서 일단 개발자도구를 키고 console에 들어가보자.

(까먹으면 안되니까 개발자도구는 해당 페이지에서 오른쪽 클릭 후 '검사'를 누르면 뜬다)

개발자 도구를 열었고, 여기에 hey()라고 쳐볼꺼다.

hey()라고 치고 엔터를 누르니, 해당 페이젱서 만들어 두었던 hey()함수가 실행된다.

전에 구역을 확인하거나 이 코드가 어느 쪽을 가리키는지 알아보기 위해 개발자 도구를 활용했었다.

이렇듯이 내가 지정해 놓은 <script></script>안의 함수도 작동 확인이 가능하다.

추가로 미리 개발자 도구를 통하여 수정도 해볼 수 있다.

왼쪽 위 버튼을 누르고

'나홀로 링크 메모장!'구역에 마우스를 올리고 클릭해보자.

해당 코드가 개발자 도구에 나타나게 된다.

나홀로 링크 메모장의 텍스트를 바꿔볼까?

오호, 바뀌었다? 이렇게 미리 수정해보기도 해볼 수 있다. 물론 새로구침하면 내가 작성한 코드를 새로 불러오기때문에 개발자 도구로 수정한것은 초기화가 되어버린다. 어잿든 우리는 이 개발자 도구와 친숙해져야 한다.

다른 페이지에서 hey()함수가 작동할까? 안된다. 그 페이지에는 hey()라는 함수가 내가 만드것과 똑같게 있지 않기 때문이다.

다음에 개발자도구 콘솔창을 활용해서 Javascript 기초 문법을 배워볼꺼다.

(이유는 매번 툴에 수정하고 확인하고 하기에는 시간을 많이 잡아먹기 때문에?..)

저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

서버(server) - 클라이언트(client) 통신 이해하기 (0)	2022.05.27
onclick 활용 복습해보기 (0)	2022.05.18
Javascript 전형적인 패턴 연습 (0)	2022.05.10
Javascript 기초 문법 2 (feat. 함수, 조건문, 반복문) (0)	2022.05.10
Javascript 기초 문법 1 (feat. 변수, 자료형 + 번외 기본함수) (0)	2022.05.07

현재글Javascript 맛보기

Spell