js onclick button 'add' 에 if 함수 연습

ㅇjs onclick button 'add' 에  if 함수 연습

<p id="demo"></p>
<button onclick="plus_minus('add')">Try it</button>


<script>

  const fruits = ["Banana", "Orange", "Apple"];
  const numbers = [45, 4, 9, 16, 25];
  let txt = "";
  numbers.forEach(plus_minus);

  document.getElementById("demo").innerHTML = txt;

  function plus_minus(action) {

    if (action === "add") {

      txt += numbers + "<br>";
      document.getElementById("demo").innerHTML = txt;

      }
  }
  
</script>

※ 리턴문대신 쓸 코드

const myArr = [1, 2, 3, 4, 5,6];

const newArr = myArr.flatMap((y) => y * 2);

※ Some 은 true,false를 나태난다.

filter 는 num에 조건을 하여 배열에서 숫자의 크기만큼 조건을 넣을수있다.



if 문 안에 filter(num => num > 0)를 넣고 

<p id="demo"></p>
<button onclick="plus_minus('add')">Try it</button>
<button onclick="plus_minus('add2')">Try it</button>
<script>

  const fruits = ["Banana", "Orange", "Apple"];
  const numbers = [45, 4, 9, 16, 25];
  const hasNumberGreaterThan18 = numbers.some(num => num > 0);

  let txt = "";

  function plus_minus(action) {

    if (action === "add") {
      txt += "-------------------" + "<br>";
      txt += numbers.filter(num => num > 0) + "<br>";
      
      document.getElementById("demo").innerHTML = txt;

        return hasNumberGreaterThan18;
    }
  }
  plus_minus("add");

</script>

문자열 배열의 순서를 표시하기 위한 코드

*else if (action === "add2"){

  txt += fruits + "<br>";
  txt += numbers.filter(num => num > fruits.length) + "<br>";
               // filter 숫자 필터 역활을 하여 조건을 나타낸다.

  document.getElementById("demo").innerHTML = txt;

}*/

※ 함수 클릭말고 자동으로 화면에 표시되는 기능 표시

const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
  text += cars[i] + "<br>";
}

※ for문에 조건을 넣어서 

※ for문에  범위를 지정하고  범위에 조건을 넣어서 if for 문 작동하는 방법

https://www.w3schools.com/jsref/jsref_for.asp

  <p id="demo"></p>

  <script>
  const cars = ["BMW", "Volvo", "Saab", "Ford"];
  let text = "";

  for (let i = 0; i < 2; i++) {
                //cars.length;
    text += cars[i] + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

※ [문자와 

let text1 = "JavaScript";
let text2 = "";

for (let x of text1) {
  text2 += x;  +"<br>"

}

document.getElementById("demo").innerHTML = text2 + "<br>";

※ 그림 슬라이스

var myShow = w3.slideshow(".nature", 0);

 https://www.w3schools.com/w3js/tryit.asp?filename=tryw3js_slideshow_next

※ html , css 주소 링크 만들기

w3 js_html_include.asp

https://www.w3schools.com/w3js/w3js_html_include.asp


중간정검:

<script>

  const fruits = ["Banana", "Orange", "Apple"];
  const numbers = [45, 4, 9, 16, 25];
  const hasNumberGreaterThan18 = numbers.some(num => num > 80);
                                      // some은 true ,false를 나태내고

  let txt = "";


  const cars = ["BMW", "Volvo", "Saab", "Ford"];
  let i = 2;
  let len = cars.length;
  let text = "";

  for (; i < len; i++) {
    text += cars[i] + "<br>";
  }

  document.getElementById("demo").innerHTML = text;

  function plus_minus(action) {

    if (action === "add") {

      document.getElementById("demo").innerHTML += fruits + "<br>";

    }  else if (action === "add3") {

      const cars = ["BMW", "Volvo", "Saab", "Ford"];
      let text = "";

      for (let i = 0; i < 2; i++) {
        text += cars[i] + "<br>";
      }
      document.getElementById("demo").innerHTML = text;
    }
  }




</script>


<p id="demo"></p>

  <script>
    // Create an object:
    const car = {type:"Fiat", model:"500", color:"white"};

    // Display some data from the object:
    document.getElementById("demo").innerHTML = "The car type is " + car.type;
</script>

※ funtion call

https://www.w3schools.com/js/js_function_call.asp



※ json 변수를 만들고,  (.)을 사용하여 값을 불러올수있으며,

const person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
document.getElementById("demo").innerHTML += person.firstName+ person.lastName + "<br>";
document.getElementById("demo").innerHTML += person.fullName() + "<br>";

※ 3번만 

let text = "";

for (let i = 0; i <= 5; i++) {
  if (i === 3) {

    continue;
  }
  text += "The number is " + i + "<br>";
}

document.getElementById("demo").innerHTML = text;

※for문의 사용법

※for 문에  1~10 이 있다면, 그 중간값을 부터 중간값까지 범위를 지정하여 for문을 돌릴수있다.

let text = "";
let name = 123;

for (let i = 0; i <= 10; i++) {

  if (i === 3) {
    i = 6;

    continue;

  }


  text += "The number is " + i + "<br>";
}

document.getElementById("demo").innerHTML = text;

※ for문  break; 문으로 중단하기.

  let text = "";
  for (let i = 0; i < 10; i++) {
  if (i === 3) { break; }
  text += "The number is " + i + "<br>";
}

  document.getElementById("demo").innerHTML = text;

ㅇ