Dev/JavaScript

자바스크립트 시작하기.

OK-가자 2021. 10. 25. 14:29

자바스트크립트 (JavaScriptBasic)

개요

역사

  • 네스케이프의 라이브 커넥트 라는 서버측 기술에서 연동이 필요한 클라리언트측의 스크립트 언어였던 라이브스크립트에서 부터 시작
  • 네스케이프사 가 SUN사와의 제휴로 이름이 자바스트립트로 변경하고 HTML 보완 언어로 발표(1995년)
  • MS의 독자적 J스크립트 발표등 통일되지 않은 스펙과 호환성 문제 발생
  • 네스케이프사가 1996년 자바스크립트 스펙을 ECMA국제회의에 제출 , 첫 버전 ECMA-262 발표.
  • 지금은 ECMA-262 세 번째 버전이 나와 있으며 이를 기반으로 한 자바 스크립트 1.6이 대부분 브라우저에서 지원되고 있다.

Hello World

[실습1] Hello World


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hello World</title>
<script type="text/javascript"> 
     document.write( "Hello World" ); 
</script> 
</head>
<body>
</body>
</html>
  • document.write( "Hello World" ) 대신 alert( "Hello World" ) 로 바꾸고 브라우저에서 확인 해 보세요.

실행과 특징

  • 브라우저 내에 내장된 자바스크립트 실행엔진 (해석기)를 통해 실행되어지고 브라우저 화면에 반영된다.
  • 객체지향이라기 보다는 객체 기반 스크립트 언어
  • 객체를 생성하느 클래스 개념은 지원하고 있지 않지만 prototype 이라는 객체 생성 지원 개념이 있다.
  • HTML 문서 내에서 자바스크립트 사용하기

자료 004

  • 보통 헤드안에 삽입되어 실행 되나 본문 어디에도 삽입되어 실행될 수 있다

  • HTML 문서 내에서 자바스크립트 사용하기

<html>
<head>
<script type="text/javascript" src="hello.js"></script>
</head>
<body>
... 
</body>
</html>
  • 외부 파일를 불러서 실행할 수 있다 ( 보통 이방식으로 자바스크립트를 실행하고 관리한다 )

[실습2] 실습1를 외부파일에서 불러와 실행 시키는 방식으로 수정하고 확인해 보세요.

기본 문법

변수 와 데이터 타입

기본 데이터 타입

  • Number, String, Boolean
<script type="text/javascript">

var number = 5
var anotherNumber = new Number(5)
var pi = 3.14
var string = "Hello, I'm a string!"
var anotherString = new String( "Hello, I'm a string!" );
var used = false; 


alert( typeof number)
alert( typeof anotherNumber )
alert( typeof pi )
alert( typeof string )
alert( typeof anotherString )
alert( typeof used )

</script>
  • null 과 undefined
<script type="text/javascript">

var myVar, myVar2 = null;
alert( myVar + ", " + myVar2 );
alert( myVar == myVar2 );
alert( myVar === myVar2 );  

</script>

변수 이름 규칙

변수의 이름은 알파벳(대문자 A ~ Z, 소문자 a ~ z), 밑줄(_)이나 달라($)로 시작될 수 있으며, 다음에는 알파벳, 밑줄, 달라 기호에 추가로 숫자(0 ~ 9)까지 사용할 수 있다.

선언없이 대입시에 변수 타입이 결정된다.

<script type="text/javascript">

v = "This is Test";
alert( typeof v );

v = 20;
alert( typeof v );

</script>

변수 범위

<script type="text/javascript">

function func(){
   v1 = "hello javascript";
}

func();
alert( v1 );

</script>

구문

세미콜론을 반드시 구문끝에 붙혀야 하는 것은 아니다.

<script type="text/javascript">

var str = "This is Test"
document.write( str )

</script>

한 줄로 붙혀 쓸 수는 없다.

<script type="text/javascript">
var str = "This is Test" document.write( str )
</script>

엔진이 한줄 씩 일거나 ;(세미콜론) 으로 분리된 구문을 읽어 해석해 나가기때문에 문장사이에는 \n(개행) 이나 ;(세미콜론) 으로 분리

자바와 마찬가지로 Camel 표기법이 기본

<script type="text/javascript">

//// CamelCase is the norm
if(fooBar == bazBat) {}

</script>

객체 속성, 메서드에 접근 할 때에는 . 으로 접근한다.

<script type="text/javascript">
someObject.someMethod();
</script>

주석은 한줄 주석 // , 여러줄 주석 /* */ 모두 가능하다.

조건문

If문, Ifelse, ifelse if 등의 조건문은 다른 언어들과 다르지 않다.

