개발

JavaScript 소개

explosion149 2024. 11. 4.

언어란 소통을 위해 필요한 수단이고

컴퓨터는 0과1로 대화를 하는데

거기에서 우리가 컴퓨터와 대화를 하기 위한 중간 도구로

프로그래밍 언어를 사용한다.

 

JS 즉 JavaScript는 세계에서 많이 사용하는 스크립트 언어이고

활용도가 높기 때문에 배울 필요가 있다.

 

2005년 *AJAX [Asynchronous  JavaScript and XML] : 비동기 자바스크립트와 XML

 

AJAX: 

Asynchronous JavaScript and XML의 약자로, 웹 페이지가 서버와 비동기적으로 데이터를 주고받을 수 있게 해주는 기술입니다. AJAX를 사용하면 전체 페이지를 새로 고치지 않고도 웹 애플리케이션의 일부만 업데이트할 수 있어, 사용자 경험을 향상시키고 더 빠른 반응성을 제공합니다.

JavaScript: 

클라이언트 측에서 실행되는 스크립트 언어로, AJAX 요청을 생성하고 처리하는 데 사용됩니다.
XMLHttpRequest: JavaScript에서 서버와 비동기적으로 통신하기 위해 사용하는 객체입니다. 이 객체를 통해 서버에 요청을 보내고 응답을 받을 수 있습니다.


데이터 형식: AJAX는 XML뿐만 아니라 JSON, HTML, 텍스트 등 다양한 형식의 데이터를 주고받을 수 있습니다. 현재는 JSON이 가장 많이 사용됩니다.


AJAX를 사용하면 웹 애플리케이션이 더 동적이고 인터랙티브하게 작동할 수 있으며, 예를 들어 구글 맵, 페이스북, 트위터와 같은 많은 현대 웹 서비스에서 활용되고 있습니다.

 

 

 


Hyper Text 는 무엇인가?

Hyper Text는 텍스트의 한 형태로, 다른 텍스트나 미디어와 연결될 수 있는 기능을 가진 텍스트를 의미합니다. 일반적으로 웹에서 사용되는 HTML(Hypertext Markup Language)과 관련이 깊습니다. Hyper Text는 사용자가 클릭하거나 선택함으로써 다른 정보로 쉽게 이동할 수 있도록 하여, 비선형적인 정보 탐색을 가능하게 합니다.

Hyper Text의 주요 특징
링크: Hyper Text는 다른 문서나 웹 페이지로 연결되는 하이퍼링크를 포함할 수 있습니다. 사용자가 링크를 클릭하면 해당 링크가 가리키는 위치로 이동합니다.

비선형 탐색: 전통적인 문서와 달리, Hyper Text는 사용자가 원하는 정보를 선택적으로 탐색할 수 있게 해줍니다. 이는 정보의 흐름을 더 유연하게 만들어 줍니다.

다양한 미디어: Hyper Text는 텍스트뿐만 아니라 이미지, 비디오, 오디오 등 다양한 형태의 미디어와 결합될 수 있습니다.

Hyper Text의 예
웹 페이지: 웹에서 가장 일반적인 형태의 Hyper Text는 웹 페이지입니다. 웹 페이지 내의 링크를 클릭하면 다른 페이지로 이동할 수 있습니다.
위키: 위키 시스템은 Hyper Text의 좋은 예로, 사용자가 서로 연결된 문서들을 쉽게 탐색할 수 있도록 합니다.
Hyper Text와 Hypermedia
Hyper Text는 텍스트 기반의 하이퍼 연결을 의미하지만, Hypermedia는 텍스트뿐만 아니라 이미지, 비디오, 오디오 등 다양한 미디어를 포함하는 더 넓은 개념입니다. Hypermedia는 정보의 다양한 형태를 통합하여 사용자에게 더 풍부한 경험을 제공합니다.

결론
Hyper Text는 정보의 연결성과 탐색성을 높여주는 중요한 개념으로, 현대 웹의 기본 구조를 형성하고 있습니다. 이를 통해 사용자는 필요한 정보를 더 쉽게 찾고, 다양한 자료를 탐색할 수 있습니다.


Markup Language는 무엇인가?

Markup Language는 문서의 구조와 형식을 정의하기 위해 사용되는 언어입니다. 주로 텍스트에 태그를 추가하여 내용을 설명하고, 문서의 시각적 표현이나 데이터의 의미를 명시하는 데 사용됩니다. Markup Language는 웹 개발, 문서 작성, 데이터 전송 등 다양한 분야에서 활용됩니다.

Markup Language의 주요 특징
태그 사용: Markup Language는 일반적으로 태그(tag)를 사용하여 문서의 각 요소를 정의합니다. 태그는 보통 꺾쇠 괄호(<>)로 둘러싸여 있으며, 시작 태그와 종료 태그로 구성됩니다. 예를 들어, HTML에서 <p>는 단락을 시작하는 태그이고, </p>는 단락을 종료하는 태그입니다.

