본문 바로가기
Programming/JavaScript

[JavaScript] 자바스크립트 기본

by 공부합시다홍아 2024. 3. 6.
 

[HTML, CSS] CSS 문법 FLEX

Flex 참고 사이트 CSS Flex 완벽 가이드 CSS Flex는 효율적인 레이아웃 설계를 위한 기술로, 컨테이너 내 항목의 공간 배분과 정렬을 유연하게 관리합니다. 이를 통해 반응형 디자인 레이아웃이 쉬워

hong-study.tistory.com


자바스크립트

  • 자바스크립트란 프로토타입 기반의 객체 지향 언어이다.
  • 스크립트 언어의 특성 상 플랫폼에 독립적이며 모든 웹 브라우저에서 동일한 실행 결과를 얻을 수 있다.
  • 프로그램 코드가 직접 html 문서에 삽입, 브라우저에서 html 파일을 읽을 때 같이 해석되고 실행된다.
  • 클라이언트에서만 실행 ▶ 정보를 서버에 보낼 필요 없이 처리가 가능하다. 
Type Check 가 철저하기 않다.
▶ 즉, 변수들의 타입에 있어서 차이를 두지 않는다.
▶ 자바 스크립트 기반 프론트엔드 기술의 발전으로 근래, 순수 스크립트의 사용을 선호하게 되며
     자바보다 확장성이 뛰어난 언어이다.
▶ 자바스크립트 개발자가 있을 만큼 사용 방법이 다양하며, 반드시 익혀두는게 좋고 필수 요소 중 하나이다.

스크립트 언어란

  • 어플리케이션이 실행되는 동안 라인 단위로 해석(인터프리터)되어 실행되는 언어로 
    별도의 컴파일 과정이 없다.
  • HTML 문서 내에서 스크립트 언어는 <script>와 </script> 사이에 작성한다.


자바 스크립트 기본 구조

기본구조

  • <script> 태그를 사용하여 HTML 문서에 코드를 작성한다. 
  • type 속성값으로 "text/javascript"를 입력 (HTML5)에서는 생략가능


사용 방법

자바스크립트를 외부 파일로 사용한다. ( CSS의 외부 스타일 시트방법과 동일 )
▶ <body> 태그 부분이든 기능을 구현할 곳에 삽입한다.
▶ 외부 파일 JavaScript의 확장자는 "js" 이다.

Script element의 src 속성 값이 호출할 자바스크립트의 파일

변수

자바스크립트 구문

  • 문장 끝에 세미콜론 ( ; )을 입력한다.
  • 구문 사이를 구분하기 위해 사용하고, 생략해도 무관하나 오류방지를 위해 권장한다.

자바스크립트 주석

  • //  : 한 줄 주석 처리, 프로그램 코드 끝에 사용한다.
  • /* ~ */ : 한 줄 이상의 주석 처리

※ 주석은 아래를 참고하면 변경할 수 있다.
 

[Visual Studio Code] 주석 색상 변경 방법

주석 색상 변경 방법 1. setting 접속 setting 에 접속하는 방법은 ctrl + , 을 동시에 누르면 검색창이 나온다. 해당 검색창에 JSON 을 입력하여 접속한다. 2. Setting.JSON 파일 접속 위 JSON:Schemas 항목을 찾

hong-study.tistory.com


변수 선언

  • var 키워드 이용
    : 자바스크립트에서 변수의 스코프(Scope)는 코드 블록이 아닌 함수 단위이다.
  • let 키워드 이용 (ES6 문법에 추가된 변수)
    : var는 동일 변수의 중복을 허용하지만 let은 중복 변수의 선언을 허용하지 않는다.


출력


데이터타입

기본 타입


연산자


배열

자바스크립트의 배열은 []로 묶어 주기만 하면 됩니다.
자바스크립트의 배열은 저장은 자바와 다르게 타입과 상관없습니다.


조건문


반복문

반복 실행을 할 수 있는 문장

  • while
  • do/while
  • for
  • for/in

while


for

728x90