JS
JavaScript는 객체기반의 스크립트 언어이며, JavaScript로 웹의 동작을 구현할 수 있습니다.
특징
- 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어이다.
- 자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어
- 자바스크립트는 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현 할 수 있다.
인터프린터 언어 : 컴파일 작업을 거치지 않고, 소스 코드를 바로 실행할 수 있는 언어. 자바스크립트는 웹 브라우저에 포함된 자바스크립트 인터프리터가 소스 코드를 직접 해석하여 바로 실행 시켜 준다.
소개
자바스크립트는 HTML의 내용, 속성, 스타일을 변경할 수 있다.
문법
ES6(const, let), ES5(var)
const x = 10; (Number)
const y = x+3;
const javascript = 10;
const javaScript = 20;
const boolean = true; (boolean)
const literal = "자바스크립트"; (String)-
자바 스크립트는 변수에 대해 대소문자를 구분한다.
javascript와 javaScript는 서로 다른 두개의 변수로 인식된다. -
변수의 값으로 불리언 리터럴, 문자 리터럴, 숫자 리터럴을 선언할 수 있다.
자바스크립트 적용
1. 내부 자바스크립트 코드로 적용
자바스크립트 코드는 <script> 태그를 사용하여 HTML 문서 안에 삽입할 수 있다.
HTML 파일 내 코드로 존재한다.
<html>
<meta charset="UTF-8">
<p id=text> </p>
<script>
document.getElementById("text").innerHTML = "여러분을 환영합니다!";
</script>
</html>2. 외부 자바스크립트 파일로 적용
자바스크립트 코드는 HTML 문서의 내부뿐만 아니라 외부 파일로 생성하여 삽입할 수도 있다.
외부에 작성된 자바스크립트 파일은 .js 확장자를 사용하고, 해당 자바스크립트 파일을 적용하고 싶은 HTML은 <script> 태그를 사용해 외부 자바스크립트 파일을 포함하면 된다.
파일명 : example.js
function printDate(){
document.getElementById("date").innerHTML = Date();
}
HTML
<head>
<script src="example.js"></script>
<p id="date"></p>
<button type="button" onclick="printDate()">현재 날짜와 시간 표시</button>
</head>외부 자바스크립트 파일을 사용하면 웹의 내용을 담당하는 HTML 코드로부터 웹의 동작을 구현하는 자바스크립트 코드를 분리할 수 있어 가독성과 유지보수가 쉬워진다.
또한, 외부 자바스크립트 파일은 웹 브라우저가 미리 읽어 올 수 있어 웹페이지의 로딩 속도 또한 빨라진다.
발전하는 개발자가 꿈입니다. 지식을 쌓고 지식을 활용해 목표 달성을 추구합니다.