WEB

자바스크립트2

ClientProgrammer 2022. 7. 9. 13:36

1.리스트 태그

<ul>

<li>list1</li>

<li>list2</li>

</ul>

 

2.배열

        <ul>
            <script>
                var coworkers = ['s1', 's2', 'sv'];
                   
                for(var i = 0; i < coworkers.length; ++i)
                {
                    var str = '<li>' + coworkers[i] + '</li>';
                    document.write(str);                
                }
            </script>
        </ul>

3.객체

 

        <script>
            var MyObject = {
                ID : 34,
                Name : 'PARK',
            }

            document.write( 'ID : ' + MyObject.ID );
            document.write( 'NAME : ' + MyObject.Name );

            MyObject.Link = "http://";
            document.write( 'Link : ' + MyObject.Link );
            document.write( 'Link : ' + MyObject['Link'] );
        </script>

 

for in 으로 반복

            for(var key in MyObject)
            {
                document.write(MyObject[key]);
            }
 
 

객체에 속한 함수를 프로퍼티라고 한다.

MyObject.ShowAll = function(){
                for(var key in this)
                {
                    if(key!='ShowAll')
                        document.write(this[key]);
                }
            }    

            MyObject.ShowAll();

 

객체 내부에 함수를 선언할때와 객체 없이 선언 할 때 함수의 형태가 다르다

 

객체 내부 선언

            var Links={
                SetColor:function ()
                {
                    alert('call funct');
                }
            }
외부 선언
            function SetColor1()
            {

            }

 

파일 모듈화

자바스크립트 내부의 내용을 .js 라는 자바스크립트를 담을 수 있는 파일에 따로 작성하고, 아래 방식으로 불러올수있다.

방식1.
<script src="Links.js"> </script>
 
방식2. 설치 하지 않고도 웹에있는 라이브러리 다운
 
방식3. 설치 하지 않고도 웹에있는 라이브러리 다운. 특정 모듈만 가져옴
<script type="module">
            </script>                
 
 
주의 : 위 구문에는 스크립트 내용이 들어가더라도 무시된다.불러올 경우에는 불러오기 용으로만 사용할것.

 

캐시

한번 다운받은 파일은 하드에 저장되어 지우기 전 까지는 다시 다운 받지 않는다.

 

 

자바스크립트 라이브러리

jQuery

 

document.Query 를 사용후에 반복문과 조건문을 이용해 처리 해야 했던걸 한줄로 줄여주는 라이브러리.

 

 

 

a태그, div태그 둘다 포함 되는 요소에 대해 색을 바꿔주는 jQuery.

$('a', 'div').css('color', 'red');

 

라이브러리.

document

dom

window

jquery

ajax

cookie

webRTC

speech

webGL

webVR