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 문서에 같은 자바스크립트 코드를 적용시키거나, 자바스크립트 코드가 긴 경우에 유용합니다.

Related Posts

JavaScript / 메모

JavaScript / 메모

인코딩 함수, 디코딩 함수 인코딩 함수 escape() encodeURI() encodeURIComponent() 디코딩 함수 unescape() decodeURI() decodeURIComponent() IE8에서 last-child, nth-child 등 가상 클래스 적용시키는 방법 selectivizr HTML 문서의 style 태그 안에 넣은 CSS 코드에는 적용되지 않는다. 외부 CSS 파일에만 적용됩니다. jQuery, prototype 등 다른 자바스크립트 라이브러리가 필요하다.

JavaScript / Library

JavaScript / Library

Uncategorized html5shiv - IE 8 이하에서 HTML5 태그 지원하게 해주는 라이브러리 imagesLoaded - 이미지가 로드되었음을 감지하는 라이브러리 Masonry - 벽돌 쌓기 모양으로 요소를 배열해주는 라이브러리 Respond.js - IE8 이하에서 미디어 쿼리(Media Query)를 사용하게 해주는 라이브러리 turn.js - 책장을 넘기는 듯한 플립(flip) 효과를 만들어 주는 라이브러리

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/'; }

JavaScript / Object / Math.floor(), Math.ceil(), Math.round()

JavaScript / Object / Math.floor(), Math.ceil(), Math.round()

Math.floor() Math.floor()는 어떤 수보다 크지 않은 최대의 정수를 반환합니다. 문법 Math.floor( Number ) Number에는 숫자가 들어갑니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; ...

JavaScript / Object / String.repeat() / 문자열을 반복한 값을 반환하는 메서드

JavaScript / Object / String.repeat() / 문자열을 반복한 값을 반환하는 메서드

.repeat() .repeat() – 문자열을 반복한 값을 반환하는 메서드입니다. IE는 Edge부터 지원합니다. 문법 string.repeat( count ) 예제 'abc'.repeat( 2 ) abc를 두 번 반복한 abcabc를 반환합니다.

JavaScript / 연산자 / typeof 연산자

JavaScript / 연산자 / typeof 연산자

typeof 연산자 typeof는 변수의 데이터 타입을 반환하는 연산자입니다. 문법 typeof variable variable에는 데이터 또는 변수가 들어갑니다. 괄호를 사용해도 됩니다. typeof(variable) 반환되는 값은 다음과 같습니다. undefined : 변수가 정의되지 않거나 값이 없을 때 number : 데이터 타입이 수일 때 string : 데이터 타입이 문자열일 때 boolean : 데이터 타입이 불리언일 때 object : 데이터 타입이 함수, 배열 등 객체일 때 function : 변수의 ...

JavaScript / Object / String.startsWith() / 특정 문자열로 시작하는지 확인하는 메서드

JavaScript / Object / String.startsWith() / 특정 문자열로 시작하는지 확인하는 메서드

.startsWith() .startsWith()는 문자열이 특정 문자열로 시작하는지 확인하는 메서드입니다. IE는 Edge부터 지원합니다. 문법 string.startsWith( searchString, length ) searchString : 검색할 문자열로 필수 요소입니다. 대소문자를 구분합니다. length : 문자열 중 어디까지 검색할지 정합니다. 선택 요소로, 값이 없으면 전체 문자열을 대상으로 합니다. 예제 'abcde'.startsWith( 'a' ) 는 abcde가 a로 시작하는지 검사합니다. a로 시작하므로 true를 반환합니다. 'abcde'.startsWith( 'a', 1 ) bcde가 a로 시작하는지 검사합니다. ...

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 / document.getElementById()

JavaScript / Object / document.getElementById()

.getElementById() .getElementById()는 id의 값으로 특정한 값을 가진 요소를 가져옵니다. 문법 document.getElementById( 'id' ) id에는 가져오려는 요소의 id의 값을 넣습니다. 예를 들어 var jb = document.getElementById( 'xyz' ); 는 id의 값이 xyz인 요소를 가져와서 변수 jb에 저장합니다. 예제 id의 값이 ab인 요소를 가져와서 몇 가지를 출력하는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

JavaScript / window.matchMedia() / CSS 미디어쿼리를 자바스크립트에 사용하는 메소드

JavaScript / window.matchMedia() / CSS 미디어쿼리를 자바스크립트에 사용하는 메소드

window.matchMedia() CSS는 미디어쿼리를 이용해서 접속하는 웹브라우저의 가로 크기에 따라 다른 설정을 할 수 있습니다. 자바스크립트에서도 window.matchMedia()를 이용해서 접속하는 웹브라우저의 가로 크기에 따라 다른 작업을 할 수 있습니다. 반응형 웹디자인을 할 때 유용한 메소드입니다. 문법 window.matchMedia( mediaQueryString ) mediaQueryString : CSS 미디어쿼리를 입력합니다. window는 생략할 수 있습니다. 예를 들어 window.matchMedia( '( min-width: 500px )' ) 는 500px 이상을 뜻합니다. 속성 .media : mediaQueryString을 ...