Ace-T's Blog 내 검색 [네이버 커넥트 이웃 합니다~^-^/ 요청 大 환영~~]

e-mail 한글 깨짐 현상

Front/Html 2016.12.02 16:41
[Good Comment!!, Good Discussion!!, Good Contens!!]
[ If you think that is useful, please click the finger on the bottom~^-^good~ ]
by ace-T


Problem : e-mail 한글 깨짐 현상

 - setting my html encoding
    : meta http-equiv="Content-Type" content="text/html; charset=utf-8"

현재 이메일을 전송시에 클라이언트에서 한글이 깨져보이거나 정상적으로 보이거나 하는 현상이 있다.

 What is Content-Type?

A Content-Type tells the web browser or email application how to interpret the text characters in your HTML or the body of the email. The most popular character sets are UTF-8 and ISO-8859-1.


 Where does this all fit into HTML emails?

In website development, we can tell the web browser what character set to use in a meta tag like this:

<meta http-equiv="Content-Type"  content="text/html charset=UTF-8" />

Emails are displayed in clients using the same premise. It will display the email based on what Content-Type has been set. However, email clients read the Content-Type value that is set in the email header and they completely ignore the META tag that is within the HTML.


현재 HTML안에 meta tag로 설정을 해놓았는데 무시 된다는 것! 그래서 header에 넣으라는것 같은데...

현재는 아래처럼 <head> tag 안에 meta로 설정을 해놓았다.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>



참고 사이트 :

HTML Character Entities :  http://www.intuitive.com/coolweb/entities.html

HTML Character Converter : https://www.emailonacid.com/character-converter


우선 짜놓은 소스를 살펴보니 이메일 관련 라이브러리를 제공받아서 사용하는데 거기에서 다시 header와 body를 구성하는데 header에 다시 Content-Type와 charset을 구성. 

결국 body는 html meta tag에 설정을 해놨기 때문에 현재의 header에 있는것과 중복이 되는것 처럼 보였다.

나중에 추적하기 위해 로깅을 남기는 작업 수행 및 body에 들어가는 html meta tag들을 삭제 후 테스트.

문제가 되어지는 이메일을 사용하여 재현할 수가 없으니..로깅을 남겨 지켜보도록 함.


끝~





저작자 표시 비영리 변경 금지
신고

'Front > Html' 카테고리의 다른 글

e-mail 한글 깨짐 현상  (0) 2016.12.02

acet 박태하가 추천하는 readtrend 추천글!

설정

트랙백

댓글

:::: facebook을 이용하시는 분들은 로그인 후 아래에 코멘트를 남겨주세요 ::::

angular.isUndefined 사용하기~

Front/AngularJS 2015.09.23 15:05
[Good Comment!!, Good Discussion!!, Good Contens!!]
[ If you think that is useful, please click the finger on the bottom~^-^good~ ]
by ace-T

앵귤러를 사용하면서 아래처럼 ng-model을 통해 input text에 들어오는 키워드들에 대해서 변경된 값을 바로바로 셋팅할 수 가 있다.

<div class="input">
<input type="text" id="keyword" name="keyword" data-maxbyte="52"
class="form-control input-sm" value="{{keyword}}" ng-model="app.query" ng-keypress="($event.charCode==13)?search(app.query):return" placeholder="검색어를 넣어주세요.">
</div>


그리고 한가지 유의할 점은 input value에 {{keyword}} 즉, 다른쪽에서 넘어온 데이터를 셋팅을 해주게 되면

input 의 변화가 없다면 undefined가 search()의 파라미터로 넘어가게 된다.

ex) {{keyword}}가 카카오! 이 상태에서 검색버튼을 누르면 app.query에는 아직 undefined이다!! 그래서 제대로 된 검색결과가 나오지 않는다.




그러므로 체킹을 한번 해주고 기존에 있는 데이터({{keyword}})를 활용하면 되겠다.

if(angular.isUndefined(keyword)){
keyword=$scope.keyword;
}


   끝.


저작자 표시 비영리 변경 금지
신고

acet 박태하가 추천하는 readtrend 추천글!

설정

트랙백

댓글

:::: facebook을 이용하시는 분들은 로그인 후 아래에 코멘트를 남겨주세요 ::::

Failed to load resource: the server responded with a status of 404 (Not Found)

Front/AngularJS 2015.09.21 14:15
[Good Comment!!, Good Discussion!!, Good Contens!!]
[ If you think that is useful, please click the finger on the bottom~^-^good~ ]
by ace-T

angularJS를 사용하는데.. img를 가져오는데 resource에서 상대경로로 이상한 resource를 가져오는것이 아닌가? -_-;;

그래서 오류가..<img src="{{item.imageUrl}}"~~블라블라~~ 

item.imageUrl 부분에서 났다.


<<오류 내용>>

Failed to load resource: the server responded with a status of 404 (Not Found)


Resource쪽 확인 - 이상한 값이 들어가 있다..why? ㅠㅠ 




원인은 바로.. img src부분에서  agularJS의 {{item.imgeUrl}}이 src에서 오동작을 하는것 같다.

ng-src로 바꿔주는 깔끔하게 잘돌아간다!!

https://docs.angularjs.org/api/ng/directive/ngSrc


<img ng-src="{{item.imageUrl}}"


  - 끝 -

저작자 표시 비영리 변경 금지
신고

acet 박태하가 추천하는 readtrend 추천글!

설정

트랙백

댓글

:::: facebook을 이용하시는 분들은 로그인 후 아래에 코멘트를 남겨주세요 ::::

learn angularJS

Front/AngularJS 2014.11.06 17:21
[Good Comment!!, Good Discussion!!, Good Contens!!]
[ If you think that is useful, please click the finger on the bottom~^-^good~ ]
by ace-T




이 페이지에서 학습을할 것은?! angularjs를 하기 위해 기본적인 지식들 정리! ㅎㅎ



공식 사이트 : https://www.angularjs.org/

배우기 위한 사이트 : https://thinkster.io/angulartutorial/a-better-way-to-learn-angularjs/

    ㄴ angularJS binding 동영상 : 음...ng-model의 유용함을 보여주는?! : https://thinkster.io/egghead/binding/

    ㄴ 기본 컨셉을 알려줌! : https://code.angularjs.org/1.2.26/docs/guide/concepts


가이드 페이지 : https://docs.angularjs.org/guide/


모듈?? 

모듈이란?


그리고 소스를 보다보면 config, factory, controller 등을 볼수 있다.

먼저 concept에 대해서 잠깐 보면 좋을것 같다. 참고 사이트 : https://docs.angularjs.org/guide/concepts


Controllers are "classes" or "constructor functions" that are responsible for providing the application behavior that supports the declarative markup in the template.


ex)

