2016년 7월 25일 월요일

01day Javascript

client program
  • URL
  • html/css/javascript => rendering

server program
  • tomcat
    • 실제 서비스 :  window +(JDK) + tomcat
      : standalone 방식
      : 리부팅 tomcat 자동실행 스크립트 --설정 안하면 AS하러 가야함
    • 개발용  서버: 개발용 IDE +tomcat
      : 이클립스 등등에서 tomcat을 실행
      : 이클립스는 서버설정을 복사해서 가지고옴
      : 이클립스를 거치지 않고 실서버를 실행하면 다른 설정을 따름
    • 서비스와 개발용 서버를 동시에 띄울 수 없음

1. 개발용 서버 설정
서버 정의하기 -- 이클립스 버전에 따라서 톰캣지원 버전이 다름
톰캣 conf파일이 이클립스 server파일에 복사됨
두가지가 다른 설정을 따르므로 이클립스에서 서버를 실행한 뒤 브라우저상에서
test.html 파일을 열수 없음 ( 실 서버를 실행해야 함)

프로젝트를 만들떄 dynamic web project로 만들어야함
이 프로젝트 이름이 웹브라우저 상에서 주소에 포함됨
html 문서를 만들때 기본 템플릿을 지원함
설정이 EUK-KR로 되어있기 때문에 기본설정을 UTF-8로 바꿔줘야함
UTF-8로 바꿈



2. 저장위치
http://localhost : 컴퓨터
http://localhost:8080 : tomcat

  • WebEx01/ex01.html
    • C:\java\workspace\WebEx01\WebContent\ex01.html (실제 디렉토리)
  • WebEx01/dir1/ex02.html
    • C:\java\workspace\WebEx01\WebContent\dir\ex01.html 


3.
HTML
  • 문서의 틀
CSS
  • 문서의 디자인
Javascript
  • 동적효과
    • 디자인/ 기능
    • 점점 확대 되는 추세
  • 유럽 컴퓨터 제조 협회(European Computer Manufacturer’s Association)는 자바스크립트를 ECMAScript라는 이름으로 표준화
  • V8 자바스크립트 엔진(V8 JavaScript Engine)은 구글에서 개발된 오픈 소스 JIT 가상 머신형식의 자바스크립트 엔진이며 구글 크롬 브라우저와 안드로이드 브라우저에 탑재되어 있다.
자바스크립트 해석 엔진 -브라우저
  • 클라이언트 자바스크립트
    • 기존의 자바스크립트
    • 브라우저 없이 쓸수 있음
    • => framework (이미 짜둔것을 활용) : jQuery , D3.js(빅데이터용 자바스크립트)
    • 웹은 애플리케이션의 모습에 점점 가까워짐
      • 대표적인 예는 구글문서 작성 도구
      • 구글 웹스토어의 게임 : 브라우서상에서 javascript로 게임을 짬
  • 서버 자바스크립트
    • node.js
    • 현대 웹언어를 대표함(cafe24에서 호스팅제공), 데이터베이스와 연동됨



4. Javascript
<script>자바스크립트 기술 </script>

  • <head>~</head> : 선언의 의미
  • <body>~</body> : 실행의 의미
  • 외부파일로 독립시키는 것도 가능함
*문자열 : ""/ ' '  상관없음
*document.write("출력내용");
*document.write('출력내용');

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
    document.write('Hello JS');
</script>
</body>
</html>

/**
 * 
 */
document.write('Hello JS');

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript" src="default.js"></script>
<script type="text/javascript">
    document.write('Hello JS');
</script>
</body>
</html>



5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
    //document.write('Hello JS');
    document.write('Hello JS<br/>')  //document.write 출력 결과는 HTML이다
    document.write('<b>Hello JS</b><br/>');
</script>
</body>
</html>


