[부스트코스]자바스크립트의 시작(수업 소개,script 태그,이벤트,콘솔)

네이버 부스트코스/[부스트서포터즈3기]자바스크립트의 시작

[부스트코스]자바스크립트의 시작(수업 소개,script 태그,이벤트,콘솔)

mmin.h 2021. 1. 10. 00:24

안녕하세요 부스터코스 3기 서포터즈 허브입니다. 🌿

부스터코스란?

커넥트재단은 네이버가 설립한 비영리 교육 재단입니다.
소프트웨어 개발자 양성 교육 프로그램, 부스트코스와 함께
당신의 개발 커리어를 업그레이드하세요!

오늘부터 자바스크립트의 시작 강의 포스팅을 시작하겠습니다.

제 포스팅은 강의 내 생각해보기와 수업에서 다루는 코드를 직접 크롬화면에서 확인 해볼 수 있도록 진행합니다. 만약 어려움이 있으시다면 제 포스팅을 보며 함께 따라오시는 것을 추천드립니다.

www.boostcourse.org/cs124/joinLectures/52258

자바스크립트의 시작

부스트코스 무료 강의

www.boostcourse.org

부스트코스 '자바스크립트의 시작' 강좌에 오신 것을 환영합니다.

부스트코스에서는 단순히 이론이나 지식만을 배우는 것이 아니라 빠르게 실무로 진입할 수 있도록 실습/퀴즈/프로젝트 등의 과정을 거치게 됩니다. 부스트코스의 이수과정인 본 강좌에서 주요 챕터마다 제공되는 퀴즈를 풀어보시면서 튼튼한 학습을 진행했는지 점검해보세요. 학습과 퀴즈를 모두 완수했다면, 이수증을 받아 강좌 학습에 대한 인증서도 받아가세요!

- '자바스크립트의 시작'는 아래 분들께 적합합니다.
* 자바스크립트를 학습해보고 싶으신 분.
* 프로그래밍 언어를 처음 공부해보시는 분.
* 웹 프론트앤드 개발에 관심이 있으신 분.

- 이 과정을 통해 여러분은
* 자바스크립트의 개념을 학습하실 수 있습니다.
* 웹 프론트앤드 개발에서 웹페이지의 동작을 담당하는 언어를 학습하실 수 있습니다.

코스 설계자 이야기

* 오픈튜토리얼스 : https://opentutorials.org/

opentutorials.org

오픈튜토리얼스 업데이트

opentutorials.org

* 생활코딩 Youtube : https://www.youtube.com/channel/UCvc8kv-i5fvFTJBFAk6n1SA

생활코딩

일반인에게 프로그래밍을 알려주는 온라인/오프라인 활동 입니다. 채널 공개키 : MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDbU/jgeYLWbmUB5pk/wlqMs+2qsOOPgN2ydxOsrWe8JJUXzj5ovsUmjfBSwLjajT6SyO00ulne3zja2PzEZC2wnJCgvZ6lr/ZLvA9yUqmrKRNa

www.youtube.com

여러분 모두 생활 코딩은 많이 들어보셨을 거라 생각합니다. 저도 작년 여름방학때 생활코딩을 통해 HTML 과 CSS에 대해 배웠습니다. 이번 자바스크립트 강의는 생활코딩을 통해 다양한 강의를 진행중이신 이고잉님께서 진행해주십니다.

만약 HTML 과 Internet 을 이해하지 않으셨다면 HTML 강좌를 먼저 수강하는 것을 추천합니다.

생각해보기

이 세상의 모든 웹페이지가 Javascript 없이 HTML로만 만들어진다면 어떤 일이 일어날까요?

→ JavaScript는 정적인 HTML을 동적으로 사용자들과 상호작용하기 위해 만들어진 언어입니다. 그렇기 때문에 마치 책과 같은 화면을 보게 될 것입니다.

수업의 목적

https://www.boostcourse.org/cs124/lecture/141897/

자바스크립트의 시작

부스트코스 무료 강의

www.boostcourse.org

야간모드와 주간모드를 바꾸는 기능을 만들어보는 것이 챕터 1의 이야기이다.
아래의 웹페이지에서 사용자가 night/day 버튼을 누를 때마다 페이지의 색깔이 바뀌는 것을 직접 자바스크립트 코드 html css 를 써가며 만들어 볼 수 있다.

이 코드를 쉽게 풀어봅시다. 먼저, 문서(document)에서 body라는 태그를 선택(Selector)합니다. 그리고 난 후 style 속성값에서 backgroundColor를 'black'으로 설정한다는 뜻입니다.

document.querySelector('body').style.backgroundColor='black'

정리하기

