190620_Day49 

<!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>
    <script type="text/javascript">
        function gildong()
        {
        alert('딩꼬~!');
        }
    </script>

    <script src = "myfun.js"></script>
    <script type = "text/javascript">
            function vicky()
            {
                alert("비키는 용용이의 꼬집을 응원합니다.");
                alert("su1 + su2 = " + su1 + su2);
                alert("su3 = " + su3);
                alert("su4 = " + su4);
            }

    </script>

</head>

<!-- fun_test.html -->
<body>
    <h3>함수테스트</h3>
    <input type="button" onclick="gildong();" value = "딩듀호출">

    <button onclick="gildong()">딩꼬 호출</button>

    <a href="javascript:poo()">딩꼬 호출</a>

    <button onclick = "vicky();">비키 호출</button>
</body>
</html>
//myfun.js <script>태그 사이에 들어가는 
//변수선언 초기화 함수정의

su1 = 11; //전역변수
var su2 = 22; //전역변수

function poo() 
{
    su3 = 33; //전역변수
var    su4 = 44; //지역변수! (poo()함수 내에서만 사용가능)

    alert ( "진푸~!" );
    alert ( 'su2 = ' + su2 + ", su 4 = " + su4 + 'su3 = ' + su3);
    //su1, su2, su3, su4 모두 사용 가
}

<배열>

<!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>
<!-- array_test.html -->
<body>
  <h3>배열Array 테스트</h3>
  <hr>
  <script type="text/javascript">
     //배열 객체 생성
     var str = new String("문자열");
     var myArry = new Array(5);//myArry[0]~myArry[4]할당
     document.write("myArry배열크기 = "+ myArry.length );

     //배열안에 데이터 입력
     myArry[0]=11;
     myArry[1]=22;
     myArry[2]=true;
     myArry[3]="홍길동";
     myArry[4]=new Date();

     myArry[5]='길라임';
     myArry[6]=3.14;
     //결론: 자바스크립트 배열은 여러 자료형을 입력받을 수 있고
     //     가변길이 배열이다!!

     document.write('<br>데이터입력후 myArry배열크기= '+
                      myArry.length)

     //전체 데이터 출력
     for(var i=0; i<myArry.length; i++){//배열 인덱스
        document.write('<br>myArry['+i+']='+myArry[i]); 
     }

     document.write('<hr>');
     //정해진 데이터(1,2,3,4,5)를 배열에 저장.
     //var myArry2={1,2,3,4,5};//에러: {}데이터는 JSON에서 예약!!
     //JSON ---> JavaScript Object Notation : 자바스크립트 객체를 표현하는 방법
     //JSON형식)
     //  {key:value,  key:value, ....}
     //  자바의 Map과 같다.
     // key==> 변수의 역할,  value==> 저장데이터   

     var person = {name:'홍길동', age:13, job:'학생',
                   etc:[100,200,300] };
     //사용법:  (JSON)변수명.key명
     document.write("<br>이름: "+ person.name);
     document.write("<br>나이: "+ person.age);
     document.write("<br>직업: "+ person.job);

     //etc의 두번째 데이터를 화면 출력하시오.
     //person.etc == 배열
     document.write('<br>etc의 데이터갯수: '+ person.etc.length);
     document.write('<br>etc두번째데이터: '+ person.etc[1]);


     document.write('<hr>');

     var myArry2=[1,2,3,4,5];//배열데이터는 []에 입력!!

     for(var i=0; i<myArry2.length; i++){//배열 인덱스
         document.write('<br>myArry2['+i+']='+myArry2[i]); 
     }

     document.write('<hr>');
     var myArry3= new Array(6,7,8,9,10);

     for(var i=0; i<myArry3.length; i++){//배열 인덱스
          document.write('<br>myArry3['+i+']='+myArry3[i]); 
     }

     document.write('<hr>');
     var fruits=new Array();

     //데이터 입력
     fruits.push('사과');
     fruits.push('딸기');
     fruits.push('복숭아');

     //데이터 삭제(맨 마지막 요소부터)
     fruits.pop();
     fruits.pop();

     fruits.push("리치");
     fruits.push("파인애플");
     fruits.push("수박");
     //사과,리치,파인애플,수박
     // 0   1    2     3

     //fruits.slice(startIdx,endIdx);
     document.write('<br>fruits='+fruits);
     document.write('<br>fruits.slice(1)='+fruits.slice(1));
     document.write('<br>fruits.slice(1,3)='+fruits.slice(1,3));
     document.write('<br>fruits.join("^")='+fruits.join("^"));
     //join()메소드: 특정문자를 포함한 새로운 문자열 생성
     //결과값: "사과^리치^파인애플^수박"

     document.write('<br>fruits.reverse()='+fruits.reverse());
     document.write('<br>fruits.sort()='+fruits.sort());


     for(var i=0; i<fruits.length; i++){//배열 인덱스
           document.write('<br>fruits['+i+']='+fruits[i]); 
     }



  </script>

</body>
</html>

<플러그인 설치 방법>

  1. 설치된 eclipse 폴더
    • plugins폴더
    • features폴더
      • 두 폴더에 필요한 jar파일 복사!
  2. Help메뉴
    • intall new software
    • add버튼
    • name설정과 location위치
  3. help메뉴
    • Eclipse Marketplace
    • 검색

<자바스크립트, jQuery 관련 플러그인 설치 - Tern 플러그인>

​ 2번 방법으로 설치한다!(http://marketplace.org)

​ http://oss.opensagres.fr/tern.repository/1.2.0

​ 설치후 재시작! 그리고 세팅~!

프로젝트 적용!

  1. 적용할 프로젝트명 오른쪽 클릭!
    1. Configure
    2. Convert to Tern Project
  2. 프로젝트 Properties
    • JavaScript
      • Modules
        ==> Browser, CKEditor, jQuery체크

이후 깃 세팅, 깃헙 사용 방법, 세미프로젝트2 학습함.

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

190624_Day51 <JavaScript5>  (0) 2019.06.24
190621_Day50 <JavaScript4>  (0) 2019.06.21
190619_Day48 <JavaScript - 1,2>  (0) 2019.06.19

+ Recent posts

티스토리툴바