jQuery 소개

jQuery는 가볍고, 적게쓰고, 더 많은 것을 할수있는 자바스크립트 라이브러리 입니다.

제이쿼리의 목적은 웹사이트를 좀더 쉽게 만드는 것입니다.

제이쿼리를 적용하는 가장쉬운 방법은 CDN을 추가하는 것입니다.

  • 구글에서 제공하는 CDN

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
  • ms제공 CDN

<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>

jQeury 예제

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").click(function(){
      $(this).hide();
  });
});
</script>
</head>
<body>

<p>여기를누르면 사라져요.</p>
<p>눌러보세요!</p>
<p>눌러보세요!</p>

</body>
</html>


'jquery' 카테고리의 다른 글

<tr>에서 get value() 벨류값 가져오기  (0) 2019.05.22
jQuery 선택자  (0) 2018.10.14
jquery Json date read  (0) 2018.10.14
jquery selector 선택자  (0) 2018.10.14

angularJS table 만들기

ng-app를 적용할 div 생성

<div ng-app="myApp" ng-controller="customersCtrl"> 

<table>
<tr ng-repeat="x in names">
  <td>{{ x.Name }}</td>
  <td>{{ x.Country }}</td>
</tr>
</table>

</div>

ng-app에 렌더링될 script구문 추가

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("customers.php")
  .then(function (response) {$scope.names = response.data.records;});
});
</script>

전체코드

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<style>
  table,   th,   td {
      border: 1px solid grey;
      border-collapse: collapse;
      padding: 5px;
  }

table tr:nth-child(odd) {
background-color: #f1f1f1;
}

table tr:nth-child(even) {
background-color: #ffffff;
}

</style>

<body>

<div ng-app="myApp" ng-controller="customersCtrl">

  <table>
      <tr ng-repeat="x in names">
          <td>{{ x.Name }}</td>
          <td>{{ x.Country }}</td>
      </tr>
  </table>

</div>

<script>
  var app = angular.module('myApp', []);
  app.controller('customersCtrl', function($scope, $http) {
      $http.get("https://www.w3schools.com/angular/customers.php")
          .then(function(response) {
              $scope.names = response.data.records;
          });
  });
</script>

</body>
</html>


'angularJS' 카테고리의 다른 글

angularJS CDN  (0) 2018.10.14

table colgroup 사용방법

<colgroup> 은 테이블의 한 행을 기준으로 일괄적인 디자인을 적용하고자 할 때에 아주 유용하다.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <table>
      <colgroup>
          <col/>
          <col/>
          <col width="70px" />
          <col style="width: 70px;" />
          <col class="small-width" />
      </colgroup>
      <thead>
          <tr>
              <th style="border: 1px solid gray;">A</th>
              <th style="border: 1px solid gray;">B</th>
              <th style="border: 1px solid gray;">C</th>
              <th style="border: 1px solid gray;">D</th>
              <th style="border: 1px solid gray;">E</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>A</td>
              <td>B</td>
              <td>C</td>
              <td>D</td>
              <td>E</td>
          </tr>
      </tbody>
  </table>
</body>

</html>

<colgroup>
  <col/>
  <col/>
  <col width="70px" />
</colgroup>

<col/> <col/> 대신 <col span="2"/> 코드 사용가능

<colgroup>
<col span="2"/>
<col style="width: 70px;"/>
</colgroup>


'HTML' 카테고리의 다른 글

javascript 페이지 이동  (0) 2018.10.05
HTML 색상표현  (0) 2017.12.19
HTML이란?  (0) 2017.12.18
HTML 이미지 삽입  (0) 2017.12.18

jquery에서 json 데이터 읽기

each를 이용한 json data 읽기

jQuery.each( collection, callback(indexInArray, valueOfElement) )

or

$.each( collection, callback(indexInArray, valueOfElement) )

collection : array or object

callback = function

indexInArray : array 나 object 의 key

valueOfElement : array 나 object의 value

json 데이타를 jQuery에서 읽어오는 예제

<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>json 데이타를 jQuery에서 읽어오는 예제</title>
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>
  <script>
      var obj = {
          one: 1,
          two: 2,
          three: 3,
          four: 4,
          five: 5
      };

      $.each(obj, function(key, value) {
          alert('key:' + key + ', value:' + value);
      });

      //여러개의 데이타가 있을경우
      var obj2 = [{
          name: "홍길동",
          age: "20"
      }, {
          name: "이순신",
          age: "30"
      }];

      $.each(obj2, function(key, value) {
          alert('key:' + key + ', name:' + value.name + ',age:' + value.age);
      });

  </script>

</body>

</html>


'jquery' 카테고리의 다른 글

