336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

 

selectbox에 있는 값을 가져오거나 선택한 것을 가져오는 소스코드입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
    window.onload = function(){
 
        //차례대로 
        //선택한순서
        //옵션(select박스 안쪽에 있는 값을 가져오기 위함입니다.
        //값을 가져옵니다.
        var x = document.getElementById("mySelect").selectedIndex;
        var y = document.getElementById("mySelect").options;
        var z = document.getElementById("mySelect").value;
 
        //순서대로 값을 띄워줍니다.
        alert("Index: " + y[x].index + " is " + y[x].text+" is " + z);
 
    }
</script>
<select id="mySelect">
    <option value="Banana1!">Banana</option>
    <option value="값">값 선택</option>
 
</select>
 
 cs

 

감사합니다.

'JAVASCRIPT' 카테고리의 다른 글

JAVSCRIPT 새창띄우는 방법 냉큼 가져가요~  (0) 2016.07.08
JASASCRIPT 전체화면은 이곳에서  (0) 2016.07.08
URL 주소값 분해하면 좋아요  (0) 2016.07.08
JavaScript 내 브라우저종류 그게 궁금하네요  (0) 2016.07.08
JAVASCRIPT 배경 이미지와 크기 설정하기  (0) 2015.12.01
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

이번에는 url 주소창 값을 통해서 필요한 처리를 하는 방법을 알려드릴께요.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script>
    window.onload = function(){
 
        //해당 일치하는 부분을 호출해 옵니다. 필요한 부분을 가져다가 쓰시면됩니다
        //ex)
        if(location.href == "http://jdkblog.tistory.com"){
            alert('해당 페이지로 이동합니다');
            location.href = location.href;
        }
        //-javascript-
 
        //location.href -> http://localhost:8088/login/login.do?key=value
 
        //location.protocol -> http:
        //location.host -> localhost:8088 
        //location.pathname -> /login/login.do
        //location.search -> ?key=value
 
 
 
 
 
 
        //-jquery-
 
        //jQuery(location).attr('href') -> http://localhost:8088/login/login.do?key=value
        //jQuery(location).attr('protocol') -> http:
        //jQuery(location).attr('host') -> localhost:8088 
        //jQuery(location).attr('pathname') -> /login/login.do
        //jQuery(location).attr('search')-> ?key=  
    }
</script>
 
 
 cs

 

감사합니다.

'JAVASCRIPT' 카테고리의 다른 글

JASASCRIPT 전체화면은 이곳에서  (0) 2016.07.08
JAVSCRIPT SELECT값을 가져옵니다.  (0) 2016.07.08
JavaScript 내 브라우저종류 그게 궁금하네요  (0) 2016.07.08
JAVASCRIPT 배경 이미지와 크기 설정하기  (0) 2015.12.01
JAVASCRIPT url에서 parameter를 가져와서 처리하기  (0) 2015.11.30
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

이번엔 브라우저를 어떤 것을 사용하는지 알려주는 소스입니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
    window.onload = function (){
        alert(getBrowser());
    }
    
    function getBrowser(){ 
        var agt = navigator.userAgent.toLowerCase();  //브라우저 정보 획득
        if (agt.indexOf("chrome") != -1) return 'Chrome'; 
        if (agt.indexOf("opera") != -1) return 'Opera'; 
        if (agt.indexOf("staroffice") != -1) return 'Star Office'; 
        if (agt.indexOf("webtv") != -1) return 'WebTV'; 
        if (agt.indexOf("beonex") != -1) return 'Beonex'; 
        if (agt.indexOf("chimera") != -1) return 'Chimera'; 
        if (agt.indexOf("netpositive") != -1) return 'NetPositive'; 
        if (agt.indexOf("phoenix") != -1) return 'Phoenix'; 
        if (agt.indexOf("firefox") != -1) return 'Firefox'; 
        if (agt.indexOf("safari") != -1) return 'Safari'; 
        if (agt.indexOf("skipstone") != -1) return 'SkipStone'; 
        if (agt.indexOf("msie") != -1) return 'Internet Explorer'; 
        if (agt.indexOf("netscape") != -1) return 'Netscape'; 
        if (agt.indexOf("mozilla/5.0") != -1) return 'Mozilla'; 
    }
 
</script>
 cs

 

감사합니다.

'JAVASCRIPT' 카테고리의 다른 글

JAVSCRIPT SELECT값을 가져옵니다.  (0) 2016.07.08
URL 주소값 분해하면 좋아요  (0) 2016.07.08
JAVASCRIPT 배경 이미지와 크기 설정하기  (0) 2015.12.01
JAVASCRIPT url에서 parameter를 가져와서 처리하기  (0) 2015.11.30
JAVASCRIPT URL 주소 가져오기  (0) 2015.11.30
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

이번엔 class, id, tag까지 이용한 Jquery예제를 보고 가실께요.

jquery불러오기에 비하면 소스가 늘긴 했지만,  설명도 다 달려있어서 별문제 없을거 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!-- jquery를 불러옵니다. jquery.com download 페이지를 참조해주세요 -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
 