<script type="text/javascript">

var something = false;
if( something ) doSomething();

</script>
<script type="text/javascript">

if(something == foobar) {
   alert("equals foobar!");
} else if(something == bazbat) {
   alert("equals bazbat!");
} else {
   alert("equals neither!");
}

</script>

Switch 문도 사용이 가능하다.

<script type="text/javascript">

switch( something ) {
    case "foobar":
        // if something == "foobar"
        alert( "foobar!" );
        break
    case "barfoo": 
        // if something == "barfoo"
        alert("Barfoo!");
        break
    case "fallthru":
        // without a break, results will cascade
        // the result? [alert] Falling through... 
        //             [alert] fallen through
        alert("Falling through...");
    case "fellthru":
        alert("fallen through.");
        break
    default: 
        // if there is no case "*" match, execute this code
        alert("Case not found... here's a default")
}
</script>

반복문

for, while, do~while 문도 다른 언어들과 틀리지 않다.

<script type="text/javascript">

for(var i = 0; i < 3; i++) {
   document.write( I + "<br>" );
}

</script>

객체

정의 / 생성

정보를 관리하기 위해 의미를 부여하고 분류하는 논리적 단위

클래스의 인스탄스(instance) -> 구체화, 실체화

[실습 5] 객체의 생성

var employee1 = new Object();
employee1.name = "홍길동";
employee1.title = "과장";
employee1.showInfo = function() {
  document.write( "이름 : " + this.name );
  document.write( "<br>" );
  document.write( "직책 : " + this.title ); 
} 


employee1.showInfo();

JSON ( JavaScript Object Notation )

자바스크립트에 객체생성을 위한 표기하는 방법

어떤 객체던지 표기할 수 있고 바로 생성가능

[실습 6 - 1] 객체의 생성

var employee1 = {};
employee1.name = "홍길동";
employee1.title = "과장";
employee1.showInfo = function() {
  document.write( "이름 : " + this.name );
  document.write( "<br>" );
  document.write( "직책 : " + this.title ); 
} 


employee1.showInfo();

[실습 6 - 2] 객체의 생성(JSON)

var employee1 = {
   name: "홍길동",
   title: "과장",
   showInfo: function() {
      document.write( "이름 : " + this.name );
      document.write( "<br>" );
      document.write( "직책 : " + this.title ); 
   }
} 
employee1.showInfo();
alert( employee1.name + " " + employee1.title );

[실습 6 - 3] 객체의 생성(JSON) – 코마 사용에 조심

var foo = {
    name:"bar",
    nick:"buzz"
    aNumber:5,
    doStuff:function() {
        alert( "I'm" + this.name );
    },
}



어디에서 에러가 있는 지 찾고 바르게 수정 해 보세요.

생성자 사용

var Foo = function() {
  this.name = "bar";
  this.nick = "buzz";
  this.aNumber = 5;
  this.doFoo = function() {
    alert( "I'm " + this.name );
  };
}

var foo = new Foo();
foo.doFoo();

prototype 기반의 상속을 통해 객체지향 구현 ( 속성, 함수 공유 )

var Foo = function( name, nick ) {
  this.name = name;
  this.nick = nick;
}

Foo.prototype.aNumber = 5;
Foo.prototype.doFoo = function() {
  alert( "I'm " + this.name );
};

var foo1 = new Foo( "foo1", "nick1" );
foo1.doFoo();

var foo2 = new Foo( "foo2", "nick2" );
foo2.doFoo();

prototype 기반의 상속

자료 005

자료 006

내장 객체 Array

배열생성

  1. var a = new Array(10);
  2. var a = new Array();
  3. var a = new Array( 1, "ABC", true) ;

배열 생성 (리터럴)

var a = [];

length 속성 : 배열의 size을 담고 있눈 속성

배열과 객체의 관계 - 속성 접근시 실습예제와 같이 배열처럼 접근할 수 있다

[ 실습예제 6-8 ]

var employee1 = {
   name: "홍길동",
   title: "과장"
}

alert( employee1["name"] + " " + employee1["title"] );

자료 007

주요함수

주요 함수 예제

var hege = [ "Cecilie", "Lone" ];var stale = [ "Emil", "Tobias", "Linus" ];var children = hege.concat( stale );

console.log( children );
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();

console.log( energy );
var fruits = [ "Banana", "Orange", "Apple", "Mango" ];
fruits.push( "Kiwi" );
console.log( fruits );

console.log( fruits.pop() );
console.log( fruits.pop() );

console.log( fruits );
var fruits = [ "Banana", "Orange", "Apple", "Mango" ];

