TIL_220121

인프런 강의 ing

1. getElementById

• querySelector는 getElementById보다 느리다. getElementById를 주로 사용한다.

2. jQuery

• 파일 다운로드 / CDN 방식으로 jQuery 연결
  js

        window.onload = function() {
            var menu2 = document.getElementById("menu2");
            var liArrays = menu2.getElementsByTagName("li");
            for(var i=0; i<liArrays.length; i++){
                var li = liArrays[i];
                li.style.color = "blue";
            }
        }

jQuery

        $(document).ready(function(){
            $("#menu2 li").css("color", "#f00");    
        })

• $( ) : $는 함수 호출 ( )안에는 "태그, 웹요소, 선택자 등"
• 글자 숨기고 나타내기
  html

    <div>안녕하세요.초보입니다.</div>
    <button id="hideText">글자 숨기기</button>
    <button id="showText">글자 보이기</button>

script

        $(document).ready(function(){
            //글자 숨기기 버튼을 눌렀을때
            $("#hideText").click(function(){
                $("div").hide();  //div영역의 내용을 숨긴다.
            });
            //글자 보이기 버튼을 눌렀을때
            $("#showText").click(function(){
                $("div").show();  //div영역의 내용을 보인다.
            });
        });

• 신기한 예제 발견!

html

 <div class="hello">
        <div class="text">안녕하세요!!</div>
 </div>

css

.hello {    
    background-image:url("../images/~.png");
    background-repeat: no-repeat;
    background-position: center;
    width: 400px;
    height: 300px;
    position: relative;
}
.hello .text {
    bottom: 0;
    color: brown;
    font-family: Verdana !important;
    font-size: 40pt !important;
    font-weight: bold;
    position: absolute;
    text-shadow: 0 0 5px #000;
}

js

function hello() {
            //아래 코드는 좌표값과 배경이미지의 크기를 난수로 대입하기 위해서 값을 얻고 있다.
            var rnd1 = Math.floor(Math.random() * 20);
            var rnd2 = Math.floor(Math.random() * 40);
            var rnd3 = Math.floor(Math.random() * 3) + 100;
            //글자 흔들기
            $(".hello").css({
                "bottom" : rnd1, "left" : rnd2
            });
            //배경 확대
            $(".hello .text").css({"background-size" : rnd3 + "%"});
        }
        //0.01초마다 hello()함수가 호출된다.
        setInterval(hello, 10);

=>Math.random()을 통해서 글자 위치를 바꿔주게 설정 (아래는 0~19, 왼쪽은 0~39까지)

=>setInterval() 함수는 일정한 시간 간격으로 코드를 반복 실행하는 함수(지속적으로 몇초마다 호출한다 ex)setInterval(hello,10) hello함수를 0.01초마다 호출하겠다)