JavaScript (자바스크립트) 란 ?
요새 AngularJs , NodeJs 등 공부를 하면서 JavaScript를 외면하였지만 결국은 자바스크립트를 기본부터 다시 봐야겠다는
생각이 들었다. 그래서 자바스크립트가 무엇인지에 대해 먼저 살펴보도록 하겠다.
JavaScript는 Netscape communication 의 이해 개발된 브라우저 전용 스크립트 언어이다.
현재에 이르기까지 JavaScript 는 초기부터 많은 발전이 되어왔는데
초기에는 지나친 스크립트 코드 남용으로 사람들 에게 안좋은 인식이 생겼으나
Ajax (Asynchronous JavaScript and XML) 가 생겨나고 국제적인 표준화 단체인 ECMA 에 의해 표준화 작업이 이루어짐에 따라
현재에 있어서는 웹개발자 라면 기본적으로 알아야하는 필수기술 이 되었다.
위의 JavaScript는 스크립트 언어라고 하였는데
스크립트언어는 컴퓨터 프로그래밍 언어로 기존의 Java , C 와 같은 컴파일언어 가 아닌 인터프린터 언어이다.
인터프린터 언어는 소스코드 작성 및 수정 시 바로바로 컴퓨터가 해석해서 실행시킬수 있는 언어를 말하며
컴파일과 같은 별도의 절차없이도 바로바로 자신이 작성한 프로그램을 확인할 수 있다는 장점이 있다.
JavaScript 표기방법
JavaScript 는 표기방법은 선언문의 위치 또는 외부의 .js 파일을 불러서 사용할것인지 .html 파일 내부에 사용할것인지 에 따라 구분된다.
1) <Body> 태그 내의 임의의 장소
> 스크립트 내용을 직접 문서에 출력 하기 위해 사용한다.
<body>
Hello
<script>document.write("world")</script> //현재위치에 문자열출력
!!
</body>
결과 : Hello world !!
2) </Body> 태그 직전
> HTML 요소를 먼저 로드하고 스크립트를 수행하기 위해 사용한다.
<body>
<script>
var el = document.getElementById("head");
alert(el.innerHTML) //null
</script>
Hello
<script>
var el = document.getElementById("head");
alert(el.innerHTML) //Hello
</script>
</body>
결과: 위에 코드를 보면 id 가 head 인 요소 안의 내용을 출력하도록 되어있다.
그런데 출력문에 2군데 있는데 하나밖에 출력되지 않는다.
그 이유는 상단의 script는 HTML 요소가 로드 되기전 내용을 출력하려 하였기때문에 null 이며
하단의 script 는 정상적으로 출력되기 때문이다.
3) <head> 태그내부
> 미리 함수를 지정하여 <Body> 태그 내부에서 호출하려면 <Body> 태그가 로드 되기전에 기술되어있어야 한다.
<!DOCTYPE HTML>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<title></title>
<script>
function plus(num1,num2){
alert(num1+num2);
}
</script>
</head>
<body>
1+1 = ?
</br>
<button onclick="plus(1,1)">click</button> //자바스크립트 함수 호출
</body>
</html>
결과 : 2
4) 외부에서 js 파일 호출
> 정보와 제어를 분리하여 사용할수있으며 다른 HTML 에서도 호출할 수 있기 때문에 재사용성이 증가한다.
test.html
<!DOCTYPE HTML>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<title></title>
<script src="test.js"></script> //외부파일에있는 js 호출
</head>
<body>
<button onclick="test('abc')">click</button>
</body>
</html>
test.js
function test(str){
alert(str);
}
결과 : abc
'개발 > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 변수의 이해와 사용 (0) | 2017.11.14 |
|---|---|
| [JavaScript] addEventListener() , 이벤트리스너 등록 (0) | 2017.06.12 |
| [JavaScript] querySelector() , querySelectorAll() 자바스크립트 요소접근 (0) | 2017.06.08 |
| [JavaScript] getElementsByClassName() 함수 , 자바스크립트 클래스명 접근 (2) | 2017.06.08 |
| [JavaScript] getElementsByTagName() 함수 , 자바스크립트 태그명 접근 (0) | 2017.06.08 |
