JavaScript / JavaScript를 HTML 문서에 삽입하는 방법

HTML 문서에 직접 삽입

HTML 문서 안에 <script> 태그를 만들고, 그 안에 사이에 코드를 넣는 방법입니다.

<script>
  alert ("Hello");
</script>

이 방법은 몇 개의 페이지에 JavaScript를 사용하거나, JavaScript 코드가 짧은 경우에 유용합니다.

스크립트 파일을 만든 후 불러오기

JavaScript 코드를 담은 파일을 만든 후 HTML 문서에 연결시키는 방법입니다.

다음과 같은 내용의 파일을 만들고 hello.js라는 이름으로 저장합니다. (스크립트 파일의 확장자는 js입니다.)

alert ("Hello");

그리고, HTML 문서에 다음의 코드를 넣습니다.

<script src="hello.js"></script>

src의 값에는 연결할 스크립트 파일의 이름을 경로와 함께 적어줍니다.

이 방법은 많은 HTML 문서에 같은 자바스크립트 코드를 적용시키거나, 자바스크립트 코드가 긴 경우에 유용합니다.

같은 카테고리의 다른 글
JavaScript / Object / String.replace() / 문자열을 바꾸는 메서드

JavaScript / Object / String.replace() / 문자열을 바꾸는 메서드

.replace() .replace()는 특정 문자열을 찾아 다른 문자열로 바꾸는 메서드입니다. 문법 string.replace( 'string1', 'string2' ) string에서 string1을 찾아 string2로 바꿉니다. 예제 jbStr 문자열에서 Lorem을 찾아 Amet으로 바꾼 후 출력합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript | .replace()</title> </head> <body> <script> ...

JavaScript / 구문(Statement) 넣는 방법

JavaScript / 구문(Statement) 넣는 방법

자바스크립트는 줄바꿈을 하면 구문(Statement)이 종료된 것으로 봅니다. var jb1 = 'Lorem' var jb2 = 'Ipsum' 하지만, 구문이 완성되지 않았다면 다음 줄까지 해석합니다. 즉 var jb1 = 'Lorem' 과 var jb1 = 'Lorem' 은 같습니다. 구문이 종료되었음을 명확히 표시할 때는 세미콜론(;)을 사용합니다. var jb1 = 'Lorem'; var jb2 = 'Ipsum'; 세미콜론 사용은 선택사항이지만, 한 줄에 여러 구문을 쓸 때는 구문과 구문 사이에 꼭 ...

IE8, IE9에서 placeholder 적용되게 하는 방법

IE8, IE9에서 placeholder 적용되게 하는 방법

input이나 textarea에 placeholder 속성으로 어떤 내용을 입력할 지 안내할 수 있다. HTML5에 새로 추가된 속성으로 label을 대체할 수 있는 유용한 속성이다. placeholder를 이용한 간단한 예는 다음과 같다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML Attribute | placeholder</title> <style> ...

JavaScript / Event / onsubmit / 폼 전송하기 전에 작업 수행하게 하는 이벤트

JavaScript / Event / onsubmit / 폼 전송하기 전에 작업 수행하게 하는 이벤트

JavaScript의 onsubmit 이벤트를 이용하면 폼의 값을 전송하기 전에 어떤 작업을 하게 할 수 있습니다. 간단한 예제로 어떻게 작동하는지 알아보겠습니다. 예제 1 간단한 회원 가입 페이지를 만듭니다. 전송 버튼은 input 태그로 만듭니다. Register를 클릭하면 ok.html로 이동합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> ...

JavaScript / 다른 페이지로 리다이렉트(Redirect) 하기

JavaScript / 다른 페이지로 리다이렉트(Redirect) 하기

