혼공/혼공 1주차

[혼공] 혼자 공부하는 자바스크립트 1주차 -1

만갱0l 2024. 1. 2. 22:36

공부해야지 해야지 하면서 마음먹기가 쉽지 않았는데 혼공학습단 11기에 선정이 되어 동기부여를 얻게 되었다. 

자바스크립트는 어려워 보지도 못했는데 이번 기회에 다시한번 시작하는 계기가 되어보자! 

 

이번 혼공학습단의 일정은 아래와 같다. 

 

6주라는 시간동안 값진 결과를 위해 다짐해 보자!

 

 

* 유튜브 강의 링크 *

(3) 혼자 공부하는 자바스크립트 - YouTube

 

혼자 공부하는 자바스크립트

 

www.youtube.com

 

 

* 혼공족 커리큘럼*

[혼공학습단 11기] 스터디 활동과 도서별 커리큘럼 안내 » 혼자 공부하는 책 (hanbit.co.kr)

 

[혼공학습단 11기] 스터디 활동과 도서별 커리큘럼 안내

  안녕하세요, 한빛미디어 혼공학습단의 🧙‍♀️혼공족장🧙‍♀️입니다. 혼공학습단 활동과 도서별 커리큘럼 안내 드립니다.   11기 활동 기간 1주차: 1월 2일 ~ 1월 7일 2주차: 1월 8일 ~ 1월 14

hongong.hanbit.co.kr

 

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

자바스크립트란? 

- 프런트엔드의 개발언어라고 부르며 웹브라우저에서 사용하는 프로그래밍 언어이다.  자바랑 자바스크립트랑 이름이 비슷해 같은 언어로 생각할 수 있는데 인도랑 인도네시아가 다른 것처럼 자바랑 자바스크립트는 완전히 다른 언어이다. 

 

초기의 웹은 정적인 웹들로 구성되어 있었지만 자바스크립트 출시 이후 사용자의 마우스 클릭하거나 올렸을 때 이벤트들이 발생하는 동적이 웹으로 구성된 사이트로 변화하고 있다. 

 

최근에는 제이쿼리(Jpuery), 앵귤러(Angular), 리액트(React), 노드(Node). js, 포갭(PhoneGap)등 자바스크립트로 제작된 라이브러리가 등장했다. 

 

여기까지 기본 이론을 뒤로하고 미션을 수행해 보자! 

 

* 1주 차 미션 *

 

# 기본미션 

  - p.54의 <파일 만들고 저장해 실행하기>에서 'Hello World' 출력하기 

 

alert으로 'hello world'를 입력을 하면

 

브라우저에 뜬다!

 

# 선택미션

Chapter 01-1 확인문제 

1) 인터넷을 돌아다니면서 보았던 쉽게 사용할 수 있고, 기능이 많다고 느꼈던 웹 사이트를 5개 정도 적어보세요.

  - 1. 네이버

  - 2. 구글

  - 3. 인스타 

  - 4. 페이스북

  - 5. 유튜브

 

2) Statcounter에서 책을 보고 있는 현재 시점의 웹 브라우저 점유율을 확인하세요.

진짜 크롬이 압도적으로 많다...

 

 

 

Chapter 01-2 확인문제 

1) 구글 크롬 개발자 도구의 콘솔을 실행하고 다음 명령어를 입력했을 때 나오는 결과를 빈칸에 적어보세요. 코드를 하나 실행할 때 여러 줄의 출력이 나오는 경우 모두 적어주세요.

 

맨 첫 줄 안녕하세요만 입력을 했을 때 -> 해당 부분의 오류가 있음을 알리는 오류가 발생했다. 

두 번째  "안녕하세요"만 입력했을 때 -> 큰 변화가 없이 다시 한번 '안녕하세요' 따옴표만 바뀌어 출력이 되었다. 

세 번째 console을 이용하여 출력 -> 안녕하세요 다음 undefined로 다음 값이 없을을 알리는 문구가 떴다.

마지막 "안녕하세요 닫는 따옴표를 안 했을 때 -> 닫히는 따옴표가 없다는 오류가 발생했다. 

 

 

2) 비주얼 스튜디오 코드에 다음 소스 코드를 입력하고 ex01.html로 저장한 후 화면에 나오는 결과를 적어보세요. 

 

<body>

        <script>

                documet.body.innerHtml = "<h1> 안녕하세요 </h1>"

        </script>

</body>

 

실행결과 

 

Chapter 01-1 ~2는 기본과 오류에 대한 것을 알아본 거 같다. 다음은 내일 하는 걸로..ㅎ 정말 오랜만에 자바스크립트를 만져봤는데 기초부터 다시 하니 처음 배웠을 때 그 어려움.. 이 생각나 걱정이 많이 된다... 하지만 완벽하진 않지만 꾸준히 실천해 뼈와 살이 되도록 노력하자!

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

** 추가 정리 **

 

자바스크립트의 명령어 중에 입력, 출력, 확인하는 명령어가 있다. 

 

 

1. 입력 - pormpt('입력 제목' , '입력내용')

오른쪽 명령어를 실행하면 왼쪽에 보여지는거와 같이 입력할 수 있는 창이 나온다.

 

 

2. 출력 - document.write('출력내용')

document는 브라우저에 직접적으로 표시할 수 있다.

 

 

2. 출력 - alert ('출력내용')

 

이번주 미션에서 했으니 생ㄹㅑㄱ......ㅎ

 

2. 출력 - console.log('출력내용')

console.log는 개발자 도구를 열어 확인할 수 있다.

 

 

3. 확인 - confirm('확인내용')

confirm 사용하여 확인과 취소가 가능하다.

 

 

이렇게 다양하게 값을 입력하거나 확인할 수 있는 방법이 있다.