[부스트코스 서포터즈3기]웹과 Java script - 콘솔

들어가기 전

_____________________________________________________________________

 

안녕하세요 :) 오늘은 이전 이벤트에 이어 

 

1. Script 태그 

 

2. 이벤트 

 

3. 콘솔 

 

이 세 가지 중 마지막 부분인 3. 콘솔에 대해 살펴보겠습니다! 

 

이번 콘솔 파트에서의 학습 목표는 콘솔을 통한 간단한 Javascript 코드 실행입니다! :) 

 

 

콘솔(Console)

_____________________________________________________________________

 

지금까지  자바스크립트 (Javascript)를 실행시키기 위해 ATOM을 통해 파일을 만들었습니다. 

 

 

콘솔은 이전 파일을 통해서 만들어진 것이 아닌 홈페이지 내에서 사용할 수 있는 도구라고 생각해주시면 편합니다 

 

 

또한 콘솔같은 경우에는 어떠한 코드를 실행해야 하는 가벼운 상황들이 있을 때 사용됩니다 :) 

 

 

실행방법은 다음과 같습니다! 

 

 

이렇게 다음과 같이 홈페이지 내에서 마우스 오른쪽을 눌러 검사를 눌러주시거나 

 

 

단축키 F12를 누르시게 되면 다음과같은 창이 나오게 됩니다! 

 

 

이 중 빨간색 동그라미를 쳐놓은 저 부분이 이번에 활용할 콘솔 창입니다. 

 

 

이 콘솔을 이용한다면 파일을 만들어 자바 스크립트를 넣는것이 아닌 즉석으로 넣을 수 있습니다! 

 

 

그렇다면 한번 확인 해볼까요?? 

 

 

먼저 첫번째입니다! 

 

콘솔 창을 이용해 x , y 값을 각각 넣은 후 x+y를 통해 계산된 결과 값을 가져보았습니다.

 

 

그리고 두번째 ! 

 

이렇게 어떠한 문자열의 개수를 알고 싶을 때는 작은따옴표(')로 문자열을 묶어준 다음. length를 붙이면

 

 

해당 문자열의 개수를 알수 있습니다! 

 

 

ex)'text is text'.length 

 

 

위 코드의 경우는 .length의 기능도 담고 있지만 경고창을 띄우는 alert를 통해 문자열의 총 글자 개수가

 

 

경고창에 띄워지게 설정한 코드입니다! 

 

 

해당 코드를 입력 후 엔터를 누르게 된다면!? 

 

 

다음과 같이 결과 값이 출력되게 됩니다. 

 

 

 

총  ' ' 안에 있는 문자의 개수는 69개라는 것을 보여주고 있습니다! (못 믿으시겠으면 세보셔도 됩니다 ㅋㅋ )

 

 

이처럼 콘솔을 통해 자바 스크립트를 동작시키면 해당 보고 있는 웹 페이지를 대상으로 실행하게 됩니다.

 

 

이러한 점을 이용하여 콘솔을 통해 홈페이지에서 어떠한 댓글을 단 사람들 내에서 추첨을 할 때 등

 

 

여러 가지의 경우에서 활용할 수 있다는 장점을 가지고 있습니다! :) 

 

 

 

강사님의 설명입니다 :) 참고해서 더 살펴보시면 좋을 거 같습니다

 

생각해보기

_____________________________________________________________________

 

오늘의 생각해보기는 어떠한 질문이었을까요!? 

 

 

오늘 배웠던 내용을 토대로 본다면 간단하게 풀 수 있는 문제였습니다! 

 

 

저 같은 경우 다음과 같이 정답을 작성했습니다!

 

이 코드를 직접 콘솔 창에 넣어보았습니다! 

 

.... 혹시나 해서 세 가지의 경우로 전부 넣어보았는데 전부 다 작동이 잘되었다는 사실! 

 

다음과 같이 결과 출력이 잘 나오고 있음을 확인할 수 있었습니다 :)

 

마치며

_____________________________________________________________________

 

지금까지 각 3개의 파트를 전부 살펴보았습니다!

 

 

초반 부분이라 크게 어려운 점은 없었고 강사님도 설명을 너무 잘해주셔서 이해가 너무 잘되었습니다 :)

 

 

배우고 싶거나 생각 있으신 분들은 들으시는 거 꼭 추천드릴게요! 

 

 

제가 작성하는 모든 내용은 부스트 코스의 자바스크립트 시작에서 배운 내용을 바탕으로 작성됩니다! 

 

 

아래 링크드릴게요! 

 

www.boostcourse.org/cs124

자바스크립트의 시작

 

다음은 변수와 대입 연산자 & 웹브라우저 제어라는 내용으로 업로드하도록 하겠습니다!