someModule.controller('MyController', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) {
...
$scope.aMethod = function() {
  ...
}
...
}]);

controller의 예제를 보자! 

Controller


Factory에 대해 알아보자!

Factory methods are responsible for creating most objects in Angular.


2가지 특징을 들어보면

1) 서비스들을 사용할 수 있다. 서비스는 아래에서 말하겠다.

2) 서비스를 초기화 한다! 마치 자바에서는 생성자가 있다면 앵귤러에는 팩토리가 있는?! 그리고 팩토리패턴도 연상되어진다.

    팩토리는 보통 객체를 생성한다. 물론 조금 개념차이가 있는듯 하다. 앵귤러는 서비스사용, 서비스 초기화!를 들수 있겠다.


예제는 아래의 서비스에 나오니 참고하도록 하자! 서비스 gogo! 


Service에 대해서 알아보자!

Service



로그인 관련하여 필수적인! $cookieStore에 대해서 알아보자!^^

참고 url : https://docs.angularjs.org/api/ngCookies/service/$cookieStore


$cookieStore

  1. - service in module ngCookies

Provides a key-value (string-object) storage, that is backed by session cookies. Objects put or retrieved from this storage are automatically serialized or deserialized by angular's toJson/fromJson.

Requires the ngCookies module to be installed.


Dependencies

Methods

  • get(key);

    Returns the value of given cookie key

    Parameters

    ParamTypeDetails
    keystring

    Id to use for lookup.

    Returns

    Object

    Deserialized cookie value.

  • put(key, value);

    Sets a value for given cookie key

    Parameters

    ParamTypeDetails
    keystring

    Id for the value.

    valueObject

    Value to be stored.

  • remove(key);

    Remove given cookie

    Parameters

    ParamTypeDetails
    keystring

    Id of the key-value pair to delete.

Example

angular.module('cookieStoreExample', ['ngCookies'])
.controller('ExampleController', ['$cookieStore', function($cookieStore) {
  // Put cookie
  $cookieStore.put('myFavorite','oatmeal');
  // Get cookie
  var favoriteCookie = $cookieStore.get('myFavorite');
  // Removing a cookie
  $cookieStore.remove('myFavorite');
}]);



--------  아래) 2014년 11월 06일 추가 -----


$rootScope

  1. - $rootScopeProvider
  2. - service in module ng

Every application has a single root scope. All other scopes are descendant scopes of the root scope. Scopes provide separation between the model and the view, via a mechanism for watching the model for changes. They also provide an event emission/broadcast and subscription facility. See the developer guide on scopes.


What are Scopes?

scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events.

참고 url : https://docs.angularjs.org/guide/scope


----------- 아래) 2014년 11월 12일 추가 ----------

https://docs.angularjs.org/api/ng/filter/limitTo

limitTo

  1. - filter in module ng

Creates a new array or string containing only a specified number of elements. The elements are taken from either the beginning or the end of the source array, string or number, as specified by the value and sign (positive or negative) of limit. If a number is used as input, it is converted to a string.

ex) <li 블라블라~ ng-repeat="mark in markData | limitTo:limit">


적용 방법 

http://stackoverflow.com/questions/22984727/angularjs-how-to-change-ng-repeat-limitto-based-on-variable



저작자 표시 비영리 변경 금지
신고

acet 박태하가 추천하는 readtrend 추천글!

설정

트랙백

댓글

:::: facebook을 이용하시는 분들은 로그인 후 아래에 코멘트를 남겨주세요 ::::

angular, bower, karma, grunt, yo?

Front/AngularJS 2014.10.15 18:02
[Good Comment!!, Good Discussion!!, Good Contens!!]
[ If you think that is useful, please click the finger on the bottom~^-^good~ ]
by ace-T



업무를 하면서 정리를 하지 않으니 그냥 대충 알고 가는것 같다.

천천히 제대로 따라가자!


아래는 이번 웹프로젝트에 참여하면서 사용할 친구들이다.

단, node.js가 먼저 셋팅되어있어야 한다.(npm 등)

localhost:~ terrypark$ npm list --global -depth=0

/usr/local/lib

├── bower@1.3.12

├── generator-angular@0.9.8

├── generator-karma@0.8.3

├── grunt-cli@0.1.13

├── npm@1.4.28

└── yo@1.3.0


생소한 것들이 많다.

angular, bower, karma, grunt, yo?

하나씩 알아가보자!

참고 url : https://www.youtube.com/watch?v=QfWmtb8bntU


우리의 방향은 아래의 그림인 것 같다.




YO

- Yeoman의 일부.

템플릿 npm 모듈로 작성한다.(배포하거나 로컬에 두고 실행)

이미 다양한 템플릿이 존재.

커스트마이징 가능

영어로는

Yo is maintained by the Yeoman project and offers web application scaffolding, utilizing scaffolding templates we refer to as generators. You typically install yo and any generators you think you might use via npm. : 간단히 말해서..웹어플리케이션의 템플릿을 제공! 

설치 시에 권한 문제가 있을 수 있음! -> su root 등으로 root권한으로 해주면 됨!

npm install -g yo  
1) npm install -g generator-webapp   : Basic Scaffolding
2) npm install -g generator-angular : Scaffolding an AngularJS app

1) 또는 2) 설치! angular로 하려면 2번을 셋팅!

2)번 선택 후 project 디렉토리를 하나 만들고 그 안에서 yo angular 명령어 수행!

localhost:app terrypark$ yo angular


     _-----_

    |       |    .--------------------------.

    |--(o)--|    |    Welcome to Yeoman,    |

   `---------´   |   ladies and gentlemen!  |

    ( _´U`_ )    '--------------------------'

    /___A___\    

     |  ~  |     

   __'.___.'__   

 ´   `  |° ´ Y ` 


Out of the box I include Bootstrap and some AngularJS recommended modules.

? Would you like to use Sass (with Compass)? No

? Would you like to include Bootstrap? Yes

? Which modules would you like to include? angular-animate.js, angular-cookies.js, angular-resource.js, angular-route.js, angular-sanitize.js, angular-touch.js

angular-animate.js

  angular-cookies.js

  angular-resource.js

  angular-route.js

  angular-sanitize.js

  angular-touch.js


결과 - 아래와 같이 만들어집니다.

localhost:ManagerOfMoney terrypark$ ls -alr

total 88

drwxr-xr-x   5 terrypark  staff   170 11 17 11:27 test

-rw-r--r--   1 terrypark  staff   977 11 17 11:27 package.json

drwxr-xr-x  21 terrypark  staff   714 11 17 11:28 node_modules

drwxr-xr-x  15 terrypark  staff   510 11 17 11:27 bower_components

-rw-r--r--   1 terrypark  staff   488 11 17 11:27 bower.json

drwxr-xr-x  12 terrypark  staff   408 11 17 11:27 app

