카테고리 없음

javascript(21.3.24)

seongjin08 2021. 3. 24. 16:32

데이터 타입 typeof

javascript 에서 '= ' 은 안에 넣어라 라는 뜻이다.

 

*함수는 데이터 처리전 저장 후 내가 사용하고 싶을때 사용 할수 있다.

사용하려면  사용한다는 명령을 줘야한다.

()안에 변수를 줄수있다. 

sum(1+2+3);

function sum(a,b,c){  

 return a+b+c;

}

a= sum(3,4,5);

console.log(typeof(a));

변수는 데이터 타입이 있어야 사용할수 있다.

 

*return 값은 계산은 해서  담아두는 역할이다. 쓰려면 꺼내서 써야한다.

 

*객체 (object)는 결과물!

핸드폰이라는 객체 안에 볼륨키 전원키 등 기능키들이 있다.

핸드폰,볼륨크게 하고 싶을때 ()메서드 안에 모션을 준다. 

document 객체 querySelector() 은 매서드  

 

<script type="text/javascript">
            function btnEvent(){
           text = document.querySelector('#text');
           list = document.querySelector('.card_list');
           li = document.createElement('li');
           li.innerHTML=text.value;
           box=document.createElement('button');
           box.innerHTML='X';
           box.onclick=function(){
               list.removeChild(this.parentNode);
           }
           li.appendChild(box);
           list.appendChild(li);
            }

            function rolling(){
            list = document.querySelector('.card_list');
            li =document.querySelectorAll('.card_list>li');
            list.appendChild(li[0]);
            }
            setInterval( rolling , 2000);
    </script>

 이런식으로 코드를 짜면 인기 검색어 처럼 만들수있을거 같다. 완벽하진 않지만 원리는 알거같다.

*document.getElementByClassName 을 사용하면 class를 로 뮦은 애들이 배열되어 불러진다.

어제 그림이 움직이는 효과을 넣을때  document.qurySelectAll('#text>li') 를 썼던거랑 같은 효과를 가져 왔다.

li=document.getElementByClassName('list')  li에 class로 list로 주고 저렇게 코드를 주고

나중에 내가원하는 위치 3번째를 원하면 ( li [2]) 를 사용하면 된다. 

 

*Math Object:Math.random();

*[Javascript] 반올림(round), 올림(ceil), 내림(floor) - 소수점, 음수,자리수 지정

<input id="btn" type="button" value="★" onclick="fat()">

    <script type="text/javascript">

        function fat() {

            var jbRandom = Math.floor(Math.random()*100);

            document.write(jbRandom);

            console.log(jbRandom);

        }

    </script>

*랜덤 수 생성 코드 이다. 간단하게 버튼을 눌렀을때 숫자가 랜덤으로 나오게 하는 방법이다.

math,random() 만 줄경우 1보다 작고0보다 큰 수가 나온다. 여기서 math.floor를 쓰면 소수점 첫번째 자리부터 버리기

때문에 *100 을 줘서 만들었다.

 

  String Object:String.replace(); 

var str = 'Twas the night before Xmas...';
var newstr = str.replace(/xmas/i, 'Christmas');
console.log(newstr);

는 내가 원하는 부분을 다르게 바꿀수 있다. replace를 쓰면 가장 첫번째 것만 바뀜으로 모든 부분을 바꾸길 원하면

replaceAll을 사용하면 된다.

Document Object:Element.getAttribute();

let div1 = document.getElementById("div1");
let align = div1.getAttribute("align");

alert(align); // id가 "div1"인 요소(element)의 align 값을 보여줍니다.

getAttribute는 내가 원하는 요소(엘리먼트) 값을 가져오는 역할을 한다.

속성이 존재 하지 않는 다면, null 로 나온다.

 

*롤링을 주고 버튼을 클릭을 했을때 정지하는 걸 만들어 봤다.

setInterval 에 변수를 정해주고 clearInterval ()안에 변수 값을 넣어서 원하는 버튼안에 onclick 에 넣어주면 눌렀을때 정지한다.

 xsetIntervalrolling , 100);

onclick="clearInterval(x);"

하지만 다시 시작하는 방법을 못찾아서 다시 하려면 새로고침을 해야한다. 다른방법을 찾아봐야 겠다.