<p><span data-ke-size="size18"><b><span style="color: #000000;">1. 자바스크립트</span></b></span></p><p> </p><p> </p><p><span style="color: #000000;">자바스크립트는 프론트엔드 개발 언어이며 웹 문서에 동작을 부여하는 </span><span style="color: #ff0010;">인터프리터 방식의 객체지향 프로그래밍 언어</span><span style="color: #000000;">이다.</span></p><p> </p><p><span style="color: #000000;">초기의 웹은 변화되지 않는 정적인 글자와 그림들로만 꾸며졌으며 웹 문서를 하이퍼링크로 연결한 하나의 거대한 책에 불과했는데 </span><span style="color: #ff0000;">자바스크립트가 나오면서부터 웹 문서의 내용을 동적으로 바꾸거나 사용자가 마우스를 클릭하는 것과 같은 이벤트를 처리할 수 있게 되었다.</span></p><p> </p><p><span style="color: #000000;">※ 인터프리터 방식</span></p><p><span style="color: #000000;">: 웹 브라우저에 내장되어 있는 자바스크립트 파서가 소스코드를 한 줄씩 읽고 해석.</span></p><p><span style="color: #000000;">: 전체를 해석해 놓은 컴파일 언어와는 차이가 있음</span></p><p> </p><p> </p><hr data-ke-style="style3"><p> </p><p> </p><p><span data-ke-size="size18"><b><span style="color: #000000;">2. 자바스크립트 역사</span></b></span></p><p> </p><p> </p><p><span style="color: #000000;">자바스크립트는 넷스케이프에서 근무하던 브랜든 아이크(Brendan Eich)에 의해 모카라는 이름으로 만들어졌다. 모카는 곧 라이브 스크립트라는 이름으로 개발되었고 이후 넷스케이프가 JAVA로 유명한 썬 마이크로시스템즈(현재 오라클과 합병)와 함께 자바스크립트라는 이름을 붙이고 발전하기 시작한다.</span></p><p> </p><p><span style="color: #000000;">※ 이듬해에 마이크로소프트도 자바스크립트와 유사한 JScript를 개발하여 인터넷 익스플로러 3.0에 포함해 출시하는 등 여러 개발 회사가 각자 다른 이름으로 스크립트 언어를 개발하였다.</span></p><p><span style="color: #000000;">이에 유럽 컴퓨터 제조 협회(ECMA, European Computer Manufacturers Association)는 자바스크립트를 ECMAScript라는 이름으로 표준화 하였다. 따라서 </span><span style="color: #ff0000;">자바스크립트의 공식 명칭은 ECMAScript</span><span style="color: #000000;">이다. </span><span style="color: #ff0000;">하지만 자바스크립트라는 용어를 더 오래 사용해 왔으므로 ECMAScript 보다는 자바스크립트라는 용어를 더 많이 사용</span><span style="color: #000000;">하는 것이다.</span></p><p> </p><p> </p><hr data-ke-style="style3"><p> </p><p> </p><p><span data-ke-size="size18"><b><span style="color: #000000;">3. 자바스크립트 시작하기</span></b></span></p><p> </p><p> </p><p><span style="color: #000000;">자바스크립트를 사용하려면 기본 페이지의 head 태그 사이에 script 태그를 삽입한다. 이 script 태그 사이에 자바스크립트 코드를 입력한다.</span></p><p> </p><p><span style="color: #000000;">- XHTML1.0 이전 : <script type="text/javascript"></script> <br>- HTML5 : <script></script></span></p><p> </p><p> </p><p><span style="color: #006dd7;"><b>3-1. 요소의 속성으로 사용되는 경우</b></span></p><p> </p><p><span style="color: #000000;">시작 태그에 on이벤트 속성을 이용하여 직접 자바스크립트 코드 작성</span></p><div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 100%; height: 36px;" border="1"><tbody><tr style="height: 18px;"><td style="width: 100%; height: 18px;"><img src="" xxonMouseOver="mouseover_img()" xxonMouseOut="mouseout_img()"></td></tr></tbody></table></div><p> </p><p> </p><p><span style="color: #006dd7;"><b>3-2. 자바스크립트 코드를 html파일 내 <head>나 <body>안에 작성</b></span></p><div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 100%;" border="1"><tbody><tr><td style="width: 100%;"><!doctype html> <br><html> <br>  <head> <br>  <meta charset="UTF-8"> <br>  <title></title> <br>  <span style="color: #ffc1c8;"><script><br><br>  </script></span> <br></head> <br><body><br><br>  <span style="color: #ffc1c8;"><script><br><br>  </script></span> <br></body> <br></html></td></tr></tbody></table></div><p> </p><p><span style="color: #000000;">※ <script></script>는 <head>, <body> 안 어느 영역에나 작성 가능. 특히 <html>태그 영역 밖에서 작성도 가능하지만 웹 표준과 웹 접근성을 고려해 <head>나 <body>안에 작성하도록 한다.</span></p><p> </p><p><span style="color: #000000;">※ HTML 페이지의 각 태그는 웹 브라우저에 의해 순차적으로 실행된다. 즉, 웹 브라우저는 head 태그를 먼저 읽은 후 body 태그를 읽어 들이기 때문에</span></p><p><span style="color: #000000;">- script 태그를 head 태그에 넣으면, body 태그를 읽기 전에 실행된다.</span></p><p><span style="color: #000000;">- script 태그를 body 태그 안에 넣으면, head 태그를 실행한 이후에 실행된다.</span></p><p> </p><p> </p><p><span style="color: #006dd7;"><b>3-3. 자바스크립트 코드를 외부 파일로 사용하는 경우</b></span></p><div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 100%;" border="1"><tbody><tr><td style="width: 100%;"><!doctype html> <br><html> <br>  <head> <br>  <meta charset="UTF-8"> <br>  <title></title> <br>  <script src="호출할 자바스크립트 파일명.js"></script> <br></head> <br><body><br><br>  <script src="호출할 자바스크립트 파일명.js"></script><br></body> <br></html></td></tr></tbody></table></div><p><span style="color: #000000;"><span style="color: #000000;"> </span><span style="color: #ff0000;">※ 외부 파일 자바스크립트의 확장자는 *.js 이다.</span></span></p><p> </p><p> </p><hr data-ke-style="style3"><p> </p><p> </p><p><span style="color: #000000;"><b>4. 자바스크립트 기본 지식</b></span></p><p> </p><p><span style="color: #0078cb;"><b>4-1. 문장</b></span></p><p><span style="color: #000000;">자바스크립트에서 문장은 하나의 명령을 나타내기 위한 기본적인 프로그래밍 단위이다. </span><span style="color: #ff0000;">문장 끝에는 세미콜론을 찍어 문장의 종결을 알려준다.</span></p><div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 100%;" border="1"><tbody><tr><td style="width: 100%;">var txt = 'Hello'; <br>alert(‎'Hello JavaScript');</td></tr></tbody></table></div><p> </p><p><span style="color: #006dd7;"><b>4-2. 주석</b></span></p><div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 100%;" border="1"><tbody><tr><td style="width: 100%;">// 한 줄 주석 <br>/* 여러 줄 주석 */</td></tr></tbody></table></div><p> </p><hr data-ke-style="style3"><p> </p><p> </p><p><span style="color: #000000;"><b>5. 코드 입력 시 주의 사항</b></span></p><p> </p><p><span style="color: #006dd7;"><b>5-1. 대,소문자를 구분하여 작성한다.</b></span></p><div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 100%;" border="1"><tbody><tr><td style="width: 100%;">날짜 객체 생성 : New date(); ---> (x) <br>날짜 객체 생성 : new Date(); ---> (o)</td></tr></tbody></table></div><p> </p><p><span style="color: #006dd7;"><b>5-2. 코드를 작성할 때는 한 줄에 한 문장만 작성하는 것이 가독하기에 좋다.</b></span></p><p> </p><p><span style="color: #006dd7;"><b>5-3. 코드를 작성할 때는 중괄호{ }와 소괄호( )의 짝이 맞아야 한다.</b></span></p><div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 100%; height: 18px;" border="1"><tbody><tr style="height: 18px;"><td style="width: 100%; height: 18px;">function a(){ <br>     document.write(); <br>}</td></tr></tbody></table></div><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<!-- -->
