JavaScript 튜토리얼 => JavaScript 시작하기

비고

JavaScript ( Java 와 혼동하지 말 것)는 클라이언트 측 및 서버 측 스크립팅에 사용되는 동적 인 약 유형 언어입니다.

JavaScript는 대소 문자를 구별하는 언어입니다. 즉, 대문자가 소문자와 다른 것으로 간주됩니다. JavaScript의 키워드는 모두 소문자입니다.

JavaScript는 ECMAScript 표준의 일반적으로 참조되는 구현입니다.

이 태그의 주제는 달리 명시하지 않는 한 브라우저에서 JavaScript를 사용하는 경우가 많습니다. 자바 스크립트 파일 만 브라우저에서 직접 실행할 수 없습니다. 그것들을 HTML 문서에 삽입해야합니다. 몇 가지 자바 스크립트 코드가 있다면이 코드를 일부 자리 표시 자 콘텐츠에 포함하고 결과를 example.html 로 저장할 수 있습니다.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test page</title>
  </head>
  <body>
    Inline script (option 1):
    <script>
      // YOUR CODE HERE
    </script>
    External script (option 2):
    <script src="your-code-file.js"></script>
  </body>
</html>

버전

번역	출시일
1	1997-06-01
2	1998-06-01
삼	1998-12-01
E4X	2004-06-01
5	2009-12-01
5.1	2011-06-01
6	2015-06-01
7	2016-06-14
8	2017-06-27

DOM API 사용하기

DOM은 D의 ocument O를 bject M의 ODEL을 의미합니다. XML 및 HTML 과 같은 구조화 된 문서의 객체 지향 표현입니다.

Element 의 textContent 속성을 설정하는 것은 웹 페이지에서 텍스트를 출력하는 한 가지 방법입니다.

예를 들어, 다음 HTML 태그를 고려하십시오.

<p id="paragraph"></p>

textContent 속성을 변경하려면 다음 JavaScript를 실행할 수 있습니다.

document.getElementById("paragraph").textContent = "Hello, World";

id paragraph 이있는 요소를 선택하고 텍스트 내용을 "Hello, World"로 설정합니다.

<p id="paragraph">Hello, World</p>

(이 데모도 참조하십시오)

자바 스크립트를 사용하여 프로그래밍 방식으로 새 HTML 요소를 만들 수도 있습니다. 예를 들어 다음과 같은 본문이있는 HTML 문서를 생각해보십시오.

<body>
   <h1>Adding an element</h1>
</body>

자바 스크립트에서는 textContent 속성이 of 인 새 <p> 태그를 만들고 html 본문의 끝에 추가합니다.

var element = document.createElement('p');
element.textContent = "Hello, World";
document.body.appendChild(element); //add the newly created element to the DOM

그러면 HTML 본문이 다음과 같이 변경됩니다.

<body>
   <h1>Adding an element</h1>
   <p>Hello, World</p>
</body>

자바 스크립트를 사용하여 DOM의 요소를 조작하려면 해당 요소가 문서에서 만들어진 후에 JavaScript 코드를 실행해야합니다. 다른 모든 <body> 내용 뒤에 JavaScript <script> 태그를 넣으면이 작업을 수행 할 수 있습니다. 또는 이벤트 리스너 를 사용하여 예를 들어들을 수도 있습니다. window 의 onload 이벤트 에서 해당 이벤트 리스너에 코드를 추가하면 페이지의 전체 내용이로드 될 때까지 코드 실행이 지연됩니다.

DOM을 모두로드했는지 확인하는 세 번째 방법 은 DOM 조작 코드를 0ms의 시간 초과 함수로 래핑하는 것 입니다. 이렇게하면이 JavaScript 코드가 실행 대기열의 끝에 대기열에 추가되어 브라우저가이 새로운 JavaScript 부분에 참석하기 전에 완료를 기다리고있는 일부 비 자바 스크립트 작업을 마칠 수 있습니다.

console.log () 사용하기

소개

모든 최신 웹 브라우저, NodeJ 및 거의 모든 다른 JavaScript 환경은 로깅 방법 모음을 사용하여 콘솔에 메시지를 쓰는 것을 지원합니다. 가장 일반적인 방법은 console.log() 입니다.

브라우저 환경에서 console.log() 함수는 주로 디버깅 목적으로 사용됩니다.

시작하기

브라우저에서 자바 스크립트 콘솔을 열고 다음을 입력 한 다음 Enter 키를 누릅니다 .

console.log("Hello, World!");

그러면 콘솔에 다음 내용이 기록됩니다.

위의 예제에서 console.log() 함수는 Hello, World! 출력합니다 Hello, World! 콘솔에 보내고 undefined 반환합니다 (콘솔 출력 창에 위에 표시). 이는 console.log() 에 명시적인 반환 값 이 없기 때문입니다.

로깅 변수

