@ 자바스크립트
-> 기존 HTML은 똑똑하지 못한 언어
-> 혼자서 스스로 계산도 못하고, 누군가가 form(폼)을 정확하게
채웠는지도 알 수 없고 (HTML4 일경우)
클라이언트의 행동에 따른 결정을 내릴수도 없음
-> 자바스크립트는 웹 페이지가 지능적으로 반응할 수 있도록 함
-> 자바스크립트를 사용해서 방문객이 필수 정보를 빠뜨렸는지도 알려
줄 수 있어서 똑똑한 웹을 만들 수 있음
- 사실 2000년 초반에는 자바스크립트는 개발자들에게 무시 당하는
언어 였음 (기능도 별로 없고, 성능도 좋지 못했음)
- 최근 몇년사이에 다양한 자바스크립트 프레임 워크와 라이브러리 가 다양하게 생기면서 크게 확장되고 엄청난 발전을 하였음
- 현재에는 웹에서는 자바스크립트가 절대적으로 빠져서는
안되는 언어로 자리 잡고 있음
(몇몇 기업에서는 커스텀 자바스크립트 등 다양한 자바스크립트를
이용한 기법들이 생겨나고 있음)
웹페이지의 구조는 HTML 꾸미는건 CSS 웹페이지 꾸민다음 뭔가 액션같은거 넣는건 자바스크립트
@ 자바스크립트 선언
-> <SCRIPT> </SCRIPT> 태그를 이용하여 선언함
- <script> ~ </script> 사이가 자바스크립트 작성 영역임
-> 시작시 type 값을 통해 브라우저에 자바스크립트 라는것을 알려줌
- default 값이 자바스크립트로 되어 있기 때문에
생략 가능함
ex)
<script type="text/javascript">
alert("자바스크립트 입니다.");
</script>
혹은
<script> // type은 생략이 가능함
alert("자바스크립트 입니다.");
</script>
※ 자바스크립트는 html 태그 영역 밖에 작성이 가능하나
웹 표준과 웹 접근성을 고려하여
일반적으로 <head>나 <body>에 작성함
@ 자바스크립트 작성 방식
1. inline 방식 - 고전방식
- html 파일안에 자바스크립트가 있는 방식
- html 코드내의 자바스크립트 코드가 작성되어 있어
html 코드와 자바스크립트 코드가 섞여 있는 방식
2. internal 방식
- html 파일안에 자바스크립트가 있는 방식
- inline 방식과는 다르게 html 코드내의 자바스크립트
코드가 있지 않음 (분리 되어 있음)
3. external 방식
- 자바스크립트의 양이 많은 경우 자바스크립트 코드 부분을
외부 파일로 저장하여 작성하는 방식
- <script src="경로"> </script> 태그를 이용하여 내용을
호출하여 사용함
## inline 방식 ##
-> html 코드와 자바스크립트 코드가 섞여 있는 방식
ex) inline 방식
<script>
function helloBtn(){
alert("안녕");
}
</script>
<button onclick="javascript:alert('Hello')">클릭</button>
<button onclick="helloBtn();">클릭2</button>
## internal 방식 ##
-> 자바스크립트 코드를 html코드 내부에 작성하지만
html코드와 분리되어 있는 방식
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
alert("Hello World");/*문자열을 띄어주는 역할이다.*/
console.log("Hello World");/*뜨는건 없지만 f12누르면 뜬다.*/
</script>
<script>
function helloBtn(){
alert("안녕");
}
</script>
1. inline 방식(HTML코드안에 자바스크립트가들어가있다.)
<button onclick="javascript:alert('Hello')">클릭</button>
<button onclick='helloBtn();'>클릭2</button>
<br>
2. internal 방식
<script>
window.onload = function(){
/*이 문서에서 값을 찾을 것이다. 흔히 아는 태그라고 생각 하면된다.*/
document.getElementById("Btni").onclick=function(){
alert("Hello");
}
}
</script>
<button id="Btni">클릭</button>
<br/>
<script src="../JS/JS1.js">
</script>
3. external 방식
<button id="Btn11">클릭</button>
</body>
</html>
