Skip to content
This repository has been archived by the owner on Apr 25, 2020. It is now read-only.

Latest commit

 

History

History
59 lines (59 loc) · 2.92 KB

8차시 수업자료.md

File metadata and controls

59 lines (59 loc) · 2.92 KB

8차시 - JS란?

수업 목표

  • JS(백엔드)의 필요성을 인지하고 이를 이용할 수 이다.
  • JS의 기본적인 함수를 이해하고 사용할 수 있다.
  • DOM구조에 대해 이해할 수 있다.

수업 순서

  1. PHP 쿠키 로그인, 백엔드 개념 복습하기
  2. JS의 개념 및 대중화 되어 있는 이유 설명하기
  3. DOM구조에 대해 설명하고 예시 실습하기
  4. LOCATION 사용법 습득하기
  5. alert, confirm, prompt등 JS 함수 설명 및 실습하기

1. PHP 쿠키 로그인, 백엔드 개념 복습하기

  • 배운 내용을 잘 알고 있는지 수업 시작부분에 가볍게 질문을 던진다.
  • PHP : 백엔드 언어(써버용 언어)
  • 쿠키 : 사용자가 웹 사이트를 방문할 때 남기는 것

2. JS의 개념 및 대중화 되어 있는 이유 설명하기

  • JS : 동적으로 컨텐츠를 바꾸고 멀티미디어를 다루며 웹 페이지를 꾸며주도록 하는 프로그래밍 언어
  • 이벤트 중심의 프로그래밍 언어이다.
  • HTML 파일 내에서 작성할 수 있으므로 개발 속도가 빠르다.
  • 운영체제의 제한을 받지 않는다.

3. DOM구조에 대해 설명하고 예시 실습하기

DOM : 여러 객체의 집합

  • TREE 형식의 자료 구조, NODE 라는 객체 사용
  • html, JS로 각각 같은 문자열을 출력한 것을 보여주며 차이가 없는데 JS를 왜 쓰는지 물어본다.
  • 문서 객체를 사용하여 자신만의 문구 만들기

    PHP에 사용될 변수 규칙 설명
  • 변수 생성 규칙
    • 변수 이름은 문자, 밑줄(_), 달러 기호($)로 시작, 그 뒤에 숫자가 위치할 수 있다.
    • 대문자와 소문자 구별
    • 자바스크립트에서 정한 예약어 사용 불가
    • 문자로 한글 사용이 가능하나 영어 권장
  • 연산자 +, -, *, % 등 설명하기
  • 변수끼리 사칙연산을 해서 출력해보기

4. LOCATION 사용법 습득하기

LOCATION이란

  • URL의 정보를 가지는 객체
  • 간단한 예시를 보여준 후 기본 형태를 알려줌
    • location.host
    • location.href (html a 테그와의 차이점 보여주며 설명)
  • location을 사용하여 자신들 만의 웹사이트 꾸미기

5. alert, confirm, prompt등 JS 함수 설명 및 실습하기

함수 선언 차이

  • 함수 선언식과 함수 표현식 차이점 알려주고 테스트 해보기 (호이스팅 차이) 함수 호출법
  • 함수를 호출할 때의 범위 및 함수 정의 및 호출법 설명 클로저
  • 내부 함수가 외부 함수에 접근 가능하도록 해주는 것 여러 js 함수
  • alert : 단순 메세지 전달 창 띄우기
  • confirm : boolean 타입의 확인창 띄우기
  • prompt : 사용자가 입력한 값 받아오기

    지금 까지 배운 내용으로 자신만의 웹 사이트에서 알림창 추가하기