스파르타 코딩 클럽 후기 및 클릭하면 팝업창 나오게 하기

coding/JavaScript 냐울 · 2022. 2. 25. 09:30

1. 스파르타 코딩 클럽 후기

https://spartacodingclub.kr/

스파르타코딩클럽

왕초보 8주 완성! 웹/앱/게임 빠르게 배우고 내것을 만드세요!

spartacodingclub.kr

스파르타 코딩 클럽 특별 관리 시스템

스파르타 전용 메타버스는

온라인 교실이라고 생각하시면 됩니다.

듣기 전에는 이게 뭐가 좋은 거지?라고 생각했는데

담당 매니저님이 매일 관리해주시고 같이 공부하시는 분들도 옆에 계신 느낌이라

강의를 더 열심히 듣게 됩니다. 온라인 강의에서 오프라인 강의 효과를 느낄 수 있죠.

인간은 생각보다 의지력이 약하기때문에

이런 반강제적인 시스템 온라인 수강생들에게 좋다고 생각합니다.

직접 커스텀할 수 있는 캐릭터도 꽤 귀엽습니다.

제 캐릭터 귀엽쥬?

비전공자 맞춤

인간의 기억력이란 생각보다 형편없기 마련인데

처음 접하다 보면 더욱더 머리에 남지 않잖아요.

그런 어려운 부분을 정말 계속해서 반복적으로 알려주는 게 좋았어요.

네 머릿속에 때려 박겠다는 의지가 느껴집니다.

또한 쉬운 언어로 설명해주세요.

원래 쉬운 표현으로 설명하는 게 제일 어렵잖아요.

반복과 쉬운 표현의 콜라보로 비전공자들에게도 좋은 강의가 된 것이 아닐까 합니다.

2. 클릭하면 팝업창 나오게 하기 (aka.1주 차 개발일지)

스파르타 코딩 클럽 1주차 과제

1주 차에는 이런 과제를 만듭니다.

비전공자분들도 충분히 제작할 수 있도록 강의가 짜여있습니다.

팝업창 확인

주문하기 버튼을 누르면 팝업창이 뜨는 기능을 만들어보겠습니다.

<head>
    <script>
        function order() {
            alert("주문이 완료 되었습니다!");
        }
    </script>
</head>

함수 만들기

<head> 태그 안쪽에 <script>태그를 넣어

자바스크립트 코드를 쓸 수 있도록 만듭니다.

function은 자바스크립트에서 함수 시작을 알려줍니다.

order()는 함수의 이름으로 원하는 이름을 적으시면 됩니다.

주의점은 뒤에 괄호는 꼭 붙여주세요.

{ } 중괄호를 이용해 함수를 열어주시고 안쪽에 내용을 작성합니다.

함수 내용 (경고창)

alert()는 경고창을 나오게 해 줍니다.

계속 팝업창이라고 말하고 있었지만 사실은 경고 창인 셈이죠.

괄호 안쪽에 경고창에 표시하고 싶은 메시지를 적으면 완성입니다.

주의점은 글자를 쓰실 때는 곡 ""(따옴표)를 안쪽에 적어주세요.

작은따옴표도 괜찮습니다.

<button onclick="order()"> 주문하기 </button>

onclick

버튼을 누르면 경고창이 나오는 것이니

해당 버튼을 찾아서 onclick=""을 적어줍니다.

그리고 따옴표 안쪽에는 함수 이름을 적어주세요.

onclick="order()" 이런 모양이 되겠죠?

onclick은 클릭했을 때라는 의미입니다.

클릭하면 위에서 만든 함수가 실행됩니다.

함수의 내용은 경고창을 띄우는 것이니

클릭하면 팝업창(경고창)이 나오는 것입니다.

3. 스파르타 코딩 클럽 5만 원 할인받기

5만 원 할인받기

위의 설명만으로는 어려우실 수 있습니다.

제가 앞 내용은 싹 빼고 onclick만 설명해서 그런데요...

전체 강의 내용을 들으면 생각보다 간단하다고 느끼실 겁니다.

그럼 5만 원 할인 받고 강의 들어보실래요?

5만원 할인받기

이상으로 스파르타 코딩 클럽 후기 및 1주 차 개발일지 클릭하면 팝업창 나오는 방법까지 알아보았습니다. (아이고 많다)

도움이 되셨다면 공감과 댓글, 구독을 부탁드립니다.

[같이 보면 좋은 포스팅]

[coding/JavaScript] - [javaScript] 경고창

[javaScript] 경고창

안녕하세요. 플입니다. 오늘은 홈페이지에 경고창을 띄워보겠습니다. 1. alert alert(11); 경고창은 alert를 이용해 만들 수 있어요. alert( ); 괄호 안에 넣고 싶은 문구를 넣어주시면 됩니다. 2. 문

ssimplay.tistory.com

[Design/web] - 게시판 최신글 연동 - 아임웹

게시판 최신글 연동 - 아임웹

최신 글은 여러 게시판들 중 최신 글을 보여주는 기능입니다. 아임 웹에서 원하는 게시판의 최신 글을 연동해 보여주는 기능을 만들어보겠습니다. 잊지 말고 디자인 모드에 접속해주세요. 디자