fruits.reverse();
console.log( fruits );

fruits.shift();
console.log( fruits );

var citrus = fruits.slice(1, 3);
console.log( citrus );

fruits.sort();
console.log( fruits );

내장 객체 String

배열처럼 다룰 수 있다.

[예제 6- 9 ] 문자열을 배열처럼 접근해서 사용하는 예제 입니다. IE에서 잘 작동하는 지 확인해 보고 잘 작동하도록 수정해 보세요.

var str = "Hello, I'm a string!";
console.log( "문자열 길이는 : " + str.length ); 

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

합치기 와 자동 형 변환

[예제 6- 10 ] 문자열 합치기 예와 그 때, 자동 변환되는 경우들을 확인해 보세요.

console.log( "첫 번째 문자열 " + " 두 번째 문자열" ); 

var str = "number " + 5;
console.log( str + " : " + typeof( str ) );

str = 5 + "5";
console.log( str + " : " + typeof( str ) );

[ 예제 6- 11 ] 주요함수 사용 예 1

var str = "string1 string2 string3“

alert( str.length );

var start = str.indexOf( 'string2' );
alert( start ); 
alert( str.substr( start ) );


// 간단히,
alert( str.substr( str.indexOf( 'string2' ) );

// str은 변하지 않는다.
alert( str );

[ 예제 6- 12 ] 주요함수 사용 예 2

var str = "string1 string2 string3“

// 배열로 분리한다.
var a = string.split(' ');


// 배열을 확인하는 코드를 직접 작성해 보세요.

[ 예제 6- 13 ] Escaping HTML, URLs, etc.

//에러
"<h3>Here's a headline!</h3>".escape();

// escape 함수는 전역함수로 제공 
var escaped = escape("<h3>Here's a headline!</h3>");
var unescaped = unescape(escaped);


// URL 엔코딩
var url = "http://mysite.com/?stuff=\"안 대혁!&bar=";
var encodedURL = encodeURI(url);
var decodedURL = decodeURI(encodedURL);

내장 객체 Date

Date객체는 날짜와 시간을 다루는 객체이다.

기본 사용법

 var d = new Date();  // 현재 시간
 document.write( d );

[예제 6-14]

  • 다음 Date객체 생성자를 사용해 Date 객체를 생성하고 document.write 를 이용해 결과를 확인해 보세요.
    1) Date( year, month, day )
    2) Date( yyyy, mm, dd, hh, mi, ss)
    3) Date( milliseconds )

관련함수

자료 008

[ 실습예제 6-15 ] Date 객체 함수 사용


var d = new Date(2013, 0, 28);  //2013 년 1월 28일  
document.write(
  " 년도: " + (d.getYear() + 1900) + "<BR>" + 
  " 월: " + (d.getMonth() + 1) + "<BR>" + 
  " 일은: " + d.getDate() + "<BR>" + 
  " 요일은: " + d.getDay() + "<BR>" + 
  " 시는: " + d.getHours() + "<BR>" + 
  " 분은: " + d.getMinutes() + "<BR>" + 
  " 초는: " + d.getSeconds() + "<BR>" + 
  " 밀리초: " + d.getMilliseconds() + "<HR>" );

d.setYear(2014);  // 2014년 세팅
document.write(d + "<HR>"); 

d.setMonth( 11 ); // 12월 세팅
document.write(d + "<HR>");

내장 객체 Function

함수도 객체로 간주

함수 생성 방식

1) var sum = new Function(  “a”,  “b”,  “return a+ b”  ); 

2) 
     function sum ( a, b ) {
            return a+b;
     }

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

함수 argument

[실습예제 6-16 ] 함수의 argument는 값과 객체뿐만 아니라 함수도 될 수 있음을 다음 예제로 확인해 보세요.

function myFunction( arg1, arg2, arg3 ) {

  // 값
  alert("I have an argument! " + arg1);

  // 객체
  alert(arg2.bar);

  // 함수 
  arg3();
} 

myFunction( "foo", { bar: "baz" }, function(){ alert("Victory!")} );

[실습예제 6-16 ] 함수의 argument로 함수가 넘어 갈 경우 함수의 본문이 길어 질 경우,

var f = function() {
  alert( "victory!" );
}

myFunction( "foo", { bar: "baz" }, f );

[실습예제 6-16 ] 함수의 argument는 함수내부에서 argument객체로 참조할 수 있다.

function myFunction() {

  // 값
  alert("I have an argument! " + arguments[0] );

  // 객체
  alert( arguments[1].bar );

  // 함수 
  arguments[2]();
}

이벤트

