[Web] JavaScript (Day16~17)

위 글은 해당 카테고리의 수업 강의 자료를 정리한 것입니다.

HTML/CSS는 생략...

1. 개요 (실행과 특징)

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

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

<html>
<body>
...
<script type="text/javascript">
자바스크립트 소스코드
</script>
...
</body>
</html

<html>
<head>
<script type="text/javascript">
자바스크립트 소스코드
</script> 
</head> 
<body> 
... 
</body> 
</html>

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

<html>
<head>
<script type="text/javascript" src="hello.js"></script> 
</head>
<body>
...
</body>
</html>

외부 파일을 불러서 실행할 수 있음 (보통 이런 방식으로 자바스크립트를 실행하고 관리함)

2. 기본 문법

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>

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

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>

변수 범위
- v1 앞에 var를 붙이게 되면? 지역변수가 됨
- var와 함께 변수에 값을 대입하는 것이 좋음

<script type="text/javascript">
function func(){
   v1 = "hello javascript";
}

func();
alert( v1 );
</script>

2.2 구문

세미콜론을 반드시 구분 끝에 붙여야 하는 것은 아님

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

한 줄로 붙여 쓸 수는 없음
- 엔진이 한줄 씩 읽거나 ;으로 분리된 구문을 읽어 해석해 나가기 때문에 문장 사시에는 \n (개행)이나 ;으로 분리

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

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

<script type="text/javascript">
//// CamelCase is the norm
if(fooBar == bazBat) {}
</script>

객체 속성, 메소드에 접근할 때에는 .으로 접근함

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

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

2.3. 조건문

if, if~else, if~else if, switch, for, while, do~while 모두 사용 가능하며 다른 언어들과 다르지 않음

<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>


<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] Falling 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>


<script type="text/javascript">
for(var i = 0; i < 3; i++) {
   document.write( i + "<br>" );
} 
</script>

3. 객체 (정의/생성)

정보를 관리하기 위해 의미를 부여하고 분류하는 논리적 단위
클래스의 인스턴스(instance) ➡️ 구체화, 실체화
객체는 속성(attribute)과 함수(Function)을 가지고 있음

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)
- 자바스크립트에 객체 생성을 위한 표기하는 방법
- 어떤 객체든지 표기할 수 있고 바로 생성 가능

EX. 객체의 생성

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

EX. 객체의 생성 (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 );

EX. 객체의 생성 (JSON): 콤마 사용에 조심해야 함

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

생성자 사용

var Foo = function() {
  this.name = "bar";
  this.nick = "buzz";
  this.aNumber = 5;
  this.doFoo = function() {
        alert( "I'm " + this.name ); 
  };
};
var obj1 = new Foo();
obj1.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();

내장 객체 Array
- 배열 생성
  - var a = new Array(10);
  - var a = new Array();
  - var a = new Array(1, "ABC", true);
- 배열 생성 (리터럴)
  - var a = [];
- length 속성
  - 배열의 size를 담고 있는 속성
- 배열과 객체의 관계
  - 속성 접근시 아래 코드와 같이 배열처럼 접근할 수 있음

var employee1 = {
    name: "홍길동",
    title: "과장" 
}
alert( employee1["name"] + " " + employee1["title"] );

주요 함수 예시

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
- String은 배열처럼 다룰 수 있음
- 합치기와 자동 형변환 가능

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

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

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

주요 함수 예시

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 );

 var str = "string1 string2 string3"
 
// 배열로 분리한다.
var a = str.split(' ');

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
- 날짜와 시간을 다루는 객체

기본 사용법

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

관련 함수

EX. 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
- 함수도 객체로 간주
- 함수 생성 방식
  - var sum = new Function("a", "b", "return a+b");
  - function sum(a, b){.return a+b; }
  - var sum = function(a,b){ return a+b; }
- 함수 argument
  - 함수의 argument는 값과 객체 뿐만 아니라 함수도 될 수 있음
  - 함수의 argument로 함수가 넘어갈 경우 함수의 본문이 길어질 때 사용할 수 있음
  - 함수의 argument는 함수 내부에서 arguments 객체로 참조할 수 있음

