[스파르타코딩클럽]웹개발 1주차-자바스크립트 시작하기

지구인 ㅣ 2021. 6. 21. 16:48

728x90

자바스크립트란?

-프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어이다.

-자바(Java)와 자바스크립트(Javascript)는 아무런 연관이 없다.

자바스크립트가 HTML과 어떻게 연동되는지 알아보기!

<head>
    <style>
        <!-- CSS 코드블록 -->
    </style>
    <script>
        function openclose(){
            let status = $('#post-box').css('display');
            if(status == 'block'){
                $('#post-box').hide();
                $('#btn-posting-box').text('포스팅박스 열기');
            }else{
                $('#post-box').show();
                $('#btn-posting-box').text('포스팅박스 닫기');
            }
        }
        $(document).ready(function () {
            $('#cardlist').empty()
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/post",
                data: {},
                success: function (response) {
                    let movie = (response)['articles']
                    let m_html = ``;

                    for(let i = 0; i < movie.length; i++){
                        let comment = movie[i]['comment']
                        let desc = movie[i]['desc']
                        let image = movie[i]['image']
                        let title = movie[i]['title']
                        let url = movie[i]['url']

                        m_html =
                            `<div class="card">
                                <img class="card-img-top" src=${image} alt="Card image cap">
                                <div class="card-body">
                                    <a href=${url} class="card-title">${title}</a>
                                    <p class="card-text">${desc}</p>
                                    <p class="card-text comment">${comment}</p>
                                </div>
                            </div>`

                        $('#cardlist').append(m_html)
                    }
                }
            })
        });
    </script>
</head>

<head></head> 사이에 포함되는 여러가지 태그 중 CSS로 작성되는 <style></style>도 있지만, javascript로 작성되는 <script></script>도 있다.

<head></head> 안에 인덴테이션(특정 코드 안에 포함되는 코드일 경우 들여쓰기하여 코드를 작성하는 것)을 지켜서 작성하면 된다.

위의 코드를 보면 <script> 안에 openclose()라는 함수를 만들어 놓았다.

<a class="btn btn-primary btn-lg" id="btn-posting-box" href="#" role="button" onclick="openclose()">포스팅박스 열기</a>

그리고 <body></body>안에 이런 식으로 onclick="openclose()" 했을 경우 위의 태그를 담은 버튼을 클릭하면 onClick이 실행되며 함수 openclose()가 작동한다.

728x90

저작자표시

'TIL저장소' 카테고리의 다른 글

[스파르타코딩클럽]웹개발 2주차 jQuery 기초 (0)	2021.06.21
[스파르타코딩클럽]javascript 기초 문법/console에서 엔터하는 방법 (0)	2021.06.21
[스파르타코딩클럽]웹개발 1주차 부트스트랩(bootstrap) 사용법 (0)	2021.06.21
[스파르타코딩클럽]웹개발 1주차 로그인 페이지 만들기(html/css) (0)	2021.06.21
[스파르타코딩클럽]웹개발 종합반 1주차(html/css/javascript) (0)	2021.06.17

more than big