console.log() 는 모든 종류의 변수를 기록하는 데 사용할 수 있습니다. 뿐만 아니라 문자열. 콘솔에 표시 할 변수를 전달하십시오. 예를 들면 다음과 같습니다.

var foo = "bar";
console.log(foo);

그러면 콘솔에 다음 내용이 기록됩니다.

두 개 이상의 값을 기록하려면 쉼표로 값을 구분하면됩니다. 연결 중에 각 인수 사이에 공백이 자동으로 추가됩니다.

var thisVar = 'first value';
var thatVar = 'second value';
console.log("thisVar:", thisVar, "and thatVar:", thatVar);

그러면 콘솔에 다음 내용이 기록됩니다.

자리 표시 자

placeholder와 함께 console.log() 를 사용할 수 있습니다.

var greet = "Hello", who = "World";
console.log("%s, %s!", greet, who);

그러면 콘솔에 다음 내용이 기록됩니다.

객체 로깅

아래는 객체를 로깅 한 결과입니다. 이는 API 호출에서 JSON 응답을 로깅하는 데 종종 유용합니다.

console.log({
    'Email': '', 
    'Groups': {},
    'Id': 33,
    'IsHiddenInUI': false,
    'IsSiteAdmin': false,
    'LoginName': 'i:0#.w|virtualdomain\\user2',
    'PrincipalType': 1,
    'Title': 'user2'
});

그러면 콘솔에 다음 내용이 기록됩니다.

HTML 요소 로깅

DOM 내에 존재하는 모든 요소를 기록 할 수 있습니다. 이 경우 body 요소를 기록합니다.

console.log(document.body);

그러면 콘솔에 다음 내용이 기록됩니다.

끝 참고

콘솔 기능에 대한 자세한 내용은 콘솔 항목을 참조하십시오.

window.alert () 사용하기

alert 방법은 화면에 시각적 경고 상자를 표시합니다. 경고 메서드 매개 변수는 일반 텍스트로 사용자에게 표시됩니다.

window.alert(message);

window 는 전역 객체이기 때문에 다음과 같은 단축형을 사용할 수도 있습니다.

alert(message);

window.alert() 는 무엇을합니까? 자, 다음 예제를 보겠습니다.

alert('hello, world');

Chrome에서는 다음과 같이 팝업을 생성합니다.

노트

alert 메소드는 기술적으로 window 객체의 속성이지만 모든 window 속성이 자동으로 전역 변수이므로 alert 을 window 속성 대신 전역 변수로 사용할 수 있습니다. 즉, window.alert() 대신 alert() 를 직접 사용할 수 있습니다 window.alert() .

console.log 사용하는 것과는 달리, alert 는 프롬프트에 응답 할 때까지 코드 호출 alert 가 일시 중지됨을 의미하는 모달 프롬프트로 작동합니다. 전통적으로 이것은 경고가 해제 될 때까지 다른 JavaScript 코드가 실행되지 않는다는 것을 의미합니다.

alert('Pause!');
console.log('Alert was dismissed');

그러나 실제로 모달 대화 상자가 표시 되어도 사양에 따라 다른 이벤트로 트리거 된 코드가 계속 실행될 수 있습니다. 이러한 구현에서는 모달 대화 상자가 표시되는 동안 다른 코드가 실행될 수 있습니다.

alert 메서드 사용에 대한 자세한 내용은 모달 프롬프트 항목을 참조하십시오.

일반적으로 알림을 사용하면 사용자가 페이지를 사용하지 못하도록 차단하는 다른 방법을 사용하는 것이 더 바람직하지 않으므로 사용자 환경을 개선 할 수 있습니다. 그럼에도 불구하고, 디버깅에 유용 할 수 있습니다.

Chrome 46.0부터 sandbox 속성의 값이 allow-modal이 아닌 경우 window.alert() 는 <iframe> 내부에서 차단됩니다.

window.prompt () 사용하기

prompt() 메서드를 사용하면 사용자로부터 입력을 쉽게 얻을 수 있습니다.

통사론

prompt(text, [default]);

text : 프롬프트 상자에 표시된 텍스트입니다.
기본값 : 입력 필드의 기본값입니다 (선택 사항).

예제들

var age = prompt("How old are you?");
console.log(age); // Prints the value inserted by the user

사용자가 확인 버튼을 클릭하면 입력 값이 반환됩니다. 그렇지 않은 경우, 메소드는 null 리턴합니다.

prompt 의 반환 값은 사용자가 Cancel을 클릭하지 않는 한 항상 문자열이며,이 경우 null 을 반환합니다. Safari는 사용자가 취소를 클릭 할 때 함수가 빈 문자열을 반환한다는 점에서 예외입니다. 거기에서 리턴 값을 정수 와 같은 다른 유형으로 변환 할 수 있습니다.

노트