예시1: 함수의 argument는 값과 객체 뿐만 아니라 함수도 될 수 있음

function myFunction( arg1, arg2, arg3 ) {
     // 값
     alert("I have an argument! " + arg1);
     
     // 객체 
     alert(arg2.bar);
     
     // 함수
     arg3(); 
}

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

예시2: 함수의 argument로 함수가 넘어갈 경우 함수의 본문이 길어질 때 사용할 수 있음

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

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

예시3: 함수의 argument는 함수 내부에서 arguments 객체로 참조할 수 있음

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

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

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

4. 이벤트

HTML DOM은 자바스크립트가 이벤트에 반응할 수 있도록 해줌
- 사용자의 마우스 클릭
- 웹 페이지의 로딩 완료 되었을 때
- 이미지가 로딩 되었을 때
- HTML element에 마우스가 움직이거나 오버되었을 때
- Input 필드가 변경 되었을 때
- HTML form이 submit 될 때
- 사용자의 key가 눌러질 때
이벤트에 대한 반응 처리: HTML Event Attribute에 자바스크립트를 추가한다
- onclick = JavaScript

예시1: 이벤트를 처리할 수 있는 함수 (Event Handler)로 처리할 수 있음

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1> </body>
</html>

<!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)을 사용

 <!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 반응과 같도록 같은 이벤트 핸들러를 사용함
마우스 아웃: onmouseout
- 날짜(예시)가 사라지게끔 이벤트 핸들러를 새로 추가할 수 있음

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

<!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>

이벤트 속성 예시 2

onload
- 사용자가 특정 페이지에 입장했을 때 발생
- 페이지의 최초 작업 초기화 작업을 할 수 있을 것
onunload
- 특정 페이지를 떠나면 발생

예시

<!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>

BrowserDetect 객체를 사용해서 페이지에 방문하는 사용자의 브라우저 종류, 버전 그리고 OS를 알아 내는 코드를 onload 이벤트 핸들러에 추가하기

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="browser-detect.js"></script>
<script type="text/javascript">
function checkClient() {
   BrowserDetect.init();
   //alert( BrowserDetect.OS);
   document.getElementById("os").innerHTML = BrowserDetect.OS;
   document.getElementById("browser").innerHTML = BrowserDetect.browser;
   document.getElementById("version").innerHTML = BrowserDetect.version;
}
</script>
</head>
<body onload="checkClient()">
<p>시스템 정보</p>
<p id="os"></p>
<p id="browser"></p>
<p id="version"></p>
</body>
</html>

이벤트 속성 예시 3

onchange: Input, select 값이 변하면 발생
onmousedown, onmouseup, onclick 등 다양한 이벤트 속성이 있음

예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function myFunction() {
   var x = document.getElementById( "fname" );
   x.value=x.value.toUpperCase();
}

function selectChanged(){
	alert("!");
}

</script>
</head>
<body>
<select onchange="selectChanged()">
	<option>value1</option>
	<option>value2</option>
	<option>value3</option>
	<option>value4</option>
	<option>value5</option>
</select>
<br>
아이디 입력: <input type="text" id="fname" onchange="myFunction()">

<p>
	INPUT에 포커스가 없어지면, 이전 값이 변했는 지 판단해서 항상 대문자로 만드는 예제입니다.
</p>

</body>
</html>

입력창: 마우스가 떠나거나 입력창에서 tab 또는 엔터를 눌러야 실행됨

<!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>

'강의 > KOSTA' 카테고리의 다른 글

[JSP/Servlet] Introduction to Web Development (Day20) (0)	2022.03.31
[Linux] Linux Introduction and Installation (Day17) (0)	2022.03.29
[Web] Web programming outline (Day15) (0)	2022.03.27
[Oracle] JDBC , DAO (Day13~14) (0)	2022.03.23
[Oracle] DCL / DDL / DML (Day12) (0)	2022.03.21

'강의 > KOSTA' 카테고리의 다른 글

검색 태그

티스토리툴바