JavaScript.
JavaScript는 웹 개발에서 주로 사용되는 프로그래밍 언어로,
동적인 웹 페이지를 만들고 사용자와 상호작용하는 기능을 추가하는 데 사용됩니다.
웹 브라우저에서 실행되는 클라이언트 사이드 스크립트 언어입니다.
JavaScript는 Brendan Eich에 의해 개발되었으며,
처음에는 웹 페이지의 동적인 기능을 제어하기 위해 만들어졌습니다.
JavaScript는 다음과 같은 주요 특징을 가지고 있습니다:
인터프리터 언어:
JavaScript 코드는 브라우저에서 인터프리터에 의해 한 줄씩 해석되고 실행됩니다.
따라서 코드를 수정하고 즉시 결과를 확인할 수 있습니다.
객체 기반:
JavaScript는 객체 기반 언어로, 객체를 생성하고 속성과 메서드를 가질 수 있습니다.
이를 통해 코드의 구조화와 재사용성을 높일 수 있습니다.
이벤트 기반:
JavaScript는 이벤트 기반 프로그래밍 모델을 사용하여
사용자의 동작(마우스 클릭, 키보드 입력 등)에 대한 이벤트를 처리하고 이에 따른 동작을 수행할 수 있습니다.
다양한 API 제공:
JavaScript는 웹 브라우저에서 제공하는 다양한 API를 활용할 수 있습니다.
이를 통해 웹 페이지의 요소를 조작하고, 데이터를 가져오고, 네트워크 요청을 보낼 수 있습니다.
크로스 플랫폼:
JavaScript는 모든 주요 웹 브라우저에서 실행되며, 데스크톱, 모바일, 태블릿 등 다양한 플랫폼에서 동작합니다.
JavaScript는 HTML 콘텐츠를 변경할 수 있습니다.
getElementById() 메서드는 주어진 ID 값을 가진 HTML 요소를 찾아서 반환하는 역할을 합니다.
이 메서드는 DOM(Document Object Model)을 사용하여 웹 페이지의 특정 요소에 접근할 수 있습니다.
아래 예제는 HTML 요소(id="demo" 포함)를 "찾고" 요소 콘텐츠(innerHTML)를 "Hello JavaScript"로 변경합니다.
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>
</body>
</html>What Can JavaScript Do?
JavaScript can change HTML content.
JavaScript는 HTML 스타일을 변경할 수 있습니다(CSS).
HTML 요소의 스타일 변경은 HTML 속성 변경의 변형입니다.
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can change HTML attribute values.</p>
<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>
<button onclick="document.getElementById('myImage').src='https://images.unsplash.com/photo-1573621622238-f7ac6ac0429a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80'">Turn on the light</button>
<img id="myImage" src="https://images.unsplash.com/photo-1485119502162-016e4409beab?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" style="width:100px">
<button onclick="document.getElementById('myImage').src='https://images.unsplash.com/photo-1485119502162-016e4409beab?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'">Turn off the light</button>
</body>
</html>What Can JavaScript Do?
JavaScript can change HTML attribute values.
In this case JavaScript changes the value of the src (source) attribute of an image.
CSS 속성 변경 예제입니다.
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo1">JavaScript can change the style of an HTML element.</p>
<button type="button" onclick="document.getElementById('demo1').style.fontSize='35px'">Click Me!</button>
</body>
</html>What Can JavaScript Do?
JavaScript can change the style of an HTML element.
JavaScript는 HTML 요소를 숨기고 표시할 수 있음
display 속성을 변경해 HTML 요소를 숨기고 표시할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo2">JavaScript can hide HTML elements.</p>
<button type="button" onclick="document.getElementById('demo2').style.display='none'">Click Me!</button>
</body>
</html>What Can JavaScript Do?
JavaScript can hide HTML elements.
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can show hidden HTML elements.</p>
<p id="demo3" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo3').style.display='block'">Click Me!</button>
</body>
</html>What Can JavaScript Do?
JavaScript can show hidden HTML elements.
'FRONTEND > JAVASCRIPT' 카테고리의 다른 글
| JavaScript 튜토리얼 - JavaScript Variables (0) | 2023.07.21 |
|---|---|
| JavaScript 튜토리얼 - JavaScript Syntax (0) | 2023.07.19 |
| JavaScript 튜토리얼 - JavaScript Statements (0) | 2023.07.17 |
| JavaScript 튜토리얼 - JavaScript Output (0) | 2023.07.14 |
| JavaScript 튜토리얼 - JavaScript 위치 (0) | 2023.07.13 |