6
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    td {border: 1px solid red;}  /* 스크립트 안에있는 html 코드에 css적용 가능함 */
</style>
</head>
<body>
<script type="text/javascript">
    document.write('<table>')  
    document.write('<tr>')  
    document.write('        <td>Hello JS</td>');
    document.write('        <td>Hello JS</td>');
    document.write('</tr>')  
    document.write('</table>') 
</script>
</body>
</html>


7
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
    //디버깅 용 -- 윈도우 창에 출력되지는 않지만 개발자도우에 console에서 볼 수 있음
    console.log('Hello JS');
</script>
</body>
</html>


8
자료
제어문

  • 메서드 -> 함수 (클래스 밖의 메서드) : function
  • 클래스(JSON - Javascript object notation 클래스를 선언 할 때 사용함)
    • 메서드

변수선언

  • var (varient) : 가변형 (자동적으로 데이터형을 정하는 타입)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
    //변수 선언 var 지워도 상관없음
    var num1 = 10;
    num2 = 20;
    
    console.log(num1);
    console.log(num2);
</script>
</body>
</html>

9
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
    //자료형을 볼때 typeof 사용 ---함수가 아니고 연산자임
    console.log(typeof ('String'));
    console.log(typeof (273));
    console.log(typeof (true));
    console.log(typeof (function(){}));
    console.log(typeof ({}));
    console.log(typeof (alpha));
</script>
</body>
</html>


10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
    //변수의 재선언이 가능함
    var var1 = "Hello JS1";
    var var1 = "Hello JS2";
    var var1 = "Hello JS3";
    
    console.log(var1);
</script>
</body>
</html>


11. 형변환 : 함수를 사용
숫자로 형변환

  • Number()
  • parseInt()
문자로 형변환
  • String()
  • ""+

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
    //형변환
    var num1 = Number('123abc');
    console.log(typeof(num1));
    console.log(num1);  //Number는 알파벳문자를 숫자로 바꿀 수 없음
    
    var num2 = parseInt('123abc');
    console.log(typeof(num2));
    console.log(num2);  //parseInt는 문자를 제외하고 숫자로 바꿈
    
</script>
</body>
</html>

**NaN(Not a Number) 값 출력 : 숫자가 아닌 값 입력 시
**Nan은 자료형 숫자이나 자바스크립트로 나타낼 수 없는 숫자 (ex 복소수)


12
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
    //형변환 Boolean
    //아래 다섯 가지를 제외한 모든 경우 true로 변환
    console.log(Boolean(0));
    console.log(Boolean(NaN));
    console.log(Boolean(''));
    console.log(Boolean(null));
    console.log(Boolean(undefined));
</script>
</body>
</html>


13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
    //비교연산자
    console.log('' == false);
    console.log('' == 0);
    console.log(0 == false);
    console.log('273' == 273);
    
    //일치 연산자 ===는 값,자료형 일치여부를 둘다 검사
    console.log('' === false);
    console.log('' === 0);
    console.log(0 === false);
    console.log('273' === 273);
</script>
</body>
</html>


14
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
    //조건문
    var hakjum = 85;
    if (hakjum >= 90){
        console.log('A');
    }else if(hakjum >= 80){
        console.log('B');
    }else if(hakjum >= 70){
        console.log('C');
    }else if(hakjum >= 60){
        console.log('D');
    }else{
        console.log('F');
    }
</script>
</body>
</html>


15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    /*css꾸미기*/
    table{border: 1px solid black; border-collapse: collapse;}
    td{border: 1px solid black;}
</style>
</head>
<body>
<script type="text/javascript">
    //반복문 구구단
    document.write("<table>");
    for(var i=1; i<10; i++){
        document.write("<tr>");
        for(var j=1;j<10;j++){
            document.write("<td>"+i+"X"+j+"="+i*j+"</td>");
        }
        document.write("</tr>");
    }
    document.write("</table>");

</script>
</body>
</html>


16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
    //배열
    var arr = [10,20,30,40];
    //배열 데이터 확인 for
    for(var i=0;i<arr.length;i++){
        console.log(arr[i]);
    }
    //향상된 for in
    for(var i in arr){
        console.log(arr[i]);
    }