Javascript는 사용자와 상호작용 하는 언어입니다. 그리고 우리는 실습을 통해서 어떻게 이러한 일이 가능한지 살펴보았습니다. 웹 브라우저는 한 번 출력되면 바뀔 수 없지만, Javascript 코드에 따라서 style 속성이 추가되면서 디자인이 바뀌는 것입니다.

이러한 Javascript의 특성을 이용해서 우리는 웹페이지를 더 동적으로 만들 수 있습니다.

생각해보기

1) night 버튼을 눌렀을 때 배경이 검은색이 아닌 회색으로 바뀌도록 만들고 싶다면, 어떻게 하면 될까요?

document.querySelector('body').style.backgroundColor='gray'

3. HTML과 JS의 만남 : script 태그

https://www.boostcourse.org/cs124/lecture/141898/

자바스크립트의 시작

부스트코스 무료 강의

www.boostcourse.org

HTML과 Javascript

Javascript는 HTML 위에서 동작하는 언어입니다. 그렇다면 어떻게 서로 다른 두 언어를 하나로 합칠 수 있는 것일까요?

이 때 바로 script 태그가 필요합니다

Script 태그

HTML의 태그 중 하나인 script 태그 안에는 Javascript 코드를 쓸 수 있습니다. 다음 예제 코드와 같이 쓸 수 있는 것이죠.

즉, HTML로 쓴 코드는 정적이기 때문에 문자 그대로를 출력하지만, Javascript 코드는 동적으로 이를 계산할 수도 있다는 것이죠.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>javaScript</h1>
    <script>
        document.write(1 + 1);
    </script>
    <h1>html</h1>
    1+1
</body>

</html>

생각해보기

어떤 경우에 HTML 코드를 사용하고, 어떤 경우에 Javascript 코드를 사용하면 좋을까요?

→HTML 코드를 통해 먼저 웹의 틀과 레이아웃을 구상 후 그 위에 JS 를 통해 동적인 웹을 만들어 주면 될 것이다.

HTML과 JS의 만남 : 이벤트

https://www.boostcourse.org/cs124/lecture/141899/

자바스크립트의 시작

부스트코스 무료 강의

www.boostcourse.org

Onclick 속성

HTML 태그 안에서 onclick 속성은 javascript 코드를 가지게 됩니다. 그리고 onclick이 포함된 태그가 클릭되었을 때 이 javascript 코드에 따라서 웹 브라우저가 동작됩니다. 즉, 위의 코드에서 웹 브라우저는 alert('hi') 라는 코드를 기억하고 있다가, 사용자가 클릭하면 이를 실행해주는 것입니다.

이렇게 웹 브라우저에서 일어나는 유용한 사건을 **이벤트(Event)**라고 합니다.

이벤트(Event)

웹 브라우저에서 일어나는 사건을 이벤트라고 한다면, 이벤트에는 어떤 종류가 있을까요?

첫 번째로는 방금까지 살펴봤던, onclick 이벤트입니다. 사용자가 어떤 것을 클릭하는 사건을 의미하죠.

두 번째는 onchange입니다. 예를 들면 다음과 같은 입력창에서 사용자가 키보드를 이용해 무언가 입력하면, 그에 따라 내용이 바뀌는 사건을 의미하는 것입니다. 이 때, 입력창에 입력한 후 바깥쪽을 클릭했을 때를 기준으로 그 전과 내용이 바뀌었는지 확인한다는 점도 알아두세요.

이 외에도 총 10~20가지 정도의 이벤트가 존재합니다. 이를 이용해서 사용자와 상호작용하는 웹 사이트를 만들 수 있게 됩니다.

이러한 다양한 이벤트들을 모두 외울 수는 없겠죠? 여러분이 코딩을 하다가 필요한 이벤트들은 구글링을 통해서 쉽게 찾아볼 수 있습니다. 예를 들어서 키보드를 누르는 이벤트를 알아보고 싶다면, 구글에 "javascript keydown event"라고 검색하면 onkeydown 이라는 이벤트를 쉽게 찾을 수 있습니다.

한번 코드를 살펴볼까요?

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="button" value="hi" onclick="alert('hi')">
    <input type="text" " onchange=" alert('changed')">
    <input type="text" onkeydown="alert('key down!')">

</body>

</html>

여기서 재미있는 점은 onchane는 안의 작성한 text가 바뀌지 않으면 alert가 작동하지 않는 다는 점입니다.

한글자 한글자 칠때마다 알람이 뜨네요

생각해보기

버튼 위에 마우스를 올리면 경고창이 뜨는 웹 사이트를 만드는 개발자가 되었다고 상상해 봅시다. 어떤 이벤트를 사용하면 좋을지 알아보세요. (힌트: javascript mouseover event라고 검색해보세요!)