자바스크립트를 이용해서 특정 URL로 접속했을 때 다른 URL로 이동시킬 수 있다. 다른 URL로 이동시키는 것은 window.location.href 를 이용한다. 예를 들어 window.location.href = 'http://www.abc.com/'; 은 웹브라우저로 접속했을 때 http://www.abc.com/으로 이동시킨다. 만약 http://www.abc.com/으로 접속했을 때 http://www.codingfactory.net/로 이동시키고 싶다면 다음과 같이 한다. if ( window.location == 'http://www.abc.com/' ) { window.location.href='http://www.codingfactory.net/'; } PHP / 다른 페이지로 리디렉션(Redirection)하는 방법

JavaScript / Object / Math.random() / 난수(랜덤 숫자) 만드는 속성

JavaScript / Object / Math.random() / 난수(랜덤 숫자) 만드는 속성

Math.random() Math.random()는 난수(랜덤 숫자)를 만듭니다. 문법 Math.random() 0.673172894273546와 같은 0 이상 1 미만의 난수를 만듭니다. 예제 1 - 난수 만들기 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; ...

JavaScript / Object / Array.indexOf(), Array.lastIndexOf() - 일치하는 요소의 위치(인덱스)를 반환하는 메서드

JavaScript / Object / Array.indexOf(), Array.lastIndexOf() - 일치하는 요소의 위치(인덱스)를 반환하는 메서드

.indexOf() .indexOf()는 주어진 값과 일치하는 요소의 인덱스를 반환하는 메서드입니다. 문법 array.indexOf( value, start ) value : 찾으려는 값을 넣습니다. start : 검색을 시작할 인덱스 값입니다. 생략 가능하고, 생략했을 경우 값은 0입니다. 일치하는 원소가 있다면 인덱스를 반환합니다. 여러 개 있으면 처음 원소의 인덱스를 반환합니다. 없다면 -1을 반환합니다. 예제 배열 원소의 인덱스는 0부터 시작합니다. 즉, 첫번째 원소의 인덱스는 0, 두번째 ...

JavaScript / JavaScript를 HTML 문서에 삽입하는 방법

JavaScript / JavaScript를 HTML 문서에 삽입하는 방법

HTML 문서에 직접 삽입 HTML 문서 안에 <script> 태그를 만들고, 그 안에 사이에 코드를 넣는 방법입니다. <script> alert ("Hello"); </script> 이 방법은 몇 개의 페이지에 JavaScript를 사용하거나, JavaScript 코드가 짧은 경우에 유용합니다. 스크립트 파일을 만든 후 불러오기 JavaScript 코드를 담은 파일을 만든 후 HTML 문서에 연결시키는 방법입니다. 다음과 같은 내용의 파일을 만들고 hello.js라는 이름으로 저장합니다. (스크립트 파일의 ...

JavaScript / Object / String.indexOf(), String.lastIndexOf() / 특정 문자열이 있는 위치를 반환하는 메서드

JavaScript / Object / String.indexOf(), String.lastIndexOf() / 특정 문자열이 있는 위치를 반환하는 메서드

.indexOf() .indexOf()는 특정 문자열이 처음으로 나타나는 위치를 반환하는 메서드입니다. 문법 string.indexOf( value, start ) value : 필수 요소입니다. 찾으려는 문자열을 넣습니다. start : 선택 요소입니다. 검색을 시작할 인덱스 값입니다. 입력하지 않으면 처음부터 검색합니다. 대소문자를 구분합니다. 찾는 문자열이 없는 경우 -1을 반환합니다. 예제 'ABCABC'.indexOf( 'A' ) 처음 나오는 A의 인덱스의 값인 0을 반환합니다. 'ABCABC'.indexOf( 'A', 1 ) 인덱스 1 이후에 처음 나오는 A의 ...

CKEditor 5 / 설정하고 사용하는 방법

CKEditor 5 / 설정하고 사용하는 방법

CKEditor는 JavaScript 기반의 WYSIWYG 에디터이다. 어떻게 설정하고 사용하는지 간략하게 알아본다. Modern JavaScript rich text editor with a modular architecture. Its clean UI and features provide the perfect WYSIWYG UX for creating semantic content. CKEditor에는 Classic editor, Inline editor, Balloon editor, Balloon block editor, Document editor 다섯 가지의 타입이 있는데, 아래의 예는 모두 ...