190619_Day48 <JavaScript - 1,2>

용진용진 2019. 6. 19. 19:40

2019. 6. 19. 19:40

190619_Day48

HTML 마지막에 있는 JavaScript에 이어서

실행

JavaScript: 클라이언트(사용자,브라우저) 스크립트 : 브라우저에서 실행!!

JSP(Java) : 서버 스크립트 : JVM에서 실행!!

JavaScript의 위치
---> HTML문서내에 포함되어서 실행.

 (HTML문서내의 어떤 위치라도 정의 가능)

 <html> 
  <head>
     <script>
                    프로그램영역!!
         ----> 변수선언, 함수(function)정의                       
      </script>
   </head>
    <body>

      <script>
                      프로그램영역!!
           ----> 함수 호출
      </script>

   </body>
</html>

자료형을 선언, 정의하지 않는다!! ★

자바case)
String name="홍길동";
```
      name="길라임";
      name=3000;   (X)
```
자바스크립트case)
String name="홍길동"; (X) 에러발생!!

         name="홍길동"; (O) 자료형 선언하지 않고 사용!!

  var su;  ---> 변수선언      
      su=2000;        ---> number타입
      su="김주원";     ---> String타입 
                           //대입되는 데이터에 따라 자료형이 변환됨
      su=true;        ---> boolean타입
      su= new Date(); ---> Date타입

document.writeln("~"); 해도 new라인이 아닌 한칸만 떨어졌다.
new line = White Space, 브라우저에 출력됨으로 한칸으로 출력 ( 브라우저 출력 )
한칸 띄고 싶다면 < br > 이라는 html 태그 이용해서!

자바스크립트에서 문자열 ( text ) 표현

작은 따옴표와 큰 따옴표 구분 없이 사용!
- ' ' 과 " " 은 전혀 차이가 없음.
```
name1 = "기묜진"; (O)
name1 = '기묜진'; (O)
name1 = "기묜진'; (X)
```

문제

브라우저에 "여기는 남부터미널 입니다"를 출력하시오.

    document.writeln('<font color = skybule>여기는 "남부터미널" 입니다.<br>'); 
    document.writeln("<font color = orange>여기는 '남부터미널' 입니다.<br>"); 
    document.writeln("<font color = purple>여기는 \"남부터미널\" 입니다.");

데이터 10과 3에 대한 사칙연산 결과를 화면에 출력하시오.

    document.write( '<br>su1 + su2 = ' + (su1 + su2 ) );
    document.write( '<br>su1 - su2 = ' + (su1 - su2 ) );
    document.write( '<br>su1 * su2 = ' + (su1 * su2 ) );
    document.write( '<br>su1 / su2 = ' + (su1 / su2 ) ); 
    // 결과값이 소수점 이하까지 계산 되네, 정수 실수 자료형 선언이 없었기 때문, 3만 나오게 하려면 
    document.write( '<br>parseInt(su1 / su2) = ' + parseInt(su1 / su2 ) ); 
    document.write( '<br>su1 % su2 = ' + (su1 % su2 ) );

자바스크립트는 구분자, 종결자 역할을 하는 ';'을 생략하는 것이 가능

이유 : 라인(줄바꿈)을 통해 서로 다른 문장을 구분하기 때문

name = '용딩'
age = 13
// 이렇게 세이콜론 없이 쓰는 것 가능 하지만 쓰는 것을 권장

name = '용딩' age = 13
//이렇게 한줄로 몰아쓰는건 안된다!

문자열 비교

자바Case)
"java".equals("JAVA") => false 문자열 내용 비교
"java" == "JAVA"      => false 메모리 주소 비교

자바스크립트Case)
"javascript".equals("JAVASCRIPT") => X 에러발생
"javascript" == "JAVASCRIPT" => false 문자열 내용 비교

koxo.com 참조

'==' 연산자 '==='연산자
- '==' 연산자
  - 등가 연산자
  - 데이터 내용만 비교 (자동 형변환 발생)
- '==='연산자
  - 등가연산자 (엄격한 비교연산자)
  - 자료형 비교
  - 내용 비교
- 관련연산자
  - != (비교연산자)
  - !==(엄격한 비교연산자)

