JavaScript(JS)
JavaScript (JS)는 가벼운, 인터프리터(코드를 한 줄씩 읽어 해석하고 실행) 혹은 just-in-time 컴파일(프로그램을 실행하기 직전에 코드를 기계어로 변환하여 실행 속도를 향상시키는 컴파일) 프로그래밍 언어로, 일급 함수(함수를 값으로 취급 가능)를 지원합니다. JavaScript는 동적 타입(dynamic typing) 언어로, 변수의 타입을 선언하지 않고도 값을 할당할 수 있습니다.
JavaScript의 동적 기능에는 런타임 객체 구성, 변수 매개변수 목록, 함수 변수, 동적 스크립트 생성, 객체 검사 등이 있습니다.
JavaScript는 웹 브라우저에서 주로 사용되지만, Node.js를 통해 서버 측에서도 실행될 수 있습니다. 따라서 웹 개발 및 서버 개발을 통합하여 전체 애플리케이션을 개발할 수 있습니다.
Java? JavaScript?
JavaScript와 Java 프로그래밍 언어 둘 다 Java가 들어간다고 해서 혼동하면 안됩니다. "Java"와 "JavaScript" 는 모두 상표이자 미국 및 기타 국가에 등록된 Oracle의 상표이지만, 두 프로그래밍 언어의 구문, 의미 및 사용 방법은 매우 다릅니다.
JavaScript 기능
JavaScript는 웹 페이지에서 동적인 기능을 구현하기 위해 사용되는 스크립트 언어입니다.
- 변수와 데이터 타입: 변수를 선언하고 값을 할당할 수 있으며, 다양한 데이터 타입(문자열, 숫자, 불리언, 배열, 객체 등)을 다룰 수 있습니다.
- 조건문과 반복문: 조건문(if문, switch문)과 반복문(for문, while문)을 사용하여 프로그램의 흐름을 제어하고 반복 작업을 수행할 수 있습니다.
- 함수와 객체: 함수를 정의하고 호출하여 코드를 모듈화하고 재사용할 수 있습니다. 또한, 객체를 생성하고 속성과 메서드를 가질 수 있어 객체 지향 프로그래밍을 구현할 수 있습니다.
- 이벤트 처리: 웹 페이지의 이벤트(버튼 클릭, 마우스 이동 등)에 대한 응답으로 JavaScript 코드를 실행할 수 있습니다.
- DOM 조작: JavaScript를 사용하여 HTML 문서의 요소를 선택하고 수정할 수 있으며, 새로운 요소를 동적으로 생성하거나 삭제할 수도 있습니다.
JavaScript 적용
JavaScript 코드를 HTML 문서에 적용하기 위해서는 <script> 태그를 사용합니다. <script> 태그는 HTML 문서의 <head> 태그 내부에 위치할 수도 있고, <body> 태그 내부의 원하는 위치에 위치할 수도 있습니다. 예를 들면 다음과 같습니다
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<script>
// JavaScript 코드 작성
// 이 부분에 JavaScript 코드를 작성합니다.
</script>
</head>
<body>
<!-- 웹 페이지의 내용 -->
<h1>Hello, World!</h1>
<!-- JavaScript 코드를 적용하고 싶은 위치에 적절한 방법으로 작성합니다. -->
<script>
// 이 부분에 JavaScript 코드를 작성합니다.
</script>
</body>
</html>
외부 JavaScript 파일 사용
JavaScript 코드를 별도의 외부 파일에 작성하고 HTML 문서에서 불러와 사용할 수도 있습니다. 이 방법은 코드의 재사용성과 관리를 향상시킬 수 있습니다. 예를 들면 다음과 같습니다
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<script src="script.js"></script>
</head>
<body>
<!-- 웹 페이지의 내용 -->
<h1>Hello, World!</h1>
</body>
</html>위의 예시에서 script.js는 외부 JavaScript 파일의 경로를 나타냅니다. 해당 파일에 JavaScript 코드를 작성하고, HTML 문서에서 <script> 태그를 사용하여 파일을 불러옵니다.
JavaScript 기본 문법
// JavaScript 파일
// 변수 선언과 할당
var greeting = "Hello, World!";
// 함수 정의
function sayHello() {
console.log(greeting);
}
// 함수 호출
sayHello();JavaScript의 기본 문법은 다음과 같습니다.
- 문장(Statement): JavaScript 코드는 문장으로 구성되며, 문장은 세미콜론(;)으로 끝납니다. 예를 들면 var x = 5;입니다.
- 주석(Comment): 주석은 코드에 설명을 추가할 때 사용되며, 실행되지 않습니다. 한 줄 주석은 //로 시작하고, 여러 줄 주석은 /*로 시작하여 */로 끝납니다.
- 변수(Variable): 변수는 값을 저장하기 위해 사용되며, var, let, const 키워드를 사용하여 선언합니다.
- 함수(Function): 함수는 코드 블록을 정의하고 필요할 때 실행할 수 있도록 해줍니다. function 키워드를 사용하여 함수를 선언하고, 함수 이름과 매개변수, 코드 블록을 포함합니다.
변수와 데이터 타입
JavaScript에서 변수를 선언할 때는 var, let, const 키워드를 사용합니다.
var x = 5; // 변수 x를 선언하고 값 5를 할당합니다.
let y = "Hello"; // 변수 y를 선언하고 문자열 "Hello"를 할당합니다.
const z = true; // 변수 z를 선언하고 불리언 값 true를 할당합니다.JavaScript는 동적 타이핑 언어이므로 변수에는 다양한 데이터 타입의 값이 할당될 수 있습니다. 보통 자주 사용하는 데이터 타입으로는 문자열(String), 숫자(Number), 불린(Boolean), 배열(Array), 객체(Object) 등이 있습니다.
조건문과 반복문
조건문은 프로그램의 흐름을 제어하기 위해 사용됩니다. JavaScript에서는 if문, switch문을 사용할 수 있습니다.
if (condition) {
// condition이 true일 때 실행되는 코드
} else {
// condition이 false일 때 실행되는 코드
}
switch (expression) {
case value1:
// expression이 value1과 일치할 때 실행되는 코드
break;
case value2:
// expression이 value2와 일치할 때 실행되는 코드
break;
default:
// expression이 어떤 case와도 일치하지 않을 때 실행되는 코드
}
반복문은 동일한 작업을 여러 번 수행하기 위해 사용됩니다. JavaScript에서는 for문, while문을 사용할 수 있습니다.
//for를 이용한 반복문
for (var i = 0; i < 5; i++) {
//while을 이용한 반복문
var count = 0;
while (count < 5) {
console.log("Count:", count);
count++;
}
함수와 객체
함수는 코드 블록을 정의하고 필요할 때 호출하여 사용할 수 있는 독립적인 코드 단위입니다. 함수는 function 키워드를 사용하여 선언하고, 필요한 매개변수와 코드 블록을 포함합니다.
function sayHello() {
console.log("Hello, World!");
}
function add(a, b) {
return a + b;
}
객체는 관련된 데이터와 함수를 그룹화한 것으로, 속성(Property)과 메서드(Method)를 가집니다. 객체는 중괄호({})를 사용하여 생성하고, 속성과 메서드는 속성명: 값 또는 메서드명: 함수 형태로 정의됩니다.
var person = {
name: "John",
age: 30,
sayHello: function() {
console.log("Hello, my name is " + this.name + ".");
}
};
위에서 person 객체는 name과 age라는 속성과 sayHello라는 메서드를 가지고 있습니다. 속성은 person.name, person.age와 같이 접근할 수 있고, 메서드는 person.sayHello()와 같이 호출할 수 있습니다.
이벤트 처리
JavaScript를 사용하여 웹 페이지의 이벤트에 응답할 수 있습니다. 예를 들면 버튼 클릭, 마우스 이동 등의 이벤트입니다. 이벤트 핸들러(Event Handler)를 등록하여 이벤트가 발생했을 때 실행될 JavaScript 코드를 작성할 수 있습니다.
아래는 몇가지 이벤트리스너의 예시입니다.
var button = document.getElementById("myButton");
//버튼이 클릭되었을 때를 읽는다.
button.addEventListener("click", function() {
console.log("Button clicked!");
});click: 버튼이 클릭되었을 때의 이벤트를 읽음
var element = document.getElementById("myElement");
//마우스가 해당 element위에 있을 때,
element.addEventListener("mouseenter", function() {
element.style.backgroundColor = "red";
});
//마우스가 해당 element위에서 떠날 때,
element.addEventListener("mouseleave", function() {
element.style.backgroundColor = "blue";
});mouseenter, mouseleave : 마우스가 해당 element에 위치하거나, 떠났을 때를 읽음
var input = document.getElementById("myInput");
//키가 눌렸을 때, 눌린 키 값을 콘솔에 전달
input.addEventListener("keydown", function(event) {
console.log("Key Pressed:", event.key);
});keydown: 키가 눌렸을 때를 읽음
DOM 조작
JavaScript를 사용하여 HTML 문서의 DOM(Document Object Model)을 조작할 수 있습니다. DOM은 HTML 요소들의 계층 구조로서 웹 페이지의 요소를 선택하고 수정하는 기능을 제공합니다.
var heading = document.getElementById("myHeading");
heading.innerHTML = "New Heading";
var paragraph = document.querySelector(".myParagraph");
paragraph.style.color = "blue";위의 예시에서 myHeading이라는 id를 가진 제목 요소의 내용을 변경하고, myParagraph라는 클래스를 가진 단락 요소의 텍스트 색상을 파란색으로 변경합니다.
'Frontend > 개념,공부' 카테고리의 다른 글
| CSS - CSS? (0) | 2023.06.17 |
|---|---|
| HTML - HTML에 대해서 (0) | 2023.06.11 |