<script>
    //Jquery 화면을 불러오자마자 실행합니다.
    $(document).ready(function(){
        //class="testClass" 달린 버튼을 클릭했을때 합니다.
         $(".testClass").click(function(){
             alert("testClass 버튼클릭");
         });
         //id="testID" 달린 버튼을 클릭했을때 합니다.
         $("#testID").click(function(){
             alert("testID 버튼클릭");
         });
 
         //p태그가 소유하고 있는 내용을 클릭했을때 합니다.
         $(p).click(function(){
             alert("p태그 클릭");
         });    
    });
</script>
<input type="button" class="testClass"/>
<input type="button" id="testID"/>
<p>P태그</p>
 
 cs

 

감사합니다.

'JQUERY' 카테고리의 다른 글

북마크 JQUERY 사용하기  (0) 2016.07.08
JQUERY 불러오기 참 간단하죠~  (0) 2016.07.06
JQUERY url 주소가져오기  (0) 2015.11.30
JQUERY attribute 쓰기  (0) 2015.11.29
JQUERY 클릭 이벤트와 멀티 seleter사용하기  (0) 2015.11.29
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

 

이번엔 JQUERY 불러오기에 대해서 쓸께요. ㅎㅎ

JQUERY 이미 올린 것도 약간 있긴하지만.. 틈틈이 만들어서 올려드릴께요~.

 

1
2
3
4
5
6
7
8
9
10
11
<!-- jquery를 불러옵니다. jquery.com download 페이지를 참조해주세요 -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
 
<script>
    //Jquery 화면을 불러오자마자 실행합니다.
    $(document).ready(function(){
          alert("시작하자마자 바로 실행!");  //javascript의 alert화면입니다.
    });
</script>
 
 cs

일단 설명은 주석으로 다 들어있어요~ ㅎㅎ

복사 붙여넣기 해서 보시면 아시겠지만, 하자마자 alert를 하나 띄워줍니다.

 

감사합니다.

'JQUERY' 카테고리의 다른 글

북마크 JQUERY 사용하기  (0) 2016.07.08
JQUERY 간단한 selector 이렇게 하면 좋을거같아요  (0) 2016.07.06
JQUERY url 주소가져오기  (0) 2015.11.30
JQUERY attribute 쓰기  (0) 2015.11.29
JQUERY 클릭 이벤트와 멀티 seleter사용하기  (0) 2015.11.29
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

 

사용자 정의 필터링하는 방법을 알려드리겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
 
<!-- 라우팅과 angularJS기본파일입니다. -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
 
<!-- controller와 app을 생성합니다. -->
<ul ng-app="myApp" ng-controller="moneyCtrl">
 
<!-- menuMoney라는 배열을 차례대로 뿌립니다. -->
<li ng-repeat="x in menuMoney">
    <!-- repeat를 통해서 들어온 x를 money형식으로 포멧팅해서 출력합니다. -->
    {{x | money}}
</li>
</ul>
 
<script>
var app = angular.module('myApp', []);
 
/* 어떤 값을 포멧해서 넣어주는 함수이고, 어떤 데이터를 포멧할때 그 데이터를 num자리에 넣어서 실행합니다. */
app.filter('money', function() {
    //원화로 포멧해주는 함수입니다.
    return function(num) {
        var len, point, str;
        
        point = num.length % 3 ;
        len = num.length;  
       
        str = num.substring(0, point);  
        while (point < len) {  
            if (str != "") str += ",";  
            str += num.substring(point, point + 3);  
            point += 3;  
        }  
        str = "\\"+str;
        return str;
    };
});
//controller를 생성합니다. menuMoney라는 변수를 생성해서 배열로 넣어줍니다.
app.controller('moneyCtrl', function($scope) {
    $scope.menuMoney = [
        '1234',
        '1000',
        '1000000',
        '500000',
        '40000',
        '9000000000',
        '10203050'
        ];
});
</script>
</body>
</html>
 
 cs

 

감사합니다.

 

 

'ANGULARJS > filter' 카테고리의 다른 글

angularJS filter 검색을 편하게 해주는 filter  (0) 2016.06.30
angularJS Filter간단한 사용법  (0) 2016.06.30
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

이 예제는 text박스에 입력된 것을 변수화 시쳐서 그것을 repeat에 적용해서 그것을 포함하는 값만 출력하는 예제입니다.

하지만 이 예제는 해당버전으로는 한글이 지원되지 안아서 아쉬운 점이 조금 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
 
<!-- 라우팅과 angularJS기본파일입니다. -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<body>
 
<!-- app이름과 controller이름을 설정합니다. -->
<div ng-app="myApp" ng-controller="clothesCtrl">
 
 
<!-- test변수로 묶어줍니다. -->
<p><input type="text" ng-model="test"></p>
 
<ul>
    <!-- filter:test는 filter는 포함되어 있는 값만 뿌려주는데요. test변수에 있는 값들을 찾아서 뿌려주는 역할을 합니다. -->
  <li ng-repeat="value in clothes | filter:test">
    {{ value }}
  </li>
</ul>
 
</div>
 