<tr>에서 get value() 벨류값 가져오기  (0) 2019.05.22
jQuery 선택자  (0) 2018.10.14
제이쿼리 소개  (0) 2018.10.14
jquery selector 선택자  (0) 2018.10.14

노드찾기

      • - 태그 이름으로 노드 찾기 : $("태그이름"), $("선택자")

      • - 클래스 이름으로 노드 찾기 : $(".클래스이름")

      • - ID로 노드 찾기 : $("선택자")

      • - 속성으로 노드 찾기 : $("[속성이름=값]")

      • - 찾은 요소 개수 구하기 : .size() , .length

      • - 찾은 요소 n번째 접근하기 : .eq(index) , .each(function(index){});

      • - 찾은 요소에서 특정요소만을 걸러내기 : .filter("선택자")

      • - 찾은 요소에서 특정 자식요소만 찾기 : .find("선택자")


자식 노드 찾기

      • 전체 자식 노드 찾기

          • -- 텍스트 노드 포함 전체 자식 노드 찾기 : $("선택자").contents()

          • -- 텍스트 노드 제외한 전체 자식 노드 찾기 : $("선택자").children("선택자")

    • n번째 자식 노드 접근

        • -- $("선택자").children().eq(N)

        • -- $("선택자").children(":eq(N)")

    • 첫번째 자식 노드 접근

        • -- $("선택자").children().first()

        • -- $("선택자").children(":first")

        • -- $("선택자").children().eq(0)

        • -- $("선택자").children(":eq(0)")

    • 마지막 자식 노드 접근

        • -- $("선택자").children().last()

        • -- $("선택자").children(":last")


부모 노드 찾기

      • - 바로 위의 부모 : $("선택자").parent()

      • - 모든 부모 찾기

            • -- $("선택자").parents() 모든 부모

      • - 모든 부모 중 선택자에 해당하는 부모 찾기

            • -- $("선택자").parents("선택자")


형제 노드 찾기

    • - 이전 형제 노드 찾기

        • -- $("선택자").prev()

        • -- $("선택자").prevAll("선택자");

    • - 다음 형제 노드 찾기

        • -- $("선택자").next()

        • -- $("선택자").nextAll("선택자");


노드 생성,추가,이동,삭제

    • 생성

        • $("노드")

        • $("선택자").html("<노드>...")

        • $("노드").clone()

    • 추가

        • $기준노드.append($추가노드)

        • $추가노드.appendTo($기준노드)

        • $기준노드.prepend($추가노드)

        • $추가노드.prependTo($기준노드)

        • $추가노드.insertBefore($기준노드)

        • $기준노드.before($추가노드)

        • $추가노드.insertAfter($기준노드)

        • $기준노드.after($추가노드)

    • 삭제

        • $("선택자").remove()

    • 이동

        • $기준노드.append($이동노드)

        • $이동노드.appendTo($기준노드)

        • $이동노드.insertBefore($기준노드)

        • $기준노드.before($이동노드)

        • $이동노드.insertAfter($기준노드)

        • $기준노드.after($이동노드)


텍스트 노드 다루기

    • 텍스트 노드 생성 : $("텍스트")

    • 텍스트 노드 추가 : $기준노드.append("텍스트")

    • 텍스트 노드 변경 : $기준노드.text("새로운 텍스트")


