믹아의 개발일기

자바스크립트로 난수를 생성해보자.

Math.random() 을 쓰면 된다.

for (var i = 0; i < 10; i++) {
    console.log(Math.random());
}
    
0.25721506183081844
0.5823201981959083
0.1276669448208927
0.5631301578055086
0.17111868936942853
0.5330896617959899
0.8969996301883194
0.5037203939477015
0.6167480911555299
0.009640469869059975

Math.random() 은 0 이상,  1 미만의 값을 Return 한다.

만약 정수로 0이상 9이하 의 값을 구하고 싶다면?

for (var i = 0; i < 10; i++) {
    console.log(Math.floor(Math.random() * 10));
}


5
6
8
6
0
7
4
8
6
9

Math.random() 으로 나온 값에 10을 곱해주고 Math.floor() 로 소수점을 없애주면 된다.

시작이 0이 아닌 1로 하고 싶다면

for (var i = 0; i < 10; i++) {
    console.log(Math.floor(Math.random() * 10) + 1);
}


2
3
1
7
8
10
3
5
2
6

1이상 10이하의 수가 구해진다.

docker 의 container 를 보기위해 docker ps 명령어를 쓰면

$ docker ps

CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                     NAMES
3516940c03f4        mongo:latest        "docker-entrypoint.s…"   16 hours ago        Up 16 hours         0.0.0.0:9001->27017/tcp   mongodb

이렇게 나오는데 COMMAND 가 길어서 짤리게 된다.

그걸 전체 다 보고싶을 때.

docker ps --no-trunc

$ docker ps --no-trunc

CONTAINER ID       IMAGE               COMMAND                         CREATED             STATUS              PORTS                     NAMES
3516940c03..중략   mongo:latest        "docker-entrypoint.sh mongod"   16 hours ago        Up 16 hours         0.0.0.0:9001->27017/tcp   mongodb

전체 COMMAND 를 볼 수 있다.

평소에 jQuery 로 get, post 를 쓰다가 javascript 만 사용해서 get은 어떻게 사용하는지 궁금해서 찾아봤다.

// jQuery

$.get("/sampleURL", function(response){
	console.log(response);
})

jquery 였다면 이렇게 간단하게 구현가능한데..

// Javascript

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function(){ // request 했을 때
    if(xmlhttp.readyState == XMLHttpRequest.DONE){ // request 가 완료 됐을 때
        if(xmlhttp.status == 200){ // 성공
            data = JSON.parse(xmlhttp.responseText);
            console.log(data); 
        }
        else{ // 실패
            console.log("Error : " + xmlhttp.status);
        }
    }
}

xmlhttp.open("GET", "/sampleURL"); // request 방식과 URL 지정
xmlhttp.send(); // request 한다

post 도 비슷하겠지만 자세히는 다음에 찾아봐야겠다.

Button이 여러개가 있다.

<!-- HTML -->

<button name='btn' id='a'>a</button>
<button name='btn' id='b'>b</button>
<button name='btn' id='c'>c</button>
<button name='btn' id='d'>d</button>
<button name='btn' id='e'>e</button>
<button name='btn' id='f'>f</button>
<button name='btn' id='g'>g</button>
<button name='btn' id='h'>h</button>

각 버튼을 눌렀을 때 id를 가져와보자

// javascript

// Name 으로 button 들을 가져온다
var btns = document.getElementsByName("btn");

// 가져온 버튼들(NodeList)에 forEach 로 EventListener 를 추가해준다.
btns.forEach(element => element.addEventListener('click', function(e){

    // e는 클릭 이벤트, e.target 으로 클릭된 객체를 가져온다.
    console.log(e.target);
    console.log(e.target.id);
    
    // a 를 눌렀을 때 :
    // <button name="btn" id="a">a</button>
    // a
}))

var btns = document.getElementsByName("btn")

btns.forEach(element => element.onclick = function(element){
    console.log(e.target)
    console.log(e.target.id)
})

물론 onclick 으로도 가능하다

input 태그에서 엔터 입력시 input의 값을 얻어오는 방법이다.

<input id="input">

<script type="text/javascript">

	// id 로 input 객체를 가져온다.
	var input = document.getElementById("input");
    
	// 가져온 객체에 EventListener 를 추가한다. keypress = 키입력 감지
	input.addEventListener('keypress', function(key){

	// key.key 의 값이 Enter 일 경우 코드 실행
        // key.keyCode == 13 도 동일한 기능을 한다.
        if(key.key == 'Enter'){
			var inputValue = input.value;
            console.log(inputValue);
            }
        })
        
</script>