-rw-r--r--   1 terrypark  staff  9700 11 17 11:27 Gruntfile.js


더 직관적으로 보면





In the AngularJS framework, for example

$ yo angular:controller myController
$ yo angular:directive myDirective
$ yo angular:filter myFilter
$ yo angular:service myService

$ yo angular:controller mainController

   create app/scripts/controllers/maincontroller.js

   create test/spec/controllers/maincontroller.js


셋팅 확인은  

npm list --global -depth=0

/usr/local/lib

├── bower@1.3.12

├── generator-angular@0.9.8

├── generator-karma@0.8.3

├── grunt-cli@0.1.13

├── npm@1.4.28

└── yo@1.3.0


참고 

필수참고! : http://yeoman.io/learning/

https://www.youtube.com/watch?v=zBt2g9ekiug

https://github.com/yeoman/yo

http://twofuckingdevelopers.com/2013/07/yeoman-modern-workflows-for-angularjs/

http://www.toptal.com/angular-js/your-first-angularjs-app-part-2-scaffolding-building-and-testing


GRUNT

Grunt is a task-based command line build tool for JavaScript projects.’

프로젝트에 사전정의된 task 단위로 실행되며 command line을 통해 동작하는 자바스크립트 용 빌드 툴

Grunt는 JavaScript Task Runner, JavaScript 프로젝트 관리를 위한 build-tool이다

npm install -g grunt-cli
grunt serve // 서버 시작!

참고 

http://gruntjs.com/getting-started

http://nuli.navercorp.com/sharing/blog/post/1132682


KARMA

카르마는 프로젝트에서 테스트를 위함이다.

카르마를 동작시키기위해서는 node.js와 npm이 필요하다.

참고

http://karma-runner.github.io/0.12/index.html

karma install : http://karma-runner.github.io/0.12/intro/installation.html

testacular : http://www.youtube.com/watch?v=MVw8N3hTfCI

npm install -g testacular



BOWER

보우어가 하는 짓은 다음과 같다. 즉, 실제로 사용되어지는 라이브러리등을 install 하여 사용한다. 간혹 install은 되어있으나 

app.js에 자동으로 만들어지지 않을 경우가 종종 있다. 이럴경우에는 수동으로 넣어주면 된다.

ex)

   .......

   'ui.router',

    'base64'  <--수동으로 넣어주기.

  ])

Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. 

Bower manages all these things for you.

npm install -g bower    // bower 설치. npm은 bower, grunt 등을 설치!
bower install <package> // bower는 위에 언급한 것처럼 frameworks, libraries등을 설치!

ex) bower install jquery 


참고

http://bower.io/

bower가 제공하는 package 찾기 : http://bower.io/search/


참고 - 개인 프로젝트 시 참고~

https://travis-ci.org/


      - 끝 -



저작자 표시 비영리 변경 금지
신고

acet 박태하가 추천하는 readtrend 추천글!

설정

트랙백

댓글

:::: facebook을 이용하시는 분들은 로그인 후 아래에 코멘트를 남겨주세요 ::::

ACE-T's JS Part 04. 익명함수!

Front/JavaScript 2014.07.03 17:31
[Good Comment!!, Good Discussion!!, Good Contens!!]
[ If you think that is useful, please click the finger on the bottom~^-^good~ ]
by ace-T

요즘 gis를 하는데 있어서...아래의 형태가 있었습니다. 음..조금 당황 했습니다. ㅋㅋㅋ;; 많이 써보는 형태는 아니였던게죠..ㅠ.ㅠ..

anyways..이제부터 알아가보도록 하겠습니다.^-^

(function(){


})();



참고 사이트  http://www.nextree.co.kr/p4150/    

KSUG 최영목님이 댕기시는 회사에 너무 잘 정리를 해놔서..참고 하였습니다. 넥스트리 화이팅! ㅎㅎ


보통 함수 선언을할 때 아래와 같이 합니다.


이것은 함수 선언식이라고 부릅니다.

function acetBlog(){

   /* 실행코드 */

}


하지만 아래와 같이! 선언할 수 있습니다. 함수 표현식과 즉시실행함수 가 있습니다. 당황하지 마세요! 이제부터 알아가면 되니깐요! ㅎ

함수 정의할 때 “함수는 first-class object이므로 변수에 할당될 수 있다.” 라는 전제 하에 아래와 같이 작성할 수 있습니다.

제가 보았던

(function(){


})();

이친구는 5번 이였군요! ㅎㅎㅎ


왜 이런식으로 작성하는 걸까요???

간단히 생각해보면..

자바스크립트의 동작 아키텍처를 정확히는 모르겠지만 함수선언식과 함수표현식의 큰 차이는??

함수 선언식 :  스크립트 로딩시에 VO에 함수를 저장!

함수 표현식 : 런타임시에 해석되고 실행! VO에 함수 저장 X

um..클락포드 형님 책에 분명히 나왔던 것 같은데...이 내용을 알고 보았다면 더더욱 재밌고 이해가 더 잘되었을 것 같네요 ㅎㅎ

그리고 함수 선언식이 많으면 많을 수록 VO에 함수를 저장하고 하면 처리에서 느려질 것 입니다.


자! 이제 함수 표현식 친구들을 만나보겠습니다.

우선 아래를 읽어 봅시다. 고개를 끄덕끄덕 거리는 모습이 눈에 선하네요~저만 그런가요ㅋㅋ;;

자바스크립트에서 가장 큰 문제점 중의 하나는 글로벌 스코프에 정의된 것은 코드 내의 어디서든지 접근이 가능하다는 것입니다. 하지만, 외부에 공유되면 안되거나 공유될 필요가 없는 속성이나 메소드가 있습니다. 또한, 다른 스크립트 파일 내에서 동일한 이름으로 명명된 변수나 함수가 있을 경우 원치 않는 결과를 가져올 수 있습니다.


우선 코드를 하나 보겠습니다.

결과는 아래와 같습니다.


코드 : 익명 함수표현식(anonymous function expression)

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

var app = function(){


console.log("Hi~~~~test01");

}


app();


</script>


    </head>


<body>

This is function expresstion TEST!


</body>

</html>



즉시 실행함수를 한번 살펴보겠습니다.

결과 test01.html과 같은 결과가 나옵니다. Good!


단, 함수표현식은 함수를 정의하고, 변수에 함수를 저장하고 실행하는 일련의 과정을 거칩니다.  하지만, 즉시실행함수를 사용하면 이와 같은 과정을 거치지 않고 즉시 실행된다는 특징이 있습니다.


코드 :

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

(

                          function(){

console.log("Hi~~~~test02");

  }()

                        );


</script>


    </head>


<body>

This is function expresstion TEST!


</body>

</html>  



