HOHO- 240322 예제 주사위

chan_hari·2024년 7월 29일

HOHO-DIARY

목록 보기

2/56

<main>
  <div id="dolist-content">
    <input
      id="input-box"
      type="text"
      placeholder="입력하시오"
      [(ngModel)]="value"
    />
    <!-- //ngmodel- html, for element 요소에 양방향 데이터 바인딩을 추가합니다.
    자바스크립트에서 document.getElementld 의 방식이다. 유저가 데이터 속성을
    변경하였을때 이를 표시하고 업데이트 해준다 -->
    <button (click)="addTask()" type="submit">add</button>
    <!-- // 이벤트 (이벤트핸들러) = '메소드?' 
    유저가 버튼을 클릭하면 바인딩이 addTask메소드의 코드를 실행함-->
  </div>
  <ul id="list-container">
    <!-- // 템플릿의 요소를 반복해야 될때 사용해야함 @for
    돔의 요소를 반복적으로 렌더링 하는데 사용
   문법: @for (item of items; track item) {}
   @for은 돔에서 요소를 반복하고 싶다는 것을 앵귤러템플릿엔진에 알려준다
   아이템은 반복에서 현자 항목을 보유한다.
  항목은 반복할 컬렉션/반복 가능 항목이다. ex) 배열, 문자열 등
  track은 각 요소에 전달한 id를 나타낸다. 
 track 디렉티브는 각 돔 요소에 현재 과일 이름을 기반으로 식별자를 제공 앵귤러의 돔의 변경을 
 효율적으로 추적
 
<예시>
템플릿-
@for (fruit of fruits; track fruit) {

<div>{{ fruit }}</div>  }

클래스

export class FruitComponent {
fruits = [ 'apple','lemon'];
}

  -->
    @for(todo123 of todos; track todo123.id){
    <li style="display: flex">
      <p style="margin-right: 6px">
        {{ todo123.id }}
      </p>
      <!-- //{{}} 이중 중괄호는 데이터 바인딩 
      {{20*2+1}} 간단한 계산과 같은 작업 가능 
    {{'제목' + title}} html 요소사이의 텍스트에 보간된 문자열 삽입 가능
-->
      <p>
        {{ todo123.content }}
      </p>
    </li>
    }
  </ul>
</main>

js 반복문

-반복문은 주어진 조건식의 결과가 참인 경우 실행 그후 조건식을 다시 검사하여 여전히 참인 경우 코드블록을 다시 실행

이는 조건식이 거짓일때까지 반복

for 문

조건식이 거짓으로 판별될 때까지 코드 블록을 반복 실행 일반적으로 사용되는 반복문

for (초기화식 ; 조건식; 증감식) {

조건식이 참인 경우 반복 실행 될 문; }

ex) for (var i = 0; i < 2; i++) {

console.log(i); }

for 문을 실행하면 가장 먼저 초기화식 var i = 0이 실행된다. 초기화식은 단 한번만 실행된다.
초기화식의 실행이 종료되면 조건식으로 실행 순서가 이동한다. 현재 변수 i는 0이므로 조건식의 평가 결과는 true다.
조건식의 평가 결과가 true이므로 실행 순서가 코드 블록으로 이동하여 실행된다. 증감문으로 실행 순서가 이동하는 것이 아니라 코드 블록으로 실행 순서가 이동하는 것에 주의하자.
코드 블록의 실행이 종료하면 증감식으로 실행 순서가 이동한다. 증감식 i++가 실행되어 i는 1이 된다.
증감식 실행이 종료되면 다시 조건식으로 실행 순서가 이동한다. 초기화식으로 실행 순서가 이동하는 것이 아니라 조건식으로 실행 순서가 이동하는 것에 주의하자. 초기화식은 단 한번만 실행된다. 현재 변수 i는 1이므로 조건식의 평가 결과는 true다.
조건식의 평가 결과가 true이므로 실행 순서가 코드 블록으로 이동하여 실행된다.
코드 블록의 실행이 종료하면 증감식으로 실행 순서가 이동한다. 증감식 i++가 실행되어 i는 2가 된다.
증감식 실행이 종료되면 다시 조건식으로 실행 순서가 이동한다. 현재 변수 i는 2이므로 조건식의 평가 결과는 false다. 조건식의 평가 결과가 false이므로 for 문의 실행이 종료된다.

