본문 바로가기

Document 해석/javascript

[w3shools JS 해석] 1. 자바스크립트 소개

728x90
반응형
이 페이지는 JavaScript가 수행할 수 있는 몇 가지 예시가 포함되어 있습니다.

자바스크립트는 HTML 내용을 변경할 수 있습니다.

많은 자바스크립트 HTML method 중 하나는 getElementById() 입니다.

One of many JavaScript HTML methods is getElementById().

아래 예시는 HTML 요소(id="demo"인)를 찾고, 요소 내용(innerHTML)을 "Hello Javascript"로 변경합니다. 

The example below "finds" an HTML element (with id="demo"), and changes the element content (innerHTML) to "Hello JavaScript":

예시

document.getElementById("demo").innerHTML = "Hello JavaScript";

실행해보기

 

자바스크립트는 작은 따옴표('')와 큰 따옴표("") 모두 사용 가능합니다.

JavaScript accepts both double and single quotes:

예시

document.getElementById('demo').innerHTML = 'Hello JavaScript';

실행해보기

자바스크립트는 HTML 속성 값을 변경할 수 있습니다.

이 예제에서 자바스크립트는 img 태그의 src(소스) 속성 값을 변경합니다.

In this example JavaScript changes the value of the src (source) attribute of an <img> tag:

클릭 할 때마다 불이 켜지고 꺼지는 예제. 실행시켜 보고 싶다면 이미지를 누르세요.

자바스크립트는 HTML 스타일(CSS)을 변경할 수 있습니다.

HTML 요소의 스타일을 변경하는 것은 HTML 속성을 변경하는 것을 변형한 것입니다.

Changing the style of an HTML element, is a variant of changing an HTML attribute:

예시

document.getElementById("demo").style.fontSize = "35px";

실행해보기

자바스크립트는 HTML 요소를 숨길 수 있습니다.

HTML 요소를 숨기는 것은 display 스타일을 변경하여 수행할 수 있습니다.

Hiding HTML elements can be done by changing the display style:

예시

document.getElementById("demo").style.display = "none";

실행해보기

자바스크립트는 HTML 요소를 보여줄 수 있습니다.

숨긴 HTML 요소를 보여주는 것 또한 display 스타일을 변경하여 수행할 수 있습니다.

Showing hidden HTML elements can also be done by changing the display style:

예시

document.getElementById("demo").style.display = "block";

실행해보기

알고 있었나요?

자바스크립트와 자바는 개념과 디자인 모두 완벽하게 다른 언어입니다.

JavaScript and Java are completely different languages, both in concept and design.

자바스크립트는 1995년 Brendan Eich에 의해 발명되었고 1997년에 ECMA 표준이 되었습니다.

JavaScript was invented by Brendan Eich in 1995, and became an ECMA standard in 1997.

ECMA-262는 표준의 공식 명칭입니다.

ECMA-262 is the official name of the standard. 

ECMAScript는 언어의 공식 명칭입니다.

ECMAScript is the official name of the language.

 

공부를 위하여 하는 해석입니다. 잘못된 해석이나 오타가 있다면 댓글로 알려주세요.
현재 페이지 본문 바로가기
728x90
반응형

'Document 해석 > javascript' 카테고리의 다른 글

[w3schools JS 해석] 0. 튜토리얼  (0) 2021.01.09