구조화: Markup Language는 문서의 구조를 명확하게 정의합니다. 이를 통해 문서의 계층 구조를 이해하고, 내용을 효과적으로 표현할 수 있습니다.

표준화: 많은 Markup Language는 특정 표준에 따라 정의되어 있어, 다양한 플랫폼과 소프트웨어에서 일관되게 해석될 수 있습니다.

대표적인 Markup Language
HTML (Hypertext Markup Language): 웹 페이지를 작성하는 데 사용되는 Markup Language로, 텍스트, 이미지, 링크 등을 포함한 웹 콘텐츠의 구조를 정의합니다.

XML (eXtensible Markup Language): 데이터의 구조를 정의하는 데 사용되는 Markup Language로, 사용자 정의 태그를 지원하여 다양한 데이터 형식을 표현할 수 있습니다.

Markdown: 간단한 텍스트 형식으로 문서를 작성할 수 있게 해주는 Markup Language로, 주로 웹 콘텐츠나 문서 작성에 사용됩니다. Markdown은 읽기 쉽고, HTML로 쉽게 변환할 수 있습니다.

LaTeX: 주로 과학 및 수학 문서 작성에 사용되는 Markup Language로, 복잡한 수식과 문서 구조를 정의하는 데 강력한 기능을 제공합니다.

결론
Markup Language는 문서의 구조와 형식을 정의하는 데 필수적인 도구로, 다양한 분야에서 널리 사용됩니다. 이를 통해 사용자는 정보를 효과적으로 표현하고, 다른 사용자와 공유할 수 있습니다.

 


REPL는 무엇인가?

REPL은 "Read-Eval-Print Loop"의 약자로, 프로그래밍 언어의 인터프리터 환경을 의미합니다. REPL은 사용자가 입력한 코드를 읽고(Read), 평가하고(Eval), 결과를 출력하며(Print), 다시 입력을 기다리는(Loop) 과정을 반복하는 구조입니다. 이 환경은 주로 프로토타입을 만들거나, 실험을 하거나, 학습 목적으로 사용됩니다.

REPL의 주요 기능
Read: 사용자가 입력한 코드를 읽습니다.
Eval: 읽은 코드를 실행하여 결과를 평가합니다.
Print: 실행 결과를 출력합니다.
Loop: 이 과정을 반복하여 사용자가 계속해서 코드를 입력할 수 있도록 합니다.
REPL의 장점
즉각적인 피드백: 코드를 입력하면 즉시 결과를 확인할 수 있어 실험과 학습에 유용합니다.
인터랙티브한 개발: 코드의 작은 조각을 테스트하고, 즉시 결과를 확인할 수 있어 개발 과정이 더 직관적입니다.
디버깅: 코드의 특정 부분을 테스트하여 문제를 쉽게 찾고 수정할 수 있습니다.

언어
소통을 위해
컴퓨터 0,1
프로그래밍 언어

JS 활용도가 높다.
AJAX는 무엇인가?

var 와 let 의 차이

var 는 여러번 재 선언이 가능함
let은 한번 이후 재선언시 에러가 발생함

Function Scope : 기능범위
Block Scope : 블록범위
var는 함수 내부에서 사용할경우 함수 내부 조건이나 블록 안의 불록 어디서나 접근 가능
let 은 함수 내부 특정 조건이나 루프 블록 안에 선언되었을경우 외부에서 접근 불가능

 

ex)

function()

{

       var d = 9;

          if(true){

          let a = 10;

          var b = 7;

}

       let a = 1; X

       var b= 2; O
}

 

d = 9; X


let 과 const의 차이
상수와 변수의 차이

 

상수는 값이 고정

변수는 값의 변경이 가능하다.


절차지향:
첫번째 일을 처리한 다음에 두번째 일을 처리하고 
그다음에 처리하는 순서대로 프로그램을 만듭니다.

객체지향
데이터와 함수를 객체라는 그룹으로 묶어서 처리합니다.
객체는 상태와 행동을 가지고 있으며,
상태는 객체의 속성(property) 이라고도 합니다.


동적 타이핑
다른언어는 변수를 지정할때 타입을 지정하지만
동적 타이핑 언어는코드를 짤때가 아닌 
프로그램이 돌아갈때 타입이 지정된다.

동기와 비동기


변수의 5가지 주요 개념

변수 이름 : 저장된 값의 고유 이름
변수 값 : 변수에 저장된 값
변수 할당 : 변수에 값은 저장하는 행위
변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위
변수 참조 : 변수에 할당된 값을 읽어오는 것

var myVar = "Hello World";

console.log(myVar);
var a = 10;
var b = 20;
var c = a + b;


'개발' 카테고리의 다른 글

js 함수  (0) 2024.11.05
깊은 복사 얕은 복사  (0) 2024.11.05
CSS Animation  (0) 2024.11.01
클럭 [Clock]  (0) 2024.10.29
데이터 와 데이터베이스  (0) 2024.10.28

댓글

💲 추천 글