FRONTMANFRONTMAN
  • 태그
  • 방명록
  • 글쓰기
  • 관리자
  • HOME
  • 태그
  • 방명록
JavaScript란?
hahekaku
JavaScript란?Language/JavaScript2023. 10. 11. 23:08@hahekaku
Table of Contents

프로그래밍 언어란?

프로그래밍 언어는 컴퓨터가 수행할 작업을 지시하기 위해 사용하는 형식적인 언어입니다. 이는 인간이 이해할 수 있는 텍스트 형식과 컴퓨터가 해석 가능한 기계 코드 사이의 다리 역할을 합니다. 모든 프로그래밍 언어는 특정한 문법(syntax)과 규칙을 따르며, 이를 통해 프로그램을 작성하고 컴퓨터에게 명령을 전달합니다.

 

프로그래밍 언어의 주요 특징

  1. 문법(Syntax):
    각 언어는 고유의 문법을 가지고 있으며, 이 문법을 통해 명령을 구조화합니다.
  2. 추상화 레벨:
    저수준 언어(기계어, 어셈블리어)는 컴퓨터와 밀접한 반면, 고수준 언어(Python, JavaScript 등)는 인간이 이해하기 쉽게 설계되어 있습니다.
  3. 목적에 따른 설계:
    언어는 특정 목적에 맞게 설계되며, 웹 개발, 데이터 분석, 시스템 프로그래밍 등 다양한 분야에 사용됩니다.

 

프로그래밍 언어의 종류

  • 절차적 언어: 작업을 순차적으로 수행하는 명령 중심의 언어 (예: C, Pascal).
  • 객체 지향 언어: 객체(object)를 기반으로 프로그램을 설계 (예: Java, Python).
  • 함수형 언어: 수학적 함수 개념을 사용 (예: Haskell, Lisp).
  • 스크립트 언어: 실행 속도를 높이기 위해 인터프리터 방식으로 동작 (예: JavaScript, Python).

 

 

JavaScript의 정의

JavaScript란?

JavaScript는 주로 웹 개발에서 사용되는 고수준, 인터프리터 방식의 프로그래밍 언어입니다. 웹 브라우저 내에서 동작하도록 설계되었으며, HTML, CSS와 함께 웹 기술의 삼대 축을 이룹니다.

JavaScript는 처음에는 클라이언트 측 스크립팅 언어로 시작했으나, 현재는 서버 측에서도 널리 사용되고 있습니다(Node.js).

JavaScript의 주요 역할

  1. 웹 페이지의 동적 동작 처리:
    JavaScript는 사용자의 상호작용에 따라 웹 페이지의 내용을 변경하거나 애니메이션을 추가하는 데 사용됩니다.
  2. 비동기 처리 지원:
    비동기적으로 데이터를 처리하여 사용자 경험을 개선할 수 있습니다(예: AJAX, Fetch API).
  3. 다양한 환경에서의 사용:
    브라우저 외에도 서버, 모바일 앱, 게임, IoT 등 다양한 분야에서 활용됩니다.

 

JavaScript가 사용되는 분야

JavaScript는 다양한 분야에서 사용되며, 웹 개발뿐만 아니라 게임, 모바일 앱 개발에도 큰 영향을 미치고 있습니다.

웹 개발

JavaScript는 클라이언트 및 서버 측 모두에서 사용됩니다.

  • 클라이언트: 브라우저에서 실행되어 웹 페이지의 동적 콘텐츠를 처리합니다.
  • 서버: Node.js를 사용해 서버를 구축하고 데이터를 처리합니다.

클라이언트 예시

// 버튼 클릭 시 메시지 표시
document.querySelector('#clickButton').addEventListener('click', function () {
  alert('버튼이 클릭되었습니다!');
});

 

서버 예시

// Node.js를 이용한 간단한 서버
const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello, JavaScript!');
});

server.listen(3000, () => {
  console.log('서버가 http://localhost:3000 에서 실행 중입니다.');
});

 

게임 개발

JavaScript는 Canvas API, WebGL, 또는 게임 엔진(예: Phaser.js)을 사용하여 브라우저 기반 게임을 개발하는 데 사용됩니다.

 

간단한 게임 예시

const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');

// 공 그리기
let x = canvas.width / 2;
let y = canvas.height / 2;
let dx = 2;
let dy = -2;

function drawBall() {
  context.beginPath();
  context.arc(x, y, 10, 0, Math.PI * 2);
  context.fillStyle = '#0095DD';
  context.fill();
  context.closePath();
}

function updateGame() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  drawBall();
  x += dx;
  y += dy;

  if (x + dx > canvas.width || x + dx < 0) dx = -dx;
  if (y + dy > canvas.height || y + dy < 0) dy = -dy;

  requestAnimationFrame(updateGame);
}

updateGame();

 

 

모바일 앱 개발

JavaScript는 React Native와 같은 프레임워크를 통해 모바일 앱 개발에 사용됩니다. 이러한 기술을 통해 네이티브 성능에 가까운 앱을 개발할 수 있습니다.

 

모바일 앱 버튼 예시 (React Native)

import React from 'react';
import { View, Button, Alert } from 'react-native';

const App = () => (
  <View>
    <Button title="Click Me" onPress={() => Alert.alert('Button clicked!')} />
  </View>
);

export default App;

 

'Language > JavaScript' 카테고리의 다른 글

JavaScript에서 비동기 처리하기  (0) 2023.10.13
JavaScript로 DOM 조작하기  (0) 2023.10.12
javascript 객체(Object)와 배열(Array)  (0) 2023.10.12
Javascript의 반복문과 함수  (0) 2023.10.12
JavaScript 기본 문법  (0) 2023.10.12
Language/JavaScript 추천 글
more
  • JavaScript로 DOM 조작하기
    JavaScript로 DOM 조작하기2023.10.12
  • javascript 객체(Object)와 배열(Array)
    javascript 객체(Object)와 배열(Array)2023.10.12
  • Javascript의 반복문과 함수
    Javascript의 반복문과 함수2023.10.12
  • JavaScript 기본 문법
    JavaScript 기본 문법2023.10.12
FRONTMAN

검색

250x250

방문자 수

Total
Today
Yesterday

카테고리

  • 분류 전체보기 (54)
    • Language (48)
      • JavaScript (15)
      • TypeScript (14)
      • Python (14)
      • Dart (5)
      • Java (0)
    • FE (6)
      • WEB (4)
      • React (0)
      • Flutter (1)
    • CS (0)
      • Algorithm (0)
      • Network (0)
    • DevOps (0)

공지사항

  • 전체보기

최근 글

인기 글

태그

  • web
  • CLASS
  • Object
  • DART
  • Python
  • tuple
  • 타입
  • Modules
  • 리스트
  • 타입스크립트
  • typeScript
  • 웹
  • JavaScript
  • nodejs
  • await
  • 파이썬
  • export
  • async
  • Import
  • frontend
  • npm
  • Type
  • Flutter
  • function
  • js
  • list
  • OOP
  • inline frame
  • 자바스크립트
  • Interface

최근 댓글

FRONTMAN :: hahekaku
CopyrightBluemivDesigned byBluemiv

티스토리툴바