자바스크립트 (Javascript)

자바스크립트는 HTML 문서내에 삽입되어 동적인 웹페이지를 구현할 수 있는 스크립트언어이다. 네스케이프社에서 개발하였다.

  • 객체기반의 언어
  • HTML문서내에 기술 HTML 문서와 함꼐 수행
  • 인터프리터 언어로서 클라이언트의 웹 브라우저에 의해 해석되고 실행
  • 개발이 용이하고 결과확인이 쉽다.
  • 독립된 응용프로그램의 형태를 지니지 못하는 스크립트언어이다. (완벽한문법적인구조를가지지못함)
  • 브라우저에 대한 우수한 호환성으로 주로 Client-side에서 프로그래밍하는 스크립트로 사용된다.

특징

장점

  • 프로그래밍 언어와 비교 간단하고 배우기 쉽고, 신속하게 개발가능
  • 웹브라우저의 스크립트 엔진이 직접 해석하여 적은 시스템 부하, 환경에
  • 독립적

단점

  • 소스코드의 노출
  • 디버깅 및 개발도구가 부족

기타

  • 사용자의 입력 값에 대한 유효성 체크 (서버에 데이터를 전송하지 않고 처리)
  • 이벤트 드리븐 방식으로 페이지를 열거나 이동시 원하는 작업수행가능
  • 브라우저 자체에 관한 정보 확인 가능
  • 프레임 조절 윈도우 조절 가능
  • 히스토리 관리 가능

같이보기

정의

HTML안에 삽입 될때는 <script> ~ </script>안에 정의한다.

요즘은 script 태그에 "type=text/javascript" 구문을 넣지 않는데 이는 HTML5부터 표준이 되었기 때문이다.

자바스크립트를 지원하지 않는 브라우져의 경우 내용이 그냥 화면에 표시되므로… <!-- //--> 와 같은 html 주석 코드를 넣는다.

<script> ~ </script>의위치는<head>~</head>태그또는<body>~</body>태그에모두정의가능.

  <script language="javascript"><!--자바스크립트문장들...//--></script>

   <HEAD>정의 <BODY>호출 (실행전 정의되도록 하기 위해 권장)
<html>
<head>
<title>연습</title>
<script language= "javascript">
<!--
……..
//-->
</head>
<body>
….
</body>
</html>

파일

파일을 불러올 때는

 <SCRIPT language="javascript" src="http://chat.vaslor.net/chat.js"></SCRIPT>

<script>의 src 속성을 사용해서 외부 JavaScript 파일을 요구 응답형 JavaScript로 사용하는 것이 좋은 방법이다. XHTML 규칙을 지킴과 동시에 유지보수와 관리에 대한 이점도 살릴 수 있다.

defer & async

기본적으로 웹 브라우저가 외부 자바스크립트를 불러오는 일반 script 태그를 만나게 되면, 우선 해당 스크립트를 내려받아 해석하고 실행(execute)할 때까지 웹 문서의 HTML 코드 parsing 작업을 잠시 뒤로 미룬다. 그래서 용량이 큰 스크립트를 문서 해석 초기에 만나게 되면 해당 페이지를 불러오는 속도마저 지체되는 현상을 일으키게 되어 결국 전체적 성능을 떨어뜨리는 결과를 가져오는데, 이런 성능의 병목 현상을 막기 위해 여러 다양한 꼼수들이 쓰여왔다. 이런 부작용을 근본적으로 막기 위해 소개된 것이 script 태그의 async와 defer 속성이다.

사용 예를 보면 아주 단순하다:

<script async src="myAsyncScript.js" onload="myInit()"></script>
<script defer src="myDeferScript.js" onload="myInit()"></script>

위와 같이 async 혹은 defer 된 스크립트는 문서 parsing 작업의 중단 없이 동시에 내려받게 되며, 선택적으로 onload handler를 지정해서 일반적인 초기화 작업도 진행할 수 있다. 둘의 차이를 결정짓는 중요한 것은 바로 스크립트가 실행되는 시점이 서로 다르다는 것인데, async script는 window의 load event 전 내려받는 즉시 바로 실행되는 데 반해 defer script는 문서의 parsing 작업이 끝난 후 DOMContentLoaded event 전에 문서에 삽입된 순서에 따라 실행된다.

XHTML

인라인 JavaScript 코드는 항상 <script> 태그 안에 기술하게 되며, XHTML 해석기가 <script> 태그를 해석할 때 JavaScript 코드로 인한 오류를 발생시킬 확률이 매우 크다. 이러한 오류를 방지하는 방법은 JavaScript 코드를 CDATA 섹션과 주석으로 묶어버리는 것이다.

<script type="text/javascript">
//<![[CDATA[
  var s = "안녕하라!";
  alert(s);
//]]>
</script>