<script>
/* app과 controller를 활성화하고, names에 값을 넣어줍니다. */
angular.module('myApp', []).controller('clothesCtrl', function($scope) {
    $scope.clothes = [
        '청바지',
        '용지',
        '스포츠용품',
        '여성의류',
        '청자켓',
        '정장바지',
        '나팔바지',
        '정장슈트',
        '남성의류'
    ];
});
</script>
 
 
</body>
</html>
 
 cs

직접 해보시면 알겠지만 한글은 반응이 없고, 영어는 작동을 잘하는 것을 확인할 수 있습니다.

 

감사합니다.

'ANGULARJS > filter' 카테고리의 다른 글

angularJS 사용자 정의함수 Filtering  (0) 2016.06.30
angularJS Filter간단한 사용법  (0) 2016.06.30
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

이번에는 include사용방법을 알려드리겠습니다.

간단하게는 include_content.html을 가져오는 소스코드입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
 
<!-- 라우팅과 angularJS기본파일입니다. -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
before
<!-- 단순히 내용만 가져옵니다.(해당파일에는 배경색 스타일이 있지만 가져오지 못합니다.) -->
<div ng-include="'include_content.html'"></div>
 
</body>
</html>
 
 cs

 

include_content.html 입니다.

1
2
3
<body style="background-color:RED;font-size:15px;">
Adder
</body>
 cs

결과는 before

         Adder

로 출력이 됩니다.

이렇게 스타일이 존재하지만 스타일에 대해선 가져오지는 못하고, 내용만 가져오는 것을 확인할 수 있습니다.

감사합니다.

'ANGULARJS > template' 카테고리의 다른 글

angularJS 간단한 routing템플릿  (0) 2016.06.29
angularJS Template Routing과 Directive를 같이 써봤어요  (0) 2016.06.29
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

 

안녕하세요.

이번에는 angularJS Filter에 대해서 할려고합니다.

 

밑에 있는 것은 소스코드예요.

사용할만한 형식도 대부분 영어지만 추가해두었어요. 필요한것은 확인해 주세요.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<!-- angularJS를 불러옵니다. -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
 
<!-- 
currency Format a number to a currency format.
•date : Format a date to a specified format.
•filter : Select a subset of items from an array.
•json : Format an object to a JSON string.
•limitTo : Limits an array/string, into a specified number of elements/characters.
•lowercase : Format a string to lower case.
•number : Format a number to a string.
•orderBy : Orders an array by an expression.
•uppercase : Format a string to upper case.
•currency : 화폐입니다. 달러로 필터처리를 해줘서 사용자 필터를 추천해드립니다.
 -->
<div ng-app="myApp" ng-controller="sampleCtrl">
 
<!-- lastName에 uppercase(대문자)를 적용합니다. -->
<p>{{ choiceWord | uppercase }}</p>
 
<!-- lastName에 uppercase(소문자)를 적용합니다. -->
<p>{{ choiceWord | lowercase }}</p>
 
</div>
 
<script>
//controller를 생성합니다.
angular.module('myApp', []).controller('sampleCtrl', function($scope) {
    $scope.choiceWord = "Car";    //choiceWord에 Car를 넣어줍니다.
});
</script>
 
</body>
</html>
 
 cs

결과는 CAR

    car

감사합니다.

 

 

'ANGULARJS > filter' 카테고리의 다른 글

angularJS 사용자 정의함수 Filtering  (0) 2016.06.30
angularJS filter 검색을 편하게 해주는 filter  (0) 2016.06.30
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

이번에는 Select에 대해서 처리하는 방법을 알아볼려고 합니다.

소스코드 확인 들어가겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
 
<!-- 라우팅과 angularJS기본파일입니다. -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
 
    <!-- app이름과 controller이름을 설정합니다. -->
    <div ng-app="myApp" ng-controller="myCtrl">
    
    <!-- options으로 select에 풀어넣습니다. -->
    <!-- ng-model로 변수를 치환합니다. -->
    <!-- JSON으로 나타낸 것을 처리하기 위한것이고, x키, y는 값입니다. -->
    <select ng-model="selectedLocation" ng-options="x for (x, y) in info">
    </select>
    
    <!-- 선택한 것에 대해서 각각 해당하는 값을 출력합니다. -->
    <div>지역: {{selectedLocation.location}}</div>
    <div>도시: {{selectedLocation.city}}</div>
    <div>음식: {{selectedLocation.food}}</div>
    
    </div>
    
    <script>
    //app연결합니다.
    var app = angular.module('myApp', []);
    //controller를 연결합니다.
    //안에 info라는 변수에 json형식으로 넣습니다.
    app.controller('myCtrl', function($scope) {
        $scope.info = {
            info01 : {location : "korea", city : "souel", food : "kimch"},
            info02 : {location : "korea", city : "jeju", food : "water"},
            info03 : {location : "japan", city : "tokyo", food : "susi"}
        }
    });
    </script>
 
</body>
</html>
 
 cs

결과는 info01을 클릭했다면 소속되어있는 값들이 하나씩나옵니다.

감사합니다.

 

 

+ Recent posts

티스토리툴바