변수를 하나 할당하고 즉시 실행함수를 호출 해보겠습니다.
결과 : 결과는 console에 private라고 찍힙니다.

코드 : 아래의 코드에서 가장 눈여겨 볼 부분은 app.prop 이부분 입니다.  
연결고리들이 보이시나요?  app - prop - privateVar - 'private'

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

var app = (function() {

   

       var privateVar = 'private';

   

       return {

        prop : privateVar

       };


       }());


                       // 함수에 포함되지 X

       console.log(app.prop); // "private" 출력


</script>


    </head>


<body>

This is function expresstion TEST!


</body>

</html>


즉시실행함수 내부의 변수 privateVar를 접근한 것입니다. 자바스크립트의 변수는 함수내의 scope를 가집니다. 그런데 외부에서 접근을 한 것
입니다. 와우!! 아래를 읽어보세요!~~

이와 같이, 즉시실행함수는 변수의 스코프를 포함하는데 사용되며 외부에서 함수 내의 변수에 접근할 경우 이를 통제할 수 있습니다. 즉시실행함수는 글로벌 네임스페이스에 변수를 추가하지 않아도 되기 때문에 코드 충돌이 없이 구현할 수 있어 플러그인이나 라이브러리 등을 만들 때 많이 사용됩니다.


다음으로는! 기명 함수표현식과 즉시실행 함수에 파라미터 넘겨주기 입니다.


결과 :



코드 :

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

 

                       // 기명 함수표현식

var buyCar = function(carName) {

   // I Buy a sonata1. This is good Car!. 출력

   console.log('I Buy a ' + carName + '. This is good Car!.');

};

buyCar('sonata1');

 

                        // 즉시 실행함수!

(function(carName) {

   // I Buy a sonata2. This is good Car!.출력

   console.log('I Buy a ' + carName + '. This is good Car!.');

}('sonata2'));


</script>


    </head>


<body>

This is function expresstion TEST!


</body>

</html>



마지막으로 오픈소스의 소스 내용을 한번 보겠습니다.

코드 : 아래의 소스는 html에서 <script type="text/javascript" src="./js/Taeha/AcetGISMain.js"></script> 의 내용이라고 가정하면

   jsFiles = [

                "AcetMap.js",

                "GISConstant.js",

                "GISModeState.js"

               

            ]; // etc.


에 원하는 js를 넣어두면 자동으로 js가 선언이 되어집니다. 와우! 유용한 것 같아요! ㅎㅎㅎ 

그리고..소스를 보면 지금까지 배웠던 내용들이 눈에 보이면 OK! 입니다. 

홧팅2


/* Copyright (c) 2006-2012 by OpenLayers Contributors (see authors.txt for  

* full list of contributors). Published under the 2-clause BSD license.

 * See license.txt in the OpenLayers distribution or repository for the

 * full text of the license. */


/* 

 * @requires OpenLayers/BaseTypes.js

 * @requires OpenLayers/Lang/en.js

 * @requires OpenLayers/Console.js

 */

 

/*

 * TODO: In 3.0, we will stop supporting build profiles that include

 * OpenLayers.js. This means we will not need the singleFile and scriptFile

 * variables, because we don't have to handle the singleFile case any more.

 */


(function() {

    /**

     * Before creating the OpenLayers namespace, check to see if

     * OpenLayers.singleFile is true.  This occurs if the

     * OpenLayers/SingleFile.js script is included before this one - as is the

     * case with old single file build profiles that included both

     * OpenLayers.js and OpenLayers/SingleFile.js.

     */

    var singleFile = false;

    

    /**

     * Relative path of this script.

     */

    var scriptName = "AcetGISMain.js";


    /*

     * If window.OpenLayers isn't set when this script (OpenLayers.js) is

     * evaluated (and if singleFile is false) then this script will load

     * *all* OpenLayers scripts. If window.OpenLayers is set to an array

     * then this script will attempt to load scripts for each string of

     * the array, using the string as the src of the script.

     *

     * Example:

     * (code)

     *     <script type="text/javascript">

     *         window.OpenLayers = [

     *             "OpenLayers/Util.js",

     *             "OpenLayers/BaseTypes.js"

     *         ];

     *     </script>

     *     <script type="text/javascript" src="../lib/OpenLayers.js"></script>

     * (end)

     * In this example OpenLayers.js will load Util.js and BaseTypes.js only.

     */

    var jsFiles = null;


    var getBitGISScriptLocation = function(){

        var r = new RegExp("(^|(.*?\\/))(" + scriptName + ")(\\?|$)"),

                s = document.getElementsByTagName('script'),

                src, m, l = "";

            for(var i=0, len=s.length; i<len; i++) {

                src = s[i].getAttribute('src');

                if(src) {

                    m = src.match(r);

                    if(m) {

                        l = m[1];

                        break;

                    }

                }

            }


            return l;


    }


    


    /**

     * OpenLayers.singleFile is a flag indicating this file is being included

     * in a Single File Library build of the OpenLayers Library.

     * 

     * When we are *not* part of a SFL build we dynamically include the

     * OpenLayers library code.

     * 

     * When we *are* part of a SFL build we do not dynamically include the 

     * OpenLayers library code as it will be appended at the end of this file.

     */

    if(!singleFile) {

        if (!jsFiles) {

            jsFiles = [

                "AcetMap.js",

                "GISConstant.js",

                "GISModeState.js"

               

            ]; // etc.

        }


        // use "parser-inserted scripts" for guaranteed execution order

        // http://hsivonen.iki.fi/script-execution/

        var scriptTags = new Array(jsFiles.length);

        var host = getBitGISScriptLocation() + "lib/";

        for (var i=0, len=jsFiles.length; i<len; i++) {

            scriptTags[i] = "<script src='" + host + jsFiles[i] +

                                   "'></script>"; 

        }

        if (scriptTags.length > 0) {

            document.write(scriptTags.join(""));

        }

    }

})();



이제 궁금증이 풀렸으니 소스를 보러~~여기 까지 포스팅 합니다! ㅎㅎ 다음에 또 만나요! 더 자세한 내용은 넥스트리를 방문해주세요^0^

이 포스팅은 자바스크립트 제대로 배우기 커뮤니티에 올라갑니다.

 https://www.facebook.com/groups/learnjsproperly/


참고 :


2014/04/24 - [Script/JavaScript] - ACE-T's JS_Part 01. 자바스크립트를 배운다는 것은??


2014/05/08 - [Script/JavaScript] - ACE-T's JS_Part 02. Style과 Event 다루기!!


2014/05/10 - [Script/JavaScript] - ACE-T's JS Part 03. Jquery 기초를 배워봅시다!


    - END -

저작자 표시 비영리 변경 금지
신고

acet 박태하가 추천하는 readtrend 추천글!

