WebProgramming/JS

JavaScript 기본 문법

2022. 5. 6. 15:59
목차
  1. JavaScript
  2. ECMA
  3. API(Application Programming Interface) 
  4. HTMl문서와 Javascript 연결
  5. 자바스크립트 출력

JavaScript

; 1995년, 웹페이지에서 사용자로부터 특정 이벤트나 입력 값을 받아 동적인 처리를 목적으로 고안된 객체 기반의 스크립트 프로그래밍 언어

- 일반적으로 HTML문서에 내재, 브라우저에서 실행

- 인터프리터 언어 ; C언어처럼 컴파일 작업을 거치지 않고 바로 실행할 수 있는 언어

- 타입 명시 x

+ TypeScript ; MS에서 개발한 자바스크립트의 상위 언어

자바스크립트 프레임워크 ; 자바스크립트로 작성된 애플리케이션 프레임워크

- 라이브러리 ; 부모 코드에 의해 호출될 함수들을 제공 / 프레임워크 ; 애플리케이션 디자인 전반을 정의

ex) AngularJS, ReactJS, Node.js, Vue.js

 

ECMA

(=ES) ; Ecma International이 ECMA-262기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어

- 기술이 특별히 변경이되지않고 계속 누적되며 업데이트 됨

 

API(Application Programming Interface) 

; 개발자가 직접 구현하기는 어렵거나 불가능한 기능들을 미리 만들어서 제공하는 것
- 브라우저 API ; 웹브라우저에 내장
ex) DOM(HTML 콘텐츠 추가, 제거, 변경 가능), Geolocation(지리정보 가져옴), Canvas(2D 그래픽), WebGL API(3D 그래픽)
- 서브파티 API ; 브라우저에 탑재 x, 웹의 어딘 가에서 직접 코드와 정보를 찾아야함
ex) Twitter API(최신 트윗 보여줌)

 

HTMl문서와 Javascript 연결

내부 자바스크립트 코드 적용

; html>head>script 내부에 적기

외부 자바스크립트 파일 적용

; html>head 안에 <script src="java.js"></script> 삽입

 

자바스크립트 출력

1. window.alert() ; 별도의 대화 상자 띄워 사용자에게 데이터 전달

ex) alert("반갑습니다 xx님.");

2. HTML DOM 요소를 이용한 innerHTML ; getElementById() or getElementsByTagName() 등 통해 HTML 요소선택

ex) var str = document.getElementById("text");           str.innerHTML="이 문장으로 바뀜";

str은 id="text"인 요소를 가리킴 -> str의 값 변경

3. document.write() ; 웹 페이지가 로딩될 때 실행되면, 웹 페이지에 가장 먼저 데이터를 출력

- 주로 테스트, 디버깅을 위해 사용

ex) document.write('안녕하세요')

4. console.log() ; 웹 브라우저의 콘솔을 통해 데이터를 출력

ex) console.log('안녕하세요')

 

# 리터럴 ; 직접 표현되는 값 그 자체

ex) 12 / "JAVASCRIPT" / true 등

# 식별자 작성 방식

- Camel Case ; 첫 번째 단어 모두 소문자, 그 다음 단어부터 첫 문자만 대문자 

ex) javaScript

- Underscore ; 언더코드로 단어들 연결

ex) java_script

# 주석 

// 주석문

/* 주석문 */

# DOM(Document Object Model) ; XML, HTML문서에 접근하기 위한 일종의 인터페이스

- 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법 제공

 

- 세미클론을 붙여도 되고, 안붙여도 됨. 붙이지 않을 경우 알아서 붙여서 해석함 but 특이 case 제외 안붙이는 것 권장

 

typeof ; 데이터 타입 확인   ex) typeof "hello world" but [],{},null 모두 object로 반환

=== ; 일치 연산자

== ; 동등연산자. 형 변환이 일어나 그것을 비교함 -> 비추

 

let, const ; 블록 레벨의 유효범위를 가짐, 즉 지역변수

var ; 함수 레벨의 유효범위를 가짐, 즉 전역변수 but 비추

 

Falsy(거짓 같은 값) ; false, '', null, undefined, 0, -0, NAN

Truty(참 같은 값) ; 그 외

 

 

저작자표시 (새창열림)

'WebProgramming > JS' 카테고리의 다른 글

[JS] 원시 데이터, 참조형 데이터 / 얕은 복사와 깊은 복사  (0) 2022.06.11
[JS] 메소드(String, Math, Array, Object)  (0) 2022.06.10
[JS] 생성자 함수(Prototype), Class 상속  (0) 2022.06.06
[JS] 함수  (0) 2022.06.04
[웹 프로그래밍] JS 작성 툴 (Node.js, NVM, NPM)  (0) 2022.06.04
[JS] JS 작성 팁  (0) 2022.05.29
[JS] JavaScript 기본 문법 / 표기법, 데이터 종류, 변수  (0) 2022.05.26
[JavaScript] 객체, 상속  (0) 2022.05.15
  1. JavaScript
  2. ECMA
  3. API(Application Programming Interface) 
  4. HTMl문서와 Javascript 연결
  5. 자바스크립트 출력
'WebProgramming/JS' 카테고리의 다른 글
  • [웹 프로그래밍] JS 작성 툴 (Node.js, NVM, NPM)
  • [JS] JS 작성 팁
  • [JS] JavaScript 기본 문법 / 표기법, 데이터 종류, 변수
  • [JavaScript] 객체, 상속
피터s
피터s
1년차 프론트엔드 개발자입니다 😣 아직 열심히 배우는 중이에요! 리액트를 하고있어요 :) - gueit214@naver.com - https://github.com/gueit214
피터s
피터의 성장기록
피터s
전체
오늘
어제
  • 분류 전체보기 (200)
    • 코딩 테스트 (25)
      • 프로그래머스 (16)
      • LeetCode (8)
      • 백준 (1)
    • 개발 독서 일지 (1)
    • 기업 분석 (4)
    • 개발 일지 (19)
      • 최신기술 도전기 (1)
      • 에러 처리 (5)
      • 개발 일지 (12)
    • 개발 일상 (36)
      • 개발 회고 (22)
      • 개발 이야기 (12)
      • 개발 서적 (1)
    • 취업 관련 지식 (11)
    • 알고리즘 (17)
    • WebProgramming (84)
      • WebProgramming (8)
      • HTML (5)
      • CSS (8)
      • JS (21)
      • React (40)

블로그 메뉴

  • About
  • 2022년 개발 성장기
  • 앞으로의 계획
  • github
  • 일상 blog

공지사항

인기 글

태그

  • 개발 일상
  • 1년 회고
  • KAKAO BLIND
  • 스터디 후기
  • dfs
  • BFS
  • 구름톤
  • 카카오
  • 해커톤
  • 누적합
  • 1일 1커밋 후기
  • 구름
  • 카카오 채용연계형 인턴십
  • 개발 is life
  • lv3
  • Union-find
  • Kakao Tech Internship
  • 함수
  • Retry
  • 개발 회고
  • LV2
  • 반복문

최근 댓글

최근 글

hELLO · Designed By 정상우.
피터s
JavaScript 기본 문법
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.