기본 CSS 셀렉터 사용하기

    • a - 모든 링크(<a>) 엘리먼트와 일치하는 셀렉터.

    • #exID - exID를 아이디로 가지는 엘리먼트와 일치하는 셀렉터.

    • .exClass - exClass를 클래스로 가지는 엘리먼트와 일치하는 셀렉터.

    • a#exID.exClass - 아이디가 exID 이고, 클래스가 exClass인 링크와 일치하는 셀렉터.

    • p a.exClass - <p> 엘리먼트 내에 클래스가 exClass인 모든 링크와 일치하는 셀렉터.

    • 아래 코드와 같이 쓰임

    • $("p a.exClass")

    • 자식 셀렉터(child selector) : 부모와 자식 엘리먼트는 오른쪽 부등호(>)로 구분

    • 예제) ul.myList > li > a

    • 설명) myList 클래스를 지닌 <ul> 엘리먼트의 바로 아래 자식 리스트 앨리먼트인 <li>에서

    • 바로 아래 자식 링크만 선택한다.

    • [ 어트리뷰트 셀렉터 ]

    • a[href^=http://] - href의 값이 http://로 시작하는 모든 링크를 의미. 캐럿문자(^)는 값의 시작 부분이 일치하는지를 뜻함

    • form[method] - 명시적으로 method 어트리뷰트를 가지는 <form> 엘리먼트

    • input[type=text] - type이 text인 모든 input 엘리먼트

    • div[title^=my] - title 어트리뷰트의 값이 my로 시작하는 모든 <div> 엘리먼트

    • a[href$=.pdf] - PDF 파일을 참조하는 모든 링크

    • a[href*=jquery.com] - jQuery 사이트를 참조하는 모든 <a> 엘리먼트. *는 어트리뷰트의 값이 임의의 문자열을 포함하는 엘리먼트를 찾아오라는 셀렉터.

    • li:has(a) - <a> 엘리먼트를 포함하는 모든 <li> 엘리먼트

    • li a - <li>엘리먼트 바로 아래 자식의 모든 <a> 엘리먼트

기본 CSS 셀렉터

    • 모든 엘리먼트와 일치

    • E - 태그명이 E인 모든 엘리먼트와 일치

    • E F - E의 자손이면서 태그명이 F인 모든 엘리먼트와 일치

    • E>F - E의 바로 아래 자식이면서 태그명이 F인 모든 엘리먼트와 일치

    • E+F - E의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 F와 일치

    • E~F - E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F와 일치

    • E:has(F) - 태그명이 F인 자손을 하나 이상 가지는 태그명이 E인 모든 엘리먼트와 일치

    • E.C - 클래스명 C를 가지는 모든 엘리먼트 E와 일치. E의 생략은 *.C와 동일함.

    • E#I - 아이디가 I인 엘리먼트 E와 일치. E의 생략은 *#I와 동일함.

    • E[A] - 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

    • E[A=V] - 값이 V인 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

    • E[A^=V] - 값이 V로 시작하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

    • E[A$=V] - 값이 V로 끝나는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

    • E[A*=V] - 값에 V를 포함하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치


위치 셀렉터

    • a:first - 페이지에서 첫 번째 <a> 엘리먼트

    • p:odd - 모든 홀수 번째 문단 <p> 엘리먼트

    • p:even - 모든 짝수 번째 문단 <p> 엘리먼트

    • li:last-child - 부모 엘리먼트의 마지막 자식 엘리먼트

    • :first - 페이지에서 처음으로 일치하는 엘리먼트

    • :last - 페이지에서 마지막으로 일치하는 엘리먼트

    • :first-child - 첫 번째 자식 엘리먼트

    • :last-child - 마지막 자식 엘리먼트

    • :only-child - 형제가 없는 모든 엘리먼트를 반환한다

    • :nth-child(n) - n번째 자식 엘리먼트

    • :nth-child(even:odd) - 짝수 또는 홀수 자식 엘리먼트

    • :nth-child(Xn+Y) - 전달된 공식에 따른 n번째 자식 엘리먼트. Y는 0인 경우 생략 가능.

    • li:nth-child(3n)은 3의 배수 번째 아이템을 반환

    • li:nth-child(5n+1)은 5의 배수 + 1 번째 아이템을 반환

    • :even - 페이지 전체의 짝수 번째 엘리먼트

    • :odd - 페이지 전체의 홀수 번째 엘리먼트

    • :eq(n) - n번째로 일치하는 엘리먼트

    • :gt(n) - n번째 엘리먼트(포함되지 않음) 이후의 엘리먼트와 일치.

    • :lt(n) - n번째 엘리먼트(포함되지 않음) 이전의 엘리먼트와 일치.

    • n번째 자식 셀렉터는 CSS와 호환성을 유지하려고 인덱스를 1부터 시작.

    • jQuery 정의 셀렉터는 범용 프로그래밍 규약에 따라 인덱스를 0부터 시작.


정의 셀렉터

    • :animated - 현재 애니메이션이 적용되고 있는 엘리먼트를 선택

    • :button - 모든 버튼을 선택 ( input[type=submit], input[type=reset], input[type=button], button )

    • :checkbox - 체크박스 엘리먼트만 선택

    • :checked - 선택된 체크박스나 라디오 버튼만 선택 (CSS에서 지원)

    • :contains(foo) - 텍스트 foo를 포함하는 엘리먼트만 선택

    • :disabled - 인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택 (CSS에서 지원)

    • :enabled - 인터페이스에서 활성화 상태인 모든 엘리먼트를 선택 (CSS에서 지원)

    • :file - 모든 파일 엘리먼트를 선택 ( input[type=file] )

    • :header - 헤더 엘리먼트만 선택 <h1>부터 <h6>까지 선택

    • :hidden - 감춰진 엘리먼트만 선택

    • :image - 폼 이미지를 선택 ( input[type=image] )

    • :input - 폼 엘리먼트만 선택 ( input, select, textarea, button )

    • :not(filter) - 필터의 값을 반대로 변경 ( 1.3 버전에서는 변경됨 )

    • :parent - 빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트를 선택

    • :password - 패스워드 엘리먼트만 선택 ( input[type=password] )

    • :radio - 라디오 버튼 엘리먼트만 선택 ( input[type=radio] )

    • :reset - 리셋 버튼 선택 ( input[type=reset] 이나 button[type=reset] )

    • :selected - 선택된 엘리먼트만 선택

    • :submit - 전송 버튼을 선택 ( button[type=submit] 이나 input[type=submit] )

    • :text - 텍스트 엘리먼트만 선택 ( input[type=text] )

    • :visible - 보이는 엘리먼트만 선택

    • :checkbox:checked:enabled - 활성화되고 선택된 체크박스만 선택

    • :not 필터

    • - 필터 결과가 반대로 나오게 함.

    • - CSS 필터에서 지원

    • - jQuery 정의 셀렉터에서도 동작

    • - 필터 셀렉터에는 적용할 수 있지만 찾기 셀렉터에는 적용하지 못한다.

    • - 모두 콜론 문자(:)나 대괄호 문자([)로 시작.

    • input:not(:checkbox) - 체크박스가 아닌 <input> 엘리먼트 선택

    • 필터 셀렉터 - 기준을 추가해서 일치하는 엘리먼트의 집합을 줄여나간다.

    • 찾기 셀렉터 - 이미 선택된 엘리먼트와 맺은 관계를 통해 다른 엘리먼트를 찾는다. [ 자손 셀렉터(공백문자), 자식 셀렉터(>), 형제 셀렉터(+) ]가 있다.


'jquery' 카테고리의 다른 글

<tr>에서 get value() 벨류값 가져오기  (0) 2019.05.22
jQuery 선택자  (0) 2018.10.14
제이쿼리 소개  (0) 2018.10.14
jquery Json date read  (0) 2018.10.14

홈페이지

https://angularjs.org/


angularJS tutorial

https://www.w3schools.com/angular/default.asp



angularJS CDN

1.6.9 버전

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

1.7.5 버전

https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js


'angularJS' 카테고리의 다른 글

angularJS Table Tutorial  (1) 2018.10.14

<script type="text/javascript"> 

location.href="maincontroller/List.do"; 

</script>

'HTML' 카테고리의 다른 글

table colgroup 사용방법  (0) 2018.10.14
HTML 색상표현  (0) 2017.12.19
HTML이란?  (0) 2017.12.18
HTML 이미지 삽입  (0) 2017.12.18

파일 확장자를 보이도록 하는 방법에 대하여 알아보자



파일의 확장자가 보이지 않습니다.



일단 파일 상단의 보기를 눌러 >> 옵션 >> 폴더 및 검색 옵션 변경을 눌러줍니다.



폴더 옵션 >> 보기 >> 고급설정에서 알려진 파일 형식의 파일 확장명 숨기기에 체크를 풀어줍니다.

숨기기 ! =나타내기



파일 확장자명이 보이는 것을 볼수 있습니다.


파일 확장자명을 숨긴상태에서 파일명.확장자를 해봤자 적용되지 않더라구요

그래서 ...

확장자명을 보이게 하는 방법을 알아보았습니다.


경마 프로그램 만들기

쓰레드를 이용한 경마 프로그램을 만들어보자


객체지향 vs. 절차지향


객체지향

객체 지향 프로그래밍은 컴퓨터 프로그램을 명령어의 목록으로 보는 시각에서 벗어나 여러 개의 독립된 단위, 즉 "객체"들의 모임으로 파악하고자 하는 것이다. 각각의 객체는 메시지 를 주고받고, 데이터를 처리할 수 있다.


절차 지향

절차 지향 프로그래밍은 때때로 명령형 프로그래밍과 동의어로 쓰이기도 하지만, 프로시저 호출의 개념을 바탕으로 하고 있는 프로그래밍 패러다임을 의미하기도 한다. 프로시저는 루 틴, 하위프로그램, 서브루틴, 메서드, 함수(수학적 함수와는 다르고 함수형 프로그래밍에 있 는 함수와는 비슷한 의미이다.)라고도 하는데, 간단히 말하여 수행되어야 할 연속적인 계산 과정을 포함하고 있다. 프로그램의 아무 위치에서나 프로시저를 호출될 수 있는데, 다른 프 로시저에서도 호출 가능하고 심지어는 자기 자신에서도 호출 가능하다.



'JAVA를 해보자' 카테고리의 다른 글

[java] controller에서 redirect 방법  (0) 2019.05.22
Java 시간계산 함수  (0) 2019.04.10
java_ 생성자  (0) 2018.01.08
enum_열거형  (0) 2018.01.08
java 변수 사용 범위 static  (0) 2018.01.04

+ Recent posts