설정

트랙백

댓글

:::: facebook을 이용하시는 분들은 로그인 후 아래에 코멘트를 남겨주세요 ::::

ACE-T's JS Part 03. Jquery 기초를 배워봅시다!

Front/JavaScript 2014.05.10 14:45
[Good Comment!!, Good Discussion!!, Good Contens!!]
[ If you think that is useful, please click the finger on the bottom~^-^good~ ]
by ace-T


2014/04/24 - [Script/JavaScript] - ACE-T's JS_Part 01. 자바스크립트를 배운다는 것은??


2014/05/08 - [Script/JavaScript] - ACE-T's JS_Part 02. Style과 Event 다루기!!


오늘은 어제 적용해본 Jquery에 대해서 간단히 설명 하려고 합니다 ㅎㅎ


<< 전체 화면 >>




하나하나씩 적용한 내용을 살펴 보도록 하겠습니다!~


Result  : Jquery로 CSS변경 해보기


UI source




JS source

$(document).ready(function(){                         // DOM 생성이 완료 되면 실행.

 

     // CSS 변경해보기!!

$('#study').css('background','pink');            // $('')라는 것으로  Jquery object화 하는 것 입니다.

$('#develop').css('background','yellow');    // 또한 매개변수로는 #이면 id, .이면 class, 그냥이면 element

$('#result').css('background','skyblue');     // .css() 를 통해 css의 내용들을 바꾼다는 내용입니다.  

    
     // 여러가지 테스트 흔적..ㅋㅋ
     //$('body ul #notice').hide();            // body 찾고 자식셀렉터인 ul 찾고 #notice, 즉 id가 notice를 찾습니다.  

//var home = $('div ul');                   // 변수에 대입도 가능 합니다.  var 변수 = $(''); - jquery 객체

//home.find('#fCome').hide();         // .hide()는 뜻그대로 숨기는 기능 입니다. .show()도 있겠죵!

//$('.tab-pane').hide();






    Result : Jquery로 이미지 조정 해보기



UI Source



JS Source

var imgAttr1 = $('.carousel-inner #img1');  // 이것 또한 class찾고 id가 img1인 것을 찾습니다.

var imgAttr2 = $('.carousel-inner #img2');

var imgAttr3 = $('.carousel-inner #img3');

imgAttr1.width('1050px');        // width는 가로, height는 세로 크기 조절!

imgAttr1.height('350px');

imgAttr2.width('1050px');

imgAttr2.height('450px');

imgAttr3.width('1050px');

imgAttr3.height('550px');






Result



UI Source



JS Source

/* facebookLink */

//$('#facebookLink').fadeIn();        // 없던 것이 보이게!

$('#facebookLink').slideDown();   // 없던 것이 보이게!






Result - Jquery를 사용한 애니메이션 효과



UI Source




JS Source

// 애니메이션 효과 입니다. 날아오기!!

var div1=$('#div1');

div1.animate({            // 애니메이션 효과!   0,0 에서 300, 300으로 이동하게 된다.

top: 300,

left: 300

},1000);                      // 빠르기 지정

div1.slideUp(2000);   // 있던 것이 사라지게!


//$('#div1').text('말만? NO!, 생각만? NO!!'); // 텍스트가 교체! html()도 있다!

//$('#div1').empty();  // div는 남아있지만 텍스트는 사라진다.

//$('.carousel-inner #attrTest').attr('src', 'resources/img/acet.png'); // 요소의 속성값을 변경하는 메소드!






Result - Jquery를 이용한 이벤트


검색 버튼 눌렀을 경우


마우스를 가져다 댈 경우


커서가 있을 경우



UI Source




JS Source

//$('#searchInput').val('검색할 키워드를 넣어주세요!');

     var searchInput=$('#searchInput');    // 변수로 저장, id가 searchInput인 input box

searchInput.width('20em');                 // 길이 조정


/***** EVENT ******/

// click

var searchBtn = $('#searchBtn');

   searchBtn.click(function(){               // click event는 간단히  click()를 사용하면 된다.

   //$('#searchInput').empty();

   alert("click 되었습니다.");

});



// mouseenter, mouseleave

searchInput.mouseenter(function(){      // 마우스를 가져다 대었을 때

   searchInput.val('검색할 키워드를 넣어주세요!');

});


    searchInput.mouseleave(function(){      // 마우스를 띄었을 때

    searchInput.val('');  // empty()가 안먹힘;;

    //$('#searchInput').val('검색할 키워드를 넣어주세요!');

});

    

    

   // focus, blur

    searchInput.focus(function(){            // 마우스 커서

       searchInput.val(''); // empty();

    });

    

    

});






저번 시간에 한번 해봐야겠다던 그 이벤트!

um..자바스크립트쪽은 따로 더 공부를 하면서 정리하도록 하겠습니다^^

// 사용자 이벤트 테스트 

/*window.onload=function(){

   var sBtn = window.document.getElementById("searchBtn");

   sBtn.addEventListener("click", function(e){

  // 1. 이벤트 생성

  var myEvent = document.createEvent("Event");


  // 2. 이벤트 객체에 이벤트와 함께 담아 보낼 데이터 추

  myEvent.data1 ="Sorry Not yet..Support! 검색은 루씬 검색엔진으로 할 예정 입니다!";


  // 3. 이벤트 초기화

  myEvent.initEvent("myEvent", false, false);


  // 4. 이벤트 발생

  sBtn.dispatchEvent(myEvent);    

   });

   

   sBtn.addEventListener("myEvent", function(e){

       alert("검색은..!, target ="+e.target.id+", data1 ="+e.data1);


    });

}*/


<< 소스 파일 >>


변수로 뺀 js

mainPage.js


변수로 빼지 않고 일일이 $('')로 한 소스

old_mainPage.js


mainPage.css



<< 참고 사항 >> - 친구가 제공!

더보기



끝으로 자바스크립에서의 DOM접근을 구현해보다가 Jquery를 통해 접근을 해보니 정말 간단하고 쉬운것을 알 수가 있었습니다.

기초적인 것만으로도 간단히 사이트를 꾸며 볼수 있었던 것 같습니다.

차근차근 하나씩 해봐야겠네요^-^/


facebook group - javascript 제대로 배우기에 올리는 글 입니다.

감사합니다.


                 - END -

저작자 표시 비영리 변경 금지
신고

설정

트랙백

댓글

:::: facebook을 이용하시는 분들은 로그인 후 아래에 코멘트를 남겨주세요 ::::

ACE-T's JS_Part 02. Style과 Event 다루기!!

Front/JavaScript 2014.05.08 01:16
[Good Comment!!, Good Discussion!!, Good Contens!!]
[ If you think that is useful, please click the finger on the bottom~^-^good~ ]
by ace-T