<input type="button" value="onmouseover" onmouseover="alert('mouse over!')">

5. HTML과 JS의 만남 : 콘솔

www.boostcourse.org/cs124/lecture/141900

자바스크립트의 시작

부스트코스 무료 강의

www.boostcourse.org

지난 강의에서 Javascript를 실행하는 한 가지 방법인 이벤트(Event)에 대해서 배워봤습니다. 이번 강의에서는 또 다른 방법인 콘솔(Console)에 대해서 알아보겠습니다.

첫 강의에서 했던 것처럼 웹 브라우저에서 오른쪽 버튼 > 검사 를 누르면 뜨는 창을 잘 살펴보면 Console이라는 이름의 탭이 보일 겁니다. 이 콘솔을 이용하면 파일을 만들지 않고도 바로 Javascript 코드를 실행할 수 있습니다.

예를 들어서, 어떤 문자열(Hello, World!)의 길이를 알고 싶다고 해 봅시다. 이 때 바로 이 콘솔 창에서 다음과 같이 치고 엔터를 누르면 문자열의 길이를 현재 페이지에서 바로 경고창으로 출력할 수 있습니다.

즉, 콘솔을 통해서 입력된 코드는 현재 페이지에서 즉석으로 실행되는 것입니다.

그렇다면 이런 콘솔을 어떻게 활용할 수 있을까요? 예를 들어서 여러분이 페이스북에 댓글을 남기는 이벤트를 개최했다고 해 봅시다. 이 때 아주 많은 참가자들 중 당첨자를 뽑아야 하는데, 여기서 콘솔을 사용할 수 있습니다. 미리 짜 둔 Javascript코드를 콘솔 창에 적은 후 실행시키면 당첨자를 쉽게 뽑을 수 있겠죠.

정리하자면, 콘솔을 이용하면 웹사이트에서 간단한 문제를 간편하게 Javascript를 실행시켜서 해결할 수 있는 것입니다.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor doloremque perferendis itaque temporibus possimus
    aperiam, placeat rerum ipsum, doloribus aspernatur quia? Tenetur alias quibusdam quos laudantium at! Maxime, impedit
    possimus.
</body>

</html>

html 코드로 간단한 문장을 만들어보고 console을 통해 알아보았습니다.

alert('문자열'.length);

해당 코드를 통해 문자열의 갯수를 알아볼 수도 있겠죠?

그리고 크롬 내에서 실행되는 js는 홈페이지 내에서 진행되듯이 실행됩니다.

생각해보기

1. 현재 페이지에서 콘솔을 이용해서 '생각해보기' 라는 경고창을 띄워봅시다.

alert('생각해보기');

네이버 커넥트 부스터코스 3기 서포터즈 허브🌿

www.boostcourse.org/

github.com/hhhminme

hhhminme - Overview

꾸준히 공부중인 초보 개발자지망생 hub@kakao.com. hhhminme has 13 repositories available. Follow their code on GitHub.

github.com

다 함께 배우고 성장하는 부스트코스

부스트코스(boostcourse)는 모두 함께 배우고 성장하는 비영리 SW 온라인 플랫폼입니다.

www.boostcourse.org

'네이버 부스트코스 > [부스트서포터즈3기]자바스크립트의 시작' 카테고리의 다른 글

[부스트코스]자바스크립트의 시작(배열과 반복문, 활용) (0)	2021.01.26
[부스트코스]자바스크립트의 시작(반복문,배열) (0)	2021.01.19
[부스트코스]자바스크립트의 시작(프로그래밍, 조건문, 비교연산자와 블리언, 조건문, 리팩토링) (0)	2021.01.15
[부스트코스]자바스크립트의 시작(데이터타입, 변수와 대입연산자, 웹브라우저 제어, CSS기초, 제어 태그 선택) (0)	2021.01.11
[부스트코스] 네이버 커넥트 부스트코스 3기 서포터즈 합격! (0)	2021.01.09

현재글[부스트코스]자바스크립트의 시작(수업 소개,script 태그,이벤트,콘솔)

반가워요 허브입니다.

💬hub@kakao.com

👍github.com/hhhminme

🤖한국산업기술대학교 AI 챗봇 산돌이

https://pf.kakao.com/_pRxlZxb

백준, 부스트코스, 배열, 정렬, 자바스크립트의시작, 자료구조, 생활코딩, 네이버, AWS, 선택정렬, 네이버커넥트, 연결리스트, 퀴즈풀이, 부스트코스서포터즈, Linked list, 문제풀이, c언어, 자바스크립트, 알고리즘, API,

Today :
Yesterday :

👨‍💻 ModernAlchemist 허브의 개발 일지