프롬프트 상자가 표시되는 동안 대화 상자는 모달 창이므로 사용자는 페이지의 다른 부분에 액세스 할 수 없습니다.
Chrome 46.0부터 sandbox 속성의 값이 allow-modal이 아닌 경우이 메소드는 <iframe> 내부에서 차단됩니다.

DOM API 사용 (그래픽 텍스트 : 캔버스, SVG 또는 이미지 파일 사용)

캔버스 요소 사용

HTML은 래스터 기반 이미지를 작성하기위한 캔버스 요소를 제공합니다.

먼저 이미지 픽셀 정보를 저장하기위한 캔버스를 만듭니다.

var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 250;

그런 다음 캔버스의 컨텍스트를 선택합니다 (이 경우 2 차원).

var ctx = canvas.getContext('2d');

그런 다음 텍스트와 관련된 속성을 설정합니다.

ctx.font = '30px Cursive';
ctx.fillText("Hello world!", 50, 50);

그런 다음 canvas 요소를 페이지에 삽입하여 적용하십시오.

document.body.appendChild(canvas);

SVG 사용

SVG는 확장 가능한 벡터 기반 그래픽을 작성하기위한 것으로 HTML 내에서 사용할 수 있습니다.

먼저 차원이있는 SVG 요소 컨테이너를 만듭니다.

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.width = 500;
svg.height = 50;

그런 다음 원하는 위치 지정 및 글꼴 특성을 가진 text 요소를 작성하십시오.

var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', '0');
text.setAttribute('y', '50');
text.style.fontFamily = 'Times New Roman';
text.style.fontSize = '50';

그런 다음 실제 텍스트를 추가하여 text 요소에 표시합니다.

text.textContent = 'Hello world!';

마지막으로 text 요소를 svg 컨테이너에 추가하고 svg 컨테이너 요소를 HTML 문서에 추가합니다.

svg.appendChild(text);
document.body.appendChild(svg);

이미지 파일

이미 원하는 텍스트가 포함 된 이미지 파일을 서버에 배치 한 경우 이미지 URL을 추가 한 다음 다음과 같이 이미지를 문서에 추가 할 수 있습니다.

var img = new Image();
img.src = 'https://i.ytimg.com/vi/zecueq-mo4M/maxresdefault.jpg';
document.body.appendChild(img);

window.confirm () 사용하기

window.confirm() 메서드는 선택적 메시지와 확인 및 취소라는 두 개의 버튼이있는 모달 대화 상자를 표시합니다.

이제 다음 예제를 살펴 보겠습니다.

result = window.confirm(message);

여기에서 message 는 대화 상자에 표시 될 선택적 문자열이며 result 는 OK 또는 Cancel이 선택되었는지 (true는 OK를 의미) 나타내는 부울 값입니다.

window.confirm() 은 일반적으로 제어판에서 무언가를 삭제하는 것과 같은 위험한 작업을 수행하기 전에 사용자 확인을 요청하는 데 사용됩니다.

if(window.confirm("Are you sure you want to delete this?")) {
    deleteItem(itemId);
}

해당 코드의 출력은 브라우저에서 다음과 같이 보입니다.

나중에 사용하기 위해 필요하면 변수에 사용자의 상호 작용 결과를 저장하면됩니다.

var deleteConfirm = window.confirm("Are you sure you want to delete this?");

노트

인수는 선택적이며 사양에서 필요하지 않습니다.
대화 상자는 모달 창입니다. 대화 상자가 닫힐 때까지 사용자가 프로그램의 나머지 인터페이스에 액세스하지 못하게합니다. 이런 이유로 대화 상자 (또는 모달 창)를 만드는 함수를 과도하게 사용하면 안됩니다. 그리고 관계없이 대화 상자를 사용하여 확인하지 않는 것이 좋습니다.
Chrome 46.0부터 sandbox 속성의 값이 allow-modal이 아닌 경우이 메소드는 <iframe> 내부에서 차단됩니다.
윈도우 객체가 항상 암묵적이기 때문에 제거 된 윈도우 표기법으로 확인 메소드를 호출하는 것은 일반적으로 받아 들여집니다. 그러나 유사하게 명명 된 메서드를 사용하여 낮은 범위 수준에서의 구현으로 인해 예상되는 동작이 변경 될 수 있으므로이 창 개체를 명시 적으로 정의하는 것이 좋습니다.

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

JavaScript 튜토리얼
JavaScript 시작하기

수색…

비고

버전

DOM API 사용하기

console.log () 사용하기

소개

시작하기

로깅 변수

자리 표시 자

객체 로깅

HTML 요소 로깅

끝 참고

window.alert () 사용하기

노트

window.prompt () 사용하기

통사론

예제들

노트

DOM API 사용 (그래픽 텍스트 : 캔버스, SVG 또는 이미지 파일 사용)

window.confirm () 사용하기

노트