</script>
</body>
</html>


17
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    //함수 선언부
    function fun1(){
        console.log('Hello Function');
    }
    function fun2(data1, data2){  //매개변수 있음
        console.log("data1 :" + data1);
        console.log("data2 :" + data2);
    }
</script>
</head>
<body>
<script type="text/javascript">
    //함수 실행부
    fun1();
    fun1();
    
    fun2(10,20);
    fun2(10);  //매개변수 없어도 실행이 됨
    fun2();    //매개변수 없어도 실행이 됨 →오버로딩이 안됨
</script>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    //함수 선언부
    function fun2(data1, data2){
        if(data1 == undefined || data2 == undefined){  //undefined 검사
            console.log("입력 데이터가 없습니다.");
        }else{
            console.log("data1 :" + data1);
            console.log("data2 :" + data2);
        }
    }
    //리턴이 있는 함수 (자바와 달리 자료형태를 앞에 기술하지 않음)
    function fun3(data1, data2){
        return data1+ data2;
    }
</script>
</head>
<body>
<script type="text/javascript">
    
    fun2(10,20);
    fun2(10);
    fun2();
    //리턴함수 실행
    var return1 = fun3(10,50);
    console.log(return1);
</script>
</body>
</html>


18
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    //선언함수 : 일반적 함수 선언
    function fun1(){
        console.log('Hello function');
    }
    //익명함수
    var fun2 = function(){
        console.log('Hello function');
    }
</script>
</head>
<body>
<script type="text/javascript">
    fun1();
    fun2();
    
    console.log(typeof(fun1))
    console.log(typeof(fun2))
    
    var fun3 = fun1; //함수 할당이 가능함
    fun3();
    var fun4 = fun2; //함수 형태 변수는 다른함수의 인자, 리턴으로 사용가능
    fun4();
</script>
</body>
</html>


19
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    var callback = function(){
        console.log("함수 호출");
    }
    var callTenTimes = function(call1){ //함수를 매개변수로 받을 수 있음
        for(var i =0; i<10; i++){
            call1();
        }
    }
</script>
</head>
<body>
<script type="text/javascript">
    callTenTimes(callback);      
</script>
</body>
</html>


20
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    var rFunction = function(){  //함수를 리턴하는 함수
        return function(){
            console.log("call function");
        }
    }
</script>
</head>
<body>
<script type="text/javascript">
    //함수리턴함수의 실행
    var res = rFunction();
    res();
    //짧은 코드
    rFunction()();
</script>
</body>
</html>


21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    //매개변수를 쓰지 않아도 배열로 들어감
    var sumAll = function(){
        //argument : 베열 데이터
        console.log(arguments.length);
        for(var i in arguments){
            console.log("데이터 : " + arguments[i]);
        }
    }
</script>
</head>
<body>
<script type="text/javascript">
    sumAll(1);
    sumAll(1,2,3);
</script>
</body>
</html>


22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function outer(){
        function inner1(){
            console.log('inner1() 호출')
        }
        function inner2(){
            console.log('inner2() 호출')
        }
        inner1();
        inner2();
    }
</script>
</head>
<body>
<script type="text/javascript">
    outer();
</script>
</body>
</html>


23
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
    //내장함수 - Window 객체 메서드 - 함수접근 가능
    //alert('경고창');
    confirm('확인창');
</script>
</body>
</html>


24
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
    //인코딩 함수
    var str = '스타워즈';
    var eStr = encodeURIComponent(str);
    
    console.log(eStr);
    console.log(decodeURIComponent(eStr));  //디코딩
    
</script>
</body>
</html>


25
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
    //eval 함수  --문자열을 해석해서 실행
    var expr = "2 + 3";
    console.log(expr);
    console.log(eval(expr));
    
    var expr2 = "";
    expr2 += "var num =10;";
    expr2 += "alert(num);";
    
    eval(expr2);
    
    
</script>

</body>
</html>


작성자: 시간:

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)