꿈소년의 개발 이야기

[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 15 자바스크립트와 첫 만남 본문

Do it 스터디!

[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 15 자바스크립트와 첫 만남

꿈소년 2026. 2. 4. 22:48
반응형

DAY 22

🔖 오늘 읽은 범위 :

☃️2/3(화) 진도표 알림
❄️공부 내용: 15 자바스크립트와 첫 만남
❄️ 쪽수: 486~506쪽

자바스크립트의 역할

  • 웹의 요소를 제어한다.
    • 스타일의 변경이나 움직임 제어.
    • ex) 메뉴 - 하위 메뉴 노출, 탭 구성, 회원 가입, 상품 주문, 입력 정보 유효성 체크, 마우스나 키보드 동작 제어 반응 등등
  • 웹 애플리케이션
    • 사용자와 실시간 정보 처리.
  • 다양한 라이브러리
    • React, Angular, Vue.js
    • D3.js, DOM 조작
    • JQuery
  • 서버 개발
    • Node.js : 자바스크립트로 백엔드 개발을 할 수 있도록 만듬.
    • 기존 서버 개발 언어는 PHP, 자바, 닷넷이나 자바스크립트로 서버개발 영역을 확대함.

웹 브라우저와 자바스크립트

  • 웹 브라우저에는 자바스크립트 코드 읽고 처리하는 해석기가 있음. JavaScript interpreter
  • 웹 문서의 <script> 태그로 자바 스크립트 작성한다.
  • 별도의 자바스크립트 파일로 작성한 후 웹 문서와 연결해서 사용할 수도 있다.
  • 자바스크립트는 영문 대소문자를 구분한다.

웹 문서 안에 <script> 태그로 자바스크립트 작성하기

  • <script>와 </script> 태그 사이에 실행할 자바스크립트 코드를 작성하는 방식

    • 웹 문서 요소를 제어하는 경우가 많으므로 요소들이 모두 표시 된 후 실행 하기 위해서, </body> 태그 직전에 자바스크립트 코드를 넣는다.

    • 웹 문서에서 바로 확인 가능하다는 건 장점.

    • 웹 문서가 복잡해 보임. HTML 과 자바스크립트 코드가 섞여 있기 때문.

    • 여러 웹 문서에서 같은 코드를 사용하는 경우에 똑같은 코드를 반복하기 때문에 관리가 안됨.

      <script>
  let heading = document.getElementById("heading");
  heading.onclick = function() {
      heading.style.color = "red";
  }
</script>

외부 스크립트 파일로 연결해서 자바스크립트 작성하기

  • 외부 스크립트 파일로 저장해서 웹 문서와 연결하는 방식
  • 파일 확장자는 *.js
<script src="외부 스크립트 파일 경로"></script>

/* 외부 스크립트 파일 연결해서 처리 */
<script src="js/change-color.js"></script>

웹 브라우저에서 스크립트 해석하는 과정

  • 를 보고 웹 문서로 인식한다.
  • <html>, </html> 태그 사이 내용을 분석한다.(HTML 분석기)
  • html 태그 순서와 포함 관계를 확인한다. 태그 간의 관계를 분석한다.
  • 태그 분석이 완료 되면, 스타일 정보를 분석한다.(CSS 분석기)
  • <script> 태그를 만나면 웹 브라우저 안에 포함된 자바스크립트 해석기에게 스크립트 코드를 넘긴다.
  • 자바스크립트 해석기는 해당 코드를 해석한다.
  • 분석된 HTML과 CSS 정보에 따라 웹 브라우저 화면에 표시한다.
  • 웹 브라우저에서 자바스크립트 연결된 요소에 대해 반응하면, 분석해 놓은 자바스크립트를 실행해서 그 결과를 화면에 표시한다.

자바스크립트 용어와 기본 입출력 방법

Expression & Statement

  • 표현식과 명령문
  • 명령문은 넓은 의미에서 값이나 식까지 포함한다.
  • 문의 끝에는 세미콜론(;)을 붙여서 구분한다.

간단한 입출력 방법

  • 알림 창 출력하기

    • Alert

      alert("메시지")
alert('메시지')

  • 확인 창

    • Confirm

      let reply = confirm("Message");
let reply = confirm('Message');

  • 프롬프트 창으로 입력 받기

    • 텍스트 필드가 있음. 간단한 메시지 입력을 받아서 가져옴.

      let name = prompt("이름을 입력하세요.", "가나다"); // 기본값 지정
var name = prompt("이름을 입력하세요."); // 기본값 미지정

  • 웹 브라우저 화면에 출력하기

    • document.write() : 웹 문서(document)에서 괄호 안의 내용을 표시(write)하는 명령문.

    • 괄호 안에 “”, ‘’ 사이에 입력한 내용이 웹 브라우저 화면에 그대로 표시 된다. HTML 태그도 함께 사용할 수 있다.

      <script>
  document.write("<h1>안녕하세요</h1>");
</script>

  • 이름 입력과 화면 표시

      <script>
      let name = prompt("Input your name");
      document.write("<b><big>" + name + "</big></b>, welcome!!")
  </script>

  • 콘솔 창 출력

    • console.log()

    • 콘솔 창은 웹 브라우저 개발자 도구 창에 포함되어 있는 공간임. 코드 오류나 변수 값 출력 확인 가능한 곳임.

    • 이름 입력하면 콘솔 창에 표시.

        <script>
      let name = prompt("input your name");
      console.log("name is " + name);
  </script>

    • 콘솔 로그 메시지에는 HTML 태그를 사용할 수 없음.

자바스크립트 스타일 가이드 왜 필요할까?

  • 좀 더 읽기 쉽고 오류를 줄일 수 있도록 코드를 작성하는 것.
  • 코드를 작성하고 효율적으로 유지하기 위한 몇 가지 코딩 규칙들.
  • 스타일 가이드; 코딩 컨벤션; 코딩 스타일; 표준 스타일; 코딩 규약;
  • 자바스크립트는 데이터 유형이 유연함. 주의가 필요하다.

자바스크립트 스타일 가이드 사례

  • 풀스택 개발자 가자~
  • 자바스크립트로 풀스택 가자~
  • 프롬프트에서 취소 버튼을 누르면 ‘null’ 이 표시 됨.

🤟소감 3줄 요약

  • 풀스택 개발자 준비하는 나…
  • 자바스크립트 공부 가자고~
저작자표시 비영리 변경금지 (새창열림)

'Do it 스터디!' 카테고리의 다른 글

[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 14 트랜지션과 애니메이션  (2) 2026.02.03
👍Do it! 웹 분야 도서 로드맵입니다.🫰  (0) 2026.01.31
[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 13 CSS 고급 선택자(2)  (0) 2026.01.31
[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 13 CSS 고급 선택자(1)  (0) 2026.01.31
[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 12장 되새김 문제  (0) 2026.01.29
'Do it 스터디!' Related Articles more