조건문

   if(조건식){
          조건식의 결과가 참일 때 실행할 문장;
   }
   --->실행할 문장이 한개였을때 영역괄호{}는 생략가능!!

   if(조건식){
          조건식의 결과가 참일 때 실행할 문장;
   }else{
          조건식의 결과가 거짓일 때 실행할 문장;
   }

  if(조건식1){
         조건식1의 결과가 참일 때 실행할 문장;
  }else if(조건식2){
         조건식1의 결과가 거짓이고!!
         조건식2의 결과가 참일 때 실행할 문장;
  }else{
         조건식1,2의 결과가 거짓일 때 실행할 문장;
  }


   -  ※ 자바와의 차이점
          if(조건식 ==> boolean, 숫자, 객체){

          }

      숫자: 0인 수(false), 0아닌 수(true)로 구분
      객체: 브라우저에서 지원되는 객체인지 아닌지 판별.     

     ----> 변수에 값이 존재하는지 판단.

     - 존재하는 객체(문자열, 브라우저가 지원하는 객체)  ---> true

     - null, undefined                        ---> false

         undefined : 선언은 되어있는데 초기화 되지 않은 변수    



문제1)브라우저에 1~5까지 출력하시오. (for문 사용)

```javascript
        for(var i = 1; i < 6; i++){
            document.write(i + '&nbsp');
        }

문제2) 5에서 1까지 브라우저에 출력하시오 (for문)

        for(var i = 5; i > 0; i--){
            document.write(i + '<br>');
        }

문제3 브라우저에 출력하시오.

        for(var i = 3; i < 13; i += 3){
            document.write(i);
            if(i < 10)document.write(", ");
        }

문제4 구구단 3단을 출력하시오. (for문 사용)

        for(var i = 1; i < 10; i++){
            document.write("<br>3 X " + i + " = " + ( 3 * i ));

        }

문제5 구구단(2단~9단)을 브라우저에 출력하시오. (조건:열을 맞추어 출력, 다중for문 사용)

        document.write("<pre>");
        for(var j = 1; j < 10; j++){
            for(var i = 2; i < 10; i++){
                    document.write( i + " x " + j + " = " + ( i * j ) + "\t");
            }
            document.write("<br>");
        }
        document.write("</pre>");

   document.write('<table cellpadding=10>')
   for(i=1; i<10; i++){//기준: 곱하는 수 1~9        9번반복!!
         document.write('<tr>');//9개의 <tr>태그 생성
       for(dan=2; dan<10; dan++){//단수: 2~9      8번반복!!
             //9*8=72 ---> 72개의 <td>태그 생성
         document.write('<td>'+dan+'*'+i+"="+(dan*i)+'</td>');
       }
       document.write('</tr>');//9개의 </tr>태그 생성
   }
   document.write('</table>')

대화상자~!

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>대화상자 테스트</title>
</head>
<!-- dialog_test.html -->
<body>
    <h3>대화상자테스트</h3>
    <hr>

    <script type="text/javascript">
        //메시지 대화상자 : alert(출력할 데이터)
        alert("딩푸 등장!");

        a = 10;
        b = 20;
        document.write( 'a + b =' + ( a + b ) ); // a와 b를 더한 값을 확인 : 브라우저 화면 출력
        alert( 'a+b =' + ( a + b ) ); // a와 b를 더한 값을 확인 : 메시지창 출력

        // 확인 대화상자 : confirm(메시지) ===> 삭제전 '확인'에서 많이 사용
        // alert( confirm() ) ; // 확인, 취소, x버튼 => true, false, false
        if( confirm ('딩듀 푸푸하셨습니까?') ){
            alert('시원하게 하셔서 다행입니다. 내일도 시원하게 하세요~!');
        }else{
            alert('조금 이따 하시겠네요 ㅋ');
        }

        //입력 대화상자( 잘 사용 안함, 모양이 이상...)
        //prompt('출력할메시지');
        var many = prompt('딩듀가 하루에 쁀하는 횟수는?', '');

        if(many != null){
            if( many == '') // 빈값 체크 : str == '' 또는 str.length == 0
            {
                alert('횟수를 입력하세요!');
            }else{
                alert('[' + many + '] 번이라구요?' + '자는 시간에만도 그것보다는 더 합니다.')
            }
        }

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

내장함수

내장(기본) 함수 : 자주 사용되는 함수를 레퍼런스 없이 사용하게 하는 것

eval()

        var a = '100';
        var b = 100;

        document.write('a + b = ' + ( a + b ) );
        document.write('<br>eval(a) + b = ' + ( eval ( a ) + b ) );

        var v2 = '{ name: " 이딩듀 ", age : 1 }';
        var v3 = eval("(" + v2 +")");
        document.write('<br> 이름 = ' + v3.name);

#등장한김에 잠시 배워보는 JSON

JavaScript Object Notation

JSON 형식 )

var v = { key1 : value, key2 : value };
---
var v = { name : "기묜진" , age : 2};
//v 가 JSON
document.write('<br>이름 = ' + v.name);
//이렇게 쓴다!

ㅁ
ㅁ
ㅁ
isNan()
- not a number
- 숫자인지 여부 판별할때,
escape() / unescape()
- 나중에는 안쓰게 됨.
- 인코딩 디코딩
- 특문 몇개 제외하고는 모두 16진수 문자로 바꾸어준다.

함수(메소드) 정의 ★★★

자바Case

void hello(String name, int age){}
int hello(String name, int age){return 100;}

자바스크립트Case

function hello(name, age){}
function hello(name, age){return 100;}

함수형식

function 함수명(){

} //---> return; 생략가능

function 함수명(변수명1, 변수명2){
    return "리턴데이터";
}

주의 ) 자바스크립트의 함수는 오버로딩을 지원 할까요?

기본적으로 제공하지 않는다.

function hello(){
    안녕!
}
hello(); //호출 -> 안녕!

function hello(){
    신짜오!
}
    //에러 발생 안함.
hello(); //호출 -> 신짜오! 나옴, 같은 이름 함수 두 개 쓰면 앞에것 호출 불가!

function hello(name){
    니하오!
}
    //에러 발생 안함
hello(); //호출 -> 니하오! , 함수명만 일치하면 파라메터 상관없이 호출됨 

hello(); // 니하오!
hello('나길동'); // 니하오!
hello('나길동',130); // 니하오!
    //함수 호출시 매개변수(인자)의 갯수와 상관없이 함수명만 일치하면 호출 가능!
    //같은 영역(파일)에 동일한 이름의 함수가 여러개 존재하면 제일 아래에 있는 함수로 overwrite됨!

예제. myFun_test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>사용자 정의함수</title>

    <script type="text/javascript">
    //함수정의
    function test(){
        alert('함수 테스트');
    }

    function hello(){
        alert('헬로~')
    }

    function hello( name ){
        alert('안녕, ' + name )
    }

    function hello( name, age ){
        alert('하이, ' + name + "!! \n 당신의 나이는 " + age + "살" )
    }

    function hello( name, age ){
        //undefined : 초기화 되지 않은 변수
        //null써도 되지만 undefined
        if(name == undefined) 
        alert('헬로');
        else if(age == undefined)
        alert('안녕, ' + name );
        else
        alert('하이, ' + name + "!! \n 당신의 나이는 " + age + "살" );
    }

    prompt("입력", "초기값", "딩딩","비키")
    </script>

</head>
<!-- myFun_test.html -->
<body>
    <h3>사용자 정의함수 테스트</h3>
    <hr>
    <!--
        on~ 시작하는 속성 : 이벤트 속성 
        onclick = "자바스크립트 코드"
    -->
    <input type="button" value="test()호출" onclick="test();">
    <button onclick="hello();">hello() 호출</button>
    <button onclick="hello('딩듀');">hello(딩듀) 호출</button>
    <button onclick="hello('비키', 2);">hello(비키, 2) 호출</button>
</body>
</html>

'클라우드 기반 웹 개발자 과정 공부 > JS' 카테고리의 다른 글

190624_Day51 <JavaScript5> (0)	2019.06.24
190621_Day50 <JavaScript4> (0)	2019.06.21
190620_Day49 <JavaScript3> (0)	2019.06.20

Yong Study