주석문

  /* 설명 */    :여러줄을주석문을사용할때
  // 설명       : 한줄을주석문으로사용할때
<html>
<head>
<title>연습</title>
<script language= “javascript”>
<!--
// 여기는주석입니다.
/* 여기도주석입니다*/
……..
//-->
</head>
<body>
….
</body>
</html>

자료형

자바스크립트의 자료형은 varient 타입이라고 할 수 있다. 세부적으로는 char, int, double, float, int, long, short, void 등의 타입을 가지고 있지만, 구분없이 선언해도 된다.

var i=10;
var j="문자열";
  1. 변수이름도 대소문자 구별
  2. 만들기만 하면 값은 undefined 가 된다.
  3. 보통은 최상단에 모든 변수를 정의하는 것이 좋다.
  4. comma 를 이용하여 한번에 여러 개의 변수를 정의할 수 있다.
  5. 재정의 한다고 기존 value 가 없어지지 않는다.
  • 사용가능한 문자는 영문자, 각종 유니코드문자(한글포함), 숫자, 일부특수문자 _, $ 이다 (확인기 https://mothereff.in/js-variables)
  • 숫자로 시작할 수 없다. ($나 _로 시작 가능!!!)
  • 공백은 허용되지 않는다.
  • 자바스크립트문법안에서 규정한 예약어(키워드)는 변수로 사용할 수 없다.
Abc(o)
123abc (x)
Total# (x)
Two of (x)
int(x)
Not! (x)
_tot (o)
var _       = function() { alert("hello from _"); }
var \u0024  = function() { alert("hello from $ defined as u0024"); }
var Ø       = function() { alert("hello from Ø"); }
var $$$$$   = function() { alert("hello from $$$$$"); }
<html>
<head><title> </title>
<script language="javascript">
<!--
document.write("Hello~")
//-->
</script>
</head>
<body>
</body>
</html>

자바스크립트의 변수에는 값, 객체 뿐아니라 함수도 할당할 수 있다. 이런 형식은 선언문이 아니라, 일반 수식과 같은 표현식 이므로, 끝에 ; 를 붙여준다.

var add = function (a,b){ return a+b; };

다른 언어같으면 function 다음에 함수 이름이 오겠지만, 변수이름이랑 함수이름이 같으므로, 함수이름은 생략한다.

호출은 그냥 변수 이름으로 한다.

add(10,12);

객체 안에 속성으로 변수를 담을 수 있으므로, 객체 안에 함수를 담을 수도 있다.

var test = {};
test.add = function(a,b){return a+b;};

객체를 만들면서 함수를 정의할 수도 있다.

var test = {
    add: function(a,b){return a+b;}
};

문자열

  1. "" 또는 '' 로 정의된다.
  2. escape chars 는 \ 를 이용한다.
  3. string은 array처럼 string[ position ] 으로 한 char에 접근 가능하다.

함수

function add(a,b)
{
   // do …
  return a+b;
}
  1. var 를 이용한 정의는 LOCAL이 되며, 해당 function 에서만 접근 가능하다.
  2. function 밖에서 정의된 녀석은 GLOBAL이 된다. 스크립트 어디서든 접근할 수 있다.
  3. 만약 변수정의를 하지 않은 변수에 바로 값을 대입하면 자동으로 GLOBAL로 인식된다. ( function 안에서 수행되도 말이다. )

배열

array 정의 및 값 설정은 다음과 같은 세 가지 방법이 있다.

var cars = new Array(); 
  cars[0] = "Volvo"; 
  cars[1] = "BMW";
  
var cars = new Array("Volvo", "BMW" );
var cars = ["Volvo", "BMW"];

배열안의 요소는 대괄호 []를 이용해서 접근한다.

배열의 요소는 변수, 객체, 함수 등이 될 수 있다. 배열에 함수를 넣고 실행하는 것은 다른 언어에서는 볼 수 없는 특성이다.

var car[2]=function(a,b) { return a+b;};
console.log( car[2](10,11) );

배열의 요소에 하나씩 접근하는 방법은 for 반복문을 사용하면 된다.

for (var i=0; i< cars.length; i++) { 
    console.log( car[i] );
}

forEach 메소드를 사용할 수도 있다. 메소드 이므로, 파라메터로 작동할 함수를 전달한다. 다른 언어와 약간 차이가 있다.

cars.forEach( function(item,index) { 
	console.log( item );
    }
)

index는 각 요소의 인덱스 값이다.

배열의 메소드

push() 끝에 추가
pop() 맨끝의 요소 삭제
unshift() 앞에 추가
shift() 맨앞의 요소 삭제
splice() 배열의 요소 삭제, 추가
slice() 배열의 일부 요소를 복제

배열의 중간에 있는 요소를 지우려면 delete 키워드를 사용한다. (메소드 아님)

delete cars[1];

이 경우 요소는 삭제되지만, 공간은 그대로 있기 때문에 undefined 요소가 생기고, 배열의 길이도 그대로이다. 아예 공간까지 없애버리는 splice() 메소드를 사용하면 된다.

cars.splice(1,2); // 인덱스1번 요소와 그 다음 요소를 삭제한다
car.splice(1,0,"현대"); // 1번 자리에 추가

객체

프로그래밍에 있어 모든 사물을 객체라 하고 고유의 속성과 메소드를 가지고 있다. 자바스크립트는 OOP가 아닌 객체기반(Object Based Program)이다. 자바스크립트는 객체기반언어이므로 자바처럼 클래스 선언이나 상속등은 지원하지 않는다. 자바스크립트의 객체는 한정된 수준에서 지원되고, 주로 정의되어 있는 개체를 사용한다.

  • 사용자 정의 객체-사용자가 직접 객체를 정의, 생성한 후 사용
  • 내장 객체-이미 정의되어 있고, 필요할때 생성하여 사용(String,Date)
  • 브라우저 객체-브라우저의 내장객체로 브라우저 수행시 생성된다

객체(object) 는 중괄호 { } 를 이용해 만들 수 있다. 객체 안의 key/value pair 는 name:value 로 표기되고, comma 로 구분된다. 속성은 점(.) 연산자와 속성의 이름을 이용해 접근 할 수도 있고, 대괄호와 속성의 의름을 이용해서 접근할 수 있다.

  1. JS 안의 대부분은 Object 이다. String, Number, Array, Function 등등..
  2. 추가적으로 custom object 를 만들 수도 있다.

다음의 2가지 방법으로 만들 수 있다.

  1. 정의하고 만들기.
  2. function 을 이용해서 정의하기.
person = new Object();
person = {firstname:"John"};  
person.firstname = "John";
person['address']="Korea";
function person( firstname )
{
   this.firstname = firstname;
}

오브젝트에 메소드 추가

function person(firstname)
{this.changeName = changeName;
   function changeName(name)
   {
      this.lastname = name;
   }
}

내장객체

자바스크립트 내장 객체는 Date Array String Math Boolean Number등이고 미리 정의가 되어 있다. 즉 사용자가 많이 사용하는 기능을 자바스크립트에 미리 내장시켰다는 것이다.

Date

날짜와 시간을 다루는 객체로 현재 날짜시간을 알 수 있고, 시간을 설정하고 계산할 수 있다. 주요 메소드는 날짜를 설정(set),구하기(get),변환(conversion)이 있다.

  • getYear()시스템의 연도를 알아냄
  • setYear 연도 설정
  • GetMonth() 월을 알아냄
  • setMonth 월을 설정
  • getDate() 일을 알아냄
  • setDate 일을 설정
  • getDay() 요일을 알아냄 0(일)-6(토)
  • set Day 요일을 설정
  • GetHours() 현재시각중 시를 알아냄
  • set Hours 시각중 시를 설정
  • GetMinutes() 현재시각중 분를 알아냄
  • setMinutes 시각중 분를 설정
  • getSeconds() 현재시각중 초를 알아냄
  • setSeconds 시각중 초를 설정
<SCRIPT LANGUAGE="JavaScript">
	today = new Date()
	str = "오늘 날짜는 " + today.getYear() + "년 "
	str += (today.getMonth()+1) + "월 "
	str += today.getDate() + "일입니다. <br>"
	document.write(str)
	str = "현재 시간은 " + today.getHours() + "시 "
	str += (today.getMinutes()+1) + "분 "
	str += today.getSeconds() + "초입니다. <br>"
	document.write(str)
</SCRIPT>

string

일반적으로 자바스크립트에서 사용하는 문자열을 가르킨다.

  • charAt(index) 지정된 위치에서 문자 찾기
  • indexOf(string) 지정된 문자의 위치 찾기(왼쪽부터 검색)
  • lastIndexOf(string) 지정된 문자의 위치 찾기(오른쪽부터 검색)
  • Substring(index1,index2) 지정된 위치에 있는 문자여 추출
  • toLowerCase() 소문자로 만들기
  • toUpperCase() 대문자로 만들기
<SCRIPT LANGUAGE="JavaScript">
	var msg1, msg2
	msg1 = "HappyBirthdayToYou"
	msg2 = "생일축하합니다"
	document.write(msg1.length, "<br>")
	document.write(msg2.length, "<br>")
	document.write(msg1.charAt(3), "<br>")
	document.write(msg2.charAt(5), "<br>")
	document.write(msg1.indexOf("y"), "<br>")
	document.write(msg2.indexOf("합"), "<br>")
	document.write(msg2.indexOf("꼭"), "<br>")
	document.write(msg1.substring(2,9),"<br>")
	document.write(msg2.substring(3,7),"<br>")
</SCRIPT>

Array

자바스크립트에서 배열을 사용하기 위한 객체

  • join([str]) 배열을 하나의 문자열로 만들기
  • sort(function) 배열의 값들을 정렬시키기
  • revers() 배열에 들어간 값들의 순서를 정반대로 바꾸기
<SCRIPT LANGUAGE="JavaScript">
	objects = new Array(3)
	objects[0] = "yellow"
	objects[1] = "blue"
	objects[2] = "white"
 
	document.write(objects.join("/")+"<br>")
	document.write(objects.reverse().join("/")+"<br>")
	document.write(objects.sort().join("/")+"<br>")
</SCRIPT>

연산자

== is equal to==
=== is exactly equal to ( value and type )===
!= is not equal
!== is not equal ( neither value or type )

조건문

if statement
if…else statement
if…else if…else statement
switch statement
switch(n)
{
case 1:
  execute code block 1
  break;
case 2:
  execute code block 2
  break;
default:
  code to be executed if n is different from case 1 and 2
}

반복문

for( variables in object ){
   // do sth...
} 

기타

  1. JS 는 순차적 실행된다.
  2. 대소문자를 구별한다.

줄바꿈

text string 인 경우 \ 를 이용해서 code line을 구분할 수 있다.

document.write("Hello \
World!");

prompt

확인

confirm( "text" );
var result = confirm("OK?");
  if (result === true )
  {
    // do sth…
  }
  else
  {
   // do sth…
  }

알림

 prompt("text", "default value");
<button onclick="myFunctionvar name= prompt("what your name?", "input name");
   if ( name != null && name != "" )
   {
      alert( "Hello" + name + "!!" );
   }
<button onclick="myFunction()">New page</button>
<script>
function myFunction()
{
var page=prompt("새로 만들 페이지이름이나 수정할 페이지이름을 입력하세요","연습장");
if (page!=null)
  {
  window.location.href = "http://vaslor.net/wiki/"+page+"?do=edit";
  }
}
</script>

이벤트

이벤트 종류.

  1. HTML element 클릭
  2. 페이지 로딩 끝
  3. 이미지 로딩 끝
  4. 마우스 커서 움직이기
  5. input field 들어가기
  6. form submit 하기
  7. keystroke
Abort이미지를 읽다가 중단시켰을 때OnAbort
Blur윈도우, 폼의요소, 프레임이 포커스를 읽었을 때OnBlur
Click폼 요소나 링크를 클릭했을 대OnClick
ChangeText, textarea, select등의 값이 변경되었을 때OnChange
Dragdrop브라우져 윈도우에 객체를 Dragdrop 했을때OnDragDrop
Focus포커스를 얻었을 때OnFocus
Load웹페이지의 로딩을 마쳤을 때OnLoad
Keydown사용자가 키를 눌렀을 때OnKeyDown
Keypress사용자가 키를 누르고 있는 동안OnKeyPress
KeyUp사용자가 누른 키를 놓는 순간OnKeyUp
MouseDown사용자가 마우스를 누르는 순간OnMouseDown
MouseMove사용자가 마우스를 움직일 때마다OnMouseMove
MouseOut마우스가 특정영역에 있다가 나갔을 때OnMouseOut
MouseOver마우스가 특정영역에 위에 위치할 때OnMouseOver
MouseUp사용자가 마우스 버튼을 놓는순간OnMouseUp
Move새로운 윈도우나 프레임의 위치가 옮겨질 때OnMove
SelectText나 textarea의 일부가 선택되었을 때OnSelect
Submit전송버튼을 클릭하여 전송할 때OnSubmit
Unload브라우저 종료 또는 웹 페이지에서 벗어날 때OnUnload
Error문서나 이미지를 읽다가 오류가 발생했을 때OnError
Reset입력양식을 reset 시켰을때OnReset
Resize윈도우의 크기가 변경되었을 때OnResize

이외에도 더 있다. 참조

이벤트 핸들러는 HTML 태그의 속성으로 사용된다.

<body onLoad="alert('어서오세요')">
<input type=”button” value=”확인” onClick="alert('어서오세요')">
document.onClick = "alert('어서오세요')"	

에러처리

try
  { 
  if(x>10)
    {
    throw "Err1";
    }
  else if(x<5)
    {
    throw "Err2";
    }
  else if(isNaN(x))
    {
    throw "Err3";
    }
  }
catch(err)
  {
  if(err=="Err1")
    {
    document.write("Error! The value is too high.");
    }
  if(err=="Err2")
    {
    document.write("Error! The value is too low.");
    }
  if(err=="Err3")
    {
    document.write("Error! The value is not a number.");
    }
  }

예제

역링크