<< 이전 글 >>

2014/04/24 - [Script/JavaScript] - ACE-T's JS_Part 01. 자바스크립트를 배운다는 것은??



ACE-T's JS_Part 02. Style과 Event 다루기!!


1) Style 다루기

    태그 엘리먼트에 Style 적용하는 방법은 2가지가 있습니다.

    - CSS 구문으로 다양한 스타일 속성을 구룹(선택자)으로 만들어 스타일을 적용하는 방법

      (내부/외부 스타일 정의 모두 포함)

    - 엘리먼트에 직접 스타일 속성을 작성하는 방법(인라인 스타일)



2) Event 다루기

   자바스크립트에서..이벤트 정말 중요하죠~!! ㅎㅎ;

   먼저 종류부터 알아보도록 하겠습니다!^-^

   (1) 마우스 이벤트 : 사용자가 마우스 버튼을 눌렀을 때 발생하는 이벤트

   (2) 키보드 이벤트 : 사용자가 키보드를 눌렀을 때 발생하는 이벤트

   (3) 엘리먼트 고유 이벤트 : 엘리먼트마다 발생하는 고유의 이벤트, 예로 <img>엘리먼트의 경우 이미지가 모두 로드되면

       onload 이벤트가 발생해서 이미지가 성공적으로 로드됐음을 알리며, input 엘리먼트의 경우 입력한 정보가 바뀌면    

       onchange 이벤트가 발생해서 입력 정보가 변경됐음을 알립니다.

   (4) 사용자 정의 이벤트 : 주로 개발자가 특정 기능을 수행하는 클래스를 만들고 어떤 작업이 끝났음을 사용자에게 

         알려줄 때  사용되는 이벤트 입니다.


  두번째로는 이벤트 단계에 대해서 알아보도록 하겠습니다!^-^

  이벤트는 크게 3단계에 걸쳐 발생 합니다.

  1) 캡처(Capture)단계

     - 가장 먼저 실행되는 단계로서, document에서 시작해 실제 이벤트를 발생시킨 타켓까지 이동 합니다. 

       이를 캡처링이라고 합니다. 이때 리스너가 등록돼 있다면 등록된 리스너가 바로 실행 됩니다.

  2) 타겟(Target)단계

     - 캡처 단계를 거쳐 실제 이벤트를 발생시킨 타켓에 도착한 상태를 말합니다.

  3) 버블(Bubble)단계

     - 타겟 단계까지 오면 이벤트 흐름은 다시 타겟 단계의 역순으로 움직이기 시작합니다. 이 흐름을 버블링이라고 합니다.

  위의 이벤트 단계에 대해서는 따로 정리를 해둘 필요가 있을 것 같네요. 여기에서는 요기까지만!~


실습을 해보도록 하겠습니다.

1) 리스너 추가하기

     ex_01) DOM Level 0 방식



ex_02) DOM Level 1 방식 : node.js에서도 많이 사용되고 있는 방식이군요!



result> 결과는 ex_01, ex_02 둘다 같은 alert결과이기에 한번만 작성하겠습니다.

click 하였을때의 결과 -일반 함수를 이벤트 리스너로 사용하는 경우

마우스 오버 하였을 때의 결과 - 임의의 함수를 이벤트 리스너로 사용하는 경우



최종 소스 : 

addListener.html

2) 리스너 삭제하기

   등록된 리스너 가운데 사용하지 않는 리스너는 삭제해야 합니다. 

   리스너를 삭제하는 방법 역시 이벤트를 추가할 때처럼 두가지 방식이 있습니다.

   a. DOM Level 0 방식

      ex) 이벤트 리스너를 btn_1.onClick=on_Click처럼 설정 했다면

            이벤트 삭제는 btn_1.onClick=null;

  b. DOM Level 2 방식

      ex) 이벤트 리스너를 btn_1.addEventListener("click", on_click, false)로 등록했다면 

            btn_1.removeEventListener("click", on_click, false); 로 해서 제거할 수 있습니다.

            단, 익명 함수를 만들어서 사용한 경우는 제거할 수 없습니다!!

            또한, IE 9이하 버전에서는 removeEventListener 메소드 대신 detachEvent메소드를 사용해야 합니다.


3) 이벤트 발생 시키기

    btn_1을 눌러서 btn_2를 실행 시켜보는 이벤트! 즉, btn_2를 클릭하지 않았어도 클릭한 것처럼 만들 수 있습니다.

    1. document의 createEvent()를 이용해 발생시키려는 이벤트 객체를 생성

    2. 이벤트와 함께 담아서 보낼 데이터를 이벤트 객체에 추가

    3. 1번에서 생성한 이벤트 객체의 initEvent()를 호출해 이벤트를 초기화

    4. 생성한 이벤트 객체를 dispatchEvent()의 매개변수 값으로 전달해 실행


    <<소 스>>


결과

버튼 1을 눌렀을 때


버튼 2를 눌렀을 때

    

소스파일

eventGenerate.html



4) 사용자 정의 이벤트

  << 소스 >>

결과 


소스파일

userEventGenerate.html


이 내용을 토대로 뭔가 하나 만들어봐야겠네요^-^


P.S Will do!

     1) 이벤트 단계(캡쳐, 타켓, 버블) more Detail~

     2) about DOM Level 0 and 2

     3) 위의 내용을 토대로 하나 만들어보기!


       - END -  

   







   

   


   



저작자 표시 비영리 변경 금지
신고

acet 박태하가 추천하는 readtrend 추천글!

설정

트랙백

댓글

:::: facebook을 이용하시는 분들은 로그인 후 아래에 코멘트를 남겨주세요 ::::

ACE-T's JS_Part 01. 자바스크립트를 배운다는 것은??

Front/JavaScript 2014.04.24 14:02
[Good Comment!!, Good Discussion!!, Good Contens!!]
[ If you think that is useful, please click the finger on the bottom~^-^good~ ]
by ace-T

 

[pic 출처 : http://www.scriptcase.net/blog/javascript-if-else/ ]

 

 

충격적이다..

자바스크립트가 무엇인가에 대해서 자세히 모르고 있었네요..

그래서 알아보려고 합니다..

자바스크립트를 배운다는 것은 무엇인가에 대해서...


큰 구조를 파악 해봅시다.

1) 자바스크립트 Core - 여지껏...이부분만 파니...전체적인 이해가 안갔던 것 같네요..ㅠ. ㅠ

    기본 문법과 구조, 데이터 타입, 조건문(if, switch), 반복문(for, while), 함수(function), 기본 라이브러리(Math, String, Date..) 

2) 자바스크립트(DOM - Document Object Model)

    Element 제어, Style 제어, Attribute 제어, Event 제어를 할 수 있는 기능.   