HTML DOM은 다음과 같은 javascript 가 이벤트에 반응할 수 있도록 하고 있다.

  • 사용자의 마우스 클릭
  • 웹 페이지의 로딩 완료 되었을 때
  • 이미지가 로딩 되었을 때
  • HTML element에 마우스가 움직이거나 오버되었을 때
  • Input 필드가 변경 되었을 때
  • HTML form 이 submit 될 때
  • 사용자의 key 누름

이벤트에 대한 반응 처리 ( HTML Event Attribute 에 javascript 를 추가한다 )

onclick = JavaScript

[ 실습예제 6 – 17 ]

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>
  • 이벤트를 처리할 수 있는 함수 ( Event Handler )로 처리할 수 있다.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function changetext(id){
      id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>

HTML Element 에 이벤트를 매핑할 때는 이벤트속성(Event Attribute)을 사용

[ 실습예제 6–18 ]

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function displayDate(){
   document.getElementById("demo").innerHTML = Date();
}
</script>
</head>
<body>
<p>버튼을 클릭하면  <em>displayDate()</em> 함수가 실행 됩니다.</p>
<button onclick="displayDate()">Try it</button>
<p id="demo"></p>
</body>
</html>
  1. 마우스 오버 : onmouseover , onclick 반응과 같도록 같은 이벤트 핸들러를 사용합니다.
  2. 마우스 아웃 : onmouseout ,날짜가 사라지게끔 이벤트 핸들러를 새로 추가합니다.

자바스크립트로 특정 Element 이벤트 매핑하기

[ 실습예제 6 – 20 ]

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
document.getElementById("myBtn").onclick = function(){
   displayDate()
};
function displayDate(){
   document.getElementById("demo").innerHTML = Date();
}
</script>
</head>
<body>
<p>버튼을 클릭하면  <em>displayDate()</em> 함수가 실행 됩니다.</p>
<button id="myBtn">Try it</button>
<p id="demo"></p>
</body>
</html>

onload 는 사용자가 특정 페이지에 입장 했을 때 발생한다.

반대로 onunload 가 특정 페이지를 떠나면 발생한다.

onload에서 페이지의 최초작업 초기화 작업을 할 수 있을 것이다.

[ 실습예제 6 – 22 ]

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function checkCookies() {
  if( navigator.cookieEnabled==true ){
     alert("쿠키를 사용할 수 있습니다.")
  } else {
     alert("쿠키를 사용할 수 없습니다.")
  }
}
</script>
</head>
<body onload="checkCookies()">
<p>브라우저에서 쿠키 사용여부를 어떻게 설정했는 지 알수 있습니다.</p>
</body>
</html>

[ 실습예제 6 – 23 ]BrowserDetect 객체를 사용해서 페이지에 방문하는 사용자의 브라우저 종류, 버전 그리고 OS를 알아 내는 코드를 onload 이벤트 핸들러에 추가해 보세요.

[참고]
<javascript type=“text/javascript” src=“browser-detect.js”></script>

onchange 는 Input , select 값이 변하면 발생한다.

[ 실습예제 6 – 24 ]

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function myFunction() {
   var x=document.getElementById("fname");
   x.value=x.value.toUpperCase();
}
</head>
<body>
아이디 입력: <input type="text" id="fname" onchange="myFunction()">
<p>INPUT에 포커스가 없어지면, 이전 값이 변했는 지 판단해서 항상 대문자로 만드는 예제입니다.</p>
</body>
</html>

onmousedown, onmouseup 그리고 onclick

[ 실습예제 6 – 25 ]

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
function mDown( obj ) {
  obj.style.backgroundColor="#1ec5e5";
  obj.innerHTML="버튼을 떼주세요.";
}
function mUp( obj ) {
  obj.style.backgroundColor="#D94A38";
  obj.innerHTML="클릭하세요!";
}
</script>
</head>
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:#D94A38;width:90px;height:20px;padding:40px;">클릭하세요!</div>
</body>
</html> 
[과제]
더  많은  이벤트 예제들은 다음  페이지에서  참고할 수 있습니다.
HTML DOM Events
http://www.w3schools.com/jsref/dom_obj_event.asp
이 문서에서 
Mouse Event,  
Keyboard Event, 
Form Event 
의 예제들을 확인해 보세요

'Dev > JavaScript' 카테고리의 다른 글

jQuery 기초 배우기 (Javascript)  (0) 2021.10.25
줌 클론코딩(WebSockets, SocketIO, WebRTC )  (0) 2021.10.04

'Dev/JavaScript'의 다른글

  • 현재글자바스크립트 시작하기.

관련글

티스토리툴바