JavaScript - DAY 1

NewTypeAsuka·2023년 4월 7일

JavaScript@

목록 보기

2/6

1. 클라이언트-서버 구조

프로토콜(protocol)

HTTP: 하이퍼텍스트 전송 규약(웹 통신)

FTP: 대량의 파일을 전송/수신하기 위한 파일 전송 규약

TELNET: 원격지에서 서버 컴퓨터를 원격 제어하기 위한 규약

클라이언트 주요 언어

HTML:
하이퍼텍스트를 구현하기 위한 뼈대가 되는 핵심적인 기술
마크업 언어

CSS:
HTML은 뼈대라면 CSS는 꾸미기 위한 옷의 기능

JavaScript:
기능, 로컬의 브라우저에서 실행되는
인터프리터 방식의 프로그래밍 언어

jQuery:
JavaScript 기반 라이브러리 중 하나
자바스크립트의 코드가 길어지면 사용하기 복잡한 단점 개선

서버 주요 언어

JSP:
운영체제의 구애를 받지 않으며
실행 톰캣 컨테이너 위에서 자바 기반의 언어 사용

ASP:
윈도우 기반의 IIS 서버에서만 작동하고 MS-SQL DBMS와 연동

PHP:
리눅스 기반에 아파치 서버에서 동작, 기존 제로보드나 그누보드와
같은 사이트 빌더에서 기본적으로 사용되는 언어

node.js:
노드제이에스 또는 노드라고 하는 자바스트립트 라이브러리로
소켓을 이용하여 쉽게 실시간 서버를 구축 가능하도록 함

2. JavaScript

스크립트 언어

기본 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 언어

별도로 소스코드를 컴파일하지 않고 인터프리터(interpreter)를 이용하여
소스코드를 한 줄씩 읽어서 바로 실행

컴파일 소요 시간이 없어서 프로그램이 켜지는 시간은 빠르지만
프로그램 수행 중 소요시간이 늘어남

짧은 소스코드로 상호작용하도록 고안됨

JavaScript

웹 브라우저에서 주로 사용하는 인터프리터 방식의 객체 지향 프로그래밍 언어

ECMA에서 지정한 표준 스크립트
(ECMA Script를 따르는 대표적인 웹 기술)

JavaScript 작성 방법

1) 브라우저 console에 직접 작성
2) internal 방식:
<html> 태그 내부에 <script> 태그를 이용해 작성
<html>
<body>
    <button type="button" onclick="btnClick1()">internal 방식</button>
    <script>
        /* internal 방식 */
        function btnClick1(){
            alert("Hello World");
        }
    </script>
</body>
<html>
3) external 방식:
HTML 파일 외부에 .js 확장자 파일을 이용해 작성
(<link> 태그와 구조는 같지만 엄밀히 다른 개념)
<html>
<head>
	<script src="../js/01_JS개요.js"></script>
</head>
<body>
	<button type="button" onclick="btnClick2()">external 방식</button>
</body>
</html>
4) inline 방식:
태그에 직접 작성
(HTML과 CSS는 쌍따옴표와 홑따옴표를 가리지 않으니 이를 이용해서 홑따옴표 애용)
<button type="button" onclick='alert("Hello World");'>inline 방식</button>

JavaScript 주요 속성

innerText:
JS에서 요소에 작성된 내용을 읽어들이거나 변경하는 속성
내용에 포함된 <> 태그는 읽어오지 않음
내용 변경 시 태그가 포함되도 해석되지 않음
function setBoxTest(){
    var test1 = document.getElementById("test1");
    test1.innerText = "<b>innerText로<br>변경된 내용</b>";
}
innerHTML:
JS에서 요소 전체를 읽어들이거나 변경하는 속성
내용에 포함된 요소 자체를 읽어옴(태그, 속성, 내용)
내용 변경 시 태그, 속성이 포함되도 해석
function setBoxElement(){
    var temp = document.getElementById("test2");
    temp.innerHTML = "<b>innerText로<br>변경된 내용</b>";
}
value:
<input> 태그에 작성된 내용을 읽어오거나 변경하는 속성
innerText/innerHTML과 헷갈리니 유의

checked:
checkbox나 radio에서 해당 요소가 체크되어있으면 true, 아니면 false 반환

JavaScript 주요 함수

alter():
브라우저에 경고창(알림창, 대화상자)를 띄우는 함수

confirm():
내용에 대한 예/아니오 결과를 얻고자할 때 사용하는 함수
예 클릭 시 true, 아니오 클릭 시 false 반환

prompt():
내용을 입력할 수 있는 대화상자
내용 입력 후 확인 시 내용 반환, 취소 클릭 시 null 반환

document.write():
브라우저 화면 상의 페이지에 값 출력

console.log():
개발자 도구 화면의 콘솔에 출력