3) 자바스크립트(BOM - Browser Object Model)

    Window, Navigator, Location, History, Document, Screen 객체가 있음.


DOM이란?

Web page 자체를 손수 편집하지 않고 웹브라우저에 표시된 상태에서 웹페지이의 특정부분을 동적으로 지우거나 다른 내용으로 변경하거나, 또는 글자 색과 글자 크기를 바꾸고 싶을 때, 마우스 올렸을 때 툴팁(말풍선)이 나오게 한다거나 할 때 우리는 모두 DOM의 기능을 활용하게 됩니다.


"DOM은 지켜야 할 약속만 적혀 있는 문서" - Interface(자바 Interface  라고 보면 됨, OOP~!!)


자~인터페이스에 대해서 알아봅시다.

Interface란?

 : 실체가 존재하지 않는 서로 지켜야 할 약속!!~

ex) 이 기기는 220볼트에서만 동작하는 전용 기기입니다.

       이 비디오 카드는 HDMI에서만 동작합니다.


위의 예제처럼 약속? 스펙? 규약? 명세서? 뭐 이런 느낌이라고 보시면 됩니다. 아..아닌가?!! ㅋㅋ;; anyways..

Interface는 IDL(Interface Definition Language)로 작성돼 있습니다.

즉, DOM 문서는 인터페이스 정의 문서(IDL)로 작성 돼 있다고 정도만 아시면 될 것 같습니다.


여기까지..DOM이 무엇이고 어떤 기능이 있는지, 인터페이스는 무엇인지에 대해서 알아보았습니다.


W3C에서 구현하는 소스코드가 없다면 어디에 있는 걸까요??? 어디에서 쓰일까요???

바로!! 브라우저들이 자신들만의 특화된 고유 기술을 이용해 DOM 인터페이스를 구현 합니다.


DOM과 HTML 페이지와의 관계

 : HTML 페이지 로딩 => 파싱 단계를 거쳐 웹페이지에 작성된 태그와 매칭되는 DOM 객체 생성 => 브라우저 화면에 출력


NODE와 DOM 객체와의 관계

 : NODE는 HTML 웹 페이지 구성요소의 가장 작은 단위로, <p>, <div> tag뿐만 아니라 주석도 노드에 해당 됩니다.

   브라우저는 이런 노드로 가득 찬 웹페이지를 읽어들여 해석한 후 각 노드에 접근해 제어할 수 있는 DOM객체를 생성 합니다.


다 정리하기에는 조금 무리가 있네요..^^;

요약하면..Node, Document, HTMLDocument, Element, HTMLElement 등등..서로 가족처럼 상속구조로 이루어져있다.

Node가 짱짱맨!


그리고 노드 다루기에서 배웁니다. 


가장 첫번째는 "노드찾기"  입니다. 


아마도..Jquery의 기능을 구현이 어떤식으로 되었는지 알 수 있을 것 같습니다. 셀렉터였나...anyways..^^;

window.document.getElementsByTagName("div"); 는..NodeList객체로 검색된 모든 노드를 리턴하여 줍니다.

NodeList 객체에서 제공하는 프로퍼티와 메소드는 length와 item() 메서드 둘뿐 입니다.


ex) item() 사용

for(var i=0; i < divs.length; i++){

   var div = divs.item(i);   // item[i] 로도 접근 가능!

  div.style.border = "1px solid #ff0000";  

}


그리고.."특정노드의 자식노드에서 특정 태그 이름을 지닌 노드 찾기"에서는

Document객체의 메소드인 getElementsByTagName() 대신 Element객체의 메소드인 getElementsByTagName()를 사용 합니다. getElementsByTagName..스펠링 같으니 비교하지마세요ㅋㅋㅋ 같은 기능, 반환값도 같음..

즉, 검색대상이 문서냐 아니면 특정 노드냐에 따라 Scope이 완전 달라지니 주의 해야 합니다..^^;

다시 말하면..window.document.getElementsByTagName("div"); 로 접근 한 뒤에

하위에서 다시 찾을 때는 document scope이 아닌 찾은 div(노드)아래에서 찾는 다는 것이다.


그리고.."특정 클래스가 적용된 노드를 찾기" 위해서는 getElementsByClassName를 사용하면 됩니다.

var contentData = window.document.getElementsByClassName("content_data");


그리고.."특정 ID를 지닌 노드 찾기" 위해서는 getElementsById("header"); 를 사용하면 됩니다.

일반적으로 아이디는 문서상에 오직 하나만 존재 합니다.  


노드에는 Node[] childNodes,  

              Node firstChild          : 첫번째 자식 노드에 바로 접근하고 싶을 때

             Node lastChild           : 마지막 자식 노드에 바로 접근 하고 싶을 때 


형제노드를 찾고자 한다면..

             Node nextSilbing

             Node previousSibling


다음편 예고..

  스타일 다루기

  이벤트 다루기


참조 문헌 : Jquery를 활용한 인터랙티브 웹 콘텐츠 제작(기초부터 실전 활용까지) - 저> 김춘경

자바스크립트의 전체적인 것에 대해서 생각해보지 않았던 저에게..신선한 충격을 준 책이네요..^0^/




    - END -





저작자 표시 비영리 변경 금지
신고

acet 박태하가 추천하는 readtrend 추천글!

설정

트랙백

댓글

:::: facebook을 이용하시는 분들은 로그인 후 아래에 코멘트를 남겨주세요 ::::

내장함수 confirm Test

Front/JavaScript 2014.03.29 22:55
[Good Comment!!, Good Discussion!!, Good Contens!!]
[ If you think that is useful, please click the finger on the bottom~^-^good~ ]
by ace-T

 

 

확인을 누르시면 ^--------------^*

취소를 누르시면 ㅠ____________ㅠ*

가 찍히게 됩니다^-^;;

 

 

<< Source >> 

 <script type=text/javascript>
   cnt=confirm("This homepage is goooddd?");
   if(cnt==true){
     alert("thank you!");
     document.write("^----------------^*");
  }else{
     alert("sorry~~T.T");
     document.write("ㅠ----------------ㅠ*");

 }
</scritp>

confirm는 함수는 위와같이 확인/취소를 나타내는 내장함수 입니다^^;

return은 boolean으로 확인을 누르시면 true! 취소를 누르시면 false가 반환됩니다.

 

그럼 테스트 해보세요~~~


<< 참고 사이트 >>

http://hsjeong106.blog.me



                                   - END -

저작자 표시 비영리 변경 금지
신고

설정

트랙백

댓글

  • 조춘수 2014.04.14 17:01 신고 답글 | 수정/삭제 | ADDR

    가입 사이트,개설 블로그

:::: facebook을 이용하시는 분들은 로그인 후 아래에 코멘트를 남겨주세요 ::::

자바스크립트 함수

