JS - 연산자 / for문 / 수학객체

데이터 타입과 연산자
​
산술 연산자
% = 나머지
​
숫자와 문자열을 합치면 문자열로 전체가 변경되니 주의해야 함
ex) 1+2+3+"4" = "1234"
​
비교 연산자​
1. 엄격한 동치 연산자
데이터 타입과 값까지 같아야 True
=== 같음
!== 같지 않음
​
2. 느슨한 동치 연산자
타입 비교 없이 값만 같으면 True
== 같음
!= 같지 않음
​
3. 논리 연산자
&& 양쪽 모두 true 여야 true 반환
|| 한쪽만 true여도 true 반환
! Boolean을 반전시킴 / ex) !false => true
​
조건문
조건을 만족하면 실행시켜줌, 비교연산자와 함께 쓰임
​
거짓같은 값 주의
ex) 0의 경우는 if문 조건에 대입 시 false로 나옴
​
if문 활용 예제

const profile = {
    name : "철수",
    age : 12,
    school : "다람쥐 초등학교"
}
 
if (profile.age>=20) {
    console.log("성인입니다.")
} else if(profile.age>=8){
    console.log("학생입니다.")
} else {
    console.log("어린이입니다.")
}

반복문 - 같은 행위를 반복하는 것
몇 번 반복할 것인가가 중요함
특정조건 만족 시, 종료(break) 가능
​
for문 예제

let persons = [
    {name:"철수", age:17},
    {name:"영희", age:22},
    {name:"도우너", age:5},
    {name:"그루트", age:65},
    {name:"도비", age:3},
]
for(let count=0; count<persons.length; count++){
    if(persons[count].age >= 19 ){
        console.log(persons[count].name + "님은 성인입니다.")
    } else {
        console.log(persons[count].name + "님은 미성년자입니다.")
    }
}

for문 예제 2

// Quiz
const fruits = [
    {number: 1,title:"레드향"},
    {number: 2,title:"샤인머스켓"},
    {number: 3,title:"산청딸기"},
    {number: 4,title:"한라봉"},
    {number: 5,title:"사과"},
    {number: 6,title:"애플망고"},
    {number: 7,title:"딸기"},
    {number: 8,title:"천혜향"},
    {number: 9,title:"과일선물세트"},
    {number: 10,title:"귤"},
]
for(let i=0;i<fruits.length; i++) {
    console.log(`${fruits[i].number} ${fruits[i].title}`)
}
// 백틱은 ``내에 동적 요소와 정적 요소를 구분

수학 객체 - 자바스크립트의 수학기능을 사용하는 명령어

// 최댓값
Math.max()
// 최솟값
Math.min()
// 0~1 사이 랜덤수
Math.random
// 반올림 = 3
Math.round(3.14)
// 올림 = 4
Math.ceil(3.14)
// 버림 = 3 
Math.floor(3.14)
 
 
// 랜덤수 만드는 과정
// padStart = 자릿수가 6자리가 아니라면 0을 추가하라는 의미
String (Math.floor(Math.random()*1000000)).padStart(6,"0")

싸이월드 3일차

과제로 로또가 들어갈 공간에 필요한 요소들을 집어넣었다

이후 추가적으로 오늘 과제는 아니었지만, 로또 번호가 들어갈 공간 내에 랜덤한 숫자들을 넣기 위해서 어떤 것들이 필요한지 고민해보았고, 나름대로 시도해보았다

 

오늘 강의에서 배웠던 내용들을 적용한 것들이다

 

먼저, 버튼에 활성 효과(onClick)을 만들어준 뒤,

숫자를 넣을 div 내에 id를 부여했다 (배치한 숫자들이 원하는 위치에 있는지 확인하기 위해 기본값은 ?로 두었다)

 

이후 1~45 사이의 랜덤한 숫자를 얻기 위해서 game.js를 만든 뒤,
function lottoRender () { return Math.floor((Math.random()*45)+1); } 를 작성하였다

(최솟값~ 최댓값 사이의 숫자를 얻기 위해, (Math.random()*(최댓값-최솟값))+최솟값 이라는 식을 활용하였다)

이후 강의 시간에 배웠던, document.getElementById().innerText 를 활용했다.

 

function randomLotto () {
    function lottoRender () {
        return Math.floor((Math.random()*45)+1);
    }
    document.getElementById("lotto_num1").innerText = lottoRender();
    document.getElementById("lotto_num2").innerText = lottoRender();
    document.getElementById("lotto_num3").innerText = lottoRender();
    document.getElementById("lotto_num4").innerText = lottoRender();
    document.getElementById("lotto_num5").innerText = lottoRender();
    document.getElementById("lotto_num6").innerText = lottoRender();
    
    console.log("눌림")
}

이 방법으로 기본값으로 넣어두었던 ?값을 대체해서, 앞서 만들어두었던 lottoRender()가 들어가게했다

이렇게 되면, 버튼을 누를 때마다 각각의 div에 1~45사이의 랜덤한 숫자들이 배치되게 된다

**

허나, 버튼을 누르다보니 치명적인 오류와 보완점을 발견했다

1. 시각적으로 별 차이가 없는 코드들이 나열되다 보니까 지저분해보인다는 것
2. 말그대로 랜덤한 숫자이다 보니, 중복된 숫자가 나타날 수 있다는 것
3. 생성한 숫자들이 오름차순이나 내림차순과 같은 정렬도 없이 마구잡이로 나열되어있다는 것

우선 시각적인 문제는 구글과 씨름한 결과, 해결할 수 있었다

 

function randomLotto () {
    let resultHTML =''
    function lottoRender () {
        return Math.floor((Math.random()*45)+1);
    }
    for(i=0;i<6;i++){
        resultHTML += `<div>${lottoRender()}</div>`
    }
    let lottoNum = document.getElementById("lotto_nums");
    lottoNum.innerHTML = resultHTML;
    console.log(resultHTML)
}

눈 여겨보아야 할 것은, innerHTML이었다

강의에서 배웠던 innerText는 id가 가진 text값을 원하는 요소로 바꿔준다고 하면,

innerHTML은 id가 가진 text값을 포함하여 tag까지 바꿀 수 있는 힘을 가지고 있는 것 같다

 

먼저 let resultHTML='' 으로 변수 하나를 선언한 뒤, for문을 통해 lottoRender()을 6번 실행한다
(이때, 백틱을 통해 동적 요소와 정적 요소를 구분할 수 있게 한 뒤, lottoRender()를 동적화하여 활성화시켰다)

 

그렇게 해서 나온 결과는 이렇다

** 중복해서 나오는 문제와 정렬에 대한 문제는 해결하지 못했으나, 내일은 해결할 수 있지 않을까 싶다