[Javascript] Day1

2024. 9. 7. 02:09·Back-End/Front-End

[작성일: 2023. 02. 18]

 

자바스크립트(Javascript)

  • 퍼즐 조각처럼 코드 형태로 HTML 페이지에 내장됨.
  • 컴파일 과정 없이 브라우저 내부의 자바스크립트 처리(interpreter)
    • 개발의 발전을 통해 컴파일이 가능해졌으며 Node.js로 서버 환경을 구축함.
  • 웹 페이지는 3개의 큰 요소로 구성(html, css, javascript)
  • 자바스크립트는 사용자의 입력을 처리하거나 웹 애플리케이션을 작성하는 등 웹 페이지의 동적 제어에 사용됨.
[index.html]             [웹브라우저]
<script>
자바스크립트 코드 → 인터프리터 → 결과 출력
</script>

 

 

 

 

 

자바스크립트의 기능

  1. 사용자의 입력 및 계산
    • HTML의 폼은 입력 창만 제공함.
    • Key, Mouse의 입력 및 계산은 자바스크립트만 가능함.
  2. 웹 페이지 내용 및 모양의 동적 제어
    • HTML 태그의 속성이나 컨텐츠, CSS의 속성 값을 변경하여 웹 페이지의 동적인 변화를 일으키는데 활용함.
  3. 브라우저 제어
    • 브라우저 윈도우의 크기나 모양 변경, 새 윈도우나 탭 열기
    • 다른 웹 사이트 접속, 브라우저의 히스토리 제어 등 부라우저 작동 제어
  4. 웹 서버와의 통신(Ajax)
    • 에이잭스라고 불림.
    • 웹 페이지가 웹 서버와 데이터를 주고 받을 때 사용함.
  5. 웹 애플리케이션 작성(API)
    • 자바스크립트로 활용할 수 있는 많은 API가 제공되므로 다양한 웹 애플리케이션의 개발이 가능함.

 

 

 

 

 

자바스크립트 개발 환경 구축 

서버용 프로그램

  • Node.js 설치
  • LTS(Long Term Service) → 장기 지원 버전으로 설치하기
  • http://nodejs.org/ko/download
 

Node.js — Download Node.js®

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

 

 

 

Visual Studio Code

  • 설치, 무설치 버전 선택
  • 한글 설정
    • Extension - Korean 검색 → Korean(사용법) Language pack for visual studio code 설치
  •  언어 선택
    • F1 → Configure Display Language → en, ko 선택 → 프로그램 재시작
  • 테마 변경
    • F1 → 테마, theme
  • 기본 단축키
    • Ctrl + B : 전체화면
    • Alt + 방향키 : 한 줄 이동
    • Alt + Shift + 방향키 : 한 줄 복사
    • Ctrl + X : 빈 커서에서 사용하면 한 줄 전체 잘라내기
    • Ctrl + Alt + 방향키 : 그리드 편집 모드(열 편집) > esc 누르면 취소
    • Shift + Del : 한 줄 전체 삭제
  • HTML 기본 단축키
    • div + tab : <div></div>
    • div.table + tab : < div class="table"></div>
    • div#container + tab : <div id="container"></div>
    • div * 4 + tab : <div></div> 4개 생성
    • div.wrap * 3 + tab : <div class="wrap"></div> 3개 생성

 

 

 

 Visual Studio Code에서 HTML 실행하기

  1. 탐색기에서 HTML을 찾아서 실행
  2. Extension에서 open in browser 설치 → Alt + B로 실행
  3. Extension에서 live server 설치
    • 오픈 폴더로 소스 코드 폴더 열기
    • 소스코드 저장 시 바로 화면에 반영됨.
    • Alt + L + O 

 

 

 

 

 

자바스크립트 코드 위치

  1. HTML 태그 내 이벤트 리스너(Event Listener) 속성에 작성하기
    • HTML 태그에는 마우스가 클릭되거나 키보드의 키가 입력되는 등 이벤트 발생 시 처리하는 코드 등록 리스너 속성이 있고, 여기에 코드를 작성함.
  2. <script></script> 내에 작성하기
    • <head></head>, <body></body>, body 밖 어디든 작성해도 괜찮음.
    • html 안에만 있으면 가능함.
    • 보통은 body 밑에 작성하며 웹 페이지의 여러 곳에 작성할 수도 있음.
  3. 자바스크립트 파일에 작성하기
    • 자바스크립트 코드를 확장자가 .js인 별도의 파일로 저장
      • 코드가 너무 길 때
      • 코드의 재활용 가능성이 있을 때
  4. URL 부분에 작성하기
    1. <a> 태그는 href 속성이 있으며 여기에 자바스크립트 작성 가능
    2. href에서 자바스크립트 코드를 사용하려면 javascript라는 키워드를 작성해야 함.

 

 

 

 

 

자바스크립트로 HTML 요소 출력

  • 자바스크립트 코드로 HTML 요소를 웹 페이지에 직접 삽입하여 브라우저 윈도우에 출력되게 할 수 있음.
  • document.write() 또는 document.writeln()
    • writeln은 줄바꿈(\n) 문자가 삽입되지만 HTML이 줄바꿈 문자를 인식하지 않으므로 <pre> 태그를 사용하여 줄바꿈 표현이 가능함.

 

 

 

 

 

 

 

 

 

 


🐣 해당 게시글은 입문 개발자가 요약/정리한 글이므로 틀린 내용이나 오타가 있을 수 있습니다.

 

저작자표시 비영리 변경금지 (새창열림)
'Back-End/Front-End' 카테고리의 다른 글
  • [Javascript] 함수와 객체
  • [Javascript] Day2
  • [Bootstrap] Day5
  • [CSS] Day4
뚜비
뚜비
1년차 백엔드&iOS 개발자의 감자 탈출 블로그 🥔🥔
  • 뚜비
    뚜비의 개발로그
    뚜비
  • 전체
    오늘
    어제
  • 글쓰기     관리
    • Devlog
      • Back-End
        • Java
        • Spring
        • JPA
        • HTTP
        • Security
        • Back-End
        • Front-End
      • 알고리즘
      • iOS
        • Swift
      • Database
      • Tips
        • Git & GitHub
        • A to Z
      • 프로젝트
      • 생각정리
  • 태그

    jsp
    spring
    javascript
    김영한
    html
    HTTP
    MVC
    최주호
    Java
    Database
    객체
    알고리즘
    백준
    자바스크립트
    Security
    Swift
    성능최적화
    DB
    JPA
    다형성
    Spring Security
    데이터베이스
    변수
    프로그래머스
    의존성주입
    생성자
    게시판만들기
    자바
    sql
    스프링
  • hELLO· Designed By정상우.v4.10.0
뚜비
[Javascript] Day1
상단으로

티스토리툴바