예제 공부 - 주사위

<!-- // for 문 내에 for 문을 중첩//
for ( var i=1; i<= 6; i++) [
for (var j = 1; j <= 6; j++) {
    if(i + j === 6 ) console.log(`[${i},${j}]`);
}] 
아래는 두개의 주사위를 던졌을때, 두눈의 합이 6이 되는 모든 경우의 수를 출력하는 

1. 주사위 배열의 변수를 지정을 해야 되는 거 아닌가? -->
<div>
  <ul>
    <!-- @for (i of games; track i.id) {
      <p>{{ i }}</p>
    } -->
  </ul>

  <p>{{ dice1 }}</p>
  <p>{{ dice2 }}</p>
  <button (click)="throw()" type="submit">throw</button>
  <!-- <p [{ngModel}]="value">{{ {{i}}, j }}</p> -->
</div>

<div>
  <!-- *ngif="reseult" -->
  <!-- *ngif="i.result; else result2" -->
  <p>
    {{ result }}
  </p>
</div>

@Component({
  selector: 'app-login-in',
  standalone: true,
  imports: [
    FormsModule
  ],
  templateUrl: './login-in.component.html',
  styleUrl: './login-in.component.scss'
})

export class LoginInComponent {

  dice1?: number;
  dice2?: number;
  result?: string = ''

 

  throw() {
    const random = Math.random() * 6;
    const random1 = Math.floor(random) + 1;

    console.log(random1);

    const random3 = Math.random() * 6;
    const random4 = Math.floor(random3) + 1;

    console.log(random4);

    this.dice1 = (random1);
    this.dice2 = (random4);

    if (this.dice1 + this.dice2 === 6) {
      console.log(this.result);
      this.result = '합은 6입니다.'
    } else {
      console.log(this.result);
      this.result = '꽝'
    }

랜덤 변수 함수 -Math.ramdom

Math.random 0 에서 1 까지의 사이에 있는 소수점 함수라서

주사위는 1부터 6 까지여서 6을 곱하였다.

ex) 0.2546546

1.4894651

5.6879846541

0부터 시작 하니 +1 해주면 console.log(random);

<main>
  <div id="dolist-content">
    <input
      id="input-box"
      type="text"
      placeholder="입력하시오"
      [(ngModel)]="value"
    />
    <!-- //ngmodel- html, for element 요소에 양방향 데이터 바인딩을 추가합니다.
    자바스크립트에서 document.getElementld 의 방식이다. 유저가 데이터 속성을
    변경하였을때 이를 표시하고 업데이트 해준다 -->
    <button (click)="addTask()" type="submit">add</button>
    <!-- // 이벤트 (이벤트핸들러) = '메소드?' 
    유저가 버튼을 클릭하면 바인딩이 addTask메소드의 코드를 실행함-->
  </div>
  <ul id="list-container">
    <!-- // 템플릿의 요소를 반복해야 될때 사용해야함 @for
    돔의 요소를 반복적으로 렌더링 하는데 사용
   문법: @for (item of items; track item) {}
   @for은 돔에서 요소를 반복하고 싶다는 것을 앵귤러템플릿엔진에 알려준다
   아이템은 반복에서 현자 항목을 보유한다.
  항목은 반복할 컬렉션/반복 가능 항목이다. ex) 배열, 문자열 등
  track은 각 요소에 전달한 id를 나타낸다. 
 track 디렉티브는 각 돔 요소에 현재 과일 이름을 기반으로 식별자를 제공 앵귤러의 돔의 변경을 
 효율적으로 추적
 
<예시>
템플릿-
@for (fruit of fruits; track fruit) {

<div>{{ fruit }}</div>  }

클래스

export class FruitComponent {
fruits = [ 'apple','lemon'];
}

  -->
    @for(todo123 of todos; track todo123.id){
    <li style="display: flex">
      <p style="margin-right: 6px">
        {{ todo123.id }}
      </p>
      <!-- //{{}} 이중 중괄호는 데이터 바인딩 
      {{20*2+1}} 간단한 계산과 같은 작업 가능 
    {{'제목' + title}} html 요소사이의 텍스트에 보간된 문자열 삽입 가능
-->
      <p>
        {{ todo123.content }}
      </p>
    </li>
    }
  </ul>
</main>