[8기 9회차] 0904 웹 서비스의 이해 - CSS, Javascript

CSS의 이해

Cascading Style Sheet의 약자로, HTML을 꾸며주는 언어
문서를 통쨰로 한번에 꾸며주는 것이 아니라, HTML 태그 하나하나 꾸며줌

• HTML에 CSS 적용방법
  • 인라인 : HTML 태그 안에 같이 작성
  • 내부 스타일 시트 : HTML 문서 안에 같이 작성
  • 외부 스타일 시트 : HTML 문서 밖에 작성하고 연결
    *HTML 태그 한쌍을 element라고 부른다.

Javascript의 이해

자바스크립트

• 특정HTML요소를 선택하여 제어할 수 있는 스크립트 언어
• 최근에는 백엔드 언어로도 각광받고 있다.

스크립트 언어란

• 독립적인 프로그램을 개발할 수 있는 프로그래밍 언어가 아닌 (프로그램 내부의 구성요소 중 하나로) 프로그램을 제어하는 스크립트 역할을 하는 언어
• 최근 빠르게 발전하는 런타임 환경 덕분에 스크립트 언어만으로도 충분히 프로그래밍이 가능해져, 역할이 확장되고 있다.

자바스크립트 적용 방법

• 인라인 : 사용자와의 상호작용이 있을 때 가능
• 내부 스크립트 : HTML 문서 안에 같이 작성
• 외부 스크립트 : HTML 문서 밖 작성 후 연결

함수

• 특정 기능을 수행하는 코드 덩어리

내부 스크립트

• 특정 태그 찾을 때
  • id로 찾기 : document.getElementById('아이디')
  • class이름으로 찾기 : document.getElementsByClassName('클래스 이름')
  • 태그이름으로 찾기 : document.getElementsByTagName('태그 이름')

<자바스크립트 실습>

1. myFunction 함수 만들어서 실행

2. ID 입력값에 본인이름 팝업 띄우기

<이슈>

• 문제 : 외부 스크립트 작성 후 연결 시 login.js가 ￦<head￦>에서 실행될 때 #txt_id 요소가 아직 존재하지 않아 에러가 난다.
• 원인 파악

  const userId = document.getElementById('txt_id');

이 코드가 HTML의 ￦<input id="txt_id"￦>보다 먼저 실행되는데 즉, 즉, JS가 실행될 시점에는 아직 DOM에 txt_id가 없어서 userId는 null이 되고, 이후 userId.value를 접근하면 에러(Cannot read properties of null)가 발생함

• 해결방안

  • script 태그를 body 마지막에 두는 게 간단하나 위치상 깔끔하지 않다.

  • 함수 안에서 getElementById 실행하는 방법으로 해결

    function popId(){
    const userId = document.getElementById('txt_id'); // 여기서 가져오기
    if(!userId.value){
      confirm('아이디를 입력하세요');
      return;
    }
    alert(userId.value);
    }