Front/JavaScript 2014.03.29 22:39
[Good Comment!!, Good Discussion!!, Good Contens!!]
[ If you think that is useful, please click the finger on the bottom~^-^good~ ]
by ace-T

자바스크립트에 대해서 알아 보겠습니다~

특히 함수를 많이 쓰게 되어지는데요 아래와 같이 정의를 통해서 함수의 종류를 알아보고 특히!

사용자 정의 함수에 대해서 소스를 짜보겠습니다.

 

<< 자바스크립트 함수 정의 >>

function 함수이름(매개변수1,매개변수2,매개변수3)
{
  함수에서 처리할 내용
}

<head>와 </head> tag 사이에 정의

함수
 1) 내장함수(built-in function)
   - alert(), prompt() 등
 2) 사용자 정의 함수 

 

<< 자바스크립트 소스 >>

<html>
   <head>
     <script type="text/javascript">
      
        function acet(end){
           alert(end);
           var i,total=0;
           for(i=0; i < end; i++){
              total = total+i;
           }
           return total;
        }

        function acet2(totalVale){
           document.write("==============<br>");
           document.write("= sum=>"+ totalVale+" =");
           document.write("<br>==============");
        }
       
     </script>
   </head>


   <body>
     <script type="text/javascript">
        var val = acet(100);
        acet2(val);

     </script>

   </body>


</html> 

 

 

<< 결과 >>

 

 

 

<< 참고 사이트 >>

http://hsjeong106.blog.me/90173348180

 

<< 참고 소스 >>

매개변수가 없는 함수 소스

 <html>
  <head>
     <script type="text/javascript">
        function acet(){
           alert("한글 : 안녕하세요~~");
           alert("English : hi~~~~~~~");
        }
     </script>
  </head>


  <body>
    <script type="text/javascript">
       acet();
       alert("one more time!");
       acet();
    </script>
  </body>

</html>

 

result

 

 

 

 

 

매개변수가 있는 함수 소스

 <html>
  <head>
     <script type="text/javascript">
        function acet(name, val){
           document.write("["+name+"] sir! "+val+"받으세요!");
           document.write("<br><br>");
        }
     </script>
  </head>


  <body>
     <script type="text/javascript">
        acet("ace-T", "bok");          
        acet("taehaPark", "love");

     </script> 
  </body>


</html>

 

result

 

 

                                                             - END -

 

저작자 표시 비영리 변경 금지
신고

설정

트랙백

댓글

:::: facebook을 이용하시는 분들은 로그인 후 아래에 코멘트를 남겨주세요 ::::

javascript test

Front/JavaScript 2014.03.18 10:22
[Good Comment!!, Good Discussion!!, Good Contens!!]
[ If you think that is useful, please click the finger on the bottom~^-^good~ ]
by ace-T


저작자 표시 비영리 변경 금지
신고

설정

트랙백

댓글

  • Favicon of http://blog.anyjava.net BlogIcon anyjava 2014.03.18 18:30 신고 답글 | 수정/삭제 | ADDR

    ㅋㅋㅋ 팝업창이 떠서 놀랫구만 ㅎㅎ

    • Favicon of http://acet.pe.kr BlogIcon String Ace-T 2014.03.18 21:16 신고 수정/삭제

      ㅋㅋㅋㅋ맞나?
      요즘 조금씩 가지고 놀고 있어ㅋㅋ

:::: facebook을 이용하시는 분들은 로그인 후 아래에 코멘트를 남겨주세요 ::::

.ready()

Front/Jquery 2012.08.06 18:05
[Good Comment!!, Good Discussion!!, Good Contens!!]
[ If you think that is useful, please click the finger on the bottom~^-^good~ ]
by ace-T

Description: Specify a function to execute when the DOM is fully loaded

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.   In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead.   The .ready() method is generally incompatible with the attribute. If load must be used, either do not use .ready() or use jQuery's .load() method to attach load event handlers to the window or to more specific items, like images.   All three of the following syntaxes are equivalent:  •$(document).ready(handler) • $().ready(handler) (this is not recommended) •$(handler)   There is also $(document).bind("ready", handler), deprecated as of jQuery 1.8. This behaves similarly to the ready method but if the ready event has already fired and you try to .bind("ready") the bound handler will not be executed. Ready handlers bound this way are executed after any bound by the other three methods above.   The .ready() method can only be called on a jQuery object matching the current document, so the selector can be omitted.   The .ready() method is typically used with an anonymous function:  $(document).ready(function() {   // Handler for .ready() called. });  Which is equivalent to calling:  $(function() {  // Handler for .ready() called. });  If .ready() is called after the DOM has been initialized, the new handler passed in will be executed immediately.

Not loaded yet.



저작자 표시 비영리 변경 금지
신고

'Front > Jquery' 카테고리의 다른 글

.ready()  (0) 2012.08.06
.attr()  (0) 2012.08.06
.draggable()  (0) 2012.08.06

acet 박태하가 추천하는 readtrend 추천글!

설정

트랙백

댓글

:::: facebook을 이용하시는 분들은 로그인 후 아래에 코멘트를 남겨주세요 ::::

.attr()

Front/Jquery 2012.08.06 16:33
[Good Comment!!, Good Discussion!!, Good Contens!!]
[ If you think that is useful, please click the finger on the bottom~^-^good~ ]
by ace-T

참고 사이트 : http://api.jquery.com/attr/

Description: Get the value of an attribute for the first element in the set of matched elements.

The .attr() method gets the attribute value for only the first element in the matched set. To get the value for each element individually, use a looping construct such as jQuery's .each() or .map() method.



[소스]


This Test is very Simple Test! We have to Study Hard :D

This is Test..What kind of Tests? :

저작자 표시 비영리 변경 금지
신고

'Front > Jquery' 카테고리의 다른 글

.ready()  (0) 2012.08.06
.attr()  (0) 2012.08.06
.draggable()  (0) 2012.08.06

acet 박태하가 추천하는 readtrend 추천글!

설정

트랙백

댓글

:::: facebook을 이용하시는 분들은 로그인 후 아래에 코멘트를 남겨주세요 ::::

.draggable()

Front/Jquery 2012.08.06 16:04
[Good Comment!!, Good Discussion!!, Good Contens!!]
[ If you think that is useful, please click the finger on the bottom~^-^good~ ]
by ace-T





  

Drag me
destroy
AceT

저작자 표시 비영리 변경 금지
신고

'Front > Jquery' 카테고리의 다른 글

.ready()  (0) 2012.08.06
.attr()  (0) 2012.08.06
.draggable()  (0) 2012.08.06

acet 박태하가 추천하는 readtrend 추천글!

설정

트랙백

댓글

:::: facebook을 이용하시는 분들은 로그인 후 아래에